I have created a custom pipe in Angular to transform data retrieved from an observable using the async pipe. Here is the HTML code snippet:
<div class="meeting-dtls-sub-div" ***ngFor="let meeting of meetingData$ | async | hzCalendarFilter | async"**>
</div>
HzCalendarFilter.ts==
@Pipe({
name: 'hzCalendarFilter',
})
export class HzCalendarFilterPipe implements PipeTransform {
storedFilter$ = this.store$.pipe(select(getFilters));
appliedFilterArr: string[] = [];
constructor(private store$: Store<AppState>) {}
transform(HzCaleDateArr: any = []) {
return this.storedFilter$.pipe(
map((filterArr: ICalendarFilter[]) => {
this.appliedFilterArr = filterArr.filter((item) => item.isEnabled).map((data) => data.className);
if (!!HzCaleDateArr) {
return HzCaleDateArr.map((dateItem: any) => {
return {
...dateItem,
meetings: dateItem.meetings.filter((item: any) =>
this.checkItemPresentOrNotAccordingToAppliedFilter(item.meetingType)
),
};
});
}
})
);
}
checkItemPresentOrNotAccordingToAppliedFilter(meetingType: string) {
const className = returnClassNameForMeeting(meetingType);
if (!!className) {
return this.appliedFilterArr.indexOf(className) > -1 ? true : false;
}
}
}
*I want to confirm if my approach of chaining async pipes like this (ngFor="let meeting of meetingData$ | async | hzCalendarFilter | async") is correct or not. Any feedback is appreciated.