Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular SideNav Beispiel

28.01.2021 (👁1635)


 

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 { ComponentOnInitOutput,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-decorationnone;

    colorwhite;

}

a:hovera:active{

    colorlightgray;

}

.nav-caption{

    displayinline-block;

    padding-left6px;

}

 

 

 

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 { MatSidenavModulefrom '@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 { }