Local variable in template returning null (ionic)

Question

I'm using Angular and Ionic and i trying to read a local variable in the template, but when I use *ngIf on an ion-item, even if true the data becomes unavailable. How to solve this? Or is it a Bug?

Please open my plucker and click on the button to see that the local variable p2 does not return because of the *ngIf ...

See in plunker code sample problem

Snippet on template

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
  </div>
  <ion-item >
    <p #p1>10</p>
  </ion-item>
  <ion-item *ngIf='visible'>
    <p #p2>20</p>
  </ion-item>
  <button block (click)='show(p1?.textContent,p2?.textContent);'> Click-me and you'll see that p2 does not recover </button>
  <ion-item>
    <p style='text-align: center;'>{{ backtemplate }}</p>
  </ion-item>
</ion-content>

Simple function on component

show(p1,p2){
  this.backtemplate = p1+' AND '+p2;

}

hmm.. tried without ? it is not even able to find p2..maybe the id #p2 is not being set due to angular's change detection? — Suraj Rao
– Suraj Rao, Commented Apr 17, 2017 at 14:34
*ngIf works as usual, if elements aren't referenced directly in html. ngIf seems to not work fine, when used with element references. One option is to use variables and bind them with p element or if you want to reference elements, you can try this: plnkr.co/edit/qXQAZMksHF1qzeW0zNrs?p=preview — Deepak
– Deepak, Commented Apr 17, 2017 at 16:05

Gabriel Barreto · Accepted Answer · 2017-04-17 17:23:17Z

2

Was testing all possibilities of codes and using [*ngIf]="visibile" instead of *ngIf="visible" solved the problem.

Now the problem is that i can't explain why it worked that way, sorry for that, but the code is working fine.

answered Apr 17, 2017 at 17:23

Gabriel Barreto

6,4512 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suraj Rao Over a year ago

Actually it seems to have worked because *ngIf is not working anymore..It is same as removing ngIf..

Collectives™ on Stack Overflow

Local variable in template returning null (ionic)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related