Differentiate between mat accordions

I have a wrapper for the mat accordion component in angular material. I am trying to differentiate between the different accordions when a user clicks on a specific accordion.

Here is my code

Wrapper

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';
import { SidePanelAccordianService } from './side-panel-accordian.service';

@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;
  panelOpenState;

  constructor(private accordianStateService: SidePanelAccordianService) { }

  ngOnInit(): void {
  }

  stateValue() {
    this.data.panelOpenState = !this.data.panelOpenState;
    this.accordianStateService.setOpenState(this.data.panelOpenState);
  }

}

Mat accordion Service

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SidePanelAccordianService {
  private _openStateBehaviorSubject = new BehaviorSubject(false);
  public openState$ = this._openStateBehaviorSubject.asObservable();

  public setOpenState(value: boolean) {
    this._openStateBehaviorSubject.next(value);
  }
}

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 where I am using the wrapper

HTML

<app-side-panel-accordian [data]="{title:'Title', panelOpenState: panelOpenState, expanded: firstDriverExpanded}">
    <div class="inner-row-data">
      <form-input [formStatus]="formStatus" [parentFormGroup]="setupForm" [data]="{
        formControlName: 'firstDriverName',
        name: 'firstDriverName',
      }" (onBlur)="setFirstDriverDetails('name')">
      </form-input>
    </div>
</app-side-panel-accordian>

<app-side-panel-accordian [data]="{title:'Title', panelOpenState: panelOpenState, 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>

TS

this.accordianStateService.openState$.subscribe(data =>{
  this.accordianState = data;
  if(!this.accordianState) {
    this.firstDriverExpanded = false;
    this.secondDriverExpanded = false;
  }
});

So as you can see in the component above where I use the mat accordion wrapper I can have more than one accordion so my question is how will I differentiate between the accordions when the this.accordianStateService.openState$ value is updated on click?

The reason I need to differentiate is because i have rules as to when a certain accordion is open or closed.

To differentiate between the accordions when the openState$ value is updated, you can modify your code as follows:

1. Update the SidePanelAccordianData model to include an identifier for each accordion. For example:

export class SidePanelAccordianData {
  public id: string;
  public title: string = '';
  public panelOpenState: boolean;
  public expanded: boolean;

  constructor(args) {
    this.id = args.id;
    this.title = args.title;
    this.panelOpenState = args.panelOpenState;
    this.expanded = args.expanded;
  }
}

2. Modify the SidePanelAccordianComponent to emit the accordion's identifier along with the state change. Update the stateValue() method as follows:

stateValue() {
  this.data.panelOpenState = !this.data.panelOpenState;
  this.accordianStateService.setOpenState({ id: this.data.id, state: this.data.panelOpenState });
}

3. Update the SidePanelAccordianService to emit the accordion's identifier along with the state change. Update the setOpenState() method as follows:

public setOpenState(data: { id: string, state: boolean }) {
  this._openStateBehaviorSubject.next(data);
}

4. In the component where you use the wrapper, subscribe to openState$ and differentiate between the accordions based on their identifiers:

this.accordianStateService.openState$.subscribe(data => {
  const accordionId = data.id;
  const accordionState = data.state;

  if (accordionId === 'firstAccordionId') {
    // Handle state change for the first accordion
    this.firstDriverExpanded = accordionState;
  } else if (accordionId === 'secondAccordionId') {
    // Handle state change for the second accordion
    this.secondDriverExpanded = accordionState;
  }
});

Make sure to replace 'firstAccordionId' and 'secondAccordionId' with the actual identifiers of your accordions.

With this approach, you can differentiate between the accordions based on their identifiers when the openState$ value is updated, allowing you to handle the state changes for each accordion separately.