Avatar
A person's photo or initials, in several sizes.
Preview
A working preview of Avatar in the Brickclay style. Try it.
AASKMZJD
Image, initials and icon fallbacks, four status dots.
Interact with the preview to see events here.
Avatars
Interactive Demo, click the buttons to cycle through every property at runtime
Tip: Toggle the image off then cycle fallback between auto, initials, and icon to see each fallback behaviour in action.
ngModel / CVA
bk-avatar implements ControlValueAccessor so it can be bound with [(ngModel)] or formControlName. The form value drives the src, type a URL below and apply it to see the avatar update through the forms system.
assets/avatars/300-1.png
How it works: The avatar's writeValue() receives the URL from the form system and sets src internally. Because the component uses OnPush, it calls markForCheck() so Angular knows to re-render.