title: Angular Cli : Adding a button Spinner while loading the content
body: <p>I want to show a loading spinner or some text with "please wait" as long as it's done in <strong>Angular Cli</strong> .</p>
  
  <p>For example : <strong>Get Quotes</strong></p>
  
  <hr>
  
  <p>This is <strong>quotes.component.html :</strong></p>
  
  <pre><code>&lt;div class="btn btn-primary" (click)="onGetQuotes()"&gt;Get Quotes&lt;/div&gt;
  &lt;hr&gt;
  &lt;app-quote *ngFor="let quote of quotes" [quote]="quote" (quoteDelete)="onDelete($event)"&gt;&lt;/app-quote&gt;
  </code></pre>
  
  <p>And this is <strong>quotes.component.ts :</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Response } from '@angular/http';
  import {Quote} from "../quote.interface";
  import {QuoteService} from "../quote.service";
  
  @Component({
    selector: 'app-quotes',
    templateUrl: './quotes.component.html',
    styleUrls: ['./quotes.component.css']
  })
  export class QuotesComponent implements OnInit {
    quotes : Quote[];
    constructor(private quoteService:QuoteService) { }
  
    ngOnInit() {
    }
  
  
    onGetQuotes(){
      this.quoteService.getQuotes()
      .subscribe(
          (quotes:Quote[]) =&gt; this.quotes = quotes,
          (error:Response) =&gt;console.log(error)
      );
    }
  
  
  
  }
  </code></pre>
  
  <p>And <strong>quote.service.ts :</strong></p>
  
  <pre><code>import {Injectable} from "@angular/core";
  import {Http , Response,Headers} from "@angular/http";
  import 'rxjs/Rx';
  import {Observable} from "rxjs";
  import {AuthService} from "./auth.service";
  @Injectable()
  export class QuoteService {
      constructor(private http:Http, private authService:AuthService) {
  
      }
  
  
      getQuotes():Observable&lt;any&gt; {
          return this.http.get('http://localhost:8000/api/quotes')
              .map(
                  (response:Response)=&gt; {
                      return response.json().quotes;
                  }
              );
      }
  
  }
  </code></pre>
  
  <p>So , i want to show a loading page as long as it's done .
  Thanks For Reading</p>