@klippa/ngx-async-template - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

bundles/klippa-ngx-async-template.umd.js

@@ -13,3 +13,3 @@ (function (global, factory) {
     AsyncAllStatesComponent.decorators = [
-        { type: core.Directive, args: [{ selector: '[app-async-all]' },] }
+        { type: core.Directive, args: [{ selector: '[ngx-async-all]' },] }
     ];
@@ -22,3 +22,3 @@ var AsyncInactiveComponent = /** @class */ (function () {
     AsyncInactiveComponent.decorators = [
-        { type: core.Directive, args: [{ selector: '[app-async-inactive]' },] }
+        { type: core.Directive, args: [{ selector: '[ngx-async-inactive]' },] }
     ];
@@ -31,3 +31,3 @@ var AsyncPendingComponent = /** @class */ (function () {
     AsyncPendingComponent.decorators = [
-        { type: core.Directive, args: [{ selector: '[app-async-pending]' },] }
+        { type: core.Directive, args: [{ selector: '[ngx-async-pending]' },] }
     ];
@@ -40,3 +40,3 @@ var AsyncSuccessComponent = /** @class */ (function () {
     AsyncSuccessComponent.decorators = [
-        { type: core.Directive, args: [{ selector: '[app-async-success]' },] }
+        { type: core.Directive, args: [{ selector: '[ngx-async-success]' },] }
     ];
@@ -49,3 +49,3 @@ var AsyncErrorComponent = /** @class */ (function () {
     AsyncErrorComponent.decorators = [
-        { type: core.Directive, args: [{ selector: '[app-async-error]' },] }
+        { type: core.Directive, args: [{ selector: '[ngx-async-error]' },] }
     ];
@@ -52,0 +52,0 @@ var NgxAsyncTemplateComponent = /** @class */ (function () {

bundles/klippa-ngx-async-template.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@klippa/ngx-async-template",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).klippa=e.klippa||{},e.klippa["ngx-async-template"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var r=function(){};r.decorators=[{type:t.Directive,args:[{selector:"[app-async-all]"}]}];var o=function(){};o.decorators=[{type:t.Directive,args:[{selector:"[app-async-inactive]"}]}];var a=function(){};a.decorators=[{type:t.Directive,args:[{selector:"[app-async-pending]"}]}];var s=function(){};s.decorators=[{type:t.Directive,args:[{selector:"[app-async-success]"}]}];var i=function(){};i.decorators=[{type:t.Directive,args:[{selector:"[app-async-error]"}]}];var p=function(){function e(){this.promise=null,this.promiseStatus="inactive"}return e.prototype.ngOnChanges=function(){var e=this;this.promiseValue=null,this.promise?(this.promiseStatus="pending",this.promise.then((function(t){e.promiseStatus="success",e.promiseValue=t}),(function(t){e.promiseStatus="error",e.promiseErrors=t}))):this.promiseStatus="inactive"},e}();p.decorators=[{type:t.Component,args:[{selector:"ngx-async-template",template:'<ng-container>\n  <ng-container *ngFor="let tpl of allStates?.toArray()" [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ status: promiseStatus, value: promiseValue }"></ng-container>\n  <ng-container *ngIf="promiseStatus === \'inactive\'" >\n    <ng-container *ngFor="let tpl of inactive?.toArray()" [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ status: promiseStatus }"></ng-container>\n  </ng-container>\n  <ng-container *ngIf="promiseStatus === \'pending\'">\n    <ng-container *ngFor="let tpl of pending?.toArray()" [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ status: promiseStatus }"></ng-container>\n  </ng-container>\n  <ng-container *ngIf="promiseStatus === \'success\'">\n    <ng-container\n      *ngFor="let tpl of success?.toArray()"\n      [ngTemplateOutlet]="tpl"\n      [ngTemplateOutletContext]="{ value: promiseValue, status: promiseStatus }"\n    ></ng-container>\n  </ng-container>\n  <ng-container *ngIf="promiseStatus === \'error\'">\n    <ng-container\n      *ngFor="let tpl of error?.toArray()"\n      [ngTemplateOutlet]="tpl"\n      [ngTemplateOutletContext]="{ errorMessages: promiseErrors, status: promiseStatus }"\n    ></ng-container>\n  </ng-container>\n</ng-container>\n',styles:[":host { display: block; }"]}]}],p.ctorParameters=function(){return[]},p.propDecorators={promise:[{type:t.Input}],allStates:[{type:t.ContentChildren,args:[r,{read:t.TemplateRef}]}],inactive:[{type:t.ContentChildren,args:[o,{read:t.TemplateRef}]}],pending:[{type:t.ContentChildren,args:[a,{read:t.TemplateRef}]}],success:[{type:t.ContentChildren,args:[s,{read:t.TemplateRef}]}],error:[{type:t.ContentChildren,args:[i,{read:t.TemplateRef}]}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[p,r,o,a,s,i],exports:[p,r,o,a,s,i]}]}],e.AsyncAllStatesComponent=r,e.AsyncErrorComponent=i,e.AsyncInactiveComponent=o,e.AsyncPendingComponent=a,e.AsyncSuccessComponent=s,e.NgxAsyncTemplateComponent=p,e.NgxAsyncTemplateModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@klippa/ngx-async-template",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).klippa=e.klippa||{},e.klippa["ngx-async-template"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var r=function(){};r.decorators=[{type:t.Directive,args:[{selector:"[ngx-async-all]"}]}];var o=function(){};o.decorators=[{type:t.Directive,args:[{selector:"[ngx-async-inactive]"}]}];var a=function(){};a.decorators=[{type:t.Directive,args:[{selector:"[ngx-async-pending]"}]}];var s=function(){};s.decorators=[{type:t.Directive,args:[{selector:"[ngx-async-success]"}]}];var i=function(){};i.decorators=[{type:t.Directive,args:[{selector:"[ngx-async-error]"}]}];var p=function(){function e(){this.promise=null,this.promiseStatus="inactive"}return e.prototype.ngOnChanges=function(){var e=this;this.promiseValue=null,this.promise?(this.promiseStatus="pending",this.promise.then((function(t){e.promiseStatus="success",e.promiseValue=t}),(function(t){e.promiseStatus="error",e.promiseErrors=t}))):this.promiseStatus="inactive"},e}();p.decorators=[{type:t.Component,args:[{selector:"ngx-async-template",template:'<ng-container>\n  <ng-container *ngFor="let tpl of allStates?.toArray()" [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ status: promiseStatus, value: promiseValue }"></ng-container>\n  <ng-container *ngIf="promiseStatus === \'inactive\'" >\n    <ng-container *ngFor="let tpl of inactive?.toArray()" [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ status: promiseStatus }"></ng-container>\n  </ng-container>\n  <ng-container *ngIf="promiseStatus === \'pending\'">\n    <ng-container *ngFor="let tpl of pending?.toArray()" [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ status: promiseStatus }"></ng-container>\n  </ng-container>\n  <ng-container *ngIf="promiseStatus === \'success\'">\n    <ng-container\n      *ngFor="let tpl of success?.toArray()"\n      [ngTemplateOutlet]="tpl"\n      [ngTemplateOutletContext]="{ value: promiseValue, status: promiseStatus }"\n    ></ng-container>\n  </ng-container>\n  <ng-container *ngIf="promiseStatus === \'error\'">\n    <ng-container\n      *ngFor="let tpl of error?.toArray()"\n      [ngTemplateOutlet]="tpl"\n      [ngTemplateOutletContext]="{ errorMessages: promiseErrors, status: promiseStatus }"\n    ></ng-container>\n  </ng-container>\n</ng-container>\n',styles:[":host { display: block; }"]}]}],p.ctorParameters=function(){return[]},p.propDecorators={promise:[{type:t.Input}],allStates:[{type:t.ContentChildren,args:[r,{read:t.TemplateRef}]}],inactive:[{type:t.ContentChildren,args:[o,{read:t.TemplateRef}]}],pending:[{type:t.ContentChildren,args:[a,{read:t.TemplateRef}]}],success:[{type:t.ContentChildren,args:[s,{read:t.TemplateRef}]}],error:[{type:t.ContentChildren,args:[i,{read:t.TemplateRef}]}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[p,r,o,a,s,i],exports:[p,r,o,a,s,i]}]}],e.AsyncAllStatesComponent=r,e.AsyncErrorComponent=i,e.AsyncInactiveComponent=o,e.AsyncPendingComponent=a,e.AsyncSuccessComponent=s,e.NgxAsyncTemplateComponent=p,e.NgxAsyncTemplateModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=klippa-ngx-async-template.umd.min.js.map

esm2015/lib/ngx-async-template.component.js

@@ -5,3 +5,3 @@ import { Component, ContentChildren, Directive, Input, TemplateRef } from '@angular/core';
 AsyncAllStatesComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-all]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-all]' },] }
 ];
@@ -11,3 +11,3 @@ export class AsyncInactiveComponent {
 AsyncInactiveComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-inactive]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-inactive]' },] }
 ];
@@ -17,3 +17,3 @@ export class AsyncPendingComponent {
 AsyncPendingComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-pending]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-pending]' },] }
 ];
@@ -23,3 +23,3 @@ export class AsyncSuccessComponent {
 AsyncSuccessComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-success]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-success]' },] }
 ];
@@ -29,3 +29,3 @@ export class AsyncErrorComponent {
 AsyncErrorComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-error]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-error]' },] }
 ];
@@ -70,2 +70,2 @@ export class NgxAsyncTemplateComponent {
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWFzeW5jLXRlbXBsYXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvbmd4LWFzeW5jLXRlbXBsYXRlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFhLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUdyRyxNQUFNLE9BQU8sdUJBQXVCOzs7WUFEbkMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixFQUFFOztBQUcxQyxNQUFNLE9BQU8sc0JBQXNCOzs7WUFEbEMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLHNCQUFzQixFQUFFOztBQUcvQyxNQUFNLE9BQU8scUJBQXFCOzs7WUFEakMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLHFCQUFxQixFQUFFOztBQUc5QyxNQUFNLE9BQU8scUJBQXFCOzs7WUFEakMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLHFCQUFxQixFQUFFOztBQUc5QyxNQUFNLE9BQU8sbUJBQW1COzs7WUFEL0IsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLG1CQUFtQixFQUFFOztBQVE1QyxNQUFNLE9BQU8seUJBQXlCO0lBWXBDO1FBWFMsWUFBTyxHQUFpQixJQUFJLENBQUM7UUFDL0Isa0JBQWEsR0FBaUQsVUFBVSxDQUFDO0lBVWpFLENBQUM7SUFFaEIsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxhQUFhLEdBQUcsVUFBVSxDQUFDO1NBQ2pDO2FBQU07WUFDTCxJQUFJLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztZQUMvQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FDZixDQUFDLEdBQUcsRUFBRSxFQUFFO2dCQUNOLElBQUksQ0FBQyxhQUFhLEdBQUcsU0FBUyxDQUFDO2dCQUMvQixJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsQ0FBQztZQUMxQixDQUFDLEVBQ0QsQ0FBQyxHQUFHLEVBQUUsRUFBRTtnQkFDTixJQUFJLENBQUMsYUFBYSxHQUFHLE9BQU8sQ0FBQztnQkFDN0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxHQUFHLENBQUM7WUFDM0IsQ0FBQyxDQUNGLENBQUM7U0FDSDtJQUNILENBQUM7OztZQXBDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsaXZDQUFrRDt5QkFDekMsMkJBQTJCO2FBQ3JDOzs7O3NCQUVFLEtBQUs7d0JBS0wsZUFBZSxTQUFDLHVCQUF1QixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTt1QkFDOUQsZUFBZSxTQUFDLHNCQUFzQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtzQkFDN0QsZUFBZSxTQUFDLHFCQUFxQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtzQkFDNUQsZUFBZSxTQUFDLHFCQUFxQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtvQkFDNUQsZUFBZSxTQUFDLG1CQUFtQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBEaXJlY3RpdmUsIElucHV0LCBRdWVyeUxpc3QsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ1thcHAtYXN5bmMtYWxsXScgfSlcbmV4cG9ydCBjbGFzcyBBc3luY0FsbFN0YXRlc0NvbXBvbmVudCB7fVxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW2FwcC1hc3luYy1pbmFjdGl2ZV0nIH0pXG5leHBvcnQgY2xhc3MgQXN5bmNJbmFjdGl2ZUNvbXBvbmVudCB7fVxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW2FwcC1hc3luYy1wZW5kaW5nXScgfSlcbmV4cG9ydCBjbGFzcyBBc3luY1BlbmRpbmdDb21wb25lbnQge31cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ1thcHAtYXN5bmMtc3VjY2Vzc10nIH0pXG5leHBvcnQgY2xhc3MgQXN5bmNTdWNjZXNzQ29tcG9uZW50IHt9XG5ARGlyZWN0aXZlKHsgc2VsZWN0b3I6ICdbYXBwLWFzeW5jLWVycm9yXScgfSlcbmV4cG9ydCBjbGFzcyBBc3luY0Vycm9yQ29tcG9uZW50IHt9XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1hc3luYy10ZW1wbGF0ZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9uZ3gtYXN5bmMtdGVtcGxhdGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFsnOmhvc3QgeyBkaXNwbGF5OiBibG9jazsgfSddLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hBc3luY1RlbXBsYXRlQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcHJvbWlzZTogUHJvbWlzZTxhbnk+ID0gbnVsbDtcbiAgcHVibGljIHByb21pc2VTdGF0dXM6ICdpbmFjdGl2ZScgfCAncGVuZGluZycgfCAnc3VjY2VzcycgfCAnZXJyb3InID0gJ2luYWN0aXZlJztcbiAgcHVibGljIHByb21pc2VWYWx1ZTogYW55O1xuICBwdWJsaWMgcHJvbWlzZUVycm9yczogYW55O1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oQXN5bmNBbGxTdGF0ZXNDb21wb25lbnQsIHsgcmVhZDogVGVtcGxhdGVSZWYgfSkgYWxsU3RhdGVzOiBRdWVyeUxpc3Q8VGVtcGxhdGVSZWY8YW55Pj47XG4gIEBDb250ZW50Q2hpbGRyZW4oQXN5bmNJbmFjdGl2ZUNvbXBvbmVudCwgeyByZWFkOiBUZW1wbGF0ZVJlZiB9KSBpbmFjdGl2ZTogUXVlcnlMaXN0PFRlbXBsYXRlUmVmPGFueT4+O1xuICBAQ29udGVudENoaWxkcmVuKEFzeW5jUGVuZGluZ0NvbXBvbmVudCwgeyByZWFkOiBUZW1wbGF0ZVJlZiB9KSBwZW5kaW5nOiBRdWVyeUxpc3Q8VGVtcGxhdGVSZWY8YW55Pj47XG4gIEBDb250ZW50Q2hpbGRyZW4oQXN5bmNTdWNjZXNzQ29tcG9uZW50LCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIHN1Y2Nlc3M6IFF1ZXJ5TGlzdDxUZW1wbGF0ZVJlZjxhbnk+PjtcbiAgQENvbnRlbnRDaGlsZHJlbihBc3luY0Vycm9yQ29tcG9uZW50LCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIGVycm9yOiBRdWVyeUxpc3Q8VGVtcGxhdGVSZWY8YW55Pj47XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMucHJvbWlzZVZhbHVlID0gbnVsbDtcbiAgICBpZiAoIXRoaXMucHJvbWlzZSkge1xuICAgICAgdGhpcy5wcm9taXNlU3RhdHVzID0gJ2luYWN0aXZlJztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5wcm9taXNlU3RhdHVzID0gJ3BlbmRpbmcnO1xuICAgICAgdGhpcy5wcm9taXNlLnRoZW4oXG4gICAgICAgIChyZXMpID0+IHtcbiAgICAgICAgICB0aGlzLnByb21pc2VTdGF0dXMgPSAnc3VjY2Vzcyc7XG4gICAgICAgICAgdGhpcy5wcm9taXNlVmFsdWUgPSByZXM7XG4gICAgICAgIH0sXG4gICAgICAgIChyZXMpID0+IHtcbiAgICAgICAgICB0aGlzLnByb21pc2VTdGF0dXMgPSAnZXJyb3InO1xuICAgICAgICAgIHRoaXMucHJvbWlzZUVycm9ycyA9IHJlcztcbiAgICAgICAgfVxuICAgICAgKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWFzeW5jLXRlbXBsYXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvbmd4LWFzeW5jLXRlbXBsYXRlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFhLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUdyRyxNQUFNLE9BQU8sdUJBQXVCOzs7WUFEbkMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixFQUFFOztBQUcxQyxNQUFNLE9BQU8sc0JBQXNCOzs7WUFEbEMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLHNCQUFzQixFQUFFOztBQUcvQyxNQUFNLE9BQU8scUJBQXFCOzs7WUFEakMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLHFCQUFxQixFQUFFOztBQUc5QyxNQUFNLE9BQU8scUJBQXFCOzs7WUFEakMsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLHFCQUFxQixFQUFFOztBQUc5QyxNQUFNLE9BQU8sbUJBQW1COzs7WUFEL0IsU0FBUyxTQUFDLEVBQUUsUUFBUSxFQUFFLG1CQUFtQixFQUFFOztBQVE1QyxNQUFNLE9BQU8seUJBQXlCO0lBWXBDO1FBWFMsWUFBTyxHQUFpQixJQUFJLENBQUM7UUFDL0Isa0JBQWEsR0FBaUQsVUFBVSxDQUFDO0lBVWpFLENBQUM7SUFFaEIsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxhQUFhLEdBQUcsVUFBVSxDQUFDO1NBQ2pDO2FBQU07WUFDTCxJQUFJLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztZQUMvQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FDZixDQUFDLEdBQUcsRUFBRSxFQUFFO2dCQUNOLElBQUksQ0FBQyxhQUFhLEdBQUcsU0FBUyxDQUFDO2dCQUMvQixJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsQ0FBQztZQUMxQixDQUFDLEVBQ0QsQ0FBQyxHQUFHLEVBQUUsRUFBRTtnQkFDTixJQUFJLENBQUMsYUFBYSxHQUFHLE9BQU8sQ0FBQztnQkFDN0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxHQUFHLENBQUM7WUFDM0IsQ0FBQyxDQUNGLENBQUM7U0FDSDtJQUNILENBQUM7OztZQXBDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsaXZDQUFrRDt5QkFDekMsMkJBQTJCO2FBQ3JDOzs7O3NCQUVFLEtBQUs7d0JBS0wsZUFBZSxTQUFDLHVCQUF1QixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTt1QkFDOUQsZUFBZSxTQUFDLHNCQUFzQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtzQkFDN0QsZUFBZSxTQUFDLHFCQUFxQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtzQkFDNUQsZUFBZSxTQUFDLHFCQUFxQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtvQkFDNUQsZUFBZSxTQUFDLG1CQUFtQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBEaXJlY3RpdmUsIElucHV0LCBRdWVyeUxpc3QsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ1tuZ3gtYXN5bmMtYWxsXScgfSlcbmV4cG9ydCBjbGFzcyBBc3luY0FsbFN0YXRlc0NvbXBvbmVudCB7fVxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW25neC1hc3luYy1pbmFjdGl2ZV0nIH0pXG5leHBvcnQgY2xhc3MgQXN5bmNJbmFjdGl2ZUNvbXBvbmVudCB7fVxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW25neC1hc3luYy1wZW5kaW5nXScgfSlcbmV4cG9ydCBjbGFzcyBBc3luY1BlbmRpbmdDb21wb25lbnQge31cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ1tuZ3gtYXN5bmMtc3VjY2Vzc10nIH0pXG5leHBvcnQgY2xhc3MgQXN5bmNTdWNjZXNzQ29tcG9uZW50IHt9XG5ARGlyZWN0aXZlKHsgc2VsZWN0b3I6ICdbbmd4LWFzeW5jLWVycm9yXScgfSlcbmV4cG9ydCBjbGFzcyBBc3luY0Vycm9yQ29tcG9uZW50IHt9XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1hc3luYy10ZW1wbGF0ZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9uZ3gtYXN5bmMtdGVtcGxhdGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFsnOmhvc3QgeyBkaXNwbGF5OiBibG9jazsgfSddLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hBc3luY1RlbXBsYXRlQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcHJvbWlzZTogUHJvbWlzZTxhbnk+ID0gbnVsbDtcbiAgcHVibGljIHByb21pc2VTdGF0dXM6ICdpbmFjdGl2ZScgfCAncGVuZGluZycgfCAnc3VjY2VzcycgfCAnZXJyb3InID0gJ2luYWN0aXZlJztcbiAgcHVibGljIHByb21pc2VWYWx1ZTogYW55O1xuICBwdWJsaWMgcHJvbWlzZUVycm9yczogYW55O1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oQXN5bmNBbGxTdGF0ZXNDb21wb25lbnQsIHsgcmVhZDogVGVtcGxhdGVSZWYgfSkgYWxsU3RhdGVzOiBRdWVyeUxpc3Q8VGVtcGxhdGVSZWY8YW55Pj47XG4gIEBDb250ZW50Q2hpbGRyZW4oQXN5bmNJbmFjdGl2ZUNvbXBvbmVudCwgeyByZWFkOiBUZW1wbGF0ZVJlZiB9KSBpbmFjdGl2ZTogUXVlcnlMaXN0PFRlbXBsYXRlUmVmPGFueT4+O1xuICBAQ29udGVudENoaWxkcmVuKEFzeW5jUGVuZGluZ0NvbXBvbmVudCwgeyByZWFkOiBUZW1wbGF0ZVJlZiB9KSBwZW5kaW5nOiBRdWVyeUxpc3Q8VGVtcGxhdGVSZWY8YW55Pj47XG4gIEBDb250ZW50Q2hpbGRyZW4oQXN5bmNTdWNjZXNzQ29tcG9uZW50LCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIHN1Y2Nlc3M6IFF1ZXJ5TGlzdDxUZW1wbGF0ZVJlZjxhbnk+PjtcbiAgQENvbnRlbnRDaGlsZHJlbihBc3luY0Vycm9yQ29tcG9uZW50LCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIGVycm9yOiBRdWVyeUxpc3Q8VGVtcGxhdGVSZWY8YW55Pj47XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMucHJvbWlzZVZhbHVlID0gbnVsbDtcbiAgICBpZiAoIXRoaXMucHJvbWlzZSkge1xuICAgICAgdGhpcy5wcm9taXNlU3RhdHVzID0gJ2luYWN0aXZlJztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5wcm9taXNlU3RhdHVzID0gJ3BlbmRpbmcnO1xuICAgICAgdGhpcy5wcm9taXNlLnRoZW4oXG4gICAgICAgIChyZXMpID0+IHtcbiAgICAgICAgICB0aGlzLnByb21pc2VTdGF0dXMgPSAnc3VjY2Vzcyc7XG4gICAgICAgICAgdGhpcy5wcm9taXNlVmFsdWUgPSByZXM7XG4gICAgICAgIH0sXG4gICAgICAgIChyZXMpID0+IHtcbiAgICAgICAgICB0aGlzLnByb21pc2VTdGF0dXMgPSAnZXJyb3InO1xuICAgICAgICAgIHRoaXMucHJvbWlzZUVycm9ycyA9IHJlcztcbiAgICAgICAgfVxuICAgICAgKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==

fesm2015/klippa-ngx-async-template.js

@@ -7,3 +7,3 @@ import { Directive, Component, Input, ContentChildren, TemplateRef, NgModule } from '@angular/core';
 AsyncAllStatesComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-all]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-all]' },] }
 ];
@@ -13,3 +13,3 @@ class AsyncInactiveComponent {
 AsyncInactiveComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-inactive]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-inactive]' },] }
 ];
@@ -19,3 +19,3 @@ class AsyncPendingComponent {
 AsyncPendingComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-pending]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-pending]' },] }
 ];
@@ -25,3 +25,3 @@ class AsyncSuccessComponent {
 AsyncSuccessComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-success]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-success]' },] }
 ];
@@ -31,3 +31,3 @@ class AsyncErrorComponent {
 AsyncErrorComponent.decorators = [
-    { type: Directive, args: [{ selector: '[app-async-error]' },] }
+    { type: Directive, args: [{ selector: '[ngx-async-error]' },] }
 ];
@@ -34,0 +34,0 @@ class NgxAsyncTemplateComponent {

klippa-ngx-async-template.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"AsyncAllStatesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[app-async-all]"}]}],"members":{}},"AsyncInactiveComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[app-async-inactive]"}]}],"members":{}},"AsyncPendingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"selector":"[app-async-pending]"}]}],"members":{}},"AsyncSuccessComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[app-async-success]"}]}],"members":{}},"AsyncErrorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"[app-async-error]"}]}],"members":{}},"NgxAsyncTemplateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"ngx-async-template","styles":[":host { display: block; }"],"template":"<ng-container>\n  <ng-container *ngFor=\"let tpl of allStates?.toArray()\" [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ status: promiseStatus, value: promiseValue }\"></ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'inactive'\" >\n    <ng-container *ngFor=\"let tpl of inactive?.toArray()\" [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ status: promiseStatus }\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'pending'\">\n    <ng-container *ngFor=\"let tpl of pending?.toArray()\" [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ status: promiseStatus }\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'success'\">\n    <ng-container\n      *ngFor=\"let tpl of success?.toArray()\"\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"{ value: promiseValue, status: promiseStatus }\"\n    ></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'error'\">\n    <ng-container\n      *ngFor=\"let tpl of error?.toArray()\"\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"{ errorMessages: promiseErrors, status: promiseStatus }\"\n    ></ng-container>\n  </ng-container>\n</ng-container>\n"}]}],"members":{"promise":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"allStates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":24,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncAllStatesComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":24,"character":52}}]}]}],"inactive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":25,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncInactiveComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":25,"character":51}}]}]}],"pending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":26,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncPendingComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":26,"character":50}}]}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":27,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncSuccessComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":27,"character":50}}]}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":28,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncErrorComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":28,"character":48}}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"NgxAsyncTemplateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxAsyncTemplateComponent"},{"__symbolic":"reference","name":"AsyncAllStatesComponent"},{"__symbolic":"reference","name":"AsyncInactiveComponent"},{"__symbolic":"reference","name":"AsyncPendingComponent"},{"__symbolic":"reference","name":"AsyncSuccessComponent"},{"__symbolic":"reference","name":"AsyncErrorComponent"}],"exports":[{"__symbolic":"reference","name":"NgxAsyncTemplateComponent"},{"__symbolic":"reference","name":"AsyncAllStatesComponent"},{"__symbolic":"reference","name":"AsyncInactiveComponent"},{"__symbolic":"reference","name":"AsyncPendingComponent"},{"__symbolic":"reference","name":"AsyncSuccessComponent"},{"__symbolic":"reference","name":"AsyncErrorComponent"}]}]}],"members":{}}},"origins":{"AsyncAllStatesComponent":"./lib/ngx-async-template.component","AsyncInactiveComponent":"./lib/ngx-async-template.component","AsyncPendingComponent":"./lib/ngx-async-template.component","AsyncSuccessComponent":"./lib/ngx-async-template.component","AsyncErrorComponent":"./lib/ngx-async-template.component","NgxAsyncTemplateComponent":"./lib/ngx-async-template.component","NgxAsyncTemplateModule":"./lib/ngx-async-template.module"},"importAs":"@klippa/ngx-async-template"}
+{"__symbolic":"module","version":4,"metadata":{"AsyncAllStatesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[ngx-async-all]"}]}],"members":{}},"AsyncInactiveComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[ngx-async-inactive]"}]}],"members":{}},"AsyncPendingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"selector":"[ngx-async-pending]"}]}],"members":{}},"AsyncSuccessComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[ngx-async-success]"}]}],"members":{}},"AsyncErrorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"[ngx-async-error]"}]}],"members":{}},"NgxAsyncTemplateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"ngx-async-template","styles":[":host { display: block; }"],"template":"<ng-container>\n  <ng-container *ngFor=\"let tpl of allStates?.toArray()\" [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ status: promiseStatus, value: promiseValue }\"></ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'inactive'\" >\n    <ng-container *ngFor=\"let tpl of inactive?.toArray()\" [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ status: promiseStatus }\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'pending'\">\n    <ng-container *ngFor=\"let tpl of pending?.toArray()\" [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ status: promiseStatus }\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'success'\">\n    <ng-container\n      *ngFor=\"let tpl of success?.toArray()\"\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"{ value: promiseValue, status: promiseStatus }\"\n    ></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"promiseStatus === 'error'\">\n    <ng-container\n      *ngFor=\"let tpl of error?.toArray()\"\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"{ errorMessages: promiseErrors, status: promiseStatus }\"\n    ></ng-container>\n  </ng-container>\n</ng-container>\n"}]}],"members":{"promise":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"allStates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":24,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncAllStatesComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":24,"character":52}}]}]}],"inactive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":25,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncInactiveComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":25,"character":51}}]}]}],"pending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":26,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncPendingComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":26,"character":50}}]}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":27,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncSuccessComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":27,"character":50}}]}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":28,"character":3},"arguments":[{"__symbolic":"reference","name":"AsyncErrorComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":28,"character":48}}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"NgxAsyncTemplateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxAsyncTemplateComponent"},{"__symbolic":"reference","name":"AsyncAllStatesComponent"},{"__symbolic":"reference","name":"AsyncInactiveComponent"},{"__symbolic":"reference","name":"AsyncPendingComponent"},{"__symbolic":"reference","name":"AsyncSuccessComponent"},{"__symbolic":"reference","name":"AsyncErrorComponent"}],"exports":[{"__symbolic":"reference","name":"NgxAsyncTemplateComponent"},{"__symbolic":"reference","name":"AsyncAllStatesComponent"},{"__symbolic":"reference","name":"AsyncInactiveComponent"},{"__symbolic":"reference","name":"AsyncPendingComponent"},{"__symbolic":"reference","name":"AsyncSuccessComponent"},{"__symbolic":"reference","name":"AsyncErrorComponent"}]}]}],"members":{}}},"origins":{"AsyncAllStatesComponent":"./lib/ngx-async-template.component","AsyncInactiveComponent":"./lib/ngx-async-template.component","AsyncPendingComponent":"./lib/ngx-async-template.component","AsyncSuccessComponent":"./lib/ngx-async-template.component","AsyncErrorComponent":"./lib/ngx-async-template.component","NgxAsyncTemplateComponent":"./lib/ngx-async-template.component","NgxAsyncTemplateModule":"./lib/ngx-async-template.module"},"importAs":"@klippa/ngx-async-template"}

package.json

 {
   "name": "@klippa/ngx-async-template",
-  "version": "1.0.2",
-  "peerDependencies": {},
+  "version": "2.0.0",
   "dependencies": {
@@ -6,0 +5,0 @@ "tslib": "^2.0.0"

README.md

 # NgxAsyncTemplate
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+Easily render templates based on the state of a promise:
+- inactive
+- pending
+- success
+- error
 
-## Code scaffolding
+# Install guide
 
-Run `ng generate component component-name --project ngx-async-template` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-async-template`.
-> Note: Don't forget to add `--project ngx-async-template` or else it will be added to the default project in your `angular.json` file. 
+### yarn
+`yarn add @klippa/ngx-async-template`
 
-## Build
+### npm
+`npm install @klippa/ngx-async-template`
 
-Run `ng build ngx-async-template` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Import
 
-## Publishing
+I recommend importing the module in a generic ui module and then export it from there, so you can use the ngx-async-template everywhere in your app.
 
-After building your library with `ng build ngx-async-template`, go to the dist folder `cd dist/ngx-async-template` and run `npm publish`.
+```js
+import { NgxAsyncTemplateModule } from '@klippa/ngx-async-template';
 
-## Running unit tests
+@NgModule({
+	imports: [
+		NgxAsyncTemplateModule,
+	],
+	exports: [
+		NgxAsyncTemplateModule,
+	],
+	providers: [{ provide: NgbDateParserFormatter, useClass: DateFormatComponent }],
+})
+export class UiModule {}
+```
 
-Run `ng test ngx-async-template` to execute the unit tests via [Karma](https://karma-runner.github.io).
+# Example
 
-## Further help
+```html
 
-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.
+<ngx-async-template [promise]="userPromise">
+  <ng-template ngx-async-inactive>
+    loading not yet started
+  </ng-template>
+  <ng-template ngx-async-pending>
+    loading
+  </ng-template>
+  <ng-template ngx-async-success let-users="value">
+    result is {{users}}
+  </ng-template>
+  <ng-template ngx-async-error let-myErrors="errorMessages">
+    something went wrong {{myErrors}}
+  </ng-template>
+  <ng-template ngx-async-all let-myState="status">
+    Always rendered, state is {{myState}}
+  </ng-template>
+</ngx-async-template>
+```
+
+# Usage
+
+To render templates, use one or more of the following directives on a `ng-template`:
+
+- ngx-async-inactive
+- ngx-async-pending
+- ngx-async-success
+- ngx-async-error
+- ngx-async-all
+
+
+- You can extract the value of a successful promise by using `let-someVarName="value"` where `someVarName` can be any name you want.
+- To extract errors provided by a promise you can use `let-myErrors="errorMessages"` where `myErrors` can be any name you want.
+- You can also extract the status of a promise, which can be helpful if you have a template with multiple directives (`<ng-template ngx-async-inactive ngx-async-pending...`) with `let-myState="status"` where `myState` can be any name you want.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51177

increased by1.65%

Number of lines in readme file

73

increased by192%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes