title: Angular 2 click on later placed element
body: <p>My page is basically split in two parts:</p>
  
  <pre><code>&lt;div *ngIf="initState"&gt;
    &lt;div class="ui accordion"&gt;
      &lt;div class="title"&gt;
        &lt;i class="dropdown icon"&gt;&lt;/i&gt;
        Title
      &lt;/div&gt;
      &lt;div class="content"&gt;
       {{ someText }}
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="ui button" (click)="notInitialAnymore();"&gt;Click&lt;/button&gt;
  &lt;/div&gt;
  &lt;div *ngIf="!initState"&gt;
    &lt;div class="ui accordion"&gt;
      &lt;div class="title"&gt;
        &lt;i class="dropdown icon"&gt;&lt;/i&gt;
        Another title
      &lt;/div&gt;
      &lt;div class="content"&gt;
       {{ someOtherText }}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:</p>
  
  <pre><code>&lt;script language='javascript'&gt;
      $(document).ready(function(){
         $('.ui.accordion').accordion();
      });
  &lt;/script&gt;
  </code></pre>