title: Angular 4 Passing templates to a service component
body: <p>I am quite new to Angular 4 and am attempting to pass a custom translatable template to a loading service that that I have created.</p>
  
  <p>The Loading service is a component that is exported and imported into a client. The client needs to be able to send the loading service a custom template depending on the page that is calling the loading service and that template will have translation support from the clients JSON files.</p>
  
  <p>I have attempted to <a href="https://stackoverflow.com/questions/33749994/dynamic-template-in-templaturl-in-angular2">use this solution</a>, but it seems some of it's features have been since deprecated and I'm having trouble converting it.</p>
  
  <p>Here's my loading service's component code:</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { LoadingService } from './loading.service';
  
  @Component({
      selector: 'loading-service',
      templateUrl: '',
      providers: [LoadingService]
  })
  
  export class LoadingComponent{
  
      @Input('src') templateUrl: string;
  
  }
  </code></pre>
  
  <p>I want the template that this component uses to be the one sent from the Client, like so:</p>
  
  <pre><code>&lt;loading-service [ngClass]="{'display-none': !loadingStatus}" [src]="loadingTemplate"&gt;&lt;/loading-service&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>I have a globals export like so:</p>
  
  <pre><code>export let loadingTemplate = '';
  </code></pre>
  
  <p>That I can then assign in the component that is going to generate the loading service instance:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { LoadingService } from 'ng2-loader';
  import * as globals from 'globals';
  
  @Component({
     templateUrl: '../../templates/weather.html'
  })
  
  export class WeatherComponent implements OnInit {
  
  constructor(
      private loadingService: LoadingService
  ) {}
  
  ngOnInit() {
      globals.loadingTemplate = '../../loading-weather.html';
  
      setTimeout(() =&gt; {
          this.loadingService.showLoader();
      }, 1);
  
      setTimeout(() =&gt; {
          this.loadingService.hideLoader();
      }, 1000 * 3);
  
  }
  </code></pre>
  
  <p>And finally a custom template to send to the loading service:</p>
  
  <pre><code>&lt;div class="row align-center"&gt;
      &lt;div class="col-12"&gt;&lt;i class="fa fa-cog fa-spin fa-3x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class="col-12"&gt;&lt;h3&gt;{{ 'loading.weather' | translate }}&lt;/h3&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This way I can use the loader from any of my view components and pass it it's own loading template, such as 'fetching weather', 'loading data' or 'please wait'.</p>
  
  <p>I hope that makes some sense on what I'm trying to achieve here. Would really appreciate some help.</p>
  
  <p>Many thanks in advance!</p>