> ## Documentation Index
> Fetch the complete documentation index at: https://ng-primitives.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

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

<iframe style={{ width: '100%', height: '378px', borderRadius: 12 }} src="https://ng-primitives.github.io/ng-primitives/#/examples/avatar" />

## Usage

Assemble the avatar directives in your template.

```html
<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

<ResponseField name="ngpAvatarFallbackDelay" type="number" default="0">
  Define a delay before the fallback is shown. This is useful to only show the fallback for those
  with slower connections.
</ResponseField>

## Global Configuration

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

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

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

### NgpAvatarConfig

<ResponseField name="delay" type="number">
  Define a delay before the fallback is shown. This is useful to only show the fallback for those
  with slower connections.
</ResponseField>

## Schematics

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

<CodeGroup>
  ```bash Angular CLI
  ng generate @ng-primitives/ng-primitives:avatar
  ```

  ```bash Nx
  nx generate @ng-primitives/ng-primitives:avatar
  ```
</CodeGroup>

### Options

<ResponseField name="name" type="string">
  The name of the component.
</ResponseField>

<ResponseField name="project" type="string">
  The name of the project to add the component to.
</ResponseField>

<ResponseField name="path" type="string">
  The path to create the component.
</ResponseField>