Avatar
Renders an accessible label associated with controls.
Loading...
main.ts
styles.css
Features
- Automatic and manual control over when the image renders.
- Fallback part accepts any children.
- Optionally delay fallback rendering to avoid content flashing.
Anatomy
Import all parts and piece them together.
API Reference
Image
RdxAvatarImageDirective
The image to render.
By default it will only render when it has loaded. You can use the onLoadingStatusChange
handler if you need more control.
Prop | Type | Default |
---|---|---|
onLoadingStatusChange | EventEmitter | new EventEmitter<RdxImageLoadingStatus>() |
Fallback
RdxAvatarFallbackDirective
An element that renders when the image hasn’t loaded. This means whilst it’s loading, or if there was an error.
If you notice a flash during loading, you can provide a delayMs
prop to delay its rendering
so it only renders for those with slower connections.
For more control, use the onLoadingStatusChange
handler on rdxAvatarImage
.
Prop | Type | Default |
---|---|---|
rdxDelayMs | number | this.config.delayMs |
visible | - | signal(false) |