@tk-ng/toasts

Toasts

Import module

...
import { ToastsModule } from '@tk-ng/toasts';
...

@NgModule( {
    imports: [ 
    	BrowserModule,
    	ToastsModule,
    	
    	StoreModule.forRoot( {} ),
    	EffectsModule.forRoot( [] ),
        ...
    ]
} )
export class AppModule {}

Add styles

@import "~bootstrap/scss/bootstrap"; // not required
@import "~@angular/cdk/overlay";

@include cdk-overlay();

.toasts-container
{
    // make as you like: top, bottom, center...

	display        : flex;
	flex-direction : column;
	position       : absolute;
	bottom         : 20px;
	right          : 20px;
	
	.toast
	{
		// make your custom styles for ToastType
	}
}

Use

import { Component, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { getToasts, Toast, ToastsAdd, ToastsClearAll } from '@tk-ng/toast';
import { Observable } from 'rxjs';

@Component( {
    selector: 'app-root',
    template: `
		<div class="container">
            <button class="btn btn-light" (click)="add()">add toast</button>
            <button class="btn btn-light" (click)="clear()">clear all</button>
            <hr>
            {{items | async | json}}
        </div>
    `,
} )
export class AppComponent implements OnInit
{
    items: Observable<Toast[]>;
    
    constructor( private store: Store<any> ){}
    
    ngOnInit()
    {
        this.items = this.store.pipe( select( getToasts ) );
    }
    
    add()
    {
        this.store.dispatch( new ToastsAdd( { content: 'Lorem ipsum' } ) );
    }
    
    clear()
    {
        this.store.dispatch( new ToastsClearAll() );
    }
}