Übergeben von HTML an meine Komponente

Betrachten Sie die folgende Komponente sidebar.component.html:

<div class="sidebar">
  <ul>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
      <a href="#">
        <i class="material-icons">home</i>
        <span>Home</span>
      </a>
    </li>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
      <a href="#">
        <i class="material-icons">watch_later</i>
        <span>Times</span>
      </a>
    </li>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
      <a href="#">
        <i class="material-icons">settings</i>
      </a>
    </li>
  </ul>
</div>

In app.component.htmlverwende ich die Seitenleiste mit ihren Tags (<sidebar>). Jetzt will ich es aber so machen das die <li> Elemente sind innerhalb der angegeben <sidebar> Tags, damit sie nicht mehr drin sind sidebar.component.html um die Komponente wiederverwendbar zu machen.

Ich bin mir nicht sicher, wie das heißt, und ich habe Probleme, es zu finden.

Vielen Dank im Voraus.

Erstellen Sie eine Seitenleistenkomponente mit einer <ng-content> wo die übergebenen Kinder angezeigt werden sollen

@Component({
  selector: 'sidebar',
  template: '<ul><ng-content></ng-content></ul>'
})
export class SidebarComponent {
}

und benutze es gerne

<sidebar>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
      <a href="#">
        <i class="material-icons">home</i>
        <span>Home</span>
      </a>
    </li>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
      <a href="#">
        <i class="material-icons">watch_later</i>
        <span>Times</span>
      </a>
    </li>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
      <a href="#">
        <i class="material-icons">settings</i>
      </a>
    </li>
</sidebar>