0

I'm looking for help about style components parent/child with Angular.

On an Angular page I have a popup. I need to change the CSS of the page when the popup is open.

This is a schema of the page structure: enter image description here

You can see

  • The parent page with another component for the menu.

  • The popin is defined with 2 component:

    1. for the structure of layout and base popup
    2. for the content (we have lots of popins)

When a popin content is open I need to change the component Menu style and the popin structure style for change the position of the popin in the page.

How can I achieve that?

This is a sample of my popup route (the path animation is my popup):

{
    path: 'account',
    component: AccountComponent,
    canActivate: [AuthGuard, AccountGuard],
    children: [
        {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
        {path: 'dashboard', component: DashboardComponent, children: [
                {path: 'animation', component: BaseAnimationTemplateComponent , children: [
                  {path: 'menu', component: AnimationAccountMenuComponent},
                ]}
            ]},
    ]
},
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
orphen92300
  • 105
  • 3
  • 9
  • You're trying to break component encapsulation, in my opinion you shouldn't be doing this. What kind of changes do you want to apply to your parent component ? – Florian Jun 13 '19 at 14:13
  • you can try [ngClass]="variable" or [ngStyle]="variable" (variable is get set in a service or as `@Input`)? – Eliseo Jun 13 '19 at 20:23

1 Answers1

0

The CSS of an angular Component is isolated from the other, it will only affect his own component. But you can use selectors like ::ng-deep to apply CSS on child components.

In your case you want to change the parent component CSS, I advise you to create a boolean popupOpened somewhere (in a service or in your parent component) and using it to apply CSS or not wherever you want and showing or not your popup with a simple <app-my-popup *ngIf="!!popupOpened"></app-my-popup>

Martin Paucot
  • 1,191
  • 14
  • 30
  • [ng-deep is a deprecated feature](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) – Florian Jun 13 '19 at 14:13
  • @Florian There is still no replacement for it : https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep if you have, it would be really cool ! – Martin Paucot Jun 13 '19 at 14:17
  • also you can use [ngClass.classNam]="codn" or [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle'}" – Kapil Thakkar Jun 13 '19 at 14:17
  • @MartinPaucot there might be good use cases for `ng-deep` in special situations althought I don't think OP needs this. He better use a conditional as you suggested or use observables in a service and modify the stream accordingly. – Florian Jun 13 '19 at 14:28
  • @MartinPaucot the real probleme is i have many popup and for each popup i need to have some differents style for the popup position and for the menu component style. It cant create booleans for each popup :( – orphen92300 Jun 13 '19 at 14:51
  • @MartinPaucot, one option (for me the best) is use ViewEncapsulation.None. Well really ViewEncapsulation.None make that the .css is applied over all the application. but if our .css is like, e.g. `.childComponent h1{color:red}` only the h1 under a div with class childComponent becomes its h1 to red – Eliseo Jun 13 '19 at 20:17
  • @Eliseo i cant use ViewEncapsulation none because i have multiple popin when i open popin the old style stay on place and is not erase by the new i have already try :( – orphen92300 Jun 13 '19 at 20:21