Passing HTML to my component

Question

Consider the following sidebar.component.html component:

 <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.html I use the sidebar using its tags ( <sidebar> ). However, now I want to make the <li> elements <sidebar> inside the <sidebar> tags so that they are no longer inside the sidebar.component.html to make the component reusable.

I'm not sure what it's called, and it's hard for me to find it.

Thanks in advance.

Answer 1

Create a sidebar component with <ng-content> where past children should be displayed

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

and use it like

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