Primitives

Avatar

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

Import

Import the Avatar primitives from ng-primitives/avatar.

import { NgpAvatar, NgpAvatarImage, NgpAvatarFallback } from 'ng-primitives/avatar';

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/avatar package:

NgpAvatar

Apply the ngpAvatar directive to an element that represents the avatar. This directive is a container for the image and/or fallback.

Selector: [ngpAvatar]
Exported As: ngpAvatar
Host Directives: NgpHover, NgpFocusVisible, NgpPress

Data Attributes

Attribute	Description	Value
`data-state`	The loading state of the avatar image.	`idle` \| `loading` \| `loaded` \| `error`
`data-hover`	The hover state of the avatar.	`true` \| `false`
`data-focus-visible`	The focus state of the avatar.	`true` \| `false`
`data-press`	The press state of the avatar.	`true` \| `false`

NgpAvatarImage

Apply the ngpAvatarImage directive to an element that represents the avatar image. This would typically be an img element or a div with a background image.

Selector: [ngpAvatarImage]
Exported As: ngpAvatarImage
Host Directives: NgpVisuallyHidden

NgpAvatarFallback

Apply the ngpAvatarFallback directive to an element that represents the user in the absence of an image. This is typically the user's initials.

Selector: [ngpAvatarFallback]
Exported As: ngpAvatarFallback

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';

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

NgpAvatarConfig