Undoubtedly, I made an effort to search for a similar question like this one since it's hard to believe that it hasn't been asked before (even though there may be some anti-pattern involved). Let's dive into this component:
@Component({...})
export class MyParent {
myGroups: Observable<Array<MyItemGroup>>;
}
Here, the definition of MyItemGroup is as follows:
export class MyItemGroup {
groupDisplayName: string;
group: Observable<Array<MyGroupedItem>>;
}
Is this structure considered an anti-pattern? Is there a more recommended grouping design in angular.io? To avoid the typical response, "it depends," let's explore further:
export class MyGroupedItem {
title: string;
uri: string;
}
In the context of MyParent, I aim to filter MyGroupedItem based on their title. If this filtering results in zero MyItemGroup.group items, I want to exclude the entire MyItemGroup. This seems to indicate the necessity of adding mySubject to MyParent:
@Component({...})
export class MyParent {
myGroups: Observable<Array<MyItemGroup>>;
mySubject: Subject<string> = new Subject<string>();
filterMyGroups(particle: string): void {
this.mySubject.next(particle);
}
}
At this point, it appears that I need to utilize RxJS extensively to combine myGroups with mySubject. How should this be approached? The user interface would interact with mySubject through the following markup:
<input #myFilter (keyup)="filterMyGroups(myFilter.value)" />
I can only wish for a resolution that clarifies and addresses my inquiries effectively.