2

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

Manu
  • 23
  • 5
  • Create reproduceable example – Antoniossss Sep 02 '20 at 05:17
  • Please give more details on the issue. – Muhammad Hamza Sep 02 '20 at 05:25
  • see this : a live example given with full code https://material.angular.io/components/expansion/overview u must install angular material first –  Sep 02 '20 at 06:01
  • @frost can you see the image i have uploaded... expended is set true but still it is not opened – Manu Sep 02 '20 at 06:08
  • Put code for us to check... with just images we can't help you. The problem for sure is somewhere else and not on the angular component. Be aware that the OPs might close this ticket as "insufficient research". – D A Sep 02 '20 at 06:13
  • @Manu if you can't give real project code, please try to make a fake project only for ur component where your exp. panel is located. We need to understand your .ts to tell more about it –  Sep 02 '20 at 06:25

1 Answers1

0

.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