​
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. 
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.