IgxAvatarComponent

Avatar provides a way to display an image, icon or initials to the user.

Igx Module: IgxAvatarModule
Igx Theme: igx-avatar-theme, igx-icon-theme
Igx Keywords: avatar, profile, picture, initials
Igx Group: Layouts

Remarks

[object Object]

Example

<igx-avatar initials="MS" shape="rounded" size="large">
</igx-avatar>

Constructors

new IgxAvatarComponent(): IgxAvatarComponent

Returns IgxAvatarComponent

Properties

ariaLabel

Returns the aria-label attribute of the avatar.

ariaLabel: string = 'avatar'

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:64

Example

let ariaLabel = this.avatar.ariaLabel;

bgColor

Sets the background color of the avatar.

bgColor: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:165

Example

<igx-avatar bgColor="yellow"></igx-avatar>

color

Sets the color of the avatar's initials or icon.

color: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:150

Example

<igx-avatar color="blue"></igx-avatar>

elementRef

elementRef: ElementRef<any>

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:52

icon

Sets an icon to the avatar. All icons from the material icon set are supported.

icon: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:187

Example

<igx-avatar icon="phone"></igx-avatar>

id

Sets the id of the avatar. If not set, the first avatar component will have id = "igx-avatar-0".

id: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:112

Example

<igx-avatar id="my-first-avatar"></igx-avatar>

initials

Sets initials to the avatar.

initials: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:176

Example

<igx-avatar initials="MN"></igx-avatar>

role

Returns the role attribute of the avatar.

role: string = 'img'

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:75

Example

let avatarRole = this.avatar.role;

roleDescription

Returns the type of the avatar. The avatar can be:

"initials type avatar"
"icon type avatar"
"image type avatar".
"custom type avatar".

roleDescription: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:100

Example

let avatarDescription = this.avatar.roleDescription;

shape

Sets square, rounded or circular shape to the avatar. By default the shape of the avatar is square.

shape: "circle" | "rounded" | "square" = 'square'

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:124

Example

<igx-avatar shape="rounded"></igx-avatar>

Accessors

size

Returns the size of the avatar.

get size(): string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:239

Example

let avatarSize = this.avatar.size;

Returns string

Sets the size of the avatar. By default, the size is "small". It can be set to "medium" or "large".

set size(value: string): void

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:252

Example

<igx-avatar size="large"></igx-avatar>

Parameters

value: string

Returns void

src

get src(): string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:203

Returns string

Sets the image source of the avatar.

set src(value: string): void

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:199

Example

<igx-avatar src="images/picture.jpg"></igx-avatar>

Parameters

value: string

Returns void

type

Returns the type of the avatar.

get type(): IgxAvatarType

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:272

Example

let avatarType = this.avatar.type;

Returns IgxAvatarType