Move template context switch case to TS

fboeller · Mar 2, 2021 · afaac6f · afaac6f
1 parent 20d347e
commit afaac6f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 29 deletions.
diff --git a/projects/ngx-loadable/src/lib/loadable/loadable/loadable.component.html b/projects/ngx-loadable/src/lib/loadable/loadable/loadable.component.html
@@ -1,29 +1,7 @@
-<ng-container [ngSwitch]="loadable | loadingState">
-  <ng-container *ngSwitchCase="'Idle'">
-    <ng-container
-      *ngTemplateOutlet="templateRef ? templateRef : content"
-    ></ng-container>
-  </ng-container>
-  <ng-container *ngSwitchCase="'Loading'">
-    <ng-container
-      *ngTemplateOutlet="templateRef ? templateRef : content"
-    ></ng-container>
-  </ng-container>
-  <ng-container *ngSwitchCase="'Loaded'">
-    <ng-container
-      *ngTemplateOutlet="
-        templateRef ? templateRef : content;
-        context: { value: loadable.value }
-      "
-    ></ng-container>
-  </ng-container>
-  <ng-container *ngSwitchCase="'Error'">
-    <ng-container
-      *ngTemplateOutlet="
-        templateRef ? templateRef : content;
-        context: { error: loadable.error }
-      "
-    ></ng-container
-  ></ng-container>
-</ng-container>
+<ng-container
+  *ngTemplateOutlet="
+    templateRef ? templateRef : content;
+    context: templateContext
+  "
+></ng-container>
 <ng-template #content></ng-template>
diff --git a/projects/ngx-loadable/src/lib/loadable/loadable/loadable.component.ts b/projects/ngx-loadable/src/lib/loadable/loadable/loadable.component.ts
@@ -14,7 +14,12 @@ import {
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators';
-import { getLoadingState, isLoading } from '../../loadable.functions';
+import {
+  getLoadingState,
+  hasErrored,
+  isLoaded,
+  isLoading,
+} from '../../loadable.functions';
 import { Loadable } from '../../loadable.type';
 import { DEFAULT_LOADING_COMPONENT } from '../loadable.tokens';
 
@@ -52,6 +57,16 @@ export class LoadableComponent implements OnChanges, OnDestroy {
     }
   }
 
+  get templateContext(): unknown {
+    if (isLoaded(this.loadable)) {
+      return { value: this.loadable.value };
+    } else if (hasErrored(this.loadable)) {
+      return { error: this.loadable.error };
+    } else {
+      return undefined;
+    }
+  }
+
   constructor(
     resolver: ComponentFactoryResolver,
     @Inject(DEFAULT_LOADING_COMPONENT) defaultLoadingComponent: Type<unknown>