Angular - *ngIf not evaluating

Question

I'm attempting to troubleshoot an issue and have written the following code to see what is going on, but now I am even further confused. Ideally if entry.customer has a value it should be printed and then Hello should also be displayed, otherwise NOPE and Goodbye should be displayed, but the actual result is that only the value of entry.customer is displayed.

<h3>{{entry.customer}}</h3>

<span *ngIf="entry.customer else no">
  <h1>Hello</h1>
</span>

<ng-template #no>
  <h1> NOPE</h1>
</ng-template>

<span *ngIf="!entry.customer">
  <h1>Goodbye</h1>
</span>

<h3> {{entry.customer}} </h3>

<span *ngIf="entry.customer else no">
  <h1>Hello</h1>
</span>

<ng-template #no>
  <h1> NOPE</h1>
</ng-template>

<span *ngIf="!entry.customer">
  <h1>Goodbye</h1>
</span>

When I started tracking down this issue I thought that maybe there was an issue with change detection due to the value of entry coming from a BehaviorSubject, so I attempted getting the values in a zone, but that didn't change the result.


ngOnInit(): void {
   this.ngZone.run(() => {
     debugger;
     this._entryService.entry.subscribe(entry => {
       debugger;
       this.entry = entry;
     });
   })
 }

Can anyone explain a possible reason why *ngIf won't work, yet using the curly braces does display the value? If it helps any the component that I am using is extended from a base component that gets the value of entry as there are many components of the same type in this application.

Presumably you have a console error, otherwise you'd expect it to display twice as you have the string interpolation (curly bracket value) in your template twice? It's probably because your ngIf will be attempting to access the 'customer' property of your value 'entry' when it is undefined, in which case just change it to entry?.customer (optional chaining operator) so that your ngIf returns false when entry is not defined. — Alex, Jun 10 '21 at 16:16
There isn't anything in the console. Also, at one point I was just checking if entry existed and it was behaving the same even though the string interpolation was working at that time as well. — dmoore1181, Jun 10 '21 at 16:48

score 2 · Answer 1 · answered Jun 10 '21 at 16:49

2

You may have used changeDetection: ChangeDetectionStrategy.OnPush in your component in that case try to trigger changeDetection manually ChangeDetectorRef

constructor(
    private _entryService: EntryService,
    private changeDetectionRef: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this._entryService.entry.subscribe(entry => {
      this.entry = entry;
      this.changeDetectionRef.detectChanges();
    });
  }

answered Jun 10 '21 at 16:49

Gobika

261
2
4

I'll keep that in mind. I am hopeful that now that I found the issue within my module, I can remove the ngZone stuff and the default change detection will work. – dmoore1181 Jun 10 '21 at 17:36

score 0 · Answer 2 · answered Jun 10 '21 at 16:53

0

This is the issue with syntax. Semicolon is missed in between. You should write

<span *ngIf="entry.customer; else no">
  <h1>Hello</h1>
</span>

You can also use "then" or "then else"

<span *ngIf="entry.customer; then content">
  <h1>Hello</h1>
</span>

answered Jun 10 '21 at 16:53

Aarti Bhardwaj

21
4

While that is the preferred syntax, it will work with or without the semi-colon. – dmoore1181 Jun 10 '21 at 17:35

score 0 · Answer 3 · answered Jun 10 '21 at 17:32

0

The issue turned out to be that I had added the component to the module, but hadn't added the module to the app.module. Thanks to @raj m for this answer that led me to the solution. https://stackoverflow.com/a/42066452/2793683

answered Jun 10 '21 at 17:32

dmoore1181

1,793
1
25
57

score 0 · Answer 4 · answered Jun 11 '21 at 03:37

0


<span *ngIf="entry.customer; else no">
  <h1>Hello</h1>
</span>
<ng-template #no>
  <h1> NOPE</h1>
</ng-template>

; [ semicolon] is missed in your code in <span *ngIf="entry.customer; else no">

answered Jun 11 '21 at 03:37

Gem

513
2
6
17

Angular - *ngIf not evaluating

4 Answers4