CODEWITHSUNDEEP
angular-material2
Ashutosh Jha
Ashutosh Jha

Reputation: 16337

How to use snackBar in Angular 2

I use sanckbar but its position is not on bottom

enter image description here

what could be the issue ?

git https://github.com/ashjha/snakebar

Upvotes: 0

Views: 9436

Answers (3)

Deepak swain
Deepak swain

Reputation: 3694

Hope this will help you All :

import { MdSnackBar } from '@angular/material';
export class DemoStackOverflow{
    constructor(
        private snackBar: MdSnackBar
    ){}

    showSnackBar(){
        this.snackBar.open("Yes i am Coming", "Ok", {
            duration: 9000
        }
    }
}

Upvotes: 2

Venkateshwar V
Venkateshwar V

Reputation: 1

Passing a ViewContainerRef to config will limit the snackbar to the same. You should pass config.viewContainerRef = null. This will place the snackBar to the center of the page.

Upvotes: 0

Devor
Devor

Reputation: 86

When no code is provided, it's hard to check what's wrong. However, I'm using the MdSnackBar (still in development), and it's working for me.

First off, the "snackbar component" itself must be included, as well as "MdSnackBarConfig" using:

import { MdSnackBar, MdSnackBarConfig } from '@angular/material';
import { ViewContainerRef } from '@angular/core';

After this, we can create or initialize the snackbar item and our viewContainerRef in the constructor:

 constructor(
    private snackbar: MdSnackBar,
    public viewContainerRef: ViewContainerRef,
  ) { }

Now we can call the snackbar to be showed whenever we want, using:

   let config = new MdSnackBarConfig(this.viewContainerRef);
   this.snackbar.open('Snackbar text', 'Ok', config);

Please see the github for more info and updates, since this is an initial version.

Hope this helps somewhat

Upvotes: 4

Related Questions