Angular Usage

@avatar-generator/angular provides <avatar-generator>, a standalone component that renders an <img> from any style. It supports Angular 17 through 21 and ships as an Angular Package Format library (FESM2022, partial Ivy), so AOT builds consume it directly.

Import the component

Add AvatarComponent to the imports of whichever component uses it:

import { Component } from "@angular/core";
import { AvatarComponent } from "@avatar-generator/angular";
import { initials } from "@avatar-generator/style-initials";

@Component({
    selector: "app-user-profile",
    imports: [AvatarComponent],
    template: `<avatar-generator [style]="initialsStyle" [options]="{ seed: 'user-123' }" />`,
})
export class UserProfileComponent {
    initialsStyle = initials;
}

A style is a plain object, so expose it as a field on the component rather than importing it into the template.

NgModule applications

If your application still uses NgModules, import AvatarModule, which imports and re-exports the standalone component:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AvatarModule } from "@avatar-generator/angular";
import { AppComponent } from "./app.component";

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AvatarModule],
    bootstrap: [AppComponent],
})
export class AppModule {}

Existing imports: [AvatarModule] code needs no change. Do not add AvatarComponent to declarations — declaring a standalone component is an error.

Basic usage

import { Component } from "@angular/core";
import { AvatarComponent } from "@avatar-generator/angular";
import { initials } from "@avatar-generator/style-initials";

@Component({
    selector: "app-user-profile",
    imports: [AvatarComponent],
    template: `
        <avatar-generator
            [style]="initialsStyle"
            [options]="{ seed: user.id, name: user.name, size: 48 }"
            [alt]="user.name"
        />
    `,
})
export class UserProfileComponent {
    initialsStyle = initials;
    user = { id: "user-123", name: "Hugo GB" };
}

Using different styles

import { Component } from "@angular/core";
import { AvatarComponent } from "@avatar-generator/angular";
import type { AvatarOptions, Style } from "@avatar-generator/core";
import { initials } from "@avatar-generator/style-initials";
import { geometric } from "@avatar-generator/style-geometric";
import { pixels } from "@avatar-generator/style-pixels";
import { rings } from "@avatar-generator/style-rings";
import { faces } from "@avatar-generator/style-faces";
import { illustrated } from "@avatar-generator/style-illustrated";
import { anime } from "@avatar-generator/style-anime";
import { abstract } from "@avatar-generator/style-abstract";
import { emoji } from "@avatar-generator/style-emoji";
import { animals } from "@avatar-generator/style-animals";
import { gradient } from "@avatar-generator/style-gradient";

@Component({
    selector: "app-avatar-gallery",
    imports: [AvatarComponent],
    template: `
        <div class="avatar-gallery">
            @for (entry of styles; track entry.label) {
                <avatar-generator [style]="entry.style" [options]="options" [alt]="entry.label" />
            }
        </div>
    `,
})
export class AvatarGalleryComponent {
    styles: Array<{ style: Style<AvatarOptions>; label: string }> = [
        { style: initials, label: "Initials" },
        { style: geometric, label: "Geometric" },
        { style: pixels, label: "Pixels" },
        { style: rings, label: "Rings" },
        { style: faces, label: "Faces" },
        { style: illustrated, label: "Illustrated" },
        { style: anime, label: "Anime" },
        { style: abstract, label: "Abstract" },
        { style: emoji, label: "Emoji" },
        { style: animals, label: "Animals" },
        { style: gradient, label: "Gradient" },
    ];

    options = { seed: "user-123", size: 64 };
}

With custom options

import { Component } from "@angular/core";
import { AvatarComponent } from "@avatar-generator/angular";
import { geometric, type GeometricOptions } from "@avatar-generator/style-geometric";

@Component({
    selector: "app-custom-avatar",
    imports: [AvatarComponent],
    template: `<avatar-generator [style]="geometricStyle" [options]="avatarOptions" alt="User avatar" />`,
})
export class CustomAvatarComponent {
    geometricStyle = geometric;

    avatarOptions: GeometricOptions = {
        seed: "user-123",
        size: 96,
        square: true,
        colors: ["#FF6B6B", "#4ECDC4", "#45B7D1"],
        border: { width: 2, color: "#333" },
    };
}

Import the option type from the style package; in v3 core no longer declares style-specific types.

Inputs

Input	Type	Default	Description
`style`	`Style<T>`	(required)	The style object to render with
`options`	`T extends AvatarOptions`	(required)	Seed and style-specific options
`alt`	`string`	`"Avatar"`	Alt text for the `<img>`

Change detection

The component uses OnPush and regenerates in ngOnChanges, so it re-renders when the style or options reference changes. Mutating the existing options object in place will not trigger an update:

// Does not re-render
this.avatarOptions.size = 128;

// Re-renders
this.avatarOptions = { ...this.avatarOptions, size: 128 };

ESM only

Angular Package Format has been ESM-only since Angular v13, so this package has no require() entry point. Every other @avatar-generator package ships both ESM and CommonJS. If you need CommonJS in an Angular project — in a script run under plain Node, say — use @avatar-generator/core and the style package directly rather than this wrapper.