Angular 6 Renderer2 / 3-如何向元素添加类？

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?

Answer 1

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} ".

Answer 2

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;
  }