Prepare custom default loading example

projects/example-app/src/app/app.component.html

@@ -3,5 +3,6 @@ <h1>Example App</h1>
   <app-lightweight-example></app-lightweight-example>
   <app-default-example></app-default-example>
   <app-custom-loading-template-example></app-custom-loading-template-example>
+  <app-custom-default-loading-example></app-custom-default-loading-example>
   <app-ngrx-example></app-ngrx-example>
 </div>

projects/example-app/src/app/app.module.ts

@@ -6,13 +6,15 @@ import { NgrxExampleModule } from './examples/ngrx-example/ngrx-example.module';
 import { CustomLoadingTemplateExampleModule } from './examples/custom-loading-template-example/custom-loading-template-example.module';
 import { DefaultExampleModule } from './examples/default-example/default-example.module';
 import { LightweightExampleModule } from './examples/lightweight-example/lightweight-example.module';
+import { CustomDefaultLoadingExampleModule } from './examples/custom-default-loading-example/custom-default-loading-example.module';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     NgrxExampleModule,
     CustomLoadingTemplateExampleModule,
+    CustomDefaultLoadingExampleModule,
     DefaultExampleModule,
     LightweightExampleModule,
   ],

projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.component.html

@@ -0,0 +1,11 @@
+<h2>Custom default loading template</h2>
+<p>
+  This example displays the usage of the `ld-loadable` component with a loading
+  component that is registered as a default for all `ld-loadable` components in
+  that module.
+</p>
+<app-load-form (loadable)="loadable = $event"></app-load-form>
+<ld-loadable [loadable]="loadable">
+  <h3>Loaded</h3>
+  <pre>{{ loadable | loadedValue | json }}</pre>
+</ld-loadable>

projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+
+@Component({
+  selector: 'app-custom-default-loading-example',
+  templateUrl: './custom-default-loading-example.component.html',
+})
+export class CustomDefaultLoadingExampleComponent {
+  loadable: Loadable<object> = idle;
+}

projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts

@@ -0,0 +1,14 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { LoadFormModule } from '../../load-form/load-form.module';
+import { CustomDefaultLoadingExampleComponent } from './custom-default-loading-example.component';
+import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
+
+@NgModule({
+  declarations: [CustomDefaultLoadingExampleComponent, LoadingSpinnerComponent],
+  imports: [BrowserModule, LoadFormModule, LoadableModule],
+  exports: [CustomDefaultLoadingExampleComponent],
+})
+export class CustomDefaultLoadingExampleModule {}

projects/example-app/src/app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.css

@@ -0,0 +1,37 @@
+.lds-facebook {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-facebook div {
+  display: inline-block;
+  position: absolute;
+  left: 8px;
+  width: 16px;
+  background: #fff;
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+.lds-facebook div:nth-child(1) {
+  left: 8px;
+  animation-delay: -0.24s;
+}
+.lds-facebook div:nth-child(2) {
+  left: 32px;
+  animation-delay: -0.12s;
+}
+.lds-facebook div:nth-child(3) {
+  left: 56px;
+  animation-delay: 0;
+}
+@keyframes lds-facebook {
+  0% {
+    top: 8px;
+    height: 64px;
+  }
+  50%,
+  100% {
+    top: 24px;
+    height: 32px;
+  }
+}

projects/example-app/src/app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.html

@@ -0,0 +1,5 @@
+<div class="lds-facebook">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.html

@@ -6,7 +6,7 @@ <h2>Lightweight example</h2>
 </p>
 <app-load-form (loadable)="loadable = $event"></app-load-form>
 <ng-container [ngSwitch]="loadable | loadingState">
-  <app-loading-spinner *ngSwitchCase="'loading'"></app-loading-spinner>
+  <ld-loadable-loading *ngSwitchCase="'loading'"></ld-loadable-loading>
   <div *ngSwitchCase="'loaded'">
     <h3>Loaded</h3>
     <pre>{{ loadable | loadedValue | json }}</pre>

projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts

@@ -3,11 +3,10 @@ import { NgModule } from '@angular/core';
 
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
 import { LightweightExampleComponent } from './lightweight-example.component';
-import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 
 @NgModule({
-  declarations: [LoadingSpinnerComponent, LightweightExampleComponent],
+  declarations: [LightweightExampleComponent],
   imports: [BrowserModule, LoadFormModule, LoadableModule],
   exports: [LightweightExampleComponent],
 })

projects/ngx-loadable/src/lib/angular/loadable.tokens.ts

@@ -3,5 +3,7 @@ import { defaultComponents, DefaultComponents } from './module.options';
 
 export const DEFAULT_COMPONENTS = new InjectionToken<DefaultComponents>(
   'DEFAULT_COMPONENTS',
-  { factory: () => defaultComponents }
+  {
+    factory: () => defaultComponents,
+  }
 );

projects/ngx-loadable/src/lib/angular/loadable/loadable.component.ts

@@ -72,7 +72,9 @@ export class LoadableComponent implements OnChanges {
   constructor(
     private resolver: ComponentFactoryResolver,
     @Inject(DEFAULT_COMPONENTS) private defaultComponents: DefaultComponents
-  ) {}
+  ) {
+    console.log(this.defaultComponents);
+  }
 
   updateContent(loadable: Loadable<unknown>): void {
     const defaultComponent = this.defaultComponents[getLoadingState(loadable)];