Angular Toast Notifications - A Lightweight Pop-up Alert Component

<div id="action-description">
    <p>
        This sample demonstrates the basic layout of a <code>Toast</code> to show simple notification and hide them.
    </p>
</div>
<div class="col-lg-12 control-section toast-default-section">
    <div class="e-sample-resize-container">
        <ejs-toast #defaulttoast id='defaulttoast' [position]="position" (created)="onCreate()"
            (close)="onClose($event)" icon="e-meeting" (beforeOpen)="onBeforeOpen()">
            <ng-template #content>
                <div>Conference Room 01 / Building 135 10:00 AM-10:30 AM</div>
            </ng-template>
            <ng-template #title>
                <div>Adaptive Tiles Meeting</div>
            </ng-template>
        </ejs-toast>
        <div class="col-lg-12 col-sm-12 col-md-12 center">
            <div id="toastBtnDefault" style="margin: auto;text-align: center">
                <button ejs-button #toastBtnShow class="e-btn" id="toastBtnShow" (click)='showToast()'>Show
                    Toasts</button>
                <button ejs-button #toastBtnHide class="e-btn" id="toastBtnHide" (click)='hideToast()'>Hide
                    All</button>
            </div>
        </div>
    </div>
</div>

import { Component, ViewEncapsulation, ViewChild, HostListener, ElementRef, Inject, Injector } from '@angular/core';
import { ToastComponent, ToastCloseArgs, ToastPositionModel } from '@syncfusion/ej2-angular-notifications';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
/**
 *  Sample for Basic Toast
 */
@Component({
    selector: 'control-content',
    templateUrl: 'default.html',
    styleUrls: ['default.css'],
    encapsulation: ViewEncapsulation.None
})

export class DefaultController {

    @ViewChild('defaulttoast')
    public toastObj: ToastComponent;

    @ViewChild('toastBtnHide')
    public btnEleHide: ButtonComponent;

    @ViewChild('toastBtnShow')
    public btnEleShow: ButtonComponent;

    public position: ToastPositionModel = { X: "Right" };

    constructor(@Inject('sourceFiles') private sourceFiles: any) {
        sourceFiles.files = ['default.css'];
    }

    public onCreate = (): void => {
        setTimeout((): void => {
            this.toastObj.show();
        }, 200);
    }

    public onClose = (e: ToastCloseArgs): void => {
        if (e.toastContainer.childElementCount === 0) {
            this.btnEleHide.element.style.display = 'none';
        }
    }

    public onBeforeOpen = (): void => {
        this.btnEleHide.element.style.display = 'inline-block';
    }

    public showToast = (): void => {
        this.toastObj.show();
    }

    public hideToast = (): void => {
        this.toastObj.hide('All');
    }

    @HostListener('document:click', ['$event'])
    documentClick = (e: MouseEvent): void => {
        if (e.target !== this.btnEleShow.element && this.toastObj.target === document.body) {
            this.toastObj.hide('All');
        }
    }
}