A toolkit of Angular directives designed to build a fully customizable avatar image component, will a fallback to represent the image.
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's set structure.
Input props
AvatarRoot Attribute
The root directive for the avatar. Handles the avatar state. It doesn't have any inputs, outputs or attributes.
AvatarImage Attribute Optional
A directive to listen the image render.
| Input | Default | Type | Required |
|---|---|---|---|
| src* | — | string | true |
| Output | Description | Returns |
|---|---|---|
| loadingStatusChange | A callback invoked when the loading status store of the image changes. | LoadingStatus |
AvatarFallback Structural Optional
Use this directive to show a fallback when the image is not available.
| Input | Default | Type | Required |
|---|---|---|---|
| delayMs | 0 | number | false |
State
AvatarStateService allows to load and listen the status of an image.
Access directive API with exportAS
We can access the state of the avatar using a template variable. All the directives expose themself with the same name. We have access to the directive's attributes and also the state service.
Example
We could use it with any other directive. For example with #image="vacAvatarRoot" and access the state.
State API - AvatarStateService
Documentation for the avatar state service API.
Variables
| Name | Type | Default |
|---|---|---|
| loadingStatus | WritableSignal<LoadingStatus> | idle |
Methods
| Method | Arguments | Return |
|---|---|---|
| loadImage | string | void |
Types/Interfaces
Avatar interfaces that you can import.