как скрыть заголовок панели расширения мат в расширенном режиме

Question

У меня есть несколько панелей расширения мат на странице, я хочу, чтобы при раскрытии панели заголовок показывался скрытым.

HTML

<mat-expansion-panel 
  class="z-depth-5" 
  (opened)="panelOpenState = true" 
  (closed)="panelOpenState = false">
  <mat-expansion-panel-header 
    [collapsedHeight]="customCollapsedHeight"       
    [expandedHeight]="customExpandedHeight">
  </mat-expansion-panel-header>
</mat-expansion-panel>

CSS

.mat-expansion-panel.mat-expanded {
  position: fixed;
  padding: 0;
  top: 0px;
  left: 60px;
  right: 0px;
  bottom: 0px;
  z-index: 100;
}

Answer 1

mat-expansion-panel имеет свойства opened и closed @Output(), которые можно использовать для отслеживания того, какой элемент в данный момент открыт в шаблоне.Вы уже используете их.

Этим методам вы можете передать index текущего открытого / закрытого элемента в списке аккордеона.

При этом вы можете установить свойство в вашем Компоненте для отслеживания толькочто.

В случае opened установите это свойство.В случае closed проверьте, равен ли индекс элемента, который был нажат в данный момент, заданному индексу в классе.Если это так, установите для свойства класса значение -1. ​​

---

В коде это будет выглядеть так:

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

@Component({...})
export class ExpansionOverviewExample {
  currentlyOpenedItemIndex = -1;

  items = [...];

  setOpened(itemIndex) {
    this.currentlyOpenedItemIndex = itemIndex;
  }

  setClosed(itemIndex) {
    if(this.currentlyOpenedItemIndex === itemIndex) {
      this.currentlyOpenedItemIndex = -1;
    }
  }

}

---

В шаблоне вы можете получить что-то вроде этого:

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let item of items; let i = index;"
    (opened)="setOpened(i)"
    (closed)="setClosed(i)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{ item.header }}
      </mat-panel-title>
      <mat-panel-description>
        {{ item.description }} | {{ currentlyOpenedItemIndex === i ? 'Close' : 'Open' }}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>{{ item.content }}</p>
  </mat-expansion-panel>
</mat-accordion>

---

Вот Рабочий образец StackBlitz для вашей ссылки.

Answer 2

используйте директиву * ngIf в заголовке панели расширения матов.

<mat-expansion-panel-header *ngIf="!panelOpenState 
[collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight">
</mat-expansion-panel-header>