Angular 2 Material: Sidenav how to remove backdrop

Add ::ng-deep to overrided the defualt prebuilt stylesheet css.

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

Plunker demo

You can also use display: none to completely remove the backdrop from the DOM. In this case, sidenav will not close when clicked in backdrop area.

::ng-deep .mat-sidenav-backdrop.mat-sidenav-shown {
    display: none;
} 

Plunker example

::ng-deep works great in this case, but it may be deprecated in the future. See here:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

The recommended way is to use ViewEncapsulation. In your component add the following encapsulation:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

Then your css will work and override the styles with your custom styles.

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

@Input() hasBackdrop: any - Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.

(c) https://material.angular.io/components/sidenav/api

So you should just set property [hasBackdrop]="false" on mat-sidenav-container