Open snackbar into a specific container?

[Benjamin Charity]

I'm working on a dashboard app where each view may have several components. Each component has self contained functionality so when actions/errors happen, I would like those snackbar messages to be shown inside it's containing element.

For example, this view has two components and each should have their own snackbar error (rather than a global one centered at the bottom of the page: [image attached]

---

I have tried many things to get this to work, but it always seems to be attached just before the closing body tag.

Versions:

- @angular/mate...@2.0.0-beta.1

- @angular/com...@2.3.0

I have a plunker here: http://plnkr.co/edit/jZ4gnzgLglLXvHbyr1tF?p=preview

And a code sample from my project:

// At the top of my class, I get a reference to the div this should go inside:
// This is defined in my html as `<div #detailForm>...</div>`

@ViewChild('detailForm', {read: ViewContainerRef}) detailForm;

// Method which should open the snackbar
public updateCustomer(model: Customer): void {

    const config: MdSnackBarConfig = new MdSnackBarConfig();

    config.duration = 2000;

    config.viewContainerRef = this.detailForm;

    this.customerService.updateCustomer(model)

        .then((updatedCustomer) => {

            // Update the form

            (<FormGroup>this.customerForm).patchValue(updatedCustomer, { onlySelf: true });

            // Alert the user

            this.snackBar.open(

                `Customer updated!`,

                ``,

                config,

            );

            this.isSaving = false;

        })
    ;

}

I've added logs throughout the snackbar.js file and can see that the container ref is being set in the config and is successfully passed through to snackbar. But the snackbar is always appended to the body. (I also tried getting an actual component reference rather than just a div, with the same results).

---

Can anyone offer some insight here? I feel like I must be missing something silly. I am admittedly not well versed with view container refs, so possibly I'm not using it correctly.

Docs: https://material.angular.io/components/component/snack-bar

[Michael Prentice]

This has come up before in Angular Material for Angular 1.x and the answer to this kind of thing (multiple snackbars at once, snackbars opening inside of dialogs, or locations other than bottom left and bottom center of window) has usually been that it is outside of the Material Design spec for Snackbars.

Thus I would guess that you would have to implement/modify things yourself rather than have changes to the library be made.

Michael Prentice

DevIntent

GDG Space Coast

[Benjamin Charity]

Thanks for the response Michael. Do you have any insight as to what the point of passing in a ViewContainer to the snackbar config if it isn't used to place the snack bar?

The docs say 'The view container to place the overlay for the snack bar into.' which sounds like I'm able to choose where the snackbar is injected.

[Michael Prentice]

That's a really good question. I don't have any insights there. I've also messed around with it over the last several releases (adjusting to breaking changes) and haven't really found a great use for the ViewRef used in the config. At one point, it was a required argument, but it's now an optional part of the config.

Michael Prentice

DevIntent

GDG Space Coast