WAAPI in Angular
Explore how to apply the Web Animations API within Angular by accessing elements via ViewChild and triggering animations using AfterViewInit. Understand how to handle animation events like finish and cancel in an Angular context to create interactive and manageable animations.
We'll cover the following...
We'll cover the following...
To use WAAPI in Angular, we’ll need access to the element we want to animate. We can do this by giving the element an ID and using Angular’s ViewChild decorator. Instead of using the document’s DOMContentLoaded event, we can use Angular’s AfterViewInit lifecycle hook to trigger the animation. The rest of the WAAPI code is identical to the non-Angular version.
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}
Spin animation using WAAPI in Angular
Events
WAAPI emits events that we can listen to using JavaScript. There are some slight ...