einen zusammenklappbaren Seitenleiste in angular2

Question

Am Implementierung eines html jquery adminlte Armaturenbrett Umwandlung

Früher angular2 wenn Jquery die Sidebar verborgen ist und gezeigt bin Almaaseed admin lte template mit

Das ist, was ich

versucht haben, habe ich einen Bindestrich Board-Komponente

export class DashboardComponent { 
public constructor(private titleService: Title) { 

    } 

    onSidenavigation(){ 
    //i would like to perform toggle 
    } 

Dies ist die Taste, die Anzeige

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" (click)="onSidenavigation()" 
    role="button"> 
    <span class="sr-only">Toggle navigation</span> 
    </a> 

Ich habe überprüft auf this link schaltet, hat aber noch keine Antwort

Answer 1

Sie könnten einen CSS-max-height Übergang. Verwenden Sie eine Vorlageneigenschaft, um die CSS-Klasse festzulegen, die die Höhe animiert. Schalten Sie die Eigenschaft ein, die die Klasse beim Klicken auf die Schaltfläche definiert. Etwas wie dieses ...

<div id="sidebar" [class.sidebar-is-visible]="sidebarIsVisible"> 

<button (click)="sidebarIsVisible = !sidebarIsVisible"> 

#sidebar { 
    max-height: 0; 
    transition: max-height 0.15s ease-out; 
    overflow: hidden; 
} 
#sidebar.sidebar-is-visible { 
    max-height: 500px; 
    transition: max-height 0.25s ease-in; 
}