Afficher/Masquer md-sidenav par code dactylographiée

Question

J'ai un code dactylographiée avec son modèle html

<button md-icon-button (click)="menuSidenav.toggle()"> 
     <md-icon>menu</md-icon> 
    </button> 
.... 
<md-sidenav-container style="height: 100px"> 
    <md-sidenav align="start" mode="over" #menuSidenav 

si je clique sur le bouton cela fonctionne, mais je voudrais montrer et cacher les sidenav par code tapuscrit

Comment ça marche?

Merci beaucoup beacause je ne sais pas obtenir l'élément par tapuscrit

Answer 1

Sinon, cette solution fonctionne pour moi mon cas dans mon composant de classe:

@ViewChild("menuSidenav") sideNave: any; 

et dans le code

this.sideNave.open(); 

Qu'en penses-tu?

Answer 2

Dans angulaire, pour des choses simples comme se cachant et montrant des éléments de modèle que vous ne voulez pas être obtenir l'élément directement dactylographiée. Vous devez utiliser la directive construit en modèle ngIf:

<button md-icon-button (click)="menuSidenav.toggle()"> 
    <md-icon>menu</md-icon> 
</button> 
.... 
<md-sidenav-container style="height: 100px"> 
    <md-sidenav *ngIf="toggled" align="start" mode="over"> 

La directive ngIf gère sa cachette et montrant si l'argument est évaluée comme vrai ou faux. Ainsi, en utilisant un champ booléen « basculée » dans votre tapuscrit de composants, comme vous avez utilisé le « basculer » dans le cas ci-dessus:

class MyComponent... { 
    ... 
    public toggled = false; 

    toggle() { 
     this.toggled = !this.toggled; 
    } 

Documentation: https://angular.io/api/common/NgIf