# 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 `![]()
` source with no
additional dependencies.
## With the JS library
```typescript [Angular 17+]
import { Component, input, computed } from '@angular/core';
import { Style, Avatar } from '@dicebear/core';
import lorelei from '@dicebear/styles/lorelei.json' with { type: 'json' };
const style = new Style(lorelei);
@Component({
selector: 'app-avatar',
template: `![Avatar]()
`,
})
export class AvatarComponent {
seed = input('Alice');
avatarUrl = computed(() =>
new Avatar(style, {
seed: this.seed(),
size: 128,
// ... other options
}).toDataUri(),
);
}
```
```typescript [Angular 16 and earlier]
import { Component, Input, OnChanges } from '@angular/core';
import { Style, Avatar } from '@dicebear/core';
import lorelei from '@dicebear/styles/lorelei.json' with { type: 'json' };
const style = new Style(lorelei);
@Component({
selector: 'app-avatar',
standalone: true,
template: `![Avatar]()
`,
})
export class AvatarComponent implements OnChanges {
@Input() seed: string = 'Alice';
avatarUrl: string = '';
ngOnChanges() {
this.avatarUrl = new Avatar(style, {
seed: this.seed,
size: 128,
// ... other options
}).toDataUri();
}
}
```
## With the HTTP API
```typescript [Angular 17+]
import { Component, input, computed } from '@angular/core';
@Component({
selector: 'app-avatar',
template: `![Avatar]()
`,
})
export class AvatarComponent {
seed = input('Alice');
avatarUrl = computed(() => {
const url = new URL('https://api.dicebear.com/10.x/lorelei/svg');
url.searchParams.set('seed', this.seed());
url.searchParams.set('size', '128');
// ... other options
return url.href;
});
}
```
```typescript [Angular 16 and earlier]
import { Component, Input, OnChanges } from '@angular/core';
@Component({
selector: 'app-avatar',
standalone: true,
template: `![Avatar]()
`,
})
export class AvatarComponent implements OnChanges {
@Input() seed: string = 'Alice';
avatarUrl: string = '';
ngOnChanges() {
const url = new URL('https://api.dicebear.com/10.x/lorelei/svg');
url.searchParams.set('seed', this.seed);
url.searchParams.set('size', '128');
// ... other options
this.avatarUrl = url.href;
}
}
```