How to use SnackBar on service to use in every component in Angular 2

Question

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

Answer 1

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!!

Answer 2

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');

Answer 3

I am using version version": "2.0.0-beta.10", This is what I did to get it working

In ApModule

import { NotificationService } from "./notification/notification.service";
import { MdSnackBarModule } from "@angular/material";

@NgModule({
  imports: [
    MdSnackBarModule,
    FormsModule
  ],
  providers: [WebService, NotificationService]

Create a notification service as suggested in previous post

import { Injectable } from "@angular/core";
import {
  MdSnackBar,
  MdSnackBarConfig,
  // MdSnackBarHorizontalPosition,
  // MdSnackBarVerticalPosition,
  MdSnackBarRef
} from "@angular/material";

@Injectable()
export class NotificationService {
  private snackBarConfig: MdSnackBarConfig;
  private snackBarRef: MdSnackBarRef<any>;
    private snackBarAutoHide = "5000"; //milliseconds for notification , 5 secs

  constructor(private sb: MdSnackBar) {}

  openSnackBar(message) {
    this.snackBarConfig = new MdSnackBarConfig();
    //this.snackBarConfig.horizontalPosition = this.horizontalPosition; only in current version Demo uses very old version . need to upgrade later
    //this.snackBarConfig.verticalPosition = this.verticalPosition; only in current version Demo uses very old version . need to upgrade later
    this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0);
      this.sb.open(message, "", this.snackBarConfig);
  }
}

Consume service as shown below

   this.notify.openSnackBar(message);

Answer 4

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')