web-dev-qa-db-fra.com

Comment basculer le panneau d'extension de tapis avec un clic de bouton?

Existe-t-il un moyen de développer un panneau d’extension de mat particulier en cliquant sur un bouton externe?

J'ai essayé de faire un lien vers l'ID du panneau, mais sans succès ...

<mat-expansion-panel id="panel1"> ... </>
...
<button (click)="document.getElementById('panel1').toggle()>Click me</button>

Voici mon code stackblitz par exemple

Mon plan éventuel est d'utiliser cette méthode pour ouvrir différents panneaux dans une liste générée à partir d'un tableau: <mat-expansion-panel *ngFor="let d of data"> ...

htmlangularangular-material
2
physicsboy

Dans votre fichier html:

<mat-expansion-panel [expanded]="panelOpenState">

    <mat-expansion-panel-header>
        <mat-panel-title>
            TITLE
        </mat-panel-title>
    </mat-expansion-panel-header>

    <p>BODY</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

Dans votre fichier TS:

panelOpenState: boolean = false;

togglePanel() {
    panelOpenState = !panelOpenState
}

Si vous utilisez * ngFor pour générer les panneaux d’extension:

<mat-expansion-panel [expanded]="isOpen" *ngFor="let d of data">
    <mat-expansion-panel-header>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

Si vous appuyez sur le bouton, tous les panneaux développés ouvrent simultanément .

Pour ouvrir un seul panneau avec un seul bouton, ajoutez une propriété "développée" au tableau de données pour chaque élément, comme ceci:

  data = [
    {id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false},
    {id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false},
    {id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false},
    {id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false},
  ]

Puis dans votre modèle:

<mat-expansion-panel [(ngModel)]="d.expanded" 
    [expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl>

    <mat-expansion-panel-header>
        <button (click)="toggle(d.expanded)">TOGGLE</button>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>

</mat-expansion-panel>

Et la méthode déclenchée par le clic du bouton:

  toggle(expanded) {
    expanded = !expanded;
  }
7
Juan
<mat-expansion-panel [disabled]="true"
                     #mep="matExpansionPanel"
                     *ngFor="let foo of list">
  <mat-expansion-panel-header>
      <button (click)="mep.expanded = !mep.expanded">Toggle</button>
  </mat-expansion-panel-header>

  <p>Text</p>

</mat-expansion-panel>
2
bodpad

Utilisez une liaison bidirectionnelle sur l'attribut expand / de mat-expansion-panel. Voici un exemple live dans StackBlitz:

https://stackblitz.com/edit/angular-gtsqg8

<button (click)='xpandStatus=xpandStatus?false:true'>Toggle it</button>
<p>
<mat-expansion-panel [(expanded)]="xpandStatus">
  <mat-expansion-panel-header>
    <mat-panel-title>This an expansion panel</mat-panel-title>
    <mat-panel-description>xpandStatus is {{xpandStatus}}</mat-panel-description>
  </mat-expansion-panel-header>
  Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status.
</mat-expansion-panel>
</p>
0
Carl Sorenson
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<mat-accordion displayMode="flat" multi class="mat-table">
    <section matSort class="mat-elevation-z8 mat-header-row">
        <span class="mat-header-cell" mat-sort-header="vesselName"></span>
        <span class="mat-header-cell" mat-sort-header="vesselName">d</span>
    </section>

    <mat-expansion-panel [disabled]="true" #mep="matExpansionPanel"
                         *ngFor="let d of data">
        <mat-expansion-panel-header>
            <span class="mat-cell" (click)="mep.expanded = !mep.expanded">
                <mat-icon class="icon" *ngIf="!mep.expanded">expand_more</mat-icon>
                <mat-icon class="icon" *ngIf="mep.expanded">expand_less</mat-icon>
            </span>
            <span (click)="dClicked(d)" class="mat-cell">{{d.dataSet}}</span>
        </mat-expansion-panel-header>
        <div><pre>{{d | json}}</pre></div>
    </mat-expansion-panel>
    <div class="well" *ngIf="!d || d.length == 0">
        <p>There are no d for this.</p>
    </div>
</mat-accordion>
0
Mathew