Check if variable is undefined with *ngIf

Question

I have the following on an Angular 7 application:

<ng-container *ngIf="(post$ | async) as post; else loader">
  <div *ngIf="post; else empty">
    Post content
  </div>
</ng-container>
<ng-template #empty>
  Post not found
</ng-template>
<ng-template #loader>
  Loading post
</ng-template>

This works fine when post is defined ...

However when post is undefined the "Post not Found" does not show ...

... I just see the Loading message which does not disappears.

What am I missing?

Update

post$ is defined as follows in the component:

Note: post$ is not an array. See envelope.result[0] in the code.

export class PostDetailComponent implements OnInit {

  @Input() postId: number;

  post$: Observable<PostDetailModel>;

  constructor(private postService: PostService) { }

  ngOnInit() {

    this.post$ = this.getPost();

  }

  getPost(): Observable<PostDetailModel> {

    return this.postService.getByPostId(this.postId).pipe(

      map((envelope: Envelope<GetByPostIdResponse>) => envelope.result[0]),

      map((response: GetByPostIdResponse) => {

        return response == null ? null : {
          id: response.id,
          title: response.title
          // other properties
        };

      }));

  }

Probably because `post$` would then also not defined which results in an exception. Check your browser's console, are there error messages? — Igor, Mar 29 '19 at 18:00
Wait, I see. `post` is evaluated as truthy/falsy already in the initial `ng-container`. If `post` resolves to `undefined` then the `ng-template #loader` will display. That makes and I do not see a way for your logic to ever display `ng-template #empty`. — Igor, Mar 29 '19 at 18:08
So how can I check, after loading, if job is defined so I display the Not Found message? This is why I have 2 ngIf — Miguel Moura, Mar 29 '19 at 18:10
I would return something other than `undefined` or use `map` to assign something other than `undefined` in the event that the post does not exist on the server. — Igor, Mar 29 '19 at 18:19
@Aragorn No, post$ has only one element. Check the update of my question where I show how I am getting the post$ — Miguel Moura, Mar 29 '19 at 18:45

Igor · Answer 1 · 2019-03-29T18:33:42.427

post is evaluated as truthy/falsy already in the initial ng-container. If post resolves to undefined then the ng-template #loader will display. Your current logic will never display ng-template #empty. I would recommend you use map to change the returned value if it is undefined and then check that in your subsequent *ngIf.

stackblitz

component

export class AppComponent implements OnInit {
  post$: Observable<any>;

  ngOnInit(){
    this.post$ = of(undefined).pipe(
      delay(2000),
      map(_ => typeof _ === 'undefined' ? 'NotFound' : _)
    );
  }
}

template

<ng-container *ngIf="(post$ | async) as post; else loader">
  <div *ngIf="post !== 'NotFound'; else empty">
    Post content
  </div>
</ng-container>
<ng-template #empty>
  Post not found
</ng-template>
<ng-template #loader>
  Loading post
</ng-template>

score 1 · Answer 2 · answered Mar 29 '19 at 18:00

1

you can use !! to check for valid values. You can see explanation of !! here

<ng-container *ngIf="(post$ | async) as post; else loader">
      <div *ngIf="!!post; else empty">
        Post content
      </div>
    </ng-container>
    <ng-template #empty>
      Post not found
    </ng-template>
    <ng-template #loader>
      Loading post
    </ng-template>

answered Mar 29 '19 at 18:00

nircraft

8,242
5
30
46

It did not work ... The loader still does not disappear. – Miguel Moura Mar 29 '19 at 18:06

score 0 · Answer 3 · answered Mar 29 '19 at 18:17

I think its always undefined. Undefined while its waiting, and also undefined or maybe null when it returns in that state. I think the best way to to be more explicit about whats going on:

ts

loading = false;
post;

getPost() {
   this.loading = true;
   this.postService.getPost().subscribe(post => {
      this.loading = false;
      this.post = post;
   });
}

html

<ng-container *ngIf="!loading; else loader">
  <div *ngIf="post; else empty">
    Post content
  </div>
</ng-container>
<ng-template #empty>
  Post not found
</ng-template>
<ng-template #loader>
  Loading post
</ng-template>

this way you aren't trying to infer the state of the post from which kind of falsey it might be

Check if variable is undefined with *ngIf

3 Answers3