title: How to show spinner in angular 6
body: <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>