ngx-rx-if/rx-if.directive.js

An implementation of conditional reactive directive based on @ngrx/store (Redux)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var store_1 = require("@ngrx/store");
require("rxjs/add/operator/map");
require("rxjs/add/operator/distinctUntilChanged");
var rx_if_else_message_component_1 = require("./rx-if-else-message.component");
var RxIfDirective = (function () {
    function RxIfDirective(_viewContainer, templateRef, store, componentFactoryResolver) {
        this._viewContainer = _viewContainer;
        this.templateRef = templateRef;
        this.store = store;
        this.componentFactoryResolver = componentFactoryResolver;
    }
    Object.defineProperty(RxIfDirective.prototype, "rxIf", {
        set: function (config) {
            var _this = this;
            this.config = config;
            this.ngOnDestroy();
            this.subscription = this.store
                .select(function (state) { return _this.extractBindingFromState(state); })
                .map(Boolean)
                .distinctUntilChanged()
                .subscribe(function (result) { return _this.updateView(result); });
        },
        enumerable: true,
        configurable: true
    });
    RxIfDirective.prototype.ngOnDestroy = function () {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    };
    RxIfDirective.prototype.updateView = function (result) {
        if (typeof result === 'undefined' || result === null) {
            return;
        }
        this._viewContainer.clear();
        if (result) {
            this._viewContainer.createEmbeddedView(this.templateRef);
        }
        else {
            var component = this._viewContainer.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.config.elseMsg ? rx_if_else_message_component_1.RxIfElseMessageComponent : this.config.elseMsgCmp));
            if (this.config.elseMsg) {
                component.instance.message = this.config.elseMsg;
            }
            else {
                component.instance.ctx = this.config.elseMsgCmpCtx;
            }
        }
    };
    RxIfDirective.prototype.extractBindingFromState = function (state) {
        return this.config.bindTo
            .split('.')
            .reduce(function (acc, key) { return typeof acc === 'string' ? (state && state[acc] ? state[acc][key] : null) : (acc ? acc[key] : null); });
    };
    return RxIfDirective;
}());
RxIfDirective.decorators = [
    { type: core_1.Directive, args: [{
                selector: '[rxIf]'
            },] },
];
/** @nocollapse */
RxIfDirective.ctorParameters = function () { return [
    { type: core_1.ViewContainerRef, },
    { type: core_1.TemplateRef, },
    { type: store_1.Store, },
    { type: core_1.ComponentFactoryResolver, },
]; };
RxIfDirective.propDecorators = {
    'rxIf': [{ type: core_1.Input },],
};
exports.RxIfDirective = RxIfDirective;
//# sourceMappingURL=rx-if.directive.js.map