Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class 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

The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an image, someone's initials or a material icon from the Google Material icon set.

Example

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

Implements

  • OnInit

Constructors

Properties

Accessors

Constructors

constructor

Properties

ariaLabel

ariaLabel: string = 'avatar'

Returns the aria-label attribute of the avatar.

Example

let ariaLabel = this.avatar.ariaLabel;

bgColor

bgColor: string

Sets the background color of the avatar.

Example

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

Igx Friendly Name

Background color

Deprecated

in version 17.2.0.

color

color: string

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

Example

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

Deprecated

in version 17.2.0.

elementRef

elementRef: ElementRef<any>

icon

icon: string

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

Example

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

id

id: string = ...

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

Example

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

initials

initials: string

Sets initials to the avatar.

Example

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

role

role: string = 'img'

Returns the role attribute of the avatar.

Example

let avatarRole = this.avatar.role;

roleDescription

roleDescription: string

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

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

Example

let avatarDescription = this.avatar.roleDescription;

shape

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

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

Example

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

src

src: string

Sets the image source of the avatar.

Example

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

Igx Friendly Name

Image URL

Accessors

size

type