Comment basculer Angulaire du matériel d'extension de panneau par programmation

J'ai juste commencé à travailler sur un Angulaires 4 projet avec la conception de matériel.

Je suis actuellement en train de travailler avec l'expansion de la composante, l'API unis que désactivé l'expansion du panneau ne peut pas être activée ou désactivée par l'utilisateur, mais peuvent toujours être manipulé par programmation. Je ne sais pas cependant, la façon dont vous pouvez passer votre panneau de programmation.

Quel est le meilleur moyen Angulaire de simuler cela?

InformationsquelleAutor hY8vVpf3tyR57Xib | 2017-11-13
  1. 25

    étendu est défini à true pour élargir l'expansion du panneau et mettre à false pour fermer le panneau d'extension. Dans l'exemple suivant, l'expansion du panneau est programetically ouvert et fermé. Veuillez consulter 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>
    • Peut le faire dans une boucle de trop: <div *ngFor="laisser élément d'éléments; soit i = index"><mat-expansion du panneau [étendu]="pas===i" (ouvert)="step=i">
    • T avez-vous fait cela dans une boucle trop: <div *ngFor="laisser élément d'éléments; soit i = index"><mat-expansion du panneau [étendu]="pas===i" (ouvert)="step=i">
    • vous solution fonctionne très bien. merci pour l'astuce 🙂
    InformationsquelleAutor Prithivi Raj
  2. 5

    Simple de mise en œuvre pour la gamme de panneaux

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

    Et dans le code

    indexExpanded: number = -1;

togglePanels(index: number) {
    this.indexExpanded = index == this.indexExpanded ? -1 : index;
}
    InformationsquelleAutor Vlad
  3. 2

    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.composante.ts

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

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

    Ici, c'est vivre dans StackBlitz: https://stackblitz.com/edit/angular-gtsqg8

    • Meilleure réponse jusqu'à présent
    InformationsquelleAutor Carl Sorenson
  4. 2

    Un autre moyen très simple de gérer Mat Expansion du panneau par programmation en utilisant références locales dans Angulaire

    <mat-accordion>
  <mat-expansion-panel #mep="matExpansionPanel">
  </mat-expansion-panel>
</mat-accordion>

    Maintenant en HTML(pas accessibles directement dans le fichier TS jusqu'à ce que nous utilisons @ViewChild) l'utilisation du fichier mep pour développer ou réduire l'Expansion du panneau en utilisant quelque chose comme ceci:

    <button (click)="mep.expanded = true;">Expand</button>
<button (click)="mep.expanded = false;">Collapse</button>
    • C'est la bonne façon d'aller de l'accordéon et pour un jeu de dilatation des panneaux qui ne sont pas sur un complexe boucle sans configurer quoi que ce soit sur le composant simplement de suivre les états. Sur un accordéon qui n'est pas multi vous souhaitez appeler le .closeAll() méthode de l'accordéon sur la réussite de l'interaction à l'intérieur de n'importe quel panneau. L'API a des méthodes pour l'accordéon et de l'expansion des panneaux closeAll, d'ouvrir, de fermer & bascule. Je pense que la question est plus sur la façon d'utiliser ces méthodes à la place de connaître beaucoup sur le modèle de la boucle imbriquée ou boucle d'éléments.
    InformationsquelleAutor Ash