Angular rx js Behaviour subject not working properly

I am facing issue in the Behaviour Subject not picking the value from selected option.

private selectedCustomerSubject = new BehaviorSubject<number>(0);

selectedCustomerAction$ = this.selectedCustomerSubject.asObservable();

getFilteredProjects(): Observable<project[]> {
return combineLatest([this.projects$, this.selectedCustomerAction$ ]).pipe(
map(([projects, selectedCustomerId]) => {
return selectedCustomerId
? projects.filter(project => project.id === selectedCustomerId)
: projects;
})
);
}
projectWithFilter$ = this.getFilteredProjects();

<div class="container">
<h2>Customer Projects filter dropdown</h2>

<!-- Customer Dropdown -->
<mat-form-field appearance="fill" class="customer-dropdown">
<mat-label>Select Customer</mat-label>
<mat-select (selectionChange)="onCustomerChange($event.value)">
<mat-option *ngFor="let customer of customers$ | async as customers" [value]="customer.id">
{{ customer.first_name }}
</mat-option>
</mat-select>
</mat-form-field>

<h2>Projects filter Information </h2>
<div *ngIf="projectWithFilter$ | async as custprojects">
<mat-list>
<mat-list-item *ngFor="let custproject of custprojects ">
{{ custproject.id }}
{{ custproject.projectName }}
{{ custproject.first_name }}
</mat-list-item>
</mat-list>
</div>


the project page is displaying all the projects rather than just with filter

Continue reading...