Skip to main content

templateRef

You can use the TemplateRef to define alternate content to display in the component or use the default template if alternate template is not available.

Component.ts​

import { Component, TemplateRef } from '@angular/core';

@Component({
  selector: 'some-component',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss']
})
export class SomeComponent {
  /*
  Using a custom template.
  For example:

    <ng-template #myAwesomeTemplate>
      <div>Content</div>
    </ng-template>

   <some-component [viewTempalte] = "myAwesomeTemplate"> </some-component>
  */
  @Input() viewTemplate: TemplateRef<any> = null;
  
  name: string = 'test';

Component HTML​

<!-- Default template -->
<ng-template #defaultTmpl let-tmplHost="view">
  <div>{{tmplHost.name}}</div>
</ng-template>

<ng-container *ngTemplateOutlet="viewTemplate || defaultTmpl;context: templateCtx"></ng-container>