How to show spinner in angular 6 : <p>I am new to angular and web development but able to design various web pages and got data from the server using HTTP client module.</p>

<p>While getting data from server I want to show progress spinner, but I am not able to do it. I have searched google but nothing made me to do it. Please help me to achieve this.</p>

<p>Code:</p>

<p>login.component.ts</p>

<pre><code> userLogin() {
        console.log('logging in');
        this.eService.signIn(this.user_name, this.password)
        .subscribe(
            data =&gt; {
                console.log(data);
               this.admin = data;
               if ( this.admin.firstLogin === true) {
                   // go to update admin password
               } else {
                this.router.navigate(['/dashboard']);
                }
               localStorage.setItem('isLoggedin', 'true');
             }
        );
    }
</code></pre>

<p>login.html</p>

<pre><code>&lt;div class="login-page" [@routerTransition]&gt;
    &lt;div class="row justify-content-md-center"&gt;
        &lt;div class="col-md-4"&gt;
            &lt;img src="assets/images/logo.png" width="150px" class="user-avatar" /&gt;
            &lt;h1&gt;Users/h1&gt;
            &lt;form role="form"&gt;
                &lt;div class="form-content"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;input type="text" name="username" [(ngModel)]="user_name" class="form-control input-underline input-lg" id="" placeholder="username"&gt;
                    &lt;/div&gt;

                    &lt;div class="form-group"&gt;
                        &lt;input type="password" name="password" [(ngModel)]="password" (keyup.enter)="userLogin()" class="form-control input-underline input-lg" id="" placeholder="password"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;a class="btn rounded-btn" (click)="userLogin()"&gt; Log in &lt;/a&gt;
                &amp;nbsp;
                &lt;a class="btn rounded-btn" &gt;Clear&lt;/a&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So when I am requesting signIn service I want to show the spinner, Please help me, how can I do it?</p>

<p>I know this is simple for many of the developers here, but for me It is getting somewhat tough.</p>
