Javatpoint Logo
Javatpoint Logo

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:


Loading Spinner in MEAN Stack

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.


Loading Spinner in MEAN Stack

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


Loading Spinner in MEAN Stack

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

Loading Spinner in MEAN Stack
Loading Spinner in MEAN Stack

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:


Loading Spinner in MEAN Stack

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 Spinner in MEAN Stack

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:


Loading Spinner in MEAN Stack

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.

Loading Spinner in MEAN Stack
Loading Spinner in MEAN Stack

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:


Loading Spinner in MEAN Stack

This will be enter the spinner like this:

Loading Spinner in MEAN Stack

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.


Loading Spinner in MEAN Stack

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

Loading Spinner in MEAN Stack

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:


Loading Spinner in MEAN Stack

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 Spinner in MEAN Stack

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


Loading Spinner in MEAN Stack

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

Loading Spinner in MEAN Stack

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 Topic#




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA