CODEWITHSUNDEEP
angularangular-ng-if
Gamos
Gamos

Reputation: 45

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?

Upvotes: 0

Views: 307

Answers (2)

Roland R&#225;cz
Roland R&#225;cz

Reputation: 2999

I'm not sure that you can find a solution for this, because #info doesn't exists when that *ngIf is false. But you can use a simple variable:

In your TS file:

export class MyComponent {
    public text = 'Mouseover for details';
    // ...
}

In your HTMl file:

<p (mouseover)="text = 'Detailed info'" 
   (mouseout)="text  = 'Mouseover for details'">
    Select it
</p>
<br>    
<p *ngIf="queuedTasks > 0">
    {{text }}
</p>

Or you can try [hidden] too instead of *ngIf.

Upvotes: 0

andrea06590
andrea06590

Reputation: 1299

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>

Upvotes: 1

Related Questions