Implement view transition api in an Angular app

I would like to animate a part of my angular application.

Actually to add view transition api I add withViewTransitions() to ApplicationConfig provider.

and then when I interact with the application the animation happens on all the screen.

I would like to apply it partially.

I have a sidebar nav that list food categories. when user clicks on the food category I update the products and show only the products that belong to the selected category.

I should use document.startTransitionView()in my product-grid.component but I don't know how exactly.

Here's the component

filteredProducts$!: Observable<Product[]>;
selectedCategory$: Observable<any>;
private store = inject(Store<AppState>);

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


html

<mat-sidenav-container class="sidenav-container">
<mat-sidenav
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="menuOpened && !(isHandset$ | async)"
class="sidenav mat-elevation-z1"
[class.mat-rounded-medium]="!(isHandset$ | async)"
>
<app-category-menu></app-category-menu>
</mat-sidenav>

<mat-sidenav-content class="content-area">
<div class="main-content mat-rounded-medium">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>




How can I use view transition api in my case ?

Continue reading...