How to use the snackbar action?

[stefanaerts]

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Is there anything else we should know?

I wonder where i can find an example of how to use the snackbar. I see the snackbar on the screen,but i have no idea how i can bind an action to the action button on the snackbar.
All i found is this:
failedAttempt() {
let config = new MdSnackBarConfig(this.viewContainerRef);
this.snackBar.open('It didn't quite work!', 'Try Again', config);

So how do i bind the Try again in this example to call another method?
Thanks

[josephperrott]

If you are using the .open() method:

When you create a snackbar using .open() you are returned a MdSnackBarRef object.
You can watch the observable returned by the afterDismissed() method from this ref for when the button was clicked, removing the snack bar.

Example: http://plnkr.co/edit/ouCdqAkp5dc3veD802lT?p=preview

If you are using the . openFromComponent() method:

You could use the same concept as above, but you could also directly call to take any action from within the custom component you have opened.

[wulfsberg]

This seems like a dangerous example, since the observable fires on dismiss, not on actual click.
Notably, clicking the "Show snackbar" button while the bar is already on screen causes it to fire, incorrectly stating that "Button was pressed".

It seems like there should be a way to differentiate between the button and, say, a swipe dismiss. (Without having to use a custom component, since the standard API offers a button)

[feloy]

It seems to me that an onAction() observable is missing from the MdSnackBarRef component.

This observable is specified in https://docs.google.com/document/d/1XuD-sfGjZRB-TVFMULmD_FOSsOVJACVRy3XRJsQyYeQ/preview (referenced from #115) but is not yet implemented.

@josephperrott you cannot rely on afterDismissed() observable for this because this observable is called in other situations, at least when a first snackbar is automatically dismissed by a newer snackbar.

[stefanaerts]

@feloy @josephperrott @jelbourn @wulfsberg

Here a link to a little screen recording of my current status and question.
I have a snackbar that contains a child component with an action when you click on the snackbar.So it works almost as i want, i have only a problem with the style of the snackbar,
how can i change it?
https://www.youtube.com/watch?v=NjyyHcCA8aM&feature=youtu.be

Thanks.
Kind Rg,
Stefan.

[feloy]

@stefanaerts I'm not sure you are attaching your snackbar to the right parent component.
For my part, I'm used to attach it to the top app component. You can get an exemple here: https://github.com/actimeo/simmage-ui/blob/master/src/app/app.component.ts

[jelbourn]

Tracking the lack of onAction in #1616

Closing this issue since it's asking a question, not reporting a bug/feature

[stefanaerts]

@feloy I moved it to the top appcomponent but that was not the reason the snackbar had the box-sizing: inherit,that did not help.
I found the reason, i was also experimenting with materializecss and MaterializeModule and included an import in my styles.css, i removed that import and the import of MaterializeModule and MaterializeDirective and now the snackbar is shown correctly,no box-sizing: inherit any more. Thanks for your time @feloy .

[KumarSidharth]

Here is how you do it.
let snackBarRef = this.snackBar.open("Pizza party!!! 🍕","Dance", { duration: 5000 }); snackBarRef.onAction().subscribe(()=> this.doSomething());

[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.}