Angular Material 2: Sidenav has no backdrop

4
votes

I am currently developing an Angular 2 site and having some trouble with the SideNav component.

The SideNav can have 3 modes, none of which seem to change what happens when I open the Sidenav. I am trying to get the backdrop to display after opening.

The sideNav does open, however the backdrop doesn' t show up.

The root of the app is the md-sidenav container. The SideBar component will also be passed to the NavBar component as the open button is defined in there.

Note that I have also tried to bring the SideBar component outside the <md-sidenav-container>

<md-sidenav-container>
    <sidebar #sideBarComponent></sidebar>
    <navbar [sideBar]=sideBarComponent></navbar>
    <router-outlet></router-outlet>
</md-sidenav-container>

The SidNnav currently contains 2 links and is set to mode "over" (which should create a SideNav and backdrop over the main content)

<md-sidenav #sideBar mode="over">
    <md-nav-list>
        <a md-list-item routerLink="/home" (click)="sideBar.close()" routerLinkActive="active-link">
            <md-icon md-list-icon>home</md-icon>
            <p md-line>Home</p>
        </a>
        <a md-list-item routerLink="/users" (click)="sideBar.close()" routerLinkActive="active-link">
            <md-icon md-list-icon>account_circle</md-icon>
            <p md-line>Users</p>
        </a>
    </md-nav-list>
</md-sidenav>

Inspecting the page using chrome's developer tools reveals that a backdrop is created (<div class="md-sidenav-backdrop"></div>) and covering the whole page, however it is set to hidden and has no effect due to not having a functional CSS applied to it. (only set fixed width, height and position, nothing visible that alters the page)

The prebuild-css has a background color tag for it, however it needs a .md-sidenav-shown:

.md-sidenav-backdrop.md-sidenav-shown {
    background-color: rgba(0, 0, 0, .6)
}

Is there anything that would cause this behavior to happen? None of the tutorials and examples I found did something complicated so I think it is due to my set-up.

Relevant Libraries and versions (All webjars):

Angular 2.4.1
   common
   core
   compiler
   forms
   http
   platform-browser
   platform-browser-dynamic
   router
Angular-Material 2.0.0-Beta.1
SystemJs 0.19.41
Core-js 2.4.1
Reflect-Metadata 0.1.8
Typescript 2.1.4
RxJs 5.0.1
HammerJS 2.0.6
Zone.js 0.7.4
2
htmlangulartypescriptangular2-routingangular-material2

2 Answers

4
votes

It seems that you cannot put md-sidenav inside component because there is no link between md-sidenav-container and child md-sidenav's. Md-sidenav-container uses @ContentChildren to access md-sidenav instances.

So there must be direct parent-child relation between md-sidenav-container and md-sidenav.

2
votes

To keep the scope of CSS defined in your.component.css limited to only that component, Angular processes the CSS/SCSS/SASS files and adds "attribute" selectors to each CSS rule defined in that file.

In your case, it converts your .md-sidenav-backdrop.md-sidenav-shown {...} CSS rule into something like:

.md-sidenav-backdrop.md-sidenav-shown[_ngcontent-xyh-65] {
    background-color: rgba(0, 0, 0, .6)
}

Angular is strict about restricting the scope. The trouble is that the backdrop <div class="md-sidenav-backdrop"></div> is added by the material component (at browser render time, I presume). Hence, the selector suffix [_ngcontent-xyh-65] is not added to that element at compile time.

The only way around it, that I could find till now, is to move your CSS to <root>/src/styles.css. UPDATE: As Rose suggests, it would be safest to have your component name selector prefixed to the CSS you add in styles.css. In your case:

md-sidenav-container > .md-sidenav-backdrop.md-sidenav-shown {
    background-color: rgba(0, 0, 0, .6)
}