title: Rendering the components in ContentChildren of Angular
body: <p>This is my component:</p>
  
  <pre><code>import { Component, OnInit, ContentChildren, QueryList } from '@angular/core';
  import { IconBoxComponent } from '../icon-box/icon-box.component';
  
  @Component({
    selector: 'app-three-icon-box',
    templateUrl: './three-icon-box.component.html',
    styleUrls: ['./three-icon-box.component.scss']
  })
  export class ThreeIconBoxComponent implements OnInit {
    @ContentChildren(IconBoxComponent) boxes: QueryList&lt;IconBoxComponent&gt;;
  
    constructor() { }
  
    ngOnInit() {
    }
  
    ngAfterContentInit() {
      console.log(this.boxes);
    }
  
  }
  </code></pre>
  
  <p>Its template looks like this:</p>
  
  <pre><code>&lt;div class="row justify-content-center"&gt;
    &lt;div class="col-12 col-md-10"&gt;
      &lt;div class="row justify-content-center text-center"&gt;
        &lt;div *ngFor="let box of boxes" class="col-12 col-sm-4 col-lg-3 offset-lg-1 lz-mb-2 lz-mb-sm-0"&gt;
          {{ box }}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how I'm rendering it:</p>
  
  <pre><code>  &lt;app-three-icon-box&gt;
      &lt;app-icon-box icon="#icon-one"&gt;content 1&lt;/app-icon-box&gt;
      &lt;app-icon-box icon="#icon-two"&gt;content 2&lt;/app-icon-box&gt;
      &lt;app-icon-box icon="#icon-three"&gt;content 3&lt;/app-icon-box&gt;
    &lt;/app-three-icon-box&gt;
  </code></pre>
  
  <p>In that second block of code, I'm trying to render the <code>&lt;app-icon-box&gt;</code>, but I can't figure out how.  <code>{{ box }}</code> was just an idea of what I'm trying to do, but I just get <code>[object Object]</code>.</p>