Angular Code Beispiel für eine kostenlose Sidebar / Sidenav aus Angular/Material
Die Sidenav öffnet und schliesst über einen Button, mit Button-Icon
Dabei wird die Angular Bindung zum Wert sidenav_opened invertiert mit jedem Klick und somit auch die SideNav Eigenschaft opened durch Angular [(opened)] dynamisch geöffnet oder geschlossen
Code
Sidenav.component.html
<mat-toolbar color="primary" class="example-toolbar"> <button (click)="sidenav_opened = !sidenav_opened" style="border-radius: px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" ><mat-icon>menu</mat-icon></button> </mat-toolbar>
<mat-sidenav-container> <mat-sidenav [(opened)]="sidenav_opened" #sidenav mode="side" > <mat-nav-list>
<a mat-list-item > Timelist </a> <mat-list-item routerLink="/projects">Projects</mat-list-item>
</mat-nav-list>
</mat-sidenav> <mat-sidenav-content> <div style="margin: 20px;"> Angular Material Sidenav: <br> <br>Sidenav Modes: <ul> <li>mode="push"</li> <li>mode="over"</li> <li>mode="side"</li> </ul> <br>Sidenav row: <ul> <li>mode="navigation"</li> <li>mode="dialog"</li> </ul> </div> </mat-sidenav-content> </mat-sidenav-container>
|
Sidenav.component.ts
import { Component, OnInit, Output,EventEmitter } from '@angular/core';
@Component({ selector: 'app-sidenav', templateUrl: './sidenav.component.html', styleUrls: ['./sidenav.component.css'] }) export class SidenavComponent implements OnInit {
sidenav_opened=true;
constructor() { }
ngOnInit(): void { }
}
|
Sidenav.component.css
a{ text-decoration: none; color: white; } a:hover, a:active{ color: lightgray; } .nav-caption{ display: inline-block; padding-left: 6px; }
|
App.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatSidenavModule} from '@angular/material/sidenav'; import { MatListModule } from '@angular/material/list' import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'
import { SidenavComponent } from './components/sidenav/sidenav.component'; import { PageComponent } from './components/page/page.component'; import { EditpageComponent } from './components/editpage/editpage.component'; import { LoginComponent } from './components/login/login.component'; import { from } from 'rxjs';
@NgModule({ declarations: [ AppComponent, SidenavComponent, PageComponent, EditpageComponent, LoginComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule, MatSidenavModule, MatListModule, MatIconModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
|