angular / angular/components

feat(SnackBar): allow to define a container in which to render the snackbar

Open
#7,764 12 comments 26 reactions 0 assignees View on GitHub
area: material/snack-bar feature needs: discussion P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
feature request

#### What is the expected behavior?
There should be a setting to define a container in which the snackbar is positioned in.

#### What is the current behavior?
SnackBar is always positioned based on the viewport.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-ddtruw

#### What is the use-case or motivation for changing an existing behavior?
I have an app with a static main toolbar at the top. When i position the snackbar to "top right" it will be shown above the main toolbar (see stackblitz example). I would like it to be shown at the top right of the container below the main toolbar (".basic-container" in my stackblitz example).

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
angular 4.4.2
angular-material 2.0.0 - Beta12
Chrome 61.0.3163.100

#### Is there anything else we should know?
MatSnackBarConfig has a viewContainerRef property. At first i thought this would be exactly what i need but when i tried to change it, it didn't seem to do anything. In the documentation of the MatDialog component (which also has a viewContainerRef property) it is stated that this property does not affect the place where it is rendered. I assume the same goes for MatSnackBar.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect MatSnackBarConfig.viewContainerRef, comparing its behavior with the requested .basic-container placement. Done means a setting lets the SnackBar render and position within the chosen container rather than the viewport.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.