title: Angular 4,5 how to detect for ng-content in child component to be finished changing
body: <p>I have a parent component like this. So number of items in menu depends on model. And model changes.</p>
  
  <pre><code>&lt;parent&gt;
  &lt;menu&gt;
    &lt;item *ngIf="model.info"&gt;
     ... some data
    &lt;item *ngIf="model.comments"&gt;
    .... some data 
    &lt;item *ngIf="model.attachments"&gt;
     ... some data
    &lt;item *ngIf="model.orders"&gt;
    .... some data
   &lt;/menu&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>Parent component: </p>
  
  <pre><code> export class Parent {
     @Input() public model: any;
   }   
  </code></pre>
  
  <p>Where menu is a component itself using ng-content like this, I am creating menu based on menuItems count. </p>
  
  <pre><code>selector: 'menu',
  template: ` &lt;ul class="nav"
      &lt;li *ngFor="let item of items"  [class.active]="item.active"
      &lt;a class="btn" (click)="menuItemClicked(item)"&gt; &lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;div class="content"&gt;
       &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  
  `
  export class MenuComponent  {
    @ContentChildren(MenuItem) items;
  
    ngAfterContentInit() {
       this.setActiveMenuItem();
    }
  
    public menuItemClicked(item) {
      this.changeActiveItem(item)
    }
  
  
    private setActiveItem() {
        const items = this.items.toArray();
        const actives = this.items.filter(i =&gt; i.active);
  
        if (!actives.length &amp;&amp; items.length) {
           items[0].active = true;
        }
    }
  
    private changeActiveItem(item) {
        const items = this.items.toArray();
        items.forEach(i =&gt; i.active = false);
        item.active = true;
    }
  
  }
  </code></pre>
  
  <p>Where a single menuItem itself is a component, that uses ng-content:</p>
  
  <pre><code>@Component({
  selector: 'item',
  template: `
     &lt;ng-content *ngIf="active"&gt;&lt;/ng-content&gt;
  `
  })
  export class MenuItemComponent {
    @Input() active = false;
  
    public setActive() {
      this.active = true;
    }
  
    public setNotActive() {
      this.active = false;
    }
  
  }
  </code></pre>
  
  <p>Parent component is used like this:</p>
  
  <pre><code>&lt;app&gt;
      &lt;parent *ngIf="model.displayMenu" [model]="model"&gt;&lt;/parent&gt;
  &lt;/app&gt;
  </code></pre>
  
  <p>So it is created only once, and then model changes based on user actions (clicks. etc.)</p>
  
  <p>Now what is the problem ? The problem is that suppose I have created a parent component. And in my usecase model changes. I know exactly when model changes, but the thing is that on that change I want always the first menu item to be active on that change. </p>
  
  <p>My problem is that I am not able to use ngAfterViewInit hook, because the items are not already there. It takes some time for angular change detection to change that content. If I used ngAfterViewInit, the menu items are not updated in that hook yet. I do not want to use ngAfterViewChecked, because it constantly triggers change detection and causes performance issues (behind there is a constant stream change in model info).</p>
  
  <p>Example: I have active 4th menu item and model changes. The next model has only 2 menu items, and I want the menu item smoothly to switch to 1st menu item. If I do not do this, then I get empty content.</p>
  
  <p>How could this be solved?</p>