ng2-yk-notifier/src/notifier/notifier-container.component.ts

Angular2 Notification Component

/**
 * notifier-container.component
 */

import { Component, OnInit, OnDestroy, Optional } from "@angular/core";
import { Store } from "@ngrx/store";
import { Notice } from "./notifier-notice";
import { ADD_NOTICE, REMOVE_NOTICE, REMOVE_ALL } from "./messages.reducer";
import { Subscription } from "rxjs";
import { NotifierOptions } from "./notifier-options.service";

/*
declare let require: any;
const myDpStyles: string = require("./notifier-container.component.scss");
const myDpTpl: string = require("./notifier-container.component.html");
*/

@Component({
    selector: 'app-notifier-container',
    template: `<div class="notifier-wrapper" *ngIf="notices" [ngClass]="position"><ng2-notifier-message *ngFor="let message of notices| max: maxStack" [notice]="message"></ng2-notifier-message></div>`,
    styles: [`.notifier-wrapper{position:fixed}.notifier-wrapper.left{left:16px;left:1rem}.notifier-wrapper.bottom{bottom:16px;bottom:1rem}.notifier-wrapper.right{right:16px;right:1rem}.notifier-wrapper.top{top:16px;top:1rem}.notifier-wrapper.center{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}`],
})

export class NotifierContainerComponent implements OnInit, OnDestroy {

    notices: Notice[];
    maxStack: number = 5;
    position: ['top' | 'bottom', 'right' | 'left' | 'center'] = ['bottom', 'right'];

    private selectNoticesSub: Subscription;


    constructor( private store: Store<Notice[]>,
                 @Optional() options: NotifierOptions ) {
        if (options) {
            Object.assign(this, options);
        }
    }

    ngOnInit(): void {
        this.selectNoticesSub = this.store.select('messages').subscribe(
            ( data: Notice[] ) => this.notices = data
        );
    }

    ngOnDestroy(): void {
        this.selectNoticesSub.unsubscribe();
    }

    addNotice( notice: Notice ): void {
        this.store.dispatch({type: ADD_NOTICE, payload: notice});
    }

    removeNotice( notice?: Notice ): void {
        if (notice) {
            this.store.dispatch({type: REMOVE_NOTICE, payload: notice});
        } else {
            this.store.dispatch({type: REMOVE_ALL});
        }
    }

    anyNotices() {
        return this.notices.length > 0;
    }
}