Installation
import { WrAvatar } from 'ngwr/avatar';
@Component({ imports: [WrAvatar] })
export class MyComponent {}Basic usage
<wr-avatar url="/me.png" alt="Roman" />Sizes
Accepts a number (pixels), '48', '48px', or '3rem'. No percentages — avatars need a deterministic pixel size.
<wr-avatar url="/me.png" alt="Roman" [size]="32" />
<wr-avatar url="/me.png" alt="Roman" size="4rem" />
<wr-avatar url="/me.png" alt="Roman" size="6rem" />Shape
rounded (default) is a soft rounded square, square keeps hard corners. circle replaces the old [rounded] boolean. squircle uses corner-shape: squircle where supported.
<wr-avatar url="/me.png" alt="Roman" shape="square" />
<wr-avatar url="/me.png" alt="Roman" shape="rounded" />
<wr-avatar url="/me.png" alt="Roman" shape="circle" />
<wr-avatar url="/me.png" alt="Roman" shape="squircle" />Initials fallback
When the avatar has no image, projected content fills the box. Use a flex layout to center it. A [url] that fails to load lands in the same place — the spinner and the broken <img> are dropped and the initials behind them show through, which is the one state where an avatar is guaranteed to have something worth showing.
<wr-avatar [size]="48" shape="circle">RK</wr-avatar>API
| Name | Description | Type | Default |
|---|---|---|---|
url | Image URL. When unset, only projected content (e.g. initials) renders. | string | null | null |
alt | Alt text for the image. Falls back to avatar.alt, then 'Avatar' — pass the person's name where you have it, since that is what a reader wants. | string | null | null |
shape | Corner treatment. rounded (default) is a soft rounded square, circle is the classic profile avatar, squircle is the iOS look. | WrAvatarShape | 'rounded' |
size | Box size. See {@link WrAvatarSize} for accepted values. | WrAvatarSize | '6rem' |
CSS variables
Custom properties ngwr/avatar publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-avatar-img-opacity | 0 | .wr-avatar +1 variant override |
--wr-avatar-radius | 10% | .wr-avatar +2 variant overrides |
--wr-avatar-ring | var(--wr-color-border) | .wr-avatar +1 variant override |