It's possible to take a template as @Input
for a component to customize the render
@Component({
template: `
<nav>
<ng-container *ngTemplateOutlet="template"></ng-container>
</nav>
`,
})
export class SiteMenuComponent {
@Input() template: TemplateRef<any>;
}
<site-menu [template]="menu1"></site-menu>
<ng-template #menu1>
<div><a href="#">item1</a></div>
<div><a href="#">item2</a></div>
</ng-template>
Note:
ng-content
should be used for most of the cases and it's simpler and more declarative.
Only use this approach if you need extra flexibility that can't be achieved with ng-content.