How to show Notification Message in Angular 8 - cSharp Coder

Latest

cSharp Coder

Sharp Future

Tuesday, November 5, 2019

How to show Notification Message in Angular 8

Install and add
 ng add @angular/material

Create Services for Notifications

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

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

 constructor(public snackBar: MatSnackBar) { }

 config: MatSnackBarConfig = {
   duration: 3000,
   horizontalPosition: 'center',
   verticalPosition: 'top'
 }


 success(msg) {
   this.config['panelClass'] = ['notification', 'success'];
   this.snackBar.open(msg, '',this.config);
 }

 warn(msg) {
   this.config['panelClass'] = ['notification', 'warn'];
   this.snackBar.open(msg, '', this.config);
 }
}
import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

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

 constructor(public snackBar: MatSnackBar) { }

 config: MatSnackBarConfig = {
   duration: 3000,
   horizontalPosition: 'center',
   verticalPosition: 'top'
 }


 success(msg) {
   this.config['panelClass'] = ['notification', 'success'];
   this.snackBar.open(msg, '',this.config);
 }

 warn(msg) {
   this.config['panelClass'] = ['notification', 'warn'];
   this.snackBar.open(msg, '', this.config);
 }
}


-----------------
Make Material folder inside the app and make Material.modal.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as Material from "@angular/material";

@NgModule({
 imports: [
   CommonModule,
   Material.MatToolbarModule,
   Material.MatGridListModule,
   Material.MatFormFieldModule,
   Material.MatInputModule,
   Material.MatRadioModule,
   Material.MatSelectModule,
   Material.MatCheckboxModule,
   Material.MatDatepickerModule,
   Material.MatNativeDateModule,
   Material.MatButtonModule,
   Material.MatSnackBarModule,
   Material.MatTableModule,
   Material.MatIconModule,
   Material.MatPaginatorModule,
   Material.MatSortModule,
   Material.MatDialogModule,

 ],
 exports: [
   Material.MatToolbarModule,
   Material.MatGridListModule,
   Material.MatFormFieldModule,
   Material.MatInputModule,
   Material.MatRadioModule,
   Material.MatSelectModule,
   Material.MatCheckboxModule,
   Material.MatDatepickerModule,
   Material.MatNativeDateModule,
   Material.MatButtonModule,
   Material.MatSnackBarModule,
   Material.MatTableModule,
   Material.MatIconModule,
   Material.MatPaginatorModule,
   Material.MatSortModule,
   Material.MatDialogModule,

 ],
 declarations: []
})
export class MaterialModule { }

-------------
now you can use like below
this.notificationService.warn('::NOT Submitted successfully');

No comments:

Post a Comment