toast.component.html

<div [@toastAnimation]="(toast.showsToast$ | async) ? 'open' : 'close' " [class]="(toast.toastOptions$ | async)">
  <div class="toast-message">
    <div class="post-body toast-body">
      <div [innerHTML]="(toast.toastMessage$ | async)"></div>
    </div>
  </div>
  <div class="button-container">
    <a class="close-btn mb-1" (click)="dismissToast()">
      <fa-icon [icon]="faTimes"></fa-icon>
    </a>
    <a *ngIf="(toast.showsToastButton$ | async)" class="btn btn-sm toast-btn" [routerLink]="(toast.buttonLink$ | async)" (click)="dismissToast()" style="justify-self: end">
      <h6>
        {{ (toast.toastButtonText$ | async) }}
      </h6>
    </a>
  </div>
</div>

toast.component.scss

@import '~./src/app/scss/colors.scss';

%default-toast {
  margin: 2rem;
  display: flex;
  min-width: 260px;
  box-shadow: 6px 6px 12px #00000040;

  background-color: white;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;


  border-left: 6px solid $primary-color;
  padding: 1rem;
  border-radius: 4px;

  font-size: 0.9rem;

  .toast-message {
    margin-right: 0.8rem;
  }
  .toast-btn {
    h6 {
      font-size: 0.7rem;
    }
  }
  &.small-toast {
    .toast-message {
      max-width: 120px;
    }
  }
  &.medium-toast {
    .toast-message {
      max-width: 200px;
    }
  }
  &.large-toast {
    .toast-message {
      max-width: 220px;
    }
  }
  .close-btn {
    font-size: 1.1rem;
    display: inline-block;
  }

  .button-container {
    height: inherit;
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-between;
  }
}
// Default
.toast {
  @extend %default-toast;
}
// Success
.success-toast {
  @extend %default-toast;
  border-left: 6px solid $success;
}
// Warning
.warning-toast {
  @extend %default-toast;
  border-left: 6px solid $warning;
}
// Danger
.danger-toast {
  @extend %default-toast;
  border-left: 6px solid $danger;
}

toast.component.ts

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

import { ToastService } from '@services/toast.service';
import { faTimes } from '@fortawesome/pro-light-svg-icons';

@Component({
  selector: 'app-toast',
  templateUrl: './toast.component.html',
  styleUrls: ['./toast.component.scss'],
  animations: [
    trigger('toastAnimation', [
      state('open', style({
        transform: 'translateY(0%)',
        display: 'flex'
      })),
      state('close', style({
        transform: 'translateY(-150%)',
        display: 'none'
      })),
      transition('close <=> open', [
        animate('250ms ease-in-out')
      ])
    ])
  ]
})
export class ToastComponent implements OnInit {

  faTimes = faTimes;
  constructor(
    public toast: ToastService
  ) { }

  ngOnInit(): void {
  }

  dismissToast(): void {
    this.toast.dismissToast();
  }
}

toast.service.ts

import { TOAST_SIZE, TOAST_STATE } from '@enums/toast.enum';

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

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  public showsToast$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public toastMessage$: BehaviorSubject<string> = new BehaviorSubject<string>('The fox ran over the rabbit hole');
  public toastOptions$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([TOAST_STATE.default, TOAST_SIZE.large]);
  public showsToastButton$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public toastButtonText$: BehaviorSubject<string> = new BehaviorSubject<string>('Read');
  public buttonLink$: BehaviorSubject<string> = new BehaviorSubject<string>('');

  constructor() { }

  sendToastOptionsMessageButtonBTextBLink(
    toastOptions: string[], // State (e.g. danger), Size (e.g. TOAST_STATE.largee)
    toastMessage: string, // Template literal (e.g. <h1> blah blah </h1>)
    buttonShow: boolean, // If button is there (e.g. true vs false)
    buttonText: string, // What button text is
    buttonLink: string // routerLink
  ): void {
    this.toastOptions$.next(toastOptions);
    this.toastMessage$.next(toastMessage);
    this.showsToastButton$.next(buttonShow);
    this.toastButtonText$.next(buttonText);
    this.buttonLink$.next(buttonLink);
    this.showsToast$.next(true);
  }

  dismissToast(): void {
    this.showsToast$.next(false);
  }
}