Skip to content

avatar.md

Latest commit

 

History

History
118 lines (86 loc) · 4.12 KB

avatar.md

File metadata and controls

118 lines (86 loc) · 4.12 KB
Raw
title Avatar Component
description Ignite UI for Angular Avatar control enables users to add images, material icons or initials within any application for instances such as a profile button.
keywords Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Avatar component, Angular Avatar control
_language kr

Avatar

The Ignite UI for Angular Avatar component helps adding images, material icons, or initials to your application.

Avatar Demo

Usage

To get started with the Ignite UI for Angular Avatar, let's first import the IgxAvatarModule in the app.module.ts file:

// app.module.ts

...
import { IgxAvatarModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxAvatarModule],
    ...
})
export class AppModule {}

The Avatar can be either square or circular, with three size options (small, medium and large). It can be used for displaying initials, images or icons.

Avatar displaying initials

To get a simple avatar with initials (i.e. JS for 'Jack Sock'), add the following code inside the component template:

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

Let's enhance our avatar by making it circular and bigger in size. We can also change the background through the bgColor property or set a color on the initials through the color property. All of these are input properties and can be bound to some component properties.

<igx-avatar initials="JS" 
            [roundShape]="isCircular" 
            size="medium" 
            [bgColor]="bgColor" 
            [color]="color">
</igx-avatar>
// avatar.component.ts
...
  public bgColor = "#0375be";
  public color = "black";
  public isCircular = true;

If all went well, you should see something like the following in the browser:

<iframe id="avatar-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-1' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>

Avatar displaying image

To get an avatar that displays an image, all you have to do is setting the image source via the src property.

<igx-avatar [src]="imgSource"
            roundShape="true"
            size="large">
</igx-avatar>
// avatar.component.ts
...
  public imgSource = "https://randomuser.me/api/portraits/men/1.jpg";

If all went well, you should see something like the following in the browser:

<iframe id="avatar-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-2' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>

Avatar displaying icon

Analogically, the avatar can display an icon via the icon property. Currently all icons from the material icon set are supported.

<igx-avatar icon="phone"
            roundShape="true"
            size="large">
</igx-avatar>

API References

  • IgxAvatarComponent
  • IgxAvatarComponent Styles

Additional Resources

Our community is active and always welcoming to new ideas.