Material-components-web: Request: Method for closing the snackbar

Created on 24 Oct 2017 · 2Comments · Source: material-components/material-components-web

Feature Request

When using the snack bar component in a SPA website, it would be useful if there was a method to call that would instantly hide (w/ animation) the snackbar (if it is currently showing) and remove any messages that might be in the queue. I would call this when the user navigates to a new view of the app and as such has decided messages from the current view are not of interest. Having messages shown/popup in the destination view just causes confusion.

help wanted

Source

deap82

👍9

Most helpful comment

Thanks for filing this feature request. It does strike me as odd that we have an API for show but nothing for the opposite.

I also suspect it might be a good idea to provide both options - just hide the snackbar, or hide and clear its queue.

kfranqueiro on 26 Oct 2017

👍3

All 2 comments

Thanks for filing this feature request. It does strike me as odd that we have an API for show but nothing for the opposite.

I also suspect it might be a good idea to provide both options - just hide the snackbar, or hide and clear its queue.

kfranqueiro on 26 Oct 2017

👍3

I'm not sure but shouldn't this be done by the destroy method?

In your case, each view could have it's own snackbar which you destroy when the view is closed.
If you simply call HideAllSnackbars your code could still have async code triggering new snackbars for the closed view.

I though calling destroy would immediately remove all open snackbars and prevent new snackbars being shown. However, currently the only thing that happens when calling destroy is the eventHandler of the snackbar action button being removed.

But I can be very wrong with my idea of the destroy method.

A small example app with show and destroy implemented: https://typescript-jg9n7i.stackblitz.io
Note that you can still show snackbars when snackbar is destroyed.