!ng-web-apis logo View Transition API for Angular

!npm bundle size

This service is an abstraction over
view transition API for Angular

Install

``bash
npm i @ng-web-apis/view-transition
`

How to use

1. Import the WaViewTransitionService into your Angular component or service where you want to use it.

`ts
import {WaViewTransitionService} from '@ng-web-apis/view-transition';
`

2. Inject the WaViewTransitionService into your component's constructor or with inject (Angular 14+).

`ts
// in constructor
constructor(private viewTransitionService: WaViewTransitionService) {}

// via inject
viewTransitionService = inject(WaViewTransitionService);
`

3. Use the startViewTransition method to initiate a view transition. This method takes a callback function that
returns a Promise or void. You can perform any necessary DOM changing logic within this callback.

`ts
startTransition() {
this.viewTransitionService.startViewTransition(() => {
// Your DOM changing logic goes here
return this.animateTransition();
}).subscribe({
next: (transition) => {
// Callback is done and transition is about to begin
console.log('View transition is about to begin:', transition);
},
complete: () => {
console.log('View transition completed');
},
error: (error) => {
// Handle any errors that occur during the transition
console.error('View transition error:', error);
},
});
}
``

Demo

You can try online demo here

See also

Other Web APIs for Angular by
@ng-web-apis