title: How do you ensure all child elements of an angular component are a specific type?
body: <p>I have this use case I am trying to implement in Angular — A header component that can be placed on a page that has a container for small icon buttons. Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/OteXf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OteXf.png" alt="Heading with Icon Buttons"></a></p>
  
  <p>Each instance of the header can have different icon buttons transcluded in it. It must only contain these kinds of buttons and the buttons cannot exist unless contained within the header. Basically this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;my-header title="Heading Text"&gt;
    &lt;my-header-button icon-class="save" (clicked)="doSave()"&gt;&lt;/my-header-button&gt;
    &lt;my-header-button icon-class="mail" (clicked)="doMail()"&gt;&lt;/my-header-button&gt;
    &lt;my-header-button icon-class="flag" (clicked)="doFlag()"&gt;&lt;/my-header-button&gt;
  &lt;/my-header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <strong>parent component</strong> is designed like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'my-header',
    template: `
        &lt;header&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;div&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;
        &lt;/header&gt;
      `
  })
  
  export class HeaderComponent {
    @Input() title = '';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <strong>child component</strong> is implemented like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Input, Output, EventEmitter } from '@angular/core';
  import { HeaderComponent } from './header.component';
  
  @Component({
      selector: 'my-header-button',
      template: `
        &lt;a (click)="onClick($event)"&gt;&lt;i class="{{icon-class}}"&lt;/a&gt;
      `,
  })
  
  export class HeaderButtonComponent {
      constructor(parent: HeaderComponent) { }
      @Input() public iconClass: string = '';
      @Output() public clicked: EventEmitter&lt;any&gt; = new EventEmitter();
  
      private onClick(button): void {
          this.clicked.emit(button);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am able to ensure that the <code>my-header-button</code> cannot be used outside of the parent by referencing the parent type in the constructor (<code>constructor(parent: HeaderComponent) { }</code>. My two questions:</p>
  
  <p><strong>How do you ensure all child elements of the <code>my-header</code> element are only <code>my-header-button</code> elements?</strong></p>
  
  <p><strong>Also, how do I make sure that each <code>my-header-button</code> can take a router link (<code>[routerLink]="['/some-link']</code>)?</strong></p>