Empty native element with ng-template

Question

I use Angular 5.

In my component I have:

@ContentChild('contentTemplate') contentTemplate: TemplateRef<any>;

my html:

<data-grid-column>
  <ng-template #contentTemplate>
    <span class="elo">Hello</span>
  </ng-template>
</data-grid-column>

and I am trying to view:

ngAfterViewChecked () {
  console.log(this.contentTemplate.elementRef.nativeElement);
}

But output is:

<!---->

What is wrong?

Answer 1

I hope it will work.

<ng-container #contentTemplate><span class="elo">Hello</span></ng-container>

Answer 2

ng-template - Is an Angular element for rendering HTML. It is never displayed directly. In fact, before rendering the view, Angular replaces the and its contents with a comment

As per the official documentation.

Ref.

• https://angular.io/guide/structural-directives#the-ng-template

I don't know why you are using ng-template here, but you can use ng-container instead this will print your content.

Also as you are using # local variable on HTML element you need to use ViewChild instead, like this -

@ViewChild('contentTemplate') contentTemplate: any;

Working Example