My goal is to have an expansion panel that contains a list of data. Upon loading, I want the panel to be expanded if there is no data, and collapsed if there is data present.
Once initialized, I only want the panel to expand or collapse when the user interacts with it by clicking on it. If the amount of data changes from 0 to 1, I do not want the panel to automatically collapse; it should remain open. The issue arises when using the expansion panel's [expanded] input, as it continuously checks the condition and collapses or expands based on any change in data length, even if the user did not click on it.
<mat-expansion-panel [expanded]="!item.data.length">
<mat-expansion-panel-header>
<mat-panel-title>
Item with data
</mat-panel-title>
</mat-expansion-panel-header>
<div *ngFor="let data of item.data">
{{data.name}}
</div>
<button (click)="addDataToItem()">ADD DATA</button>
</mat-expansion-panel>
Desired Scenario: Initially, the expansion panel will be expanded if item.data.length is 0, and collapsed if it is greater than 0. Subsequently, upon clicking the ADD DATA button, the expansion panel should remain open regardless of the data length.
Current Outcome: At first, the expansion panel is expanded if the item.data.length is 0, and collapsed if it is greater than 0. However, upon clicking ADD DATA, the panel closes due to the increase in data length.
You can view an example demonstrating this behavior here.
Observe how the panel initially expands because the length is 0, but collapses when you add data by clicking ADD DATA since the length becomes 1. My intention is for it to stay open in such situations.