Loading Spinner in MEAN Stack

In the previous section, we learned how to group our back-end routes in a separate file and connect it to our back-end. Everything was working well previously. This section will make us learn about the loading spinner and how we can add it to our angular app. We will add two things here, i.e., navigate the user and show a spinner. We will use the following steps to add both of them:

Navigating the user is quite simple to do. We will go back to our post-create component file and reach out onAddPost() method. We want to navigate the user once we are done adding the post or updating the post. For doing that, we do some changes in our post.service.ts file where we get back the success response.

1) We will inject something in the post-service, which helps with navigation, and that is an angular router because we cannot change pages by adding links like a new post. We will do that programmatically, and for that, we inject router in the constructor like this:

  import {Router} from ‘@angular/router’;  constructor(private http: HttpClient, private router: Router){}  

2) Now, we will go back to our addPost() method, and in the subscription of this, we will reach out to our router and call the navigate method in the following way:

In this navigate method(), we need to pass an array of segments just as we did it for the router link when we want to pass more than a normal string. So, the first segment will be slash. This slash will always navigate us to the root route.

3) We will do the same thing in the updatePost() method in the following way:

Now, after adding or updating the post, we will navigate to the route page like as:

4) Now, to use the loading spinner, angular gives us Progress spinner for that. So, to use it, we need to unlock it. We will go back to our module.ts file, and here we will add a new module, i.e., MatProgressSpinnerModule in the following way:

  import { MatProgressSpinnerModule } from ‘@angular/material’;  imports: [      …      …      MatProgressSpinnerModule,      …      …   ],  

5) Now, we will use it in our post-create.component.ts file when we are loading the post. In the ngOnInit() method, where we are fetching the post, we will show it. So, we will create a new property, i.e., loading, and we will initially set to false where the fetching of the post starts in the ngOnInit() method. We will set this property to true, and when the fetching of the post complete, we will set this property to false again in the following way:

  Loading = false//This is property  this.Loading = true;            this.postsService.getPost(this.postId).subscribe(postData=>{              this.Loading = false;              this.post = {id: postData._id, title: postData.title, content: postData.content}  });  

6) Now, we use the “Loading” property to hide the entire form of our post-create component and show a spinner as long as we are loading. For that, we will use the <mat-spinner></mat-spinner> with *ngIf = “Loading” and we use the *ngIf = “!Loading” in our <form></form> in the following way:

  <mat-spinner *ngIf = “Loading”></mat-spinner>    <form (submit) = “onAddPost(postForm)” #postForm = “ngForm” *ngIf = “!Loading”>  

Now, if we save this and try to edit a post, we will see a spinner for a while at the left side of the screen.

7) We will add styling to center this spinner. We will go back to the CSS file of our post-create component and write the styling rules in the following way:

This will be enter the spinner like this:

8) Now, we will also add a spinner when we save the post. So, we will go back to our post-create.component.ts file and reach out to the onAddPost() method. In this method, we will set the Loading property to true, where we start creating the post. We don’t need to reset it to false because we will navigate away from this page after saving the post.

  onAddPost( form: NgForm){        …        …        this.Loading = true;        if(this.mode===”create”){          …          …         }      }      }  

Now, if we save a post, we will also see a spinner like this:

9) We will also add a spinner to the message list page. We will do that in the same way as we have done in the post-create component by adding <mat-spinner></mat-spinner>. We will add <mat-spinner> in the following way:

  <mat-spinner *ngIf = “Loading”></mat-spinner>  <mat-accordion multi= “true” *ngIf = “posts.length > 0 && !Loading”>  

10) Now, we need to define the Loading property in the post-list.component.ts file, and initially, we will set this property to false. In the ngOnInit() method, we will set the “Loading” property to true before calling the getPosts() method, and after that, we will set this property to false as soon as we get updated post in the following way:

  Loading = false;//This is a property  ngOnInit(){      this.Loading = true;      this.postsService.getPosts();      this.PostSub=this.postsService.getPostUpdateListenetr().      subscribe((posts: Post[])=>{        this.Loading = false;        this.posts = posts;      });    }  

11) Now, we will write the CSS code for styling the spinner as we did in the post create component like this :

Now, if we will go back to our angular app, we will see a spinner like as:

Everything is working well, and from the next section, we will start a new module of our MEAN Stack tutorial. In the module, we will learn about the images, the angular material which will be used for image uploads and many more concept regarding image upload.

Download Complete Project(Loading spinner.zip)

Next TopicAdding the File Input Button

Loading Spinner in MEAN Stack

Loading Spinner in MEAN Stack

Architecture of Mean Stack

Azure API Apps and API Management

You may also like