title: How to trigger a directive within ngIf once ngIf finishes rendering html elements?
body: <p>My problem involves the *ngif directive when once *ngif=true I want the html content to render first before my 'ModClass' directive can do its stuff.</p>
  
  <p>I tried to implement ngOnInit and ngViewInit but no luck since I believe ngOnInit triggers while ngif content is being rendered or maybe earlier when the parent component is generated. </p>
  
  <p>Also for ngViewInit I think I need to be subscribed to something but I don't know exactly what I need to be subscribed to. (I might be completely wrong about this will do more research)</p>
  
  <p>The following code illustrates my problem along with having a stacksblitz link so you won't have to recreate this code on your machine to troubleshoot.</p>
  
  <p>What the code is suppose to do is on button click it toggles a boolean variable that is used with the ngIf as so: <strong>*ngIf='trigger'</strong></p>
  
  <p>The ngIf code will display a div block with default css class 'red' but my directive will change it to the 'blue' class.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Turns out ngViewInit would work fine as long as I use ElementRef.
  Thanks for all the help.</p>
  
  <p>Directive in src/app/modify-class/modify-class.directive</p>
  
  <pre><code>import { Directive, OnInit } from '@angular/core'
  
  @Directive({
    selector: 'ModClass'
  })
  export class ModifyClassDirective implements OnInit {
  
    constructor (private htmlElement: HTMLElement) {}
  
    //should i try ngViewinit instead
    ngOnInit () {
      this.activateThisClass()
    }
  
    /*ngViewInit () {
      this.activateThisClass()
    }*/
    //this function should execute once ng-if condition is true and html is rendered
    activateThisClass () {
      console.log('i\'ve been triggered')
      const list = this.htmlElement.getElementsByClassName('red')
      list.forEach(element =&gt; element.classList.remove('red'))
      list.forEach(element =&gt; element.classList.add('blue'))
    }
  }
  </code></pre>
  
  <p>HTML/Hello Component content found in src/app/hello.component</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'hello',
    template: `
  &lt;h1&gt;Hello {{name}}!&lt;/h1&gt;
    &lt;button ModClass='' (click)="trigger=!trigger;"&gt; click me &lt;/button&gt;
  
  &lt;div *ngIf='trigger'&gt; 
  
    &lt;!-- This is what i want to change once it is rendered --&gt;
    &lt;div ModClass='' class='red'&gt; this will/should be overwritten and turn blue &lt;/div&gt;
  
  &lt;/div&gt;`,
    styles: [`h1 { font-family: Lato; }`]
  })
  export class HelloComponent  {
    @Input() name: string;
    @Input() trigger: boolean;
  
    constructor() {this.trigger = false}
  }
  </code></pre>
  
  <p>linkt to <a href="https://stackblitz.com/edit/directivecall" rel="nofollow noreferrer">Stackblitz Link</a></p>