Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Material MdSnackBar no Provider

I want a simple Snackbar popping up on the click of a button. But I always get the error:

ERROR Error: No provider for MdSnackBar! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207

import {MdSnackBar} from '@angular/material';
constructor(public snackBar: MdSnackBar){
        this.snackBar.open('hello')
    }
like image 329
Florian Avatar asked Aug 02 '17 06:08

Florian


People also ask

How do I delete snackbar?

A snackbar can be dismissed manually by calling the dismiss method on the MatSnackBarRef returned from the call to open . Only one snackbar can ever be opened at one time. If a new snackbar is opened while a previous message is still showing, the older message will be automatically dismissed.

What is MatSnackBar?

Angular Interview Q & A series The <MatSnackBar>, an Angular Directive, is used to show a notification bar to show on mobile devices as an alternative of dialogs/popups. In this chapter, we will showcase the configuration required to show a snack bar using Angular Material.


2 Answers

Import MdSnackBarModule then add MdSnackBarModule inside your imports in the app.module.ts file

like image 197
Meet Dave Avatar answered Sep 28 '22 08:09

Meet Dave


If you have version "@angular/material": "2.0.0-beta.12" or higher, you should import MatSnackBarModule

import {MatSnackBarModule} from '@angular/material';

// Use a more specific import if you're using "@angular/material": "8.0.0" and higher
// import {MatSnackBarModule} from '@angular/material/snack-bar';

...

@NgModule({
      imports: [
            ...
            MatSnackBarModule
          ],
    ...
like image 38
Wzorzec Avatar answered Sep 28 '22 07:09

Wzorzec