title: Showing the loading spinner icon on all components
body: <p>I have written the code to show the loading spinner on all components when any event is triggered. It works fine on a single component but the issue with it, I have to show the same loading spinner on the around multiple components when certain event is triggered. See below code:</p>
  
  <pre><code>  tasks() {
    this.handler.activateLoader();
    this.tasksService.get(this.page, this.pageSize).subscribe(results =&gt; {
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }
      this.tasksRes = results['data'];
      for (let i = 0; i &lt; this.tasksRes.length; i++) {
        if (this.tasksRes[i].status == 'In_progress' &amp;&amp; this.tasksRes[i].eventType == 'Sync' &amp;&amp;
          this.tasksRes[i].entityId == this.id) {
          this.progressFlag = true;
          break;
        } else {
          this.progressFlag = false;
        }
      }
      this.length = results['totalElements'];
    }, error =&gt; {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }
  
  connect() {
    let source = new EventSource('/api/v1/events/register');
    source.addEventListener('message', message =&gt; {
      this.tasks();
    });
  }
  </code></pre>
  
  <p>And on ngOnInit(), I have called these 2 methods as below then its working fine.</p>
  
  <pre><code>ngOnInit() {
    this.tasks();
    this.connect();
  }
  </code></pre>
  
  <p>The actual requirement is when I run a particular event the button is going to be disabled and at the same time the spinner loading will come. I have achieved this one. But how to show the same spinner on multiple components so that the user can know that the task is running.</p>
  
  <p>This is how I am showing the loading spinner. See below:</p>
  
  <pre><code>&lt;span class="text-warning pull-right" *ngIf="progressFlag"&gt;
    &lt;i class="fa fa-spinner fa-spin fa-2x"&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>In my code, I have many components at around 17-18 where I need to show the loading spinner. If I want to show the spinner globally means I can show it on either header and footer component which is common to my entire template. Can any one provide any ideas on it.</p>
  
  <p>Thanks.</p>