Add Custom Template Html in Component Selector

Question

Is there a way to add custom template html inside a component-selector?

I have a component AppToolbarComponent with selector <app-toolbar> which has a blank template. I would like to use this component on two different components, but with template defined while using the component. For example:

On page-one.component.html:

<app-toolbar>
    <button (click)="onClickOne()">Button in Component One</button>
</app-toolbar>

... and on page-two.component.html:

<app-toolbar>
    <button (click)="onClickTwo()">Button in Component Two</button>
</app-toolbar>

Any ideas?

Answer 1

Based on the comment by @pixelbits, here is an answer:

In <app-toolbar>, add <ng-content> in the component template. Here is an example:

<div>Some Content</div>
<ng-content></ng-content>

Now, anything added inside the <app-toolbar> selector will be rendered inside the <ng-content>. For example:

<app-toolbar>
    <!-- The following content will render inside <ng-content> 
         in the app-toolbar component -->
    <button (click)="onClickOne()">Button in Component One</button>
</app-toolbar>

Here is a link to StackBlitz Demo.