CODEWITHSUNDEEP
javascriptangularjsangularerror-handling
Aren Hovsepyan
Aren Hovsepyan

Reputation: 2047

Angular 2 template's element reference not working properly

I am trying to manipulate html p tags text directly from template using angulars reference elements, but getting error

enter image description here

this is my code

<p>
    <span *ngFor="let queuedTask of tasks">
      <pomodoro-task-icons
        [task]="queuedTask"
        (mouseover)="tooltip.innerText = queuedTask.name"
        (mouseout)="tooltip.innerText = 'text'">
      </pomodoro-task-icons>
    </span>
  </p>
  <p *ngIf="queuedPomodoros > 0" #tooltip>{{tooltip.innerText || 'Mouseover for details' }}</p>

I am using this code from book and don't find any problem in realization myself.

Upvotes: 0

Views: 444

Answers (1)

Andrei Zhytkevich
Andrei Zhytkevich

Reputation: 8099

Declare a variable in your component

Reference this variable in the p tag:

 <p *ngIf="queuedPomodoros > 0">{{ variable }}</p>

Change the value of the variable:

  <pomodoro-task-icons
    [task]="queuedTask"
    (mouseover)="variable = queuedTask.name"
    (mouseout)="variable = 'text'">
  </pomodoro-task-icons>

Upvotes: 2

Related Questions