Angular
Angular Runtime
Official Angular runtime optimized to bypass unnecessary change detection loops.
exodeui-angular
Installation
bash
npm install exodeui-angularGetting Started
The Angular runtime runs the animation engine outside Angular's NgZone for maximum performance.
Performance: The core engine loop runs outside NgZone — frame-by-frame updates won't trigger Angular change detection.
HTML Template
html
<exodeui-canvas
[artboard]="artboardData"
fit="Contain"
[interactive]="true"
(ready)="exoService.register($event)"
(trigger)="onTrigger($event)"
(navigation)="onNavigation($event)"
></exodeui-canvas>Component Logic
ts
import { Component, inject } from '@angular/core';
import { ExodeUICanvasComponent, ExodeUIService } from 'exodeui-angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [ExodeUICanvasComponent],
templateUrl: './app.component.html',
})
export class AppComponent {
exoService = inject(ExodeUIService);
artboardData = /* your artboard JSON */;
onTrigger({ name, anim }: any) {
console.log('Trigger:', name, anim);
}
onNavigation({ type, value }: any) {
if (type === 'url') window.open(value);
}
}