Как программно переключать панель расширения углового материала

Question

Я только начал работать над проектом Angular 4 с материальным дизайном.

В настоящее время я работаю с компонентом расширения, API заявляет, что отключенная панель расширения не может переключаться пользователем, но все же может управляться программно. Однако я не знаю, как вы можете программно переключать панель.

Каков предпочтительный способ моделирования в Angular?

Answer 1

extended установлен на true, чтобы развернуть панель расширения, и на false, чтобы закрыть панель расширения. В следующем примере панель расширения программно открывается и закрывается. Пожалуйста, обратитесь по этой ссылке

Файл 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--;
  }
}

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>

Answer 2

Еще один очень простой способ обрабатывать панель Mat Expansion программно - использовать локальные ссылки в Angular.

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

Теперь в HTML(файл недоступен непосредственно в файле TS, пока мы не используем @ViewChild), используйте mep, чтобы развернуть или свернуть панель расширения, используя что-то вроде этого:

<button (click)="mep.expanded = true;">Expand</button>
<button (click)="mep.expanded = false;">Collapse</button> 

Answer 3

Простая реализация для массива панелей

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

И в коде

indexExpanded: number = -1;

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

Answer 4

Вы можете установить переменную, в этом случае я использовал isExpanded, а затем использовал ее для открытия и закрытия, чтобы установить логическое значение.

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

Если вы хотите использовать его со встроенной кнопкой toogle, вместо этого вы должны обновить переменную isExpanded с помощью хуков "(open)" и "(closed)" из mat-extension-panel.

<mat-expansion-panel
      *ngIf="advertisements.objs"
      [expanded]="isExpanded"
      (opened)="isExpanded = true"
      (closed)="isExpanded = false"
>
</mat-expansion-panel>

Answer 5

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

Вот это в StackBlitz: https://stackblitz.com/edit/angular-gtsqg8

Answer 6

Предположим, вы ищете способ вызвать метод open() из компонента при нажатии кнопки, это то, что я смог получить из документации API материалов.

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