Avatar

Display an image that represents a user with a text fallback.

Usage

Assemble the avatar directives in your template.

<span ngpAvatar>
  <img ngpAvatarImage src="..." alt="..." />
  <span ngpAvatarFallback>NG</span>
</span>

API Reference

The following directives are available to import from the @ng-primitives/ng-primitives/avatar package:

NgpAvatarDirective

There are no inputs or outputs for this directive.

NgpAvatarImageDirective

There are no inputs or outputs for this directive.

NgpAvatarFallbackDirective

ngpAvatarFallbackDelay · number · default: "0"

Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.

Global Configuration

You can configure the default options for all avatars in your application by using the provideNgpAvatarConfig function in a providers array.

import { provideAvatarConfig } from '@ng-primitives/ng-primitives';

bootstrapApplication(AppComponent, {
  providers: [provideAvatarConfig({ delay: 1000 })],
});

NgpAvatarConfig

delay · number

Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.

Schematics

You can use our schematic to generate a new avatar component.

Angular CLI

ng generate @ng-primitives/ng-primitives:avatar

Options

name · string

The name of the component.

project · string

The name of the project to add the component to.

path · string

The path to create the component.