As we start dealing with complicated workflows, such as the auth workflow, it is important to be able to programmatically display a toast notification for the user. In other cases, we may want to ask for a confirmation before executing a destructive action with a more intrusive pop-up notification.
No matter what component library you use, it gets tedious to recode the same boiler plate, just to display a quick notification. A UI service can neatly encapsulate a default implementation that can also be customized on a need basis:
- Create a new uiService under common
- Implement a showToast function:
src/app/common/ui.service.ts
import { Injectable, Component, Inject } from '@angular/core'
import {
MatSnackBar,
MatSnackBarConfig,
MatDialog,
MatDialogConfig,
} from '@angular/material'
import { Observable } from 'rxjs'
@Injectable()
export class...