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 Sidebars

28.01.2021 (👁326)

Angular Sidebars

Responsive Design

With Hamburger Menu to open and close

https://stackblitz.com/angular/mnbqebkojae?file=src%2Fapp%2Fsidenav-responsive-example.ts

 

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">

  <mat-toolbar color="primary" class="example-toolbar">

    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

    <h1 class="example-app-name">Responsive App</h1>

  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container"

                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">

    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"

                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">

      <mat-nav-list>

        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>

      </mat-nav-list>

    </mat-sidenav>

    <mat-sidenav-content>

      <p *ngFor="let content of fillerContent">{{content}}</p>

    </mat-sidenav-content>

  </mat-sidenav-container>

</div>

<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>

 

 

Drawer with explicit backdrop setting

https://stackblitz.com/angular/gxdvqjvgrvo?file=src%2Fapp%2Fsidenav-backdrop-example.ts

Sidenav Mode: Side / Over / Push

Has Backdrop: Unset / True / False

 

Autosize sidenav

https://stackblitz.com/angular/brlljkvvevve?file=src%2Fapp%2Fsidenav-autosize-example.ts