title: Multi-slot transclusion in Angular 6
body: <p>I am trying to create a component with multi-slot transclusion in Angular 6, following <a href="https://scotch.io/tutorials/angular-2-transclusion-using-ng-content" rel="nofollow noreferrer">this blog post</a> (which is for Angular 2).</p>
  <p>I created a component:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-criteria',
    template: `
      &lt;div class=&quot;adoption-grid-column adopter&quot;&gt;
        &lt;div class=&quot;adoption-grid-icon &quot;&gt;
          &lt;ng-content select=&quot;level-icon&quot;&gt;&lt;/ng-content&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;adoption-grid-body&quot;&gt;
          &lt;ng-content select=&quot;level-description&quot;&gt;&lt;/ng-content&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
    styles: []
  })
  export class CriteriaComponent implements OnInit {
    constructor() {}
  
    ngOnInit() {}
  }
  </code></pre>
  <p>and then I am trying to use it like this</p>
  <pre><code>&lt;app-criteria&gt;
      &lt;level-icon&gt;
          foo
      &lt;/level-icon&gt;
      &lt;level-description&gt;
          bar
      &lt;/level-description&gt;
  &lt;/app-criteria&gt;
  </code></pre>
  <p>But it throws a compile error:</p>
  <p><code>ERROR in : 'level-icon' is not a known element</code></p>
  <p>What am I missing here?</p>
  <p>I realize I could create sub-components here, but I'm looking for a solution where I can pass blocks of html into slots in my component (such as bulleted lists, images, etc.)</p>