title: Multiple different components on a page, each using the same loader component - how to make them unique?
body: <p>I'm working on a loader component for Angular (5).
  The loader component sits within different child components, which themselves are within an overall parent component.</p>
  
  <p>So, for example, the parent component has two components in the view:</p>
  
  <pre><code>&lt;app-abc&gt;&lt;/app-abc&gt;
  &lt;app-xyz&gt;&lt;/app-xyz&gt;
  </code></pre>
  
  <p>Each of those components call a different endpoint, while that endpoint is being called, I want to show a loading animation, but it needs to be unique to the component that is calling it. I could just repeat code in each component that triggers a loader, but I'd rather create a loading component that can be shared across the entire application.</p>
  
  <p>This loading component has a boolean showLoading variable which is set by calling a setShowLoading method in the loader component. </p>
  
  <pre><code>this.loadingService.setShowLoading(true);
  </code></pre>
  
  <p>The loader component view has an *ngIf to either display or not display the loading animation, based on the value of a boolean variable type.</p>
  
  <p>Everything works great with just a single loader component, but as soon as two components each have that loader component within them on a page, they are both invoked. </p>
  
  <p>I've been thinking about passing in an ID parameter, but I'm not convinced this will solve the issue or be performant. </p>
  
  <p>I thought because the loader component is within two different components, it's scope would be encapsulated. Turns out it isn't.</p>
  
  <p>Is there a simple method to ensure that this loader component is unique within it's parent components view? </p>