Angular 4 Passing templates to a service component

Question

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.

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.

I have attempted to use this solution, but it seems some of it's features have been since deprecated and I'm having trouble converting it.

Here's my loading service's component 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;

}

I want the template that this component uses to be the one sent from the Client, like so:

<loading-service [ngClass]="{'display-none': !loadingStatus}" [src]="loadingTemplate"></loading-service>
<router-outlet></router-outlet>

I have a globals export like so:

export let loadingTemplate = '';

That I can then assign in the component that is going to generate the loading service instance:

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(() => {
        this.loadingService.showLoader();
    }, 1);

    setTimeout(() => {
        this.loadingService.hideLoader();
    }, 1000 * 3);

}

And finally a custom template to send to the loading service:

<div class="row align-center">
    <div class="col-12"><i class="fa fa-cog fa-spin fa-3x" aria-hidden="true"></i></div>
    <div class="col-12"><h3>{{ 'loading.weather' | translate }}</h3></div>
</div>

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'.

I hope that makes some sense on what I'm trying to achieve here. Would really appreciate some help.

Many thanks in advance!

Angular 4 Passing templates to a service component

0 Answers0