feat: added global loading template token

Author: itayod

projects/transloco/src/lib/loaderComponent.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+  template: `
+    <div class="transloco-loader-template" [innerHTML]="html"></div>
+  `
+})
+export class LoaderComponent {
+  private _html: string;
+
+  @Input() set html(html: string) {
+    this._html = html;
+    this.cdr.markForCheck();
+  }
+
+  get html() {
+    return this._html;
+  }
+
+  constructor(private cdr: ChangeDetectorRef) {}
+}

projects/transloco/src/lib/templateHandler.ts

@@ -0,0 +1,51 @@
+import {
+  ComponentRef,
+  TemplateRef,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  Component,
+  Injector
+} from '@angular/core';
+import { LoaderComponent } from './loaderComponent.component';
+
+export class TemplateHandler {
+  constructor(
+    private template: string | TemplateRef<any> | Component,
+    private vcr: ViewContainerRef,
+    private injector: Injector
+  ) {}
+
+  public attachView() {
+    if (this.isTemplateRef(this.template)) {
+      this.vcr.createEmbeddedView(this.template as TemplateRef<any>);
+    } else if (this.isComponent(this.template)) {
+      this.createComponent(this.template);
+    } else if (this.isHTML(this.template)) {
+      const loaderCmp = this.createComponent<LoaderComponent>(LoaderComponent);
+      loaderCmp.instance.html = this.template as string;
+    }
+  }
+
+  public detachView() {
+    this.vcr.clear();
+  }
+
+  private createComponent<T>(cmp): ComponentRef<T> {
+    const cfr = this.injector.get(ComponentFactoryResolver);
+    const component = cfr.resolveComponentFactory(cmp);
+
+    return this.vcr.createComponent(component);
+  }
+
+  private isTemplateRef(template: string | TemplateRef<any> | Component) {
+    return template instanceof TemplateRef;
+  }
+
+  private isHTML(template: string | TemplateRef<any> | Component) {
+    return typeof template === 'string';
+  }
+
+  private isComponent(template: string | TemplateRef<any> | Component) {
+    return typeof template === 'function';
+  }
+}

projects/transloco/src/lib/transloco-loading-template.ts

@@ -0,0 +1,5 @@
+import { InjectionToken, ComponentRef } from '@angular/core';
+
+export const TRANSLOCO_LOADING_TEMPLATE = new InjectionToken<{ component: ComponentRef<any> | string }>(
+  'TRANSLOCO_LOADING_TEMPLATE'
+);

projects/transloco/src/lib/transloco.directive.ts

@@ -10,8 +10,14 @@ import {
   OnInit,
   Optional,
   TemplateRef,
-  ViewContainerRef
+  ViewContainerRef,
+  ComponentRef,
+  ComponentFactoryResolver,
+  Component,
+  Injector
 } from '@angular/core';
+import { TemplateHandler } from './templateHandler';
+import { TRANSLOCO_LOADING_TEMPLATE } from './transloco-loading-template';
 import { switchMap, take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { TranslocoService } from './transloco.service';
@@ -33,22 +39,28 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
   @Input('translocoLoadingTpl') loadingTpl: TemplateRef<any> | undefined;
 
   private langName: string;
+  private loaderTplHandler: TemplateHandler = null;
   // Whether we already rendered the view once
   private initialzed = false;
 
   constructor(
     private translocoService: TranslocoService,
+    private injector: Injector,
     @Optional() private tpl: TemplateRef<any>,
     @Optional() @Inject(TRANSLOCO_SCOPE) private providerScope: string | null,
     @Optional() @Inject(TRANSLOCO_LANG) private providerLang: string | null,
+    @Optional() @Inject(TRANSLOCO_LOADING_TEMPLATE) private defaultLoading: Component | string,
     private vcr: ViewContainerRef,
     private cdr: ChangeDetectorRef,
     private host: ElementRef
-  ) {
-  }
+  ) {}
 
   ngOnInit() {
-    this.hasLoadingTpl() && this.vcr.createEmbeddedView(this.loadingTpl);
+    const tpl = this.getLoadingTpl();
+    if (tpl) {
+      this.loaderTplHandler = new TemplateHandler(tpl, this.vcr, this.injector);
+      this.loaderTplHandler.attachView();
+    }
 
     const { runtime } = this.translocoService.config;
 
@@ -58,13 +70,13 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
           const lang = this.getLang(globalLang);
           const scope = this.getScope();
           this.langName = scope ? `${lang}-${scope}` : lang;
-          return this.translocoService._load(this.langName)
+          return this.translocoService._load(this.langName);
         }),
         runtime ? source => source : take(1)
       )
       .subscribe(() => {
         const translation = this.translocoService.getTranslation(this.langName);
-        this.tpl === null ? this.simpleStrategy() : this.structuralStrategy(translation);
+        this.loadingTpl === null ? this.simpleStrategy() : this.structuralStrategy(translation);
         this.cdr.markForCheck();
         this.initialzed = true;
       });
@@ -82,16 +94,20 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
   }
 
   private structuralStrategy(data) {
-    if( this.view ) {
+    if (this.view) {
       this.view.context['$implicit'] = data;
     } else {
-      this.hasLoadingTpl() && this.vcr.clear();
+      this.loaderTplHandler.detachView();
       this.view = this.vcr.createEmbeddedView(this.tpl, {
         $implicit: data
       });
     }
   }
 
+  private getLoadingTpl(): string | TemplateRef<any> | Component {
+    return this.loadingTpl || this.defaultLoading;
+  }
+
   private hasLoadingTpl() {
     return this.loadingTpl instanceof TemplateRef;
   }
@@ -107,16 +123,16 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
      * When the user changes the lang we need to update
      * the view. Otherwise, the lang will remain the inline/provided lang
      */
-    if( this.initialzed ) {
+    if (this.initialzed) {
       return globalLang;
     }
 
-    if( this.inlineLang ) {
-      return this.inlineLang
+    if (this.inlineLang) {
+      return this.inlineLang;
     }
 
-    if( this.providerLang ) {
-      return this.providerLang
+    if (this.providerLang) {
+      return this.providerLang;
     }
 
     return globalLang;

projects/transloco/src/lib/transloco.module.ts

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
+import { LoaderComponent } from './loaderComponent.component';
 import { TranslocoDirective } from './transloco.directive';
 import { TRANSLOCO_PARSER, DefaultParser } from './transloco.parser';
 import { TranslocoParamsPipe } from './transloco-params.pipe';
 import { TranslocoPipe } from './transloco.pipe';
 import { DefaultHandler, TRANSLOCO_MISSING_HANDLER } from './transloco-missing-handler';
 
 @NgModule({
-  declarations: [TranslocoDirective, TranslocoParamsPipe, TranslocoPipe],
+  declarations: [TranslocoDirective, TranslocoParamsPipe, TranslocoPipe, LoaderComponent],
   providers: [
     {
       provide: TRANSLOCO_PARSER,
@@ -17,6 +18,7 @@ import { DefaultHandler, TRANSLOCO_MISSING_HANDLER } from './transloco-missing-h
       useClass: DefaultHandler
     }
   ],
-  exports: [TranslocoDirective, TranslocoParamsPipe, TranslocoPipe]
+  exports: [TranslocoDirective, TranslocoParamsPipe, TranslocoPipe],
+  entryComponents: [LoaderComponent]
 })
 export class TranslocoModule {}

projects/transloco/src/public-api.ts

@@ -9,4 +9,5 @@ export * from './lib/types';
 export * from './lib/helpers';
 export * from './lib/transloco-params.pipe';
 export * from './lib/transloco-scope';
+export * from './lib/transloco-loading-template';
 export * from './lib/transloco-lang';

src/app/lazy/lazy.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; loadingTpl: loading">
+<ng-container *transloco="let t">
   <h1 data-cy="regular">{{ t.title }}</h1>
 </ng-container>
 

src/app/lazy/lazy.module.ts

@@ -1,8 +1,8 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LazyComponent } from './lazy.component';
 import { RouterModule, Routes } from '@angular/router';
-import { TRANSLOCO_SCOPE, TranslocoModule } from '@ngneat/transloco';
+import { TRANSLOCO_SCOPE, TranslocoModule, TRANSLOCO_LOADING_TEMPLATE } from '@ngneat/transloco';
 
 const routes: Routes = [
   {
@@ -13,7 +13,10 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [LazyComponent],
-  providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'admin-page' }],
+  providers: [
+    { provide: TRANSLOCO_SCOPE, useValue: 'admin-page' },
+    { provide: TRANSLOCO_LOADING_TEMPLATE, useValue: 'loading template...' }
+  ],
   imports: [CommonModule, RouterModule.forChild(routes), TranslocoModule]
 })
 export class LazyModule {}