Search code examples
angularrxjsangular-materialpanelsiblings

ExpressionChangedAfterItHasBeenCheckedError: with two sibling Angular components

I'm using Angular Material expansion-panel with Flex-Layout and I would like to split my two expansion-panel into two different components.

I realized a StackBlitz1 HERE using both expansion-panel in the same component. On the other hand, in my second StackBlitz2 HERE, I split these two expansion-panels in two different components, but an error occurs. The error ExpressionChangedAfterItHasBeenCheckedError appears and it comes from my function "changeExpansionPanelState ()" in the HTML file of my two components.

<mat-expansion-panel (opened)="changeExpansionPanelState()"
                     (closed)="changeExpansionPanelState()">
  ...
</mat-expansion-panel>

If someone has a solution to be able to do the same thing as my StackBlitz1 with two components, I'm interested.

DEMO:

enter image description here

Thank you in advance!

Solution

  • I finally changed my method and found a simpler solution to my problem without going through service, here is the result:

    StackBlitz HERE