CODEWITHSUNDEEP
angularangular-material
Raza Ellahi
Raza Ellahi

Reputation: 409

how to hide mat expansion panel header when in expanded mode

I have multiple mat expansion panels on a page i want that when i expand a panel its header show hide.

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

Upvotes: 1

Views: 14174

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39472

mat-expansion-panel has opened and closed @Output() properties that you can use to track which item is currently opened in the template. You're already using them.

To these methods, you can pass in the index of the currently openend/closed item in the accordion list.

With this, you can set a property in your Component to track just that.

In case of opened set that property. In the case of closed, check if the item index that was currently clicked is equal to the set index on the class. If so reset the class property to -1.

In code, this will translate to:

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

}

In the template, you can have something like this:

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

Here's a Working Sample StackBlitz for your ref.

Upvotes: 2

Noman Fareed
Noman Fareed

Reputation: 284

use *ngIf directive in your mat-expansion-panel-header.

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

Upvotes: 5

Related Questions