CODEWITHSUNDEEP
javascriptangular
Matteo Zambon
Matteo Zambon

Reputation: 111

Why ngIf doesn't work with the class property

In my Angular application I created a control that shows some data. I have a "className" class, one of its fields (ShowDetails) is declared Boolean, so if the user clicks on a button I set ShowDetails = true and shows a div with information.

@Input() className: ClassName;
...
ShowDetails($event){
  this.className.ShowDetails = true;
}
...
<app-details-info *ngIf="className.ShowDetails" (closed)="ClosedDetails($event)" [info]="className">

</app-details-info>

Unfortunately it's not working (and it doesn't print any error on console), but if i change

*ngIf="className.ShowDetails"

with a local boolean variable works perfectly fine.

Where am I wrong?

Upvotes: 1

Views: 540

Answers (3)

Matteo Zambon
Matteo Zambon

Reputation: 111

After a long debug and many tests, I figured out:

The Json returned from REST service was:

{
  ...
  showDetails: false,
  ...
}

with lowercase s, but in my code i have declare a class with 

ShowDetails : boolean;

with uppercase S.

Angular (Typescript) does not give me any errors and creates an instance of a new class that is not MY class, but has almost the same property (thats explain why why everything else was working)

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

the answer of @StepUp totally correct by using ?. safe navigation operator but another way is to set a default value to class Name property like this

@Input() className: ClassName = new CalssName();

in this case if ShowDetails has not set in the class the value will be undefined and the if expression will evaluate as falsy

Upvotes: 2

StepUp
StepUp

Reputation: 38164

Try to use ? operator:

<app-details-info *ngIf="className?.ShowDetails">

</app-details-info>

? is a safe navigation operator in templates. This expression className?.ShowDetails is equivalent to className != null ? className.ShowDetails : null

Upvotes: 6

Related Questions