fabric8-planner
Version:
A planner front-end for Fabric8.
86 lines • 3.18 kB
JavaScript
/**
* This is a directive to store data in a local variable
* I developped it from angular's ngIf directive.
* https://github.com/angular/angular/blob/6.1.1/packages/common/src/directives/ng_if.ts
*
* ## Storing result in a variable
*
* A common pattern is that we need to show a set of properties from the same object. If the
* object is undefined, then we have to use the safe-traversal-operator `?.` to guard against
* dereferencing a `null` value. This is especially the case when waiting on async data such as
* when using the `async` pipe as shown in following example:
*
* ```
* Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!
* ```
* There are several inefficiencies in the above example:
* - We create multiple subscriptions on `userStream`. One for each `async` pipe, or two in the
* example above.
* - We have to use the safe-traversal-operator `?.` to access properties, which is cumbersome.
* - We have to place the `async` pipe in parenthesis.
*
* A better way to do this is to use `ngIf` and store the result of the condition in a local
*/
import { Directive, Input, NgModule, TemplateRef, ViewContainerRef } from '@angular/core';
var NgLetDirective = /** @class */ (function () {
function NgLetDirective(_viewContainer, templateRef) {
this._viewContainer = _viewContainer;
this._context = new NgLetContext();
this._thenTemplateRef = null;
this._thenViewRef = null;
this._thenTemplateRef = templateRef;
}
Object.defineProperty(NgLetDirective.prototype, "ngLet", {
set: function (condition) {
this._context.$implicit = this._context.ngLet = condition;
this._updateView();
},
enumerable: true,
configurable: true
});
NgLetDirective.prototype._updateView = function () {
if (!this._thenViewRef) {
this._viewContainer.clear();
if (this._thenTemplateRef) {
this._thenViewRef =
this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
}
}
};
NgLetDirective.decorators = [
{ type: Directive, args: [{ selector: '[ngLet]' },] },
];
/** @nocollapse */
NgLetDirective.ctorParameters = function () { return [
{ type: ViewContainerRef, },
{ type: TemplateRef, },
]; };
NgLetDirective.propDecorators = {
'ngLet': [{ type: Input },],
};
return NgLetDirective;
}());
export { NgLetDirective };
var NgLetContext = /** @class */ (function () {
function NgLetContext() {
this.$implicit = null;
this.ngLet = null;
}
return NgLetContext;
}());
export { NgLetContext };
var NgLetModule = /** @class */ (function () {
function NgLetModule() {
}
NgLetModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgLetDirective],
exports: [NgLetDirective]
},] },
];
/** @nocollapse */
NgLetModule.ctorParameters = function () { return []; };
return NgLetModule;
}());
export { NgLetModule };
//# sourceMappingURL=ng-let.js.map