title: Angular2: rendering / reloading a component's template
body: <p>Ideally I would need to reload / rerender my component's template but if there is a better way to do this I will gladly implement it.</p>
  
  <p><strong>Desired behavior:</strong></p>
  
  <p>So, I have a component for a menu element. When <em>(in another component)</em> I click an IBO <em>(some sort of 'client', per say)</em> is clicked I need to <em>add</em> (I'm using <code>*ngIf</code>) a new option in the menu that would be <em>IBO Details</em> and a child list.</p>
  
  <p><strong><code>IBOsNavigationElement</code> component (menu component):</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: '[ibos-navigation-element]',
      template: `
          &lt;a href="#"&gt;&lt;i class="fa fa-lg fa-fw fa-group"&gt;&lt;/i&gt; &lt;span
                  class="menu-item-parent"&gt;{{'IBOs' | i18n}}&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul&gt;
              &lt;li routerLinkActive="active"&gt;
                  &lt;a routerLink="/ibos/IBOsMain"&gt;{{'IBOs Main' | i18n}} {{id}}&lt;/a&gt;
              &lt;/li&gt;
              &lt;li *ngIf="navigationList?.length &gt; 0"&gt;
                  &lt;a href="#"&gt;{{'IBO Details' | i18n}}&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList"&gt;
                          &lt;a href="#/ibos/IboDetails/{{navigatedIBO['id']}}"&gt;{{navigatedIBO['name']}}&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      `
  })
  export class IBOsNavigationElement implements OnInit {
      private navigationList = &lt;any&gt;[];
  
  
      constructor(private navigationService: NavigationElementsService) {
          this.navigationService.updateIBOsNavigation$.subscribe((navigationData) =&gt; {
                  this.navigationList.push(navigationData);
                  log.d('I received this Navigation Data:', JSON.stringify(this.navigationList));
              }
          );
      }
  
      ngOnInit() {
      }
  }
  </code></pre>
  
  <p>Initially, <code>navigationList</code> will be empty <code>[]</code>, because the user didn't click any IBO <em>(client)</em>, but as soon as an IBO is clicked the list will be populated and, therefore, I need the new option to appear in the menu.</p>
  
  <p>With this code, when I click an IBO, the <code>&lt;li&gt;</code> element and it's children are created but: <strong>I only see the <code>&lt;li&gt;</code> element.</strong></p>
  
  <p><strong>Issue:</strong></p>
  
  <p>The menu option is generated but not proccessed by the layout styles. It needs to be initialized with all the elements in order to know how to display the menu options.</p>
  
  <p><strong>I need to reload the template of that component in order to display correctly the menu.</strong></p>
  
  <p><strong>NOTE:</strong></p>
  
  <p>If I use the template without the <code>*ngIf</code>, works well but I would have from the first moment an <em>IBO Details</em> option that has no sense, because no IBO has been clicked when initialized.</p>
  
  <pre class="lang-js prettyprint-override"><code>template: `
          &lt;a href="#"&gt;&lt;i class="fa fa-lg fa-fw fa-group"&gt;&lt;/i&gt; &lt;span
                  class="menu-item-parent"&gt;{{'IBOs' | i18n}}&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul&gt;
              &lt;li routerLinkActive="active"&gt;
                  &lt;a routerLink="/ibos/IBOsMain"&gt;{{'IBOs Main' | i18n}} {{id}}&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;{{'IBO Details' | i18n}}&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList"&gt;
                          &lt;a href="#/ibos/IboDetails/{{navigatedIBO['id']}}"&gt;{{navigatedIBO['name']}}&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      `
  </code></pre>
  
  <p><strong>Desired Output:</strong></p>
  
  <p>Before clicking anything (on init):</p>
  
  <p><a href="https://i.stack.imgur.com/gAv2n.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/gAv2n.jpg" alt="enter image description here"></a></p>
  
  <p>After I clicked an IBO <em>(client)</em>:</p>
  
  <p><a href="https://i.stack.imgur.com/7xaBU.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/7xaBU.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>To clarify what I meant with: </p>
  
  <blockquote>
    <p>The menu option is generated but not proccessed by the layout styles</p>
  </blockquote>
  
  <p>If, my menu component is initialized without the <code>*ngIf</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;li&gt;
      &lt;a href="#"&gt;{{'IBO Details' | i18n}}&lt;/a&gt;
          &lt;ul&gt;
              &lt;li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList"&gt;
                  &lt;a href="#/ibos/IboDetails/{{navigatedIBO['id']}}"&gt;{{navigatedIBO['name']}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Then the layout styles can generate the menu output <em>(see images)</em> according to this structure:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;li&gt;
     &lt;a&gt;
     &lt;ul&gt;
        &lt;li *ngFor&gt;
           &lt;a&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And therefore add the <code>+</code> symbol and the submenu behavior, etc.</p>
  
  <p>But, if it's initialized without all the elements (when <code>*ngIf</code> is <code>false</code> the <code>&lt;li&gt;</code> and it's children are not rendered so the layout does not take them into account to draw/create the menu) and these elements are added <strong>after</strong> the rendering, then they will exist in source code, but we won't be able to see them in the menu because:</p>
  
  <ul>
  <li>No <code>+</code> created</li>
  <li>No submenu behavior</li>
  </ul>