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);
}
}
-------------
now you can use like below
this.notificationService.warn('::NOT Submitted successfully');
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 { 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 { 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 { }
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