md-snackbar (toast)

[jelbourn]

https://www.google.com/design/spec/components/snackbars-toasts.html

Depends on #113

[jelbourn]

Status update:
Design doc
Proof of concept

[jelbourn]

Closing this since we have an initial version

[alorle]

As Material Design specification says, a SnackBar may or may not have an action. There any way to add a SnackBar without any action for now?

@angular/material 2.0.0.alpha.9-3

[jammerware]

@AlvaroOrduna I was able to add an actionless SnackBar by passing null as the actionLabel argument to snackBar.open.

[mhmo91]

Duration doesn't work with me, it doesn't even exist in the config class
i'm using version "@angular/material": "^2.0.0-alpha.10",
Also, how about the color of the toaster? like danger, warning, success... thankss

[jammerware]

@mhmo91 I don't think build with the duration property has been pushed to the npm feed yet. The commit in question was only made just under a couple of weeks ago.

[cheresier]

I have a suspicion that the viewContainerRef setting of MdSnackBarConfig is not working correctly. I have a component (let's call it CompanyComponent) that consists of one MdCard with a button inside of it. Pressing the button opens an MdSnackBar. Since each card has a button that opens a snack bar I want the snack bar to be anchored to the bottom of each card. Multiple instances of the CompanyComponent appear in the parent, AppComponent. I open the snack bar using the following code:

    @ViewChild(MdCard, { read: ViewContainerRef }) card;    
    showSnackbar() {
        this.snackbar.open('UPDATED', '', { viewContainerRef: this.card });
    }

I confirmed in the debugger that this.card is defined and assigned a correct ViewContainerRef object.

Once again, I am trying to open the snack bar at the bottom of each card. However, the snack bar opens at the bottom of the browser view port instead (in the AppComponent, not attached to any individual instance of CompanyComponent or MdCard inside of it). Am I doing something wrong, or does there seem a to be a bug?

[jelbourn]

@cheresier That's not what viewContainer is for. Setting the viewContainer tells Angular where the loaded component lives in terms of dependency injection and change detection, but does not affect where it is rendered. Per material design spec, the snack bar always renders at the edge of the screen.

[cheresier]

@jelbourn, a-ha! Got it. Thank you! Can you point to any other material component I should be using for this use case?

[jelbourn]

You may just want make your own component and conditionally show/hide it at the bottom of the card.

[kuncevic]

How would you control the position of the snackbar? I can see in the sample it is appearing just in the bottom. How would you display it in the right top corner ? And also how would you stack the multipe snackbars appearing on the screen?

[jammerware]

@kuncevic See this comment above. I don't think the position of the snackbar is exposed to the end developer because the material spec doesn't allow it.

[kuncevic]

Just went thorugh this https://material.io/guidelines/components/snackbars-toasts.html

Only one snackbar may be displayed at a time.

Snackbars animate upwards from the bottom edge of the screen.

So what I was asking for above is actually against the material spec. @jesselpalmer thanks for pointing that out.

[MikeMatusz]

On tablet/desktop the material spec does allow for some variation in position:

Alignment: Centered or left-aligned 24dp from the left and bottom edges of the screen

Are there any plans to support the bottom/left alignment?

[ethanmick]

@MikeMatusz brings up a good point, the snackbar can be positioned in the bottom left on Desktop/Tablet. Should there be a new issue for that functionality?

[mtpultz]

@MikeMatusz and @ethanmick do you think your last two comments should be moved to a new issue since this issue doesn't actually refer to the position and has been closed. Wondering if it won't get noticed, but is a case that needs to be addressed.

[MikeMatusz]

@mtpultz Good call, I'll create one right now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}