title: Set width of ng-content element to the size of children passed through
body: <p>I have a view that looks like this:</p>
  
  <pre><code>&lt;base-carousel&gt;
    &lt;div *ngFor="let item of items" carouselItem&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
  &lt;/base-carousel&gt;
  </code></pre>
  
  <p>Where the template for <code>base-carousel</code> looks like this:</p>
  
  <pre><code>&lt;div [style.width]="getTrackWidth()"&gt;
    &lt;ng-content select="[carouselItem]"&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the class for <code>base-carousel</code> looks <em>kind of</em> like this:</p>
  
  <pre><code>@ContentChildren(CarouselItem, {read: ElementRef}) items: ElementRef[];
  
  getTrackWidth(): string {
    return this.items.reduce((accum, curr) =&gt;
        accum + curr.nativeElement.clientWidth, 0) + 'px';
  }
  </code></pre>
  
  <p>The problem is that this throws the error: <code>ExpressionChangedAfterItHasBeenCheckedError</code></p>
  
  <p>I then tried changing the <code>[style.width]</code> to point to a simple variable with my class looking more like this:</p>
  
  <pre><code>trackWidth = '100%';
  
  ngAfterViewInit() {
    this.setTrackWidth();
    this.changeDetector.detectChanges();
  }
  
  setTrackWidth(): string {
    this.trackWidth = this.items.reduce((accum, curr) =&gt;
        accum + curr.nativeElement.clientWidth, 0) + 'px';
  }
  </code></pre>
  
  <p>That fixes the error however now the width is always set to zero and its not picking up the childrens rendered size.</p>