Angular Usage

The @avatar-generator/angular package provides an Angular component for rendering avatars with any style.

Import the Module

After installing the package, import the AvatarModule in your Angular module:

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

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

Basic Usage

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

@Component({
selector: "app-user-profile",
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 { 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";

@Component({
selector: "app-avatar-gallery",
template: `
<div class="avatar-gallery">
<avatar-generator [style]="initialsStyle" [options]="options" alt="Initials" />
<avatar-generator [style]="geometricStyle" [options]="options" alt="Identicon" />
<avatar-generator [style]="pixelsStyle" [options]="options" alt="Pixel Faces" />
<avatar-generator [style]="ringsStyle" [options]="options" alt="Rings" />
<avatar-generator [style]="facesStyle" [options]="options" alt="Faces" />
<avatar-generator [style]="illustratedStyle" [options]="options" alt="Illustrated" />
<avatar-generator [style]="animeStyle" [options]="options" alt="Anime" />
</div>
`,
})
export class AvatarGalleryComponent {
initialsStyle = initials;
geometricStyle = geometric;
pixelsStyle = pixels;
ringsStyle = rings;
facesStyle = faces;
illustratedStyle = illustrated;
animeStyle = anime;

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

With Custom Options

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

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

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

Component Inputs

Input	Type	Description
style	Style<T>	The avatar style to use (required)
options	T extends AvatarOptions	Style-specific options (required)
alt	string	Alt text for accessibility (default: “Avatar”)

Standalone Components

If you’re using standalone components (Angular 14+), you can import the component directly:

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

@Component({
selector: "app-user-avatar",
standalone: true,
imports: [AvatarComponent],
template: `
<avatar-generator
[style]="initialsStyle"
[options]="{ seed: userId, size: 48 }"
/>
`,
})
export class UserAvatarComponent {
initialsStyle = initials;
userId = "user-123";
}