web-dev-qa-db-fra.com

Comment basculer le panneau d'extension de matériau angulaire par programmation

Je viens de commencer à travailler sur un projet Angular 4 avec la conception de matériaux.

Je travaille actuellement avec le composant d'extension, les états de l'API que un panneau d'extension désactivé ne peut pas être basculé par l'utilisateur, mais peut toujours être manipulé par programme. Cependant, je ne sais pas comment vous pouvez basculer votre panneau par programmation.

Quel est le moyen préféré dans Angular pour simuler cela?

angularangular-material
8
hY8vVpf3tyR57Xib

expand est défini sur true pour développer le panneau d’extension et sur false pour le fermer. Dans l'exemple suivant, le panneau d'extension est ouvert et fermé par programmation. S'il vous plaît se référer ce lien

Fichier TS

import {Component} from '@angular/core';

/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  NeXTSTEP() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }
}

Fichier HTML

<mat-accordion class="example-headers-align">
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
        <mat-icon>account_circle</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput type="number" min="1" placeholder="Age">
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="primary" (click)="NeXTSTEP()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Destination
      </mat-panel-title>
      <mat-panel-description>
        Type the country name
        <mat-icon>map</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Country">
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="NeXTSTEP()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Day of the trip
      </mat-panel-title>
      <mat-panel-description>
        Inform the date you wish to travel
        <mat-icon>date_range</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
    </mat-form-field>
    <mat-datepicker #picker></mat-datepicker>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="NeXTSTEP()">End</button>
    </mat-action-row>
  </mat-expansion-panel>

</mat-accordion>
19
Prithivi Raj

Mise en oeuvre simple pour tableau de panneaux

<mat-expansion-panel [expanded]="indexExpanded == i" disabled="true" *ngFor="...; let i = index">
    ...
    <button (click)="togglePanels(i)">Toggle</button>
    ...
</mat-expansion-panel>

Et en code

indexExpanded: number = -1;

togglePanels(index: number) {
    this.indexExpanded = index == this.indexExpanded ? -1 : index;
}
2
V. Kalyuzhnyu

app.component.html:

    <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>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  xpandStatus=true;
}

La voici en direct à StackBlitz: https://stackblitz.com/edit/angular-gtsqg8

1
Carl Sorenson