Implementieren Sie die Übergangs -API der Ansicht in einer Winkel -App ⇐ HTML

[Anonymous]

Ich möchte einen Teil meiner Winkelanwendung animieren. /> Ich habe eine Seitenleiste, in der Lebensmittelkategorien aufgeführt sind. Wenn der Benutzer auf die Kategorie Lebensmittel klickt, aktualisiere ich die Produkte und zeige nur die Produkte, die zur ausgewählten Kategorie gehören.

Code: Select all

filteredProducts$!: Observable
;
selectedCategory$: Observable;
private store = inject(Store);

constructor() {
this.selectedCategory$ = this.store.select(
CategorySelectors.selectSelectedCategory
);
this.filteredProducts$ = combineLatest([
this.store.select(ProductSelectors.selectAllProducts),
this.store.select(CategorySelectors.selectSelectedCategoryId),
]).pipe(
map(([products, selectedCategoryId]) => {
if (selectedCategoryId) {
return products.filter((p) => p.categoryId === selectedCategoryId);
}
return products;
})
);
}

ngOnInit() {
this.store
.select(ProductSelectors.selectAllProducts)
.subscribe((products) => {
if (!products || products.length === 0) {
this.store.dispatch(ProductActions.loadProducts());
}
});
}
< /code>
html < /p>

Wie kann ich in meinem Fall die Übergangs -Übergangs -API verwenden?