CODEWITHSUNDEEP
angularangular-material2
Jong-Hyen Kim
Jong-Hyen Kim

Reputation: 815

how to make side nav component using angular material 2

expert.

I want to make side nav component using angular material 2.

I want to separate side nav component and contents component.

So, i make two components. side nav and contents.

<!--contents.component.html-->
<md-sidenav-container>
  <app-side-nav></app-side-nav>
  <div>Main content</div>
</md-sidenav-container>

<!--side-nav.component.html-->
<md-sidenav mode="side" opened="true">
  <md-list>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'main'}">home</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'user'}">person</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'gas-setting'}">settings</i></md-list-item>
 </md-list>
</md-sidenav>

But, This code is not working well.

Now working

enter image description here

Expected working

enter image description here

How do i do for separate two component??

Upvotes: 2

Views: 1053

Answers (1)

jitender
jitender

Reputation: 10429

Just put you sidenev inside container

<md-sidenav-container>
<!--side nav component-->
<md-sidenav mode="side" opened="true">
  <md-list>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'main'}">home</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'user'}">person</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'gas-setting'}">settings</i></md-list-item>
 </md-list>
</md-sidenav>

  <app-side-nav></app-side-nav>
   <div>Main content</div>
</md-sidenav-container>

Here is working plunker

Upvotes: 2

Related Questions