Class IgxAvatarComponent

Ignite UI for Angular Avatar - Documentation

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
  • AfterViewInit

Constructors

constructor

Properties

ariaLabel

ariaLabel: string = "avatar"

Returns the aria-label of the avatar.

let ariaLabel = this.avatar.ariaLabel;

bgColor

bgColor: string

Sets the background color of the avatar.

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

IgxAvatarComponent

color

color: string

Sets the avatar's initials/icon color.

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

IgxAvatarComponent

cssClass

cssClass: string = "igx-avatar"

Returns the class of the avatar.

let avatarCLass =  this.avatar.cssClass;
memberof

IgxAvatarComponent

elementRef

elementRef: ElementRef

icon

icon: string

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

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

IgxAvatarComponent

id

id: string = `igx-avatar-${NEXT_ID++}`

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

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

IgxAvatarComponent

image

image: ElementRef

This is a reference to the avatar image element in the DOM.

 let image =  this.avatar.image;
memberof

IgxAvatarComponent

initials

initials: string

Sets initials to the avatar.

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

IgxAvatarComponent

role

role: string = "img"

Returns the role attribute of the avatar.

let avatarRole = this.avatar.role;
memberof

IgxAvatarComponent

roleDescription

roleDescription: string

Returns the type of the avatar. The avatar can be: "initials type avatar", "icon type avatar" or "image type avatar".

let avatarDescription = this.avatar.roleDescription;
memberof

IgxAvatarComponent

roundShape

roundShape: boolean = false

Sets a round shape to the avatar if roundShape is "true". By default the shape of the avatar is a square.

<igx-avatar roundShape = "true" ></igx-avatar>
memberof

IgxAvatarComponent

src

src: string

Sets the image source of the avatar.

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

IgxAvatarComponent

Accessors

size

  • get size(): string | Size
  • set size(value: string | Size): void
  • Returns the size of the avatar.

    let avatarSize =  this.avatar.size;
    memberof

    IgxAvatarComponent

    Returns string | Size

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

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

    IgxAvatarComponent

    Parameters

    • value: string | Size

    Returns void

template

  • get template(): TemplateRef<any>
  • Returns the template of the avatar.

    let template = this.avatar.template;
    memberof

    IgxAvatarComponent

    Returns TemplateRef<any>

type

Methods

getSrcUrl

  • getSrcUrl(): string