Search code examples
angularangular-ng-if

Angular 2: combine *ngIf and #template together

<p (mouseover)="info.innerText = 'Detailed info'" 
   (mouseout)="info.innerText = 'Mouseover for details'">
    Select it
</p>
<br>    
<p #info *ngIf="queuedTasks > 0">
    Mouseover for details
</p>

When i try to combine it, browser debugger says

Error: self.context.info is undefined

Is it possible to use it together?

Solution

  • have you read the whole angular 2 doc because I've never heard about #variable but #reference or #template ? So don't hesitate to check this link https://www.concretepage.com/angular-2/angular-2-template-reference-variable-example

    References in Angular 2 must be declared using Viewchild decorator In your case :

    @ViewChild("info") info: any;
ngAfterViewInit() {
   console.log(this.info); // instead of self.context.info
   // this will give you the ElementRef value for your p element
}

    If you need to display content inside a ngIf condition use <p>{{info}}</p> instead of <p #info>