Alert Service

alert.component.html

<div class="text-center">
        <img class="mb-05" src="{{ image }}" alt=""/>
    <h6 class="m-0 pb-1">{{ title }}</h6>
</div>

alert.component.scss

.mat-dialog-content {
  min-height: 122px;
}

alert.component.ts

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

@Component({
  selector: 'app-alert-service',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
  title;
  message;
  image;
  constructor(public dialogRef: MatDialogRef<AlertComponent>) {}

  ngOnInit() {
    // console.log(this.image);
  }

}

alert.service.ts

import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { Observable } from 'rxjs';
import { AlertComponent } from './alert.component';

@Injectable()
export class AlertService {
  dialogRef: MatDialogRef<AlertComponent>;
  constructor(private dialog: MatDialog) { }

  public open(title: string = 'title', image: string = 'ic_check'): Observable<boolean> {
      this.dialogRef = this.dialog.open(AlertComponent, { disableClose: true, backdropClass: 'light-backdrop'});
      this.dialogRef.updateSize('200px');
      this.dialogRef.componentInstance.title = title;
      this.dialogRef.componentInstance.image = image;
      this.dialogRef.afterClosed();
    return this.dialogRef.afterClosed();
  }

  public close() {
    if(this.dialogRef)
      this.dialogRef.close();
  }
}

chamaService.component.ts

showSuccessMessage(msg) {
    setTimeout(() => {
      this.alertService.close();
      this.loader.close();
      this.getData();
    }, 2000);
    this.alertService.open(msg, this.assetService.getCheckIcon());
  }

  showErrorMessage(err) {
    setTimeout(() => {
      this.alertService.close();
    }, 3000);
    this.alertService.open("Ocorreu um Erro", this.assetService.getCancelIcon());
    console.error(err);
  }