title: Angular 4 | How to dynamically inject a directive when click?
body: <p>Good day, how can achieve to inject a custom directive when the button is being click?</p>
  
  <p>See my code below..</p>
  
  <pre><code>&lt;ng-container *ngFor="let apidata of zoneOne; let i = index"&gt;
    &lt;div class="box" *ngIf="(i &lt; 5)" **insert directives here**&gt;
      &lt;div class="box-holder"&gt;
        &lt;span id="AssignmentNumber"&gt;{{apidata.Assignment}}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ng-container&gt;  
  &lt;button class="viewMore" (click)="viewMoreClick()"&gt;View more..&lt;/button&gt;
  </code></pre>
  
  <p>this is just a simple toggle event. i just having trouble figuring out how to do this because it all toggle the element when i put my function on each div. i just want to show the div when the specific div is being click..</p>