CODEWITHSUNDEEP
cssangularnavangular-material2
Emanuela Colta
Emanuela Colta

Reputation: 2207

How can I customize Angular Material Sidenav Component?

I am building a chat using Angular 4 and Angular Material and I am trying to display some information on a sidenav. I am using sidenav from Angular Material, but I am willing to customize the styling and to get rid of the shadow that appears when the sidenav is open. The image below depicts the problem

In the styles.css file I tried this: 

.mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    transition: background-color .4s cubic-bezier(.01,.1,.25,1); 
    background-color: transparent;

}
.mat-sidenav-backdrop.mat-sidenav-shown {
    background-color: transparent;
}

I also tried to use ::ng-deep but it won't work.

Upvotes: 1

Views: 3908

Answers (1)

Kim Kern
Kim Kern

Reputation: 60347

You can use mode="side", which does not create a backdrop.

<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>

see docs

Upvotes: 4

Related Questions