How to toggle Angular material expansion panel programmatically

前端 未结 6 1118
半阙折子戏
半阙折子戏 2021-02-12 16:20

I just started working on an Angular 4 project with material design.

I am currently working with the expansion component, the API states that a disabled expansion pa

相关标签:
6条回答
  • 2021-02-12 17:01

    Suppose you are looking for the way to trigger open() method from the component on button click, this is what I've been able to get from the material API documentation.

    import { MatAccordion, MatExpansionPanel } from '@angular/material/expansion';
    
    export class MyComponent implements OnInit {
      @ViewChild(MatExpansionPanel) pannel?: MatExpansionPanel; 
      @ViewChild(MatAccordion) accordion?: MatAccordion;
    
    constructor(){}
    
      closePannel() { // for expansion panel only
        if(!this.pannel) { return }
        this.pannel.close();
      }
    
      closeAll() { // for all panels in accordion
        if(!this.accordion) { return }
        this.accordion.closeAll();
      }
    }
    
    0 讨论(0)
  • 2021-02-12 17:03

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

    Here it is live in StackBlitz: https://stackblitz.com/edit/angular-gtsqg8

    0 讨论(0)
  • 2021-02-12 17:06

    You can set a var, in this case I used "isExpanded" then use it to open and close set the boolean value.

    <mat-expansion-panel
      *ngIf="advertisements.objs"
      [expanded]="isExpanded"
    >
    </mat-expansion-panel>
    

    If you want to use it with the integrated toogle button instead you must update the "isExpanded" var with the "(opened)" and "(closed)" hooks from mat-expansion-panel.

    <mat-expansion-panel
          *ngIf="advertisements.objs"
          [expanded]="isExpanded"
          (opened)="isExpanded = true"
          (closed)="isExpanded = false"
    >
    </mat-expansion-panel>
    
    0 讨论(0)
  • 2021-02-12 17:14

    expanded is set to true to expand the expansion panel and set to false to close the expansion panel. In the following example, expansion panel is programetically opened and closed. Please refer this link

    TS file

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

    HTML file

    <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>
    
    0 讨论(0)
  • 2021-02-12 17:14

    Another very simple way to handle Mat Expansion panel programmatically is by using local references in Angular

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

    Now in HTML(not accessible directly in TS file until we use @ViewChild) file use mep to expand or collapse Expansion panel using something like this:

    <button (click)="mep.expanded = true;">Expand</button>
    <button (click)="mep.expanded = false;">Collapse</button> 
    
    0 讨论(0)
  • 2021-02-12 17:25

    Simple implementation for array of panels

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

    And in code

    indexExpanded: number = -1;
    
    togglePanels(index: number) {
        this.indexExpanded = index == this.indexExpanded ? -1 : index;
    }
    
    0 讨论(0)
提交回复
热议问题