File
Metadata
changeDetection |
ChangeDetectionStrategy.OnPush |
selector |
app-sidenav |
styleUrls |
sidenav.component.scss |
templateUrl |
./sidenav.component.html |
showSidenav
|
Default value: false
|
|
Outputs
sideNavClosed
|
$event type: EventEmitter<void>
|
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SidenavComponent {
@Input() showSidenav = false;
@Input() sidenavMode: string;
@Output() sideNavClosed: EventEmitter<void> = new EventEmitter();
}
<md-sidenav-container>
<md-sidenav [opened]="showSidenav"
(close)="sideNavClosed.emit()"
[mode]="sidenavMode">
<md-nav-list>
<ng-content select="app-nav-item"></ng-content>
</md-nav-list>
</md-sidenav>
<ng-content select="app-toolbar"></ng-content>
<ng-content select=".app-content"></ng-content>
</md-sidenav-container>
Legend
Html element with directive