Angular Expansion panel not opening

user_8145416 0
Viewed 943

hey guys can anyone help me i tried a lot but don't know why it is not working.... what is happening is, when i am opening expansion panel Programmatically then it is open sometime and sometime not. when i do a ctrl+shift+R then its work fine. but when i close the panel and navigate again to that component then it doesnt work. but the toggle shows its expensded (You can see in red highlighted)

See image belowenter image description here

what i am doing is when expansion panel have data then i set ingredientsExpansion to true.

 headPanleToggle(){
this.ingredientsExpansion=true; //head panel Toggle

}

<mat-expansion-panel [expanded]="ingredientsExpansion">

but the pannel is not opening afer seeting it true

see below image enter image description here

enter image description here

angular-components angular expansion panel
1 Answers

.html:

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

.ts :

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

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
  panelOpenState = false;
}

.css:

.mat-form-field + .mat-form-field {
  margin-left: 8px;
}

See ? I don't need to make a open/close by function.

But If you must - See that line in my .ts

  panelOpenState = false;

just make it true or false by your function. I guess only setting this boolean should be enough

Admin1
Related