CODEWITHSUNDEEP
htmlcssangulartypescriptangular-material
user18643652
user18643652

Reputation:

How to close one Expansion Panel when the other is opened(Angular Mat)?

I'm trying to close one expansion panel when the other is opened. I know that by default it's set to multi="false" and it works absolutely fine with multiple expansion panel used inside one accordion but I'm only using one panel and I couldn't find a way to make it work. I'm still a newbie.

Image on this link

HTML Code:

<mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <div
        class="col text-center"
        [ngClass]="{
          'text-green': transactionDTO.txn_type == 'CREDIT',
          'text-red': transactionDTO.txn_type == 'DEBIT',
          'text-cyan': transactionDTO.txn_type == 'WITHDRAWAL'
        }"
      >
        {{ transactionDTO.txn_type }}
      </div>
      <div class="col text-center" style="font-size: 20px;">
        {{ transactionDTO.created_date | date: "dd-MMM-yyyy" }}
      </div>
      <div class="text-center col-xl">
        {{ transactionDTO.txn_status }}
      </div>
      <div class="col text-center" style="font-size: 20px;">
        <span
          [ngClass]="{
            'text-green': transactionDTO.txn_type == 'CREDIT',
            'text-red': transactionDTO.txn_type == 'DEBIT',
            'text-cyan': transactionDTO.txn_type == 'WITHDRAWAL'
          }"
          ><ng-container
            *ngIf="
              transactionDTO.txn_type == 'WITHDRAWAL' ||
                transactionDTO.txn_type == 'DEBIT';
              else credit
            "
            >-</ng-container
          ><ng-template #credit>+</ng-template
          >{{ transactionDTO.txn_amount | currency: "USD":"":"1.2-2" }}</span
        >
      </div>
      <div class="col text-center" style="font-size: 20px;">
        {{ transactionDTO.final_amount | currency: "USD":"":"1.2-2" }}
      </div>
      <div
      class="col text-center downarrow"
      [ngClass]="{ arrow: showHistory }"
      (click)="fetchHistoryDetails()"
    >
      {{
        transactionDTO.payment_method == "Wire transfer"
          ? transactionDTO.txn_id
          : transactionDTO.payment_method
      }}
    </div>
        </mat-expansion-panel-header>
        <mat-panel-description>
        <div
          class="row detailsRow no-gutters justofy-content-around align-items-center"
          *ngIf="showHistory"
          marketplace-transaction-history-details
          [transactionType]="transactionDTO.transactionType"
          [userType]="'BUYER'"
          [currentStatusStep]="transactionDTO.currentStatus"
        ></div>
        </mat-panel-description>
      </mat-expansion-panel>
    </mat-accordion>

CSS:

.mat-expansion-panel-header{
    font-family: "Lato", Arial, Helvetica, sans-serif;
    color: #162e4d;
}
.mat-accordion .mat-expansion-panel:last-of-type{
    margin-bottom: .3rem;
    border: 1px solid #c0c8d4;
    box-shadow: none;
    border-radius: 0;
}
.detailsRow{
    width: -webkit-fill-available;
}

Typescript:

import { Component, Input, OnInit } from "@angular/core";
import { TransactionHistoryDTO } from "@shared/dto/transaction-history-dto";
@Component({
  selector: "[marketplace-transaction-history-item]",
  templateUrl: "./transaction-history-item.component.html",
  styleUrls: ["./transaction-history-item.component.scss"],
})
export class TransactionHistoryItemComponent implements OnInit {
  @Input() transactionDTO:TransactionHistoryDTO;
  showHistory = true;
  constructor() {}

  fetchHistoryDetails() {
    this.showHistory = !this.showHistory;
  }
  ngOnInit(): void {
    // console.log(this.transactionDTO);
  }
}

Upvotes: 0

Views: 584

Answers (1)

Ingrik
Ingrik

Reputation: 83

As mentioned in the first comment, i just see only one expansion-panel in the code you posted. Anyway looking at the image you linked, if you have more expansion panels and you want just one to be axpanded at time, you can just go like this in the HTML:

<mat-expansion-panel class="" [expanded]="step === 0" (opened)="setStep(0)">
</mat-expansion-panel>

<mat-expansion-panel class="" [expanded]="step === 1" (opened)="setStep(1)">
</mat-expansion-panel>

<mat-expansion-panel class="" [expanded]="step === 2" (opened)="setStep(2)">
</mat-expansion-panel>

While in your .TS :

step :number = 0; //global variable

setStep(index:number){
    this.step = index;
}

Hope it helps :)

Upvotes: 1

Related Questions