Class IgxAvatarComponent

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

igxmodule

IgxAvatarModule

igxtheme

igx-avatar-theme, igx-icon-theme

igxkeywords

avatar, profile, picture, initials

igxgroup

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" [roundShape]="true" size="large">
</igx-avatar>

Hierarchy

  • IgxAvatarComponent

Implements

  • OnInit

Index

Constructors

Properties

ariaLabel: string = 'avatar'

Returns the aria-label attribute of the avatar.

example
let ariaLabel = this.avatar.ariaLabel;
bgColor: string

Sets the background color of the avatar.

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

Background color

color: string

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

example
<igx-avatar color="blue"></igx-avatar>
elementRef: ElementRef<any>
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: 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: string

Sets initials to the avatar.

example
<igx-avatar initials="MN"></igx-avatar>
role: string = 'img'

Returns the role attribute of the avatar.

example
let avatarRole = this.avatar.role;
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;
roundShape: boolean = false

Sets a round shape to the avatar, if [roundShape] is set to true. By default the shape of the avatar is a square.

example
<igx-avatar [roundShape]="true" ></igx-avatar>
src: string

Sets the image source of the avatar.

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

Image URL

Accessors

  • get size(): string
  • set size(value: string): void