Angular Avatar Library – Using DiceBear with Angular

DiceBear can be integrated into Angular components using Signals (Angular 17+) or the OnChanges lifecycle hook. Use the JavaScript library for client-side SVG avatar generation, or the HTTP API as a simple <img> source with no additional dependencies.

You can use DiceBear with Angular either via the JS-Library or the HTTP-API.

With the JS library

Angular 17+

import { Component, input, computed } from '@angular/core';
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

@Component({
  selector: 'app-avatar',
  template: `<img [src]="avatarUrl()" alt="Avatar" />`,
})
export class AvatarComponent {
  seed = input('John Doe');

  avatarUrl = computed(() =>
    createAvatar(lorelei, {
      seed: this.seed(),
      size: 128,
      // ... other options
    }).toDataUri()
  );
}

Angular 16 and earlier

import { Component, Input, OnChanges } from '@angular/core';
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

@Component({
  selector: 'app-avatar',
  standalone: true,
  template: `<img [src]="avatarUrl" alt="Avatar" />`,
})
export class AvatarComponent implements OnChanges {
  @Input() seed: string = 'John Doe';
  avatarUrl: string = '';

  ngOnChanges() {
    this.avatarUrl = createAvatar(lorelei, {
      seed: this.seed,
      size: 128,
      // ... other options
    }).toDataUri();
  }
}

With the HTTP API

Angular 17+

import { Component, input, computed } from '@angular/core';

@Component({
  selector: 'app-avatar',
  template: `<img [src]="avatarUrl()" alt="Avatar" />`,
})
export class AvatarComponent {
  seed = input('John Doe');

  avatarUrl = computed(() => {
    const url = new URL('https://api.dicebear.com/9.x/lorelei/svg');
    url.searchParams.set('seed', this.seed());
    url.searchParams.set('size', '128');
    // ... other options
    return url.href;
  });
}

Angular 16 and earlier

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-avatar',
  standalone: true,
  template: `<img [src]="avatarUrl" alt="Avatar" />`,
})
export class AvatarComponent implements OnChanges {
  @Input() seed: string = 'John Doe';
  avatarUrl: string = '';

  ngOnChanges() {
    const url = new URL('https://api.dicebear.com/9.x/lorelei/svg');
    url.searchParams.set('seed', this.seed);
    url.searchParams.set('size', '128');
    // ... other options
    this.avatarUrl = url.href;
  }
}