Angular 6 Renderer2/3 - how to add class to element?

Question

//Parent Component html:
<div class="modal" id="modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
               <router-outlet>
               </router-outlet>
             </div>
       </div>
   </div>
</div>

I want to apply class "modal-lg" to div with class modal-dialog when my "UPIComponent" named child component is loaded. How can i achieve the same?

you mean when certain route activate you want to add model-lg class? — Chellappan வ, Oct 30 '18 at 09:36
check out this [link](https://stackoverflow.com/q/38763248/7812112) — Sarthak Aggarwal, Oct 30 '18 at 09:49
@chellapan - yes, but before the route activates. I tried using CanActivate but it did not work. — Ravina Parab, Oct 30 '18 at 12:09

score 0 · Answer 1 · answered Oct 30 '18 at 09:46

You need to use ngClass to achieve this. You can pass a condition to it:

<some-element [ngClass]="{'modal-lg': yourCondition}">...</some-element>.

In relation to obtaining this condition, (which in your case is when your child component is loaded), you will have to pass this information from the child component to the parent (telling the parent that it's loaded).

The ngAfterViewInit and the @Output() decorator will do the trick.

Just pass a value (isLoaded a boolean type, for example) to the parent then the parent will use ngClass: [ngClass]="{'modal-lg': isChildLoaded}".

score 0 · Accepted Answer · answered Oct 30 '18 at 10:13

Use Router Template variable and activate event to pass the template ref to get the component name then use ngClass to add desired class

<div class="modal" id="modal" data-backdrop="static" data-keyboard="false">
    <div [ngClass]="modelClass==='UPIComponent' ? 'model-lg': 'model-dialog'" >
        <div class="modal-content">
            <div class="modal-body">
                <router-outlet #o="outlet"
                 (activate)='onActivate(o)'>
                 </router-outlet>
             </div>
       </div>
   </div>
</div>

component.ts

 modelClass = '';
  onActivate(o) {
    this.modelClass = o.activatedRoute.component.name;
  }

Angular 6 Renderer2/3 - how to add class to element?

2 Answers2