adrianfaciu

<div class="toast"
     [@fadeAnimation]="{value: animationState, params:
        { fadeIn: 1000, fadeOut: 1000 }}">
  <mat-icon>{{ iconType }}</mat-icon>
  <div>{{ data.text }}</div>
  <mat-icon (click)="close()">close</mat-icon>
</div>

adrianfaciu

import {
    AnimationTriggerMetadata,
    trigger,
    state,
    transition,
    style,
    animate,
} from '@angular/animations';

export const toastAnimations: {

adrianfaciu

.toast {
  position: relative;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 10px 15px 10px 48px; 
  width: 290px;
  background: #fff;
  border-width: 1px;
  border-style: solid;

adrianfaciu

<div class="toast">
  <mat-icon>done</mat-icon>
  <div>This is a toast message</div>
  <mat-icon (click)="close()">close</mat-icon>
</div>

adrianfaciu

    const filteredSearchStream$ = this.searchStream$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      startWith('')
    );
    const devFilterStream$ = this.filterStream$.pipe(startWith(false));

    combineLatest(filteredSearchStream$, devFilterStream$).subscribe(
      ([searchTerm, onlyDevs]) => this.filterEmployees(searchTerm, onlyDevs)
    );

adrianfaciu

import { Component, OnInit, OnDestroy } from '@angular/core';

import { ToastData } from './toast-config';
import { ToastRef } from './toast-ref';

@Component({
  selector: 'app-toast',
  templateUrl: './toast.component.html',
})
export class ToastComponent implements OnInit, OnDestroy {

adrianfaciu

import { Injectable, Injector } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';

import { ToastComponent } from './toast.component';
import { ToastData } from './toast-config';
import { ToastRef } from './toast-ref';

@Injectable({
  providedIn: 'root'

adrianfaciu

import { OverlayRef } from '@angular/cdk/overlay';

export class ToastRef {
  constructor(readonly overlay: OverlayRef) { }

  close() {
    this.overlay.dispose();
  }
}

adrianfaciu

import { NgModule } from '@angular/core'
import { OverlayModule } from '@angular/cdk/overlay';
import { MatIconModule } from '@angular/material/icon';

import { ToastComponent } from './toast.component';

@NgModule({
  imports: [OverlayModule, MatIconModule],
  declarations: [ToastComponent],
  entryComponents: [ToastComponent]

adrianfaciu

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  show() { }
}