Add loadable component

package.json

@@ -68,6 +68,7 @@
     "husky": "^4.3.0",
     "jest": "^26.6.3",
     "jest-marbles": "^2.5.1",
+    "ng-mocks": "^11.9.0",
     "ng-packagr": "^11.1.2",
     "ngx-build-plus": "^11.0.0",
     "prettier": "^2.1.2",

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

@@ -1,2 +1,3 @@
 <h1>Example App</h1>
 <app-switch-case-example></app-switch-case-example>
+<app-loadable-component-example></app-loadable-component-example>

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

@@ -4,9 +4,14 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { LoadableModule } from 'projects/ngx-loadable/src/public-api';
 import { SwitchCaseExampleComponent } from './components/switch-case-example/switch-case-example.component';
+import { LoadableComponentExampleComponent } from './components/loadable-component-example/loadable-component-example.component';
 
 @NgModule({
-  declarations: [AppComponent, SwitchCaseExampleComponent],
+  declarations: [
+    AppComponent,
+    SwitchCaseExampleComponent,
+    LoadableComponentExampleComponent,
+  ],
   imports: [BrowserModule, LoadableModule],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,7 @@
+<button (click)="load(42)">Load</button>
+<ld-loadable [loadable]="loadable$ | async">
+  <p slot="idle">Idle</p>
+  <p slot="loading">Loading</p>
+  <p slot="loaded">Loaded</p>
+  <p slot="error">Error</p>
+</ld-loadable>

projects/example-app/src/app/components/loadable-component-example/loadable-component-example.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { toLoadable } from 'projects/ngx-loadable/src/lib/from.functions';
+import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { LoadService } from '../../load.service';
+
+@Component({
+  selector: 'app-loadable-component-example',
+  templateUrl: './loadable-component-example.component.html',
+  styleUrls: ['./loadable-component-example.component.css'],
+})
+export class LoadableComponentExampleComponent {
+  load$ = new Subject<number>();
+  loadable$ = new BehaviorSubject(idle as Loadable<string>);
+
+  constructor(private loadService: LoadService) {
+    this.load$
+      .pipe(switchMap((id) => this.loadService.load(id).pipe(toLoadable)))
+      .subscribe(this.loadable$);
+  }
+
+  load(id: number): void {
+    this.load$.next(id);
+  }
+}

projects/ngx-loadable/package.json

@@ -24,8 +24,7 @@
   },
   "peerDependencies": {
     "@angular/common": ">=10.2.0",
-    "@angular/core": ">=10.2.0",
-    "@angular/router": ">=10.2.0"
+    "@angular/core": ">=10.2.0"
   },
   "dependencies": {
     "tslib": "^2.0.0",

projects/ngx-loadable/src/lib/loadable/loadable.module.ts

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IsLoadingPipe } from './is-loading.pipe';
 import { LoadingStatePipe } from './loading-state.pipe';
+import { LoadableComponent } from './loadable/loadable.component';
 
 @NgModule({
-  declarations: [IsLoadingPipe, LoadingStatePipe],
+  declarations: [IsLoadingPipe, LoadingStatePipe, LoadableComponent],
   imports: [CommonModule],
-  exports: [IsLoadingPipe, LoadingStatePipe],
+  exports: [IsLoadingPipe, LoadingStatePipe, LoadableComponent],
 })
 export class LoadableModule {}

projects/ngx-loadable/src/lib/loadable/loadable/loadable.component.html

@@ -0,0 +1,6 @@
+<ng-container [ngSwitch]="loadable | loadingState">
+  <ng-content *ngSwitchCase="'Idle'" select="[slot=idle]"></ng-content>
+  <ng-content *ngSwitchCase="'Loading'" select="[slot=loading]"></ng-content>
+  <ng-content *ngSwitchCase="'Loaded'" select="[slot=loaded]"></ng-content>
+  <ng-content *ngSwitchCase="'Error'" select="[slot=error]"></ng-content>
+</ng-container>

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

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Loadable } from '../../loadable.type';
+
+@Component({
+  selector: 'ld-loadable',
+  templateUrl: './loadable.component.html',
+  styleUrls: ['./loadable.component.css'],
+})
+export class LoadableComponent {
+  @Input() loadable!: Loadable<unknown>;
+
+  constructor() {}
+}

projects/ngx-loadable/tslint.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tslint.json",
   "rules": {
-    "directive-selector": [true, "attribute", "aer", "camelCase"],
-    "component-selector": [true, "element", "aer", "kebab-case"]
+    "directive-selector": [true, "attribute", "ld", "camelCase"],
+    "component-selector": [true, "element", "ld", "kebab-case"]
   }
 }