Add a Loading message without an extra variable in Angular 7

Question

I have the following service method in Angular 7:

public getTopPosts(): Observable<Payload<PostResponse>> {

  return this.httpClient.get<Payload<PostResponse>>('/top-posts');

}

On the component I have:

export class TopPostsComponent implements OnInit {

  posts: PostModel[] = [];

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();
  }

  getPosts() {

    this.postService.getTopPosts().subscribe((payload: Payload<PostResponse>) => {

      this.posts = payload.map((response: PostResponse) => { 
        return {
          id: response.id, 
          title: response.title
        };
      });

    });

  }
}

And the component HTML is:

<div *ngFor="let post of posts">
  {{post.title}}  
</div>

It is working but I would like to display "Loading" while data is loading.

Is this possible without using an extra variable on my component?

What is the reason of not using an 'extra' (which is not) variable ? — Osakr
– Osakr, Commented Jan 14, 2019 at 12:50

Irek Mirgaleev · Accepted Answer · 2019-01-14 12:51:44Z

2

Not sure how to mark this as a dupe so I'm posting a link to the similar question as an answer here Angular 4 async with loading and display when empty.

You would have to update your observable to use the async pipe though so it will be something like this:

export class TopPostsComponent implements OnInit {

  posts$: Observable<PostModel[]>;

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();

    this.posts$ = this.postService.getTopPosts().pipe(
      map((payload: Payload<PostResponse>) => {
        return payload.map((response: PostResponse) => { id: response.id, title: response.title});
      })
    );
  }

}


<div *ngIf="(posts$ | async)?.length > 0; else loading">
   <ng-container *ngFor="let post of posts$ | async">
     <div>{{post.title}}</div>
   <ng-container>
</div>
<ng-template #loading>loading posts...</ng-template>

edited Jan 14, 2019 at 12:51

answered Jan 14, 2019 at 12:41

Irek Mirgaleev

562 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Korfoo · Accepted Answer · 2019-01-14 13:18:34Z

0

You can not initialize posts: PostModel[] and use an <div *ngIf="!posts" >loading...</div>. Also as Osakr pointed out in the comments: set this.posts to [] because otherwise it would keep loading if the call fails.

Your new code would look like this:

export class TopPostsComponent implements OnInit {

  posts: PostModel[];

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();
  }

  getPosts() {

    this.postService.getTopPosts().subscribe((payload: Payload<PostResponse>) => {

      this.posts = payload.map((response: PostResponse) => { 
        return {
          id: response.id, 
          title: response.title
        };
      },
      error => { this.posts = [] }
      );

    });

  }
}

And the HTML is:

<div *ngIf="!posts">
  loading...
</div>
<div *ngFor="let post of posts">
  {{post.title}}  
</div>

edited Jan 14, 2019 at 13:18

answered Jan 14, 2019 at 12:38

Korfoo

6094 silver badges12 bronze badges

4 Comments

Osakr Over a year ago

What if you fail requesting the data, then posts will remain undefined and you'll have a cool spinner for the whole eternity

Korfoo Over a year ago

You can set posts to [] in the onError of the subscribe error => { this.posts = []; }

Osakr Over a year ago

Which at the end is the same than having a isLoading variable. ( I didn't wanted to be rude, just wanted to make the creator of the post realize that having a variable for loading purposes is not bad ). Your answer is good, anyways you should add more information i guess

Korfoo Over a year ago

That's true, also a loading variable would be clearer if there are multiple people working on the same code. I'll add some more information to the answer.

Collectives™ on Stack Overflow

Add a Loading message without an extra variable in Angular 7

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related