2

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;

}
Rodrigo Silveira
  • 127
  • 1
  • 7
  • trying using double quotes, like so *ngIf="visible" – Deepak Apr 17 '17 at 14:25
  • @Deepak unfortunately it makes no difference. – Rodrigo Silveira Apr 17 '17 at 14:32
  • where are you toggling 'visible' property's value? – Deepak Apr 17 '17 at 14:34
  • 1
    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 Apr 17 '17 at 14:34
  • @Deepak, please check in plunker sample the file home.ts – Rodrigo Silveira Apr 17 '17 at 14:37
  • I was on mobile, wasn't able to see complete page :) Probably, Ill check back from laptop later on, if you still haven't found solution by then. Cheers! – Deepak Apr 17 '17 at 14:41
  • It's not the variable, even won't work. Very strange and possibly a bug. – Joshua Duxbury Apr 17 '17 at 15:03
  • the text is read null before assigning the value as true , due to this it is getting null. when you remove the 'visbible' it will start working – Kishore Kumar Apr 17 '17 at 16:03
  • 1
    *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: https://plnkr.co/edit/qXQAZMksHF1qzeW0zNrs?p=preview – Deepak Apr 17 '17 at 16:05
  • @Deepak for a static element this solution could solve, but imagine a dynamic list with dozens of elements within an ngfor? That would be the problem for this solution. – Rodrigo Silveira Apr 17 '17 at 16:22
  • Check this http://stackoverflow.com/questions/36642487/angular2-ngif-and-local-template-variables and https://github.com/angular/angular/issues/6179 – Prerak Tiwari Apr 17 '17 at 16:55
  • @RodrigoSilveira not sure if the accepted answer is technically correct.. It seems to have worked because *ngIf is not working anymore..It is same as removing ngIf.. – Suraj Rao Apr 18 '17 at 06:29

1 Answers1

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.

Gabriel Barreto
  • 6,411
  • 2
  • 24
  • 47