Pasar HTML a mi componente

Considere el siguiente componente 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>

En app.component.htmluso la barra lateral usando sus etiquetas (<sidebar>). Sin embargo, ahora quiero hacerlo para que el <li> Los elementos se dan dentro de la <sidebar> etiquetas para que ya no estén dentro sidebar.component.html para hacer que el componente sea reutilizable.

No estoy seguro de cómo se llama esto y tengo problemas para encontrarlo.

Gracias de antemano.

Cree un componente de barra lateral con un <ng-content> donde se deben mostrar los niños pasados

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

y usarlo como

<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>