@anguless/angulux/avatar

avatar

1 declarations3 demos

import

import { AvatarModule } from '@anguless/angulux/avatar';

Basic

An avatar shows a label or an icon; image is a third option.

<agl-avatar label="P" /><agl-avatar icon="pi pi-user" />

Size accepts large and xlarge as alternatives to the standard.

<agl-avatar label="N" /><agl-avatar label="L" size="large" /><agl-avatar label="X" size="xlarge" />

Shape switches between a square and a circle.

<agl-avatar label="S" shape="square" /><agl-avatar label="C" shape="circle" />

Generated from the committed corpus, which check:corpus holds to the built library.

componentagl-avatar

Avatar represents people using icons, labels and images.

Input	Type	Default	Description
label	string \| undefined	not documented	Defines the text to display.
icon	string \| undefined	not documented	Defines the icon to display.
image	string \| undefined	not documented	Defines the image to display.
size	'normal' \| 'large' \| 'xlarge' \| undefined	not documented	Size of the element.
shape	'square' \| 'circle' \| undefined	not documented	Shape of the element.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Class of the element.
ariaLabel	string \| undefined	not documented	Establishes a string value that labels the component.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.

Output	Type	Description
onImageError	EventEmitter<Event>	This event is triggered if an error occurs while loading an image file.

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.