Adjust other examples

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

@@ -3,9 +3,8 @@ <h2>Default usage example</h2>
   This examples displays the default usage of the `ld-loadable` component. The
   `LoadableModule` is imported with the default loading and error components.
 </p>
-<button (click)="load(42, false)">Load</button>
-<button (click)="load(42, true)">Load with error</button>
-<ld-loadable *ngIf="loadable$ | async as loadable" [loadable]="loadable">
+<app-load-form (loadable)="loadable = $event"></app-load-form>
+<ld-loadable [loadable]="loadable">
   <h3>Loaded</h3>
-  <pre>{{ loadable.value | json }}</pre>
+  <pre>{{ loadable | loadedValue | json }}</pre>
 </ld-loadable>

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

@@ -1,30 +1,11 @@
 import { Component } from '@angular/core';
-import { toLoadable } from 'projects/ngx-loadable/src/lib/functions/to-loadable.function';
 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-default-example',
   templateUrl: './default-example.component.html',
 })
 export class DefaultExampleComponent {
-  load$ = new Subject<{ id: number; error: boolean }>();
-  loadable$ = new BehaviorSubject(idle as Loadable<object>);
-
-  constructor(private loadService: LoadService) {
-    this.load$
-      .pipe(
-        switchMap(({ id, error }) =>
-          this.loadService.load(id, error).pipe(toLoadable)
-        )
-      )
-      .subscribe(this.loadable$);
-  }
-
-  load(id: number, error: boolean): void {
-    this.load$.next({ id, error });
-  }
+  loadable: Loadable<object> = idle;
 }

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

@@ -3,10 +3,11 @@ import { NgModule } from '@angular/core';
 
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
 import { DefaultExampleComponent } from './default-example.component';
+import { LoadFormModule } from '../../load-form/load-form.module';
 
 @NgModule({
   declarations: [DefaultExampleComponent],
-  imports: [BrowserModule, LoadableModule],
+  imports: [BrowserModule, LoadFormModule, LoadableModule],
   exports: [DefaultExampleComponent],
 })
 export class DefaultExampleModule {}

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

@@ -4,16 +4,12 @@ <h2>Lightweight example</h2>
   without the usage of the `ld-loadable` component. This might be useful if you
   need more control over the display of the loadable object.
 </p>
-<button (click)="load(42, false)">Load</button>
-<button (click)="load(42, true)">Load with error</button>
-<ng-container
-  *ngIf="loadable$ | async as loadable"
-  [ngSwitch]="loadable | loadingState"
->
+<app-load-form (loadable)="loadable = $event"></app-load-form>
+<ng-container [ngSwitch]="loadable | loadingState">
   <app-loading-spinner *ngSwitchCase="'loading'"></app-loading-spinner>
   <div *ngSwitchCase="'loaded'">
     <h3>Loaded</h3>
-    <pre>{{ loadable.value | json }}</pre>
+    <pre>{{ loadable | loadedValue | json }}</pre>
   </div>
   <ld-loadable-error
     *ngSwitchCase="'error'"

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

@@ -1,30 +1,11 @@
 import { Component } from '@angular/core';
-import { toLoadable } from 'projects/ngx-loadable/src/lib/functions/to-loadable.function';
 import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
 import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
-import { Subject, BehaviorSubject } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-import { LoadService } from '../../load.service';
 
 @Component({
   selector: 'app-lightweight-example',
   templateUrl: './lightweight-example.component.html',
 })
 export class LightweightExampleComponent {
-  load$ = new Subject<{ id: number; error: boolean }>();
-  loadable$ = new BehaviorSubject(idle as Loadable<object>);
-
-  constructor(private loadService: LoadService) {
-    this.load$
-      .pipe(
-        switchMap(({ id, error }) =>
-          this.loadService.load(id, error).pipe(toLoadable)
-        )
-      )
-      .subscribe(this.loadable$);
-  }
-
-  load(id: number, error: boolean): void {
-    this.load$.next({ id, error });
-  }
+  loadable: Loadable<object> = idle;
 }

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

@@ -4,10 +4,11 @@ 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],
-  imports: [BrowserModule, LoadableModule],
+  imports: [BrowserModule, LoadFormModule, LoadableModule],
   exports: [LightweightExampleComponent],
 })
 export class LightweightExampleModule {}