#varName is returning me undefined in angular2

Question

I am trying to access a value of my input field. here is sample code

<div>
    Test <input #test1 type="number" [value]='somevalue'/>
</div>
<div *ngIf='some-condition'>
    Test <input #test2 type="number" [value]='somevalue'/>
</div>

<span (click)="testData(test1,test2)">test<span>

Angular Code

testData(testa,testD)
{
    Console.log(testa);
    Console.log(testD);
}

In above code, first div is working fine, but I am trying to do same thing in second div. It is giving me undefined value. I know something is missed.

if condition is false than it gives me undefined is fine, but when condition true is than also giving me undefined value.

I guess this is what you want http://stackoverflow.com/a/36651625/2435473 — Pankaj Parkar, Sep 23 '16 at 09:56
Also you can take a look at http://stackoverflow.com/questions/39366981/angular-2-viewchild-in-ngif — yurzui, Sep 23 '16 at 10:16

Pardeep Jain · Answer 1 · 2016-09-23T10:02:47.080

0

try this:-

<div>
    Test <input #test1 type="number" [value]='somevalue' (click)="testData(test1.value)"/>
</div>
<div *ngIf='some-condition'>
    Test <input #test2 type="number" [value]='somevalue' (click)="testData(test2.value)"/>
</div>

testData(testD)
{
    Console.log(testD);
}

working example here with variable.value Working Example

edited Sep 23 '16 at 10:02

answered Sep 23 '16 at 09:50

Pardeep Jain

84,110
37
165
215

1

I think the problem here is that the actual ElementRef object (test2) is undefined due to being recreated after the condition becomes true. I don't think your answer would help here. – Huske Sep 23 '16 at 09:51
But the point is `test2` is undefined in OP case, whats wrong happen with him? – Pankaj Parkar Sep 23 '16 at 09:51
opps sorry my fault misunderstood the question i think @PankajParkar – Pardeep Jain Sep 23 '16 at 09:52
just give me a mintue ill post the exact answer @PankajParkar – Pardeep Jain Sep 23 '16 at 09:53
yes @pradeep Jain pankaj is right..when I put *ngIf than only its give me undeffined even if I will put *ngIf='true'. – Pravin Tukadiya Sep 23 '16 at 09:53
Hello @PardeepJain I have update my question Actually problem is occurs when I try this. Thanks! – Pravin Tukadiya Sep 23 '16 at 11:34

Vikash B · Answer 2 · 2016-09-23T14:16:17.820

-1

You can use [hidden] instead of *ngIf. Variable declared inside *ngIf cannot be used outside it.

<div>
Test <input #test1 type="number" [value]='somevalue'/>
</div>
<div [hidden] ='somecondition'>
Test <input #test2 type="number" [value]='somevalue'/>
</div>

<span (click)="testData(test1.value,test2.value)">test</span>

Please refer this link for more clarification https://github.com/angular/angular/issues/6179

edited Sep 23 '16 at 14:16

answered Sep 23 '16 at 14:04

Vikash B

945
12
26

Hidden doesn't have the same effect as *ngIf. NgIf removes the element completly from the dom, while hidden just uses css to hide an element. – Nightking Feb 13 '17 at 12:57

#varName is returning me undefined in angular2

2 Answers2