I am encountering an issue with my Angular Material expansion panel. I want to automatically expand the accordion if there are validation errors when a button is clicked. However, the problem arises when the user manually minimizes the accordion by clicking on the minimize arrow. In this case, even though the expanded property is already true, the accordion does not expand again.
Below is the code I am using:
Wrapper component
Mat accordion HTML
<mat-accordion>
<mat-expansion-panel (opened)="data.panelOpenState === true" (closed)="data.panelOpenState === false" [expanded]="data.expanded">
<mat-expansion-panel-header (click)="stateValue()">
<mat-panel-title>
{{ data?.title }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-content></ng-content>
</mat-expansion-panel>
</mat-accordion>
Mat accordion TS
import { Component, Input, OnInit } from '@angular/core';
import { SidePanelAccordianData } from './side-panel-accordian.model';
@Component({
selector: 'app-side-panel-accordian',
templateUrl: './side-panel-accordian.component.html',
styleUrls: ['./side-panel-accordian.component.scss']
})
export class SidePanelAccordianComponent implements OnInit {
@Input() data: SidePanelAccordianData;
constructor() { }
ngOnInit(): void {
}
stateValue() {
this.data.panelOpenState = !this.data.panelOpenState;
}
}
Mat accordion model
export class SidePanelAccordianData {
public title: string = '';
public panelOpenState: boolean;
public expanded: boolean;
constructor(args) {
this.title = args.title;
this.panelOpenState = args.panelOpenState;
this.expanded = args.expanded;
}
}
component html where I am using the accordion
<app-side-panel-accordian [data]="{title:'Title', panelOpenState: true, expanded: secondDriverExpanded}">
<div class="inner-row-data">
<form-input [formStatus]="formStatus" [parentFormGroup]="setupForm" [data]="{
formControlName: 'secondDriverName',
name: 'secondDriverName',
}" (onBlur)="setSecondDriverDetails('name')">
</form-input>
</div>
</app-side-panel-accordian>
<form-button type="button" (click)="onNext()">Next</form-button>
component ts where I am using the accordion
public secondDriverExpanded = true;
onNext() {
<!--if there are validation errors-->
this.secondDriverExpanded = true;
}
Currently, if a user clicks on the minimize arrow in the UI to collapse the accordion, the expanded property remains true. How can I ensure that it is set to false when the accordion is minimized so that it can be re-expanded correctly on the next button click?