Angular: *Ngif Tag on Input Element Causes It to Be Undefined. Cannot Read Value from Input Field

error in getting value from input that have ngIf directive

Template reference variables can be accessed anywhere in template, so the docs state clearly. This article is very helpful to understand what happens with structular directives, in this case your *ngIf.

What happens with the *ngIf is that it creates it's own template, so your template reference is accessible inside the template, the template created by *ngIf and only in that scope.

Here's excerpt from the website:

Sample code that throws error:

<div *ngIf="true">
  <my-component #variable [input]="'Do you see me?'>
</div>
{{ variable.input }}

The reason for this is the ngIf directive - or any other directive used together with a star (*). These directives are so called structural directives and the star is just a short form for something more complex. Every time you use a structural directive (ngIf, ngFor, ngSwitchCase, ...) Angular's view engine is desugaring (it removes the syntactical sugar) the star within two steps to the following final form (using the previous ngIf as an example):

<ng-template [ngIf]="true">
...
</ng-template>`

Did you notice? Something extraordinary emerged out of the previous HTML containing the structural directive - the ng-template node. This node is the reason for limiting the scope of the template reference variable to exactly this inner DOM part only - it defines a new template inside. Because of limiting a variable to its defining template any variable defined within the ng-template (and this means within the DOM part of the ngIf) cannot be used outside of it. It cannot cross the borders of a template.

---

But how to solve your underlying problem, i.e getting the values... You almost have a template-driven form set up already, so you could do that, or then go the reactive way :)

Angular ngif doesn't work while getting a undefined value

You don't need to put checks for undefined and null, It take cares it self for undefined and nulls, you just need to specify like below:

      <div *ngFor="let fam of familyArray" class="grid-item" >
        <button *ngIf="fam[0]" ion-button>
          <img *ngIf="fam[1]"  class="selectImg" src="{{fam[1]}}" alt="">
        </button>
        <span *ngIf="fam[2] && fam[2].name && family[2].age" class="image-text">{{fam[2].name}}, {{family[2].age}}m.</span>
        <p *ngIf="fam[2].family"  class="family-status">{{fam[2].family}}</p>
      </div>

The array of object which you are receiving is actually a wrong format, all the object should be in same types and some standard conventions need to be followed though.

Get value from input-tag that is conditionally visible with *ngIf

Phone variable is undefined because when you set phone to false, #phone element is not rendered.

Hide rows instead of remove:

<tr [hidden]="!phone">

and

<tr [hidden]="phone">

---

*ngIf vs [hidden]

From angularjs official documentation:

Hiding an element is quite different from removing an element with
NgIf.

When you hide an element, that element and all of its descendents
remain in the DOM. All components for those elements stay in memory
and Angular may continue to check for changes. You could be holding
onto considerable computing resources and degrading performance, for
something the user can't see.

When NgIf is false, Angular removes the element and its descendents
from the DOM. It destroys their components, potentially freeing up
substantial resources, resulting in a more responsive user experience.

The show/hide technique is fine for a few elements with few children.
You should be wary when hiding large component trees; NgIf may be the
safer choice.

https://angular.io/guide/template-syntax#ngif

Getting a 'nativeElement' of undefined when hidding and showing text input in angular

When there is a *ngIf on a tag and the condition is false, the element is literally deleted from the DOM. So that means the ElementRef becomes undefined whenever your condition is false.

so the call to

this.searchElementRef.nativeElement

fatally return

ERROR TypeError: Cannot read property 'nativeElement' of undefined

In your case, the block view inside your ngIf is quite small so you can consider using css to hide the view. For example:

 <div class="flexContainer" [ngStyle]="{'display': showTextInput ? 'block' : 'none'}">

This way the element won't be deleted but instead just hidden and the element reference will still be valid.

But keep in mind that hiding an element using a css property implies that the view will be rendered even if the element is hidden. Which shouldn't be a problem here.

If you tried to call initAutoComplete() just after you set showTextInput to true, (in the same function for ex.) the view won't be updated yet and the div element won't be created. You can force update the view using the changeDetectorRef see doc
but it is not necessarily the best way as you have to wait for the view to re-render.

Cannot read property of undefined angular2 ngif

The cart object is null until the service getPosts$ returns (callback). Therefore, the code *ngIf="cart.vegetable ... is equal to *ngIf="null.vegetable ... until that happens. That is what is happening.

What you could do is put a DOM element with *ngIf="cart" containing the other *ngIf. For example:

<div *ngIf="cart">
    <h2 *ngIf="cart.vegetable == 'carrot' ">{{cart.vegetable}}</h2>
</div>

*Edit: As it is said in the next answer, a good alternative (and good practice) is the following:

<h2 *ngIf="cart?.vegetable == 'carrot' ">{{cart.vegetable}}</h2>

---

Related Topics