Angular — standalone & signals

A standalone, OnPush, signal-based <ania-avatar> component plus an injectable AniaAvatarService.

◐ code & guide npm: ania-avatar-angular · Angular ≥18

⚠️ Why no live mount here? ania-avatar-angular is an Angular Package Format (APF) library meant to be consumed by the Angular compiler in an npm project — it has no self-contained IIFE/UMD bundle to drop onto a static page. Mounting it would mean shipping a whole Angular app and compiler, which isn't appropriate for a static showcase. Instead, here is the exact integration, plus a one-click sandbox to run it.

⚡ Open an Angular sandbox on StackBlitz → View the library on GitHub →

install

npm i ania-avatar-angular ania-avatar-core --legacy-peer-deps
# optional (on-device wake-word + neural TTS):
npm i onnxruntime-web piper-tts-web

standalone component

import { Component } from '@angular/core';
import { AniaAvatarComponent } from 'ania-avatar-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AniaAvatarComponent],
  template: `
    <ania-avatar
      [avatarUrl]="url"
      [width]="320" [height]="320"
      [lipSyncEnabled]="true"
      (load)="onLoad($event)"
      (talkStart)="onTalk()">
    </ania-avatar>
  `,
})
export class AppComponent {
  url = '/avatars/ania.ania';
  onLoad(data: unknown) { console.log('avatar loaded', data); }
  onTalk() { console.log('talking'); }
}

imperative control via AniaAvatarService

import { viewChild } from '@angular/core';
import { AniaAvatarComponent } from 'ania-avatar-angular';

private avatar = viewChild.required<AniaAvatarComponent>('a');

wave() {
  const svc = this.avatar().service;
  svc.triggerAction('wave');     // trigger an action
  svc.setTalking(true);          // force talking
  svc.runCommand('speed 2 4');   // desktop-style command line
  console.log(svc.talking());    // signal state
}