angularng-bootstrapng-template

Template reference variable returns undefined inside ng-template


Already tried this and this solution but nothing worked.

I am using Angular 7 and trying to get a reference variable which I've placed inside the ng-template tag. But it always returns undefined

test-component.html

<ng-template #abc>
  <div #xyz>    
  </div>
</ng-template>

test-component.ts

@ViewChild('abc') abc: ElementRef; //---> works fine
@ViewChild('xyz') xyz: ElementRef; //---> undefined

test-component.ts

ngAfterViewInit(){
  console.log(this.xyz); //---> undefined  
}

I've tried printing it in all the life cycle hooks of angular but it always returns undefined. But when I try putting it in out side of ng-template it works perfectly.

Is there any way around?


Solution

  • That is because, the content inside ng-template is not yet rendered.

    You should first activate it using ngTemplateOutlet.

    Add the following code in your html, it should work

    <ng-template #abc>
      <div #xyz>    
      </div>
    </ng-template>
    
    <ng-container *ngTemplateOutlet="abc"></ng-container>
    

    DEMO