Components: MatSnackBarConfig.viewContainerRef is not honored

Created on 27 Apr 2018 · 9Comments · Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When MatSnackBar.open is called with a MatSnackBarConfig like

{
  ...
  viewContainerRef: myContainerRef
  ...
}

according to the documentation:

viewContainerRef: ViewContainerRef       The view container to place the overlay for the snack bar into.

it's overlay of the snackbar should be placed inside the provided container ref.

What is the current behavior?

It's attached directly to <body>

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-1jgbvq

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

I want to show the snackbar inside of a container and not globally

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

Angular: 5.2.9
Material: 5.2.5
OS: MacOS v10.13.3
TypeScript: 2.4.2
Browser: Chrome v65.0.3325.181

Is there anything else we should know?

Nope

Source

cl0udninja

Most helpful comment

@josephperrott Can you at least update the ambiguous documentation? Because the documentation says the place in the logic tree, it says 'The view container to place the overlay for the snack bar into.' And that's totally not happening.

cl0udninja on 3 May 2018

👍15

All 9 comments

I was told when i brought this issue up that the option described is only to change the order of change detection ... not display.
I have the following: https://stackblitz.com/edit/angular-material-tooltip-in-container-fbuspp?file=app%2Fapp.module.ts
where you can change the display of a snackbar

tmburnell on 30 Apr 2018

If that's the case the documentation should say so IMHO. But it states otherwise. Thank you for your example I'll be sure to check it out. I'd love to use the built in component over my custom one!

cl0udninja on 30 Apr 2018

@tmburnell I can actually see and open your snackbar after I put the application in full screen as well.

screen shot 2018-04-30 at 9 20 42 am

cl0udninja on 30 Apr 2018

10679

In my example if you did not have my could you would not be able to see the snack bar without the logic. So mine allows you to still see it because I scope it to a div.

tmburnell on 30 Apr 2018

Ah I see your point.

cl0udninja on 30 Apr 2018

Closing as this is working as intended, the ViewContainerRef determines the snackbars placement in the angular logic tree, it does not have any bearing on its location in the DOM tree.