I have a working snackbar, but it is only on each component, I want to add it on my service so I will just call it. This is my sample on my component.ts
import { MdSnackBar, MdSnackBarRef } from '@angular/material';
...
export class EmployeeListComponent implements OnInit {
public toastRef: MdSnackBarRef<any>;
constructor(private _activatedRoute:ActivatedRoute,private router: Router, private http:PMISHttpService, private toast: MdSnackBar) {
ngOnInit() {
this.notify('test');
}
...
notify (text: string) {
this.toastRef = this.toast.open(text, null);
setTimeout(() => {
this.toastRef.dismiss();
}, 5000);
}
...
}
If you want a SnackBar to work across your entire app, you should put it into your app.component and communicate with it with a service.
notification.service.ts:
public notification$: Subject<string> = new Subject();
app.component.ts:
constructor(
private notificationService: NotificationService, private snackBar: MatSnackBar
) {
this.notificationService.notification$.subscribe(message => {
this.snackBar.open(message);
});
}
any.component.ts:
this.notificationService.notification$.next('this is a notification');
To have it everywhere, create a service for it. Also you should use the snackbar config for setting duration and make snackbar public:
import {Injectable, NgZone} from '@angular/core';
import {MatSnackBar} from '@angular/material';
@Injectable()
export class CustomSnackbarService {
constructor(
public snackBar: MatSnackBar,
private zone: NgZone
) {}
public open(message, action = 'success', duration = 50000) {
this.zone.run(() => {
this.snackBar.open(message, action, { duration });
});
}
}
Also it needs to be run in ngZone: https://github.com/angular/material2/issues/9875
Then in the component:
customSnackbarService.open('hello')
You can easily do this . Please find below the example for the sample which i used in one of my projects and it works perfectly fine
import { Injectable } from '@angular/core';
import {
MatSnackBar,
MatSnackBarConfig,
MatSnackBarHorizontalPosition,
MatSnackBarVerticalPosition,
MatSnackBarRef
} from '@angular/material';
@Injectable()
export class SnackBarService {
snackBarConfig: MatSnackBarConfig;
snackBarRef: MatSnackBarRef<any>;
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
snackBarAutoHide = '1500';
constructor(private snackBar: MatSnackBar) { }
openSnackBar(message) {
this.snackBarConfig = new MatSnackBarConfig();
this.snackBarConfig.horizontalPosition = this.horizontalPosition;
this.snackBarConfig.verticalPosition = this.verticalPosition;
this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0);
this.snackBarConfig.panelClass = 'custom-snackbar';
this.snackBarRef = this.snackBar.open(message, '', this.snackBarConfig);
}
}
Now , you only need to inject this service in your component or where ever you want to use it and call openSnackBar() method with the message you want to show.
Hope this helps!!