@one-paragon/angular-utilities 1.2.10 → 1.2.12

package/README.md

@@ -1,24 +1,24 @@
-# Angular Utilities
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project AngularUtilities` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project AngularUtilities`.
-> Note: Don't forget to add `--project AngularUtilities` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build AngularUtilities` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build AngularUtilities`, go to the dist folder `cd dist/http-request-state` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test AngularUtilities` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# Angular Utilities
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project AngularUtilities` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project AngularUtilities`.
+> Note: Don't forget to add `--project AngularUtilities` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build AngularUtilities` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build AngularUtilities`, go to the dist folder `cd dist/http-request-state` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test AngularUtilities` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/http-request-state'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-utilities",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,30 +1,16 @@
-{
-  "name": "@one-paragon/angular-utilities",
-  "version": "1.2.10",
-  "peerDependencies": {
-    "@angular/common": "18.2.2",
-    "@angular/core": "18.2.2",
-    "@angular/material": "18.2.2",
-    "@ngrx/component": "18.0.2",
-    "@ngrx/component-store": "18.0.2",
-    "@ngrx/effects": "18.0.2",
-    "@ngrx/store": "18.0.2"
-  },
-  "dependencies": {
-    "tslib": "^2.6.2"
-  },
-  "module": "fesm2022/one-paragon-angular-utilities.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/one-paragon-angular-utilities.mjs",
-      "esm": "./esm2022/one-paragon-angular-utilities.mjs",
-      "default": "./fesm2022/one-paragon-angular-utilities.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@one-paragon/angular-utilities",
+  "version": "1.2.12",
+  "peerDependencies": {
+    "@angular/common": "18.2.2",
+    "@angular/core": "18.2.2",
+    "@angular/material": "18.2.2",
+    "@ngrx/component": "18.0.2",
+    "@ngrx/component-store": "18.0.2",
+    "@ngrx/effects": "18.0.2",
+    "@ngrx/store": "18.0.2"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  }
+}

package/src/action-state/action-state-spinner/action-state-spinner.component.css

@@ -0,0 +1,16 @@
+#blocker {
+  position:fixed;
+  top: 0px;
+  left: 0px;
+  width:100%;
+  height:100%;
+  background-color:rgba(14, 13, 13, 0.411);
+  z-index:999999;
+}
+
+.spinner{
+  position: absolute;
+  top:50%;
+  left:40%;
+  transform: translate(-50%, -50%);
+}

package/src/action-state/action-state-spinner/action-state-spinner.component.html

@@ -0,0 +1,6 @@
+@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){
+  <div id="blocker">
+    <mat-spinner class="spinner" [diameter]="200" />
+  </div>
+}
+

package/src/action-state/action-state-spinner/action-state-spinner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionStateSpinnerComponent } from './action-state-spinner.component';
+
+describe('ActionStateSpinnerComponent', () => {
+  let component: ActionStateSpinnerComponent;
+  let fixture: ComponentFixture<ActionStateSpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionStateSpinnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionStateSpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/action-state/action-state-spinner/action-state-spinner.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ActionStatus, serverStatusTypes } from '../ngrx';
+import { delayOn } from '../../rxjs';
+import { AsyncPipe } from '@angular/common';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'lib-action-state-spinner',
+  templateUrl: './action-state-spinner.component.html',
+  styleUrls: ['./action-state-spinner.component.css'],
+  standalone: true,
+  imports: [AsyncPipe, MatProgressSpinnerModule]
+})
+export class ActionStateSpinnerComponent implements OnInit {
+
+  @Input() status$!: Observable<ActionStatus>;
+  serverActionStatus$!: Observable<ActionStatus>;
+  serverStatusTypes = serverStatusTypes;
+
+  ngOnInit() {
+    this.serverActionStatus$ = this.status$.pipe(
+      delayOn( a => a.status === serverStatusTypes.inProgress , 500)
+    );
+  }
+}

package/src/action-state/action-state-ui/action-state-ui.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { ActionStateSpinnerComponent } from '../action-state-spinner/action-state-spinner.component';
+
+
+@NgModule({
+  imports: [
+    ActionStateSpinnerComponent,
+  ],
+  exports: [
+    ActionStateSpinnerComponent,
+  ]
+})
+export class ActionStateUiModule { }

package/{action-state/index.d.ts → src/action-state/index.ts}

@@ -1,4 +1,8 @@
-export * from './ngrx';
-export * from './ngrx-ext/ngrx-ext.module';
-export * from './action-state-ui/action-state-ui.module';
-export * from './action-state-spinner/action-state-spinner.component';
+/*
+ * Public API Surface of action-state
+ */
+
+export * from './ngrx';
+export * from './ngrx-ext/ngrx-ext.module';
+export * from './action-state-ui/action-state-ui.module';
+export * from './action-state-spinner/action-state-spinner.component';

package/src/action-state/ngrx-ext/ngrx-ext.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { actionStatusReducer } from '../ngrx';
+import { StoreModule } from '@ngrx/store';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    StoreModule.forFeature('ActionStatus', actionStatusReducer),
+  ]
+})
+export class NgrxExtModule { }

package/src/action-state/ngrx.ts

@@ -0,0 +1,69 @@
+import { Action, createFeatureSelector, createSelector } from '@ngrx/store';
+import { createEntityAdapter, EntityState } from '@ngrx/entity';
+import { get } from 'lodash';
+
+// State
+export class AppStatusState {
+  readonly ActionStatusBar!: ActionStatus[];
+}
+
+export interface StatusState {
+  ids: string[];
+  entities: {[id: string]: ActionStatus};
+}
+
+export class ActionStatus {
+  id!: string;
+  displayName?: string;
+  status!: serverStatusTypes;
+  responsePayload?: any;
+}
+
+const InitialState: StatusState = {
+  ids: [],
+  entities: {}
+};
+
+export enum serverStatusTypes {
+  notStarted = 0,
+  inProgress = 1,
+  success = 2,
+  error = 3
+}
+
+// Entity and Selectors
+export const statusAdapter = createEntityAdapter<ActionStatus>();
+export interface State extends EntityState<ActionStatus> {}
+export const initialState: StatusState = statusAdapter.getInitialState(InitialState);
+
+export const getStatusState = createFeatureSelector<State>('ActionStatus');
+export const {
+  selectIds,
+  selectEntities,
+  selectAll,
+  selectTotal
+} = statusAdapter.getSelectors(getStatusState);
+
+export const selectEntity = (id: string) => createSelector(
+  selectEntities,
+  (entities: any)  => entities[id]
+);
+
+// Reducers
+export function actionStatusReducer(state: StatusState = initialState, action: Action) {
+
+  const actionStatus: ActionStatus = get(action, 'payload.actionStatus' ) as any;
+
+  if ( actionStatus ) {
+    if ( state.ids.find(id => id === actionStatus.id) ) {
+      const modifiedObj = {...state.entities[actionStatus.id] };
+      modifiedObj.status = actionStatus.status;
+      modifiedObj.responsePayload = actionStatus.responsePayload;
+      return statusAdapter.upsertOne( modifiedObj, state);
+    } else {
+      return statusAdapter.addOne(actionStatus , state);
+    }
+
+  }
+  return state;
+}

package/src/http-request-state/HttpRequestStateFactory.ts

@@ -0,0 +1,66 @@
+import { DestroyRef, Injectable, OnDestroy, assertInInjectionContext, inject } from "@angular/core";
+import { HttpRequestFactory, RequestStateOptions, RequestCreatorOptions } from "./types";
+import { HttpRequestStateStore } from './HttpRequestStateStore';
+import { Observable } from "rxjs";
+
+@Injectable()
+export class HttpRequestStateFactory  implements OnDestroy {
+
+  constructor() {}
+  ngOnDestroy(): void {
+    this.requestors.forEach( request => request.ngOnDestroy());
+  }
+  private requestors: OnDestroy[] = [];
+
+  create<TParam extends any[], V>( req: HttpRequestFactory<TParam, V>, options?: RequestStateOptions<TParam>) : HttpRequestStateStore<TParam, V>
+  create<TParam extends any[], V, R, T = R>( req: HttpRequestFactory<TParam, V>, project: (v: V) => R , options?: RequestStateOptions<TParam>) : HttpRequestStateStore<TParam, V, T>
+  create<TParam extends any[], V, R = null, T = R extends null ? V : R>( req: HttpRequestFactory<TParam, V>, optionsOrProject?: RequestStateOptions<TParam> | ((v: V) => R), options?: RequestStateOptions<TParam> ) : HttpRequestStateStore<TParam, V, R, T> {
+    const requestor = (typeof(optionsOrProject) === 'function' ?  new HttpRequestStateStore<TParam, V, R, T>(req, options, optionsOrProject) : new HttpRequestStateStore<TParam, V, R, T>(req, options));
+    this.requestors.push(requestor);
+    return requestor;
+  }
+
+  createHttpClient<T>( r: (o: Observable<T> ) => Observable<T> , options?: RequestStateOptions<any> )  {
+    const requestor = new HttpRequestStateStore(r, options);
+    this.requestors.push(requestor);
+    return requestor;
+  }
+
+}
+
+export function createRequestor<TParam extends any[], V>( req: HttpRequestFactory<TParam, V>, options?: RequestCreatorOptions<TParam>) : HttpRequestStateStore<TParam, V>
+export function createRequestor<TParam extends any[], V, R, T = R>( req: HttpRequestFactory<TParam, V>, project: (v: V) => R , options?: RequestCreatorOptions<TParam>) : HttpRequestStateStore<TParam, V, T>
+export function createRequestor<TParam extends any[], V, R = null, T = R extends null ? V : R>( req: HttpRequestFactory<TParam, V>, optionsOrProject?: RequestCreatorOptions<TParam> | ((v: V) => R), options?: RequestCreatorOptions<TParam> ) : HttpRequestStateStore<TParam, V, R, T>{
+
+  const ops  = isFunction(optionsOrProject) ? options : optionsOrProject;
+
+  const destroyRef = getDestroyRef(ops);
+
+  const requestStore = typeof(optionsOrProject) === 'function' ?  
+    new HttpRequestStateStore<TParam, V, R, T>(req, options, optionsOrProject)
+    : new HttpRequestStateStore<TParam, V, R, T>(req, optionsOrProject);
+
+  destroyRef.onDestroy(() => requestStore?.ngOnDestroy());
+
+  return requestStore;
+}
+
+function isFunction(value: any): value is Function {
+  return typeof value === 'function';
+}
+
+function getDestroyRef(options?: RequestCreatorOptions<any>){
+  const providedInjector = options?.injector;
+
+  if(!providedInjector){
+    try {
+      assertInInjectionContext(createRequestor);
+    } catch (error) {
+      throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
+    }
+  }
+
+  const destroyRef = providedInjector?.get(DestroyRef) || inject(DestroyRef);
+
+  return destroyRef;
+}

package/src/http-request-state/HttpRequestStateStore.ts

@@ -0,0 +1,173 @@
+import { Observable, of, Subscription } from 'rxjs';
+import { ComponentStore } from '@ngrx/component-store';
+import { HttpRequestFactory, HttpRequestStrategy, HttpRequestStatus, HttpRequestState, RequestStateOptions, HttpRequestStateCancelled } from './types';
+import { createFailure, createSuccess, inProgress, isErrorState, isSuccessOrErrorState, isSuccessState, notStarted } from './helpers';
+import { concatMap, filter, map, mergeMap, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { HttpErrorResponse } from '@angular/common/http';
+import { mapError } from '../rxjs/mapError';
+import { defaultShareReplay } from '../rxjs/defaultShareReplay';
+import { computed, Directive, Injector, isSignal, Signal } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { notNull } from '../rxjs';
+
+export interface RequestResponse<TParam extends any[], T> {
+  requestParams: [...TParam];
+  response: HttpRequestState<T>;
+}
+
+@Directive()
+export class HttpRequestStateStore<TParam extends any[], V, R = null, T = R extends null ? V : R> extends ComponentStore<RequestResponse<TParam, T>> {
+    private options?: RequestStateOptions;
+    private project?: (v: V) => R;
+    private req: HttpRequestFactory<TParam, V>;
+    private injector?: Injector;
+    constructor(req: HttpRequestFactory<TParam, V> ,options?: RequestStateOptions<TParam>, project?: (v: V) => R) {
+      super({ requestParams: null as any, response: notStarted });
+      this.project = project;
+      this.options = options;
+      this.injector = options?.injector;
+      this.req = req;
+      this.request = (this.options?.strategy === HttpRequestStrategy.singleUse) ? this.singleUseRequest :  this.flattenedRequest;
+
+      if(options?.autoRequestWith){
+        this.request(...options.autoRequestWith);
+      }
+    }
+
+    reset() {
+      this.setState({ requestParams:null as any, response: notStarted });
+    }
+
+    private flatteningStrategy = () => {
+      if(this.options?.strategy === HttpRequestStrategy.concurrent)
+        return mergeMap( (params: [...TParam]) => this.createRequest(...params));
+      if(this.options?.strategy === HttpRequestStrategy.sequential)
+        return concatMap( (params: [...TParam]) => this.createRequest(...params));
+      return switchMap( (params: [...TParam]) => ((params[0] as any) instanceof CancellationToken) ?
+        of({ requestParams: params[0], response: { status: HttpRequestStatus.cancelled } as HttpRequestStateCancelled } ) : this.createRequest(...params) );
+    }
+
+    private requestEffect: (value: [...TParam] ) => Subscription = this.effect((obs: Observable<[...TParam]>) => {
+      return (obs).pipe(
+        this.flatteningStrategy(),
+        tap<RequestResponse<TParam, T>>(state => this.setState(state)),
+      );
+    });
+
+    private flattenedRequest = (...value: [...TParam]) => {
+      return this.requestEffect(value) as Subscription;
+    }
+    private singleUseRequest = (...value: [...TParam]) => {
+      if (this.get().response.status !== HttpRequestStatus.notStarted) {
+        throw new Error("state can not be reused. either reset the state by calling reset() or use a state requester that allows concurrent requests.");
+      }
+      return this.requestEffect(value) as Subscription;
+    }
+
+    selectHttpState$ = this.state$.pipe(map(a => a.response));
+
+    selectStatus$ = this.selectHttpState$.pipe(map(a => a.status));
+
+    selectError$ = this.state$.pipe(
+      map(r => r.response),
+      filter(isErrorState),
+      map( state => state.error)
+    );
+
+    selectResponse$: Observable<T> = this.state$.pipe(
+      map(r => r.response),
+      filter(isSuccessState),
+      map( state => state.body)
+    );
+    selectSuccessOrError$ = this.state$.pipe(
+      map(r => r.response),
+      filter(isSuccessOrErrorState),
+      map( () => null)
+    );
+
+    errorHandled = false;
+    onError( cb: (error: HttpErrorResponse) => void) {
+      this.errorHandled = true;
+      this.on(this.selectError$, cb);
+      return this;
+    }
+
+    onSuccess( cb: (body?: T) => void) {
+      this.on(this.selectResponse$, cb);
+      return this;
+    }
+
+    onSuccessOrError(cb: () => void){
+      this.on(this.selectSuccessOrError$, cb);
+      return this;
+    }
+
+    onSuccessWithRequest(func: (state: {
+      requestParams: [...TParam];
+      body: T;
+    }) => void) {
+      this.onUpdate(({ requestParams, response }) => {
+        if(isSuccessState(response)){
+          func({requestParams,body: response.body});
+        }
+      });
+      return this;
+    }
+
+    onErrorWithRequest(func: (state: {
+      error: HttpErrorResponse;
+      requestParams: [...TParam];
+    }) => void) {
+      this.onUpdate( ({ requestParams, response }) => {
+        if(isErrorState(response)){
+          func({ requestParams, error: response.error });
+        }
+      });
+      return this;
+    }
+
+    private createRequest(...params: [...TParam]): Observable<RequestResponse<TParam, T>> {
+      return this.req(...params).pipe(
+        map(re => createSuccess((this.project ? this.project(re) : re) as T)),
+        mapError(createFailure),
+        startWith(inProgress),
+        map( state => ({ requestParams: params, response: state })),
+        defaultShareReplay()
+      );
+    }
+
+    onUpdate(func: (state: {
+      requestParams: [...TParam];
+      response: HttpRequestState<T>;
+    }) => void) {
+      this.on(this.state$, func);
+    }
+
+    on = <V>(srcObservable: Observable<V>, func: (obj: V) => void): Subscription => {
+      return this.effect((src: Observable<V>) => {
+        return src.pipe(tap(func));
+      })(srcObservable) as Subscription;
+    }
+
+    request: (...value:  [...TParam] ) => Subscription;
+
+    ngOnDestroy() {
+      super.ngOnDestroy();
+    }
+
+    requestWith = (params: Observable<[...TParam]> | Signal<[...TParam]>) => {
+      if(isSignal(params)){
+        params = toObservable(params, { injector: this.injector }).pipe(notNull());
+      }
+      params.pipe(takeUntil(this.destroy$)).subscribe((p) => this.request(...p));
+      return this;
+    }
+  }
+  export class CancellationToken {}
+  export function wrapInArr<T>(sig: Signal<T>) : Signal<[T]>;
+  export function wrapInArr<T>(obs: Observable<T>): Observable<[T]>;
+  export function wrapInArr<T>(sigOrObs: Signal<T> | Observable<T>){
+    return isSignal(sigOrObs) ?
+    computed(() => [sigOrObs()])
+    : sigOrObs.pipe(map(a => [a]));
+  }

package/src/http-request-state/directives/HttpStateDirectiveBase.ts

@@ -0,0 +1,29 @@
+import { Directive, inject, Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { HttpRequestState } from '../types';
+import { HttpRequestStateDirective } from './request-state-directive';
+
+@Directive()
+export abstract class HttpStateDirectiveBase<V, R = null> {
+  hasView = false;
+  private injector = inject(Injector);
+  protected templateRef = inject(TemplateRef<{ $implicit: R extends null ? V : R }>);
+  protected viewContainer = inject(ViewContainerRef);
+  ngOnInit() {
+    const parent = this.injector.get(HttpRequestStateDirective);
+    if (parent == null) {
+      throw new Error('You can only use an http state directive as a child of the httpRequestState directive.');
+    }
+    parent.hooks.push(this.baseRender);
+    this.baseRender(parent.ViewContext.state);
+  }
+
+  private baseRender = (state: HttpRequestState): void => {
+    if (this.hasView) {
+      this.viewContainer.clear();
+      this.hasView = false;
+    }
+    this.hasView = this.render(state);
+  }
+
+  abstract render: (state: HttpRequestState) => boolean;
+}

package/src/http-request-state/directives/http-error-state-directive.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { isErrorState } from '../helpers';
+import { HttpRequestState } from '../types';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+
+@Directive({ selector: '[httpErrorState]', standalone: true })
+export class HttpErrorStateDirective<V, R = null> extends HttpStateDirectiveBase<V, R> {
+
+
+  render = (state: HttpRequestState<any>) => {
+    if (isErrorState(state)) {
+      this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: state.error });
+      return true;
+    }
+    return false;
+  };
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+}

package/src/http-request-state/directives/http-inProgress-state-directive.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+import { HttpRequestState, HttpRequestStatus } from '../types'
+
+
+@Directive({ selector: '[httpInProgressState]', standalone: true })
+export class HttpInProgressStateDirective<V, R = null>  extends HttpStateDirectiveBase<V, R> {
+    render = (state: HttpRequestState<any>) => {
+        if(state.status === HttpRequestStatus.inProgress){
+            this.viewContainer.createEmbeddedView(this.templateRef );
+            return true;
+        }
+        return false;
+    };
+
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}