Property 'id' does not exist on type '{}' when passing data

I am getting the following error when passing data

Property 'id' does not exist on type '{}'.

Here is my code

Service

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

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

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

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({ id: this.data.id, state: this.data.panelOpenState });
  }

}

Model

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;
  }
}

HTML

<mat-accordion>
    <mat-expansion-panel (id)="data.id" (opened)="data.panelOpenState === true" (closed)="data.panelOpenState === false" [expanded]="data.expanded" (click)="stateValue()">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{ data?.title }}
            </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-content></ng-content>
    </mat-expansion-panel>
</mat-accordion>

Component where error is coming

this.accordianStateService.openState$.subscribe(data => {
  if (data.id === 'firstAccordionId') {
    this.firstDriverExpanded = true;
  } else if (data.id === 'secondAccordionId') {
    this.secondDriverExpanded = false;
  } else if (data.id === 'secondAccordionId') {
    this.thirdDriverExpanded = false;
  }
});

If I console.log(data) then I get {}. How can I set the value in the object before subscribing?

export interface SidePanelAccordianData {
  id: string;
  title?: string;
  panelOpenState: boolean;
  expanded?: boolean;
}

 private _openStateBehaviorSubject = new BehaviorSubject<SidePanelAccordianData  | undefined>(undefined);

or

  private _openStateSubject = new Subject<SidePanelAccordianData>();

You have to configure your _openStateBehaviorSubject as following:

private _openStateBehaviorSubject = new BehaviorSubject<{ id: string; state: boolean }>({} as { id: string; state: boolean });

This will specify the generic type of the BehaviorSubject. If you don't pass it, the generic type will be just {} as the default value, and this is the cause of your error.