CODEWITHSUNDEEP
angularangular-material2
Code Guru
Code Guru

Reputation: 15598

md-sidenav-container is not working in angular material 2

I have installed angular-material2 and this is the package.json entry

"@angular/material": "^2.0.0-beta.7",

then in my app.module.ts imported 

import { MaterialModule } from '@angular/material';

and @NgModule

@NgModule({
  imports: [BrowserModule, MaterialModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

I have created a component that shows side navigation bar using angular material 2. This is the html code

<md-sidenav-container>
    <md-sidenav mode="side" opened="true">
        <md-list-item>
            <button md-icon-button>
           <md-icon class="material-icons md-24 white-icon">dashboard</md-icon>
     </button>
        </md-list-item>
    </md-sidenav>
</md-sidenav-container>

All other compnents of angular material 2 is working fine. But when I place my md-sidenav inside md-sidenav-container there is no navigation bar on view. But when directly use md-sidenav without the container it works. But could be the issue?

Upvotes: 1

Views: 2697

Answers (2)

MJL
MJL

Reputation: 410

Update: the import is now outdated. It is now:

import { MatSidenavModule} from '@angular/material';

Upvotes: 0

Emerson Jair
Emerson Jair

Reputation: 128

Try to set a height to the md-sidenav-container.

Upvotes: 3

Related Questions