toast.component.ts raw

   1  import { AfterViewInit, Component, HostBinding, Input } from '@angular/core';
   2  import * as bootstrap from 'bootstrap';
   3  
   4  @Component({
   5    // eslint-disable-next-line @angular-eslint/component-selector
   6    selector: 'lib-toast',
   7    imports: [],
   8    templateUrl: './toast.component.html',
   9    styleUrl: './toast.component.scss',
  10  })
  11  export class ToastComponent implements AfterViewInit {
  12    @Input() message: string | undefined;
  13  
  14    @Input()
  15    @HostBinding('style.bottom.px')
  16    bottom = 76;
  17  
  18    readonly idString = crypto.randomUUID();
  19  
  20    toast: bootstrap.Toast | undefined;
  21  
  22    ngAfterViewInit(): void {
  23      const myToastEl = document.getElementById(this.idString);
  24      if (!myToastEl) {
  25        return;
  26      }
  27  
  28      this.toast = new bootstrap.Toast(myToastEl, { delay: 2000 });
  29    }
  30  
  31    show(message?: string) {
  32      if (message) {
  33        this.message = message;
  34      }
  35      this.toast?.show();
  36    }
  37  }
  38