Badge

The Ignite UI for Angular Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when visual notification is needed. Badges usually are designed as icons with a predefined style to communicate information, success, warnings, or errors.

Badge Demo

Note

To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.

Usage

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

// app.module.ts

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

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

Let's create a simple list with contacts similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we use the igx-badge and igx-avatar components. For a container, igx-list is used.

To continue, include all needed modules and import them in the app.module.ts file.

// app.module.ts

...
import {
    IgxListModule,
    IgxAvatarModule,
    IgxBadgeModule
} from 'igniteui-angular';

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

Having all set up, let's show all the contacts in the IgxList component. The list contains the member name and its availability.

<!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div>
      <div>
        <span class="contact-name">{{ member.name }}</span>
        <span>({{ member.status }})</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>
// contacts.component.ts

...
 public members: Member[] = [
    new Member("Terrance Orta", "online"),
    new Member("Donna Price", "online"),
    new Member("Lisa Landers", "away"),
    new Member("Dorothy H. Spencer", "offline"),
  ];

...
class Member {
    public name: string;
    public status: string;
    public type: string;
    public icon: string;

    constructor(name: string, status: string) {
        this.name = name;
        this.status = status;
        switch (status) {
            case "online":
                this.type = "success";
                this.icon = "check";
                break;
            case "away":
                this.type = "warning";
                this.icon = "schedule";
                break;
            case "offline":
                this.type = "error";
                this.icon = "remove";
                break;
        }
    }
}

If the sample is configured properly, a list with members' name and status should be displayed.

Let's add an avatar in front of every chat member. To do this, put another div element in the igx-list-item containing the IgxAvatar. Modify the list item content as shown below.

<!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div class="wrapper">
      <div>
        <igx-avatar icon="person" roundShape="true" size="small"></igx-avatar>
      </div>
      <div style="margin-left: 20px; align-content: center;">
        <span class="contact-name">{{ member.name }}</span>
        <span>({{ member.status }})</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>

Having just a list with names doesn't provide much useful visual information. The last step is to add igx-badge to show the contact state notification. Modify the igx-list-item content as shown below adding a badge component inside the avatar component.

Notice that the igx-badge has icon and type inputs to configure the badge look. You can set icon by providing its name from the official material icons set. The badge type can be set to either default, info, success, warning, or error. Depending on the type, a specific background color is applied.

In our sample, icon and type are bound to model properties named icon and type.

In order to position the badge in its parent container, create a custom css class badge-style and define the top and right positions.

<!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div class="wrapper">
      <div>
        <igx-avatar icon="person" roundShape="true" size="small">
          <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
        </igx-avatar>
      </div>
      <div style="margin-left: 20px; align-content: center;">
        <span class="contact-name">{{ member.name }}</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>
<!-- contacts.component.css -->

.badge-style
{
  position: absolute;
  bottom: -6px;
  right: -50px;
}

If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge showing its current state.

API Summary

The following table summarizes some of the useful igx-badge component inputs.

Inputs

The following inputs are available in the igx-badge component:

Name Type Description
icon string Set an icon from the material icons set. The icon will not be displayed if the badge value is already set.
type string Set the badge type to either default, info, success, warning, or error. Depending on the type, specific background color is set as declared in the default theme.
value string Set the value displayed inside the badge.

Additional Resources

Our community is active and always welcoming to new ideas.