API for badge

API reference for Angular Material badge

import {MatBadgeModule} from '@angular/material/badge';

Directive to display a text badge.

Selector: [matBadge]

Properties
Name Description
@Input('matBadgeColor')

color: ThemePalette

Theme color of the badge. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@Input('matBadge')

content: string | number | undefined | null

The content for the badge

@Input('matBadgeDescription')

description: string

Message used to describe the decorated element via aria-describedby

@Input({ alias: 'matBadgeDisabled', transform: booleanAttribute })

disabled: boolean

Whether the badge is disabled.

@Input({ alias: 'matBadgeHidden', transform: booleanAttribute })

hidden: boolean

Whether the badge is hidden.

@Input({ alias: 'matBadgeOverlap', transform: booleanAttribute })

overlap: boolean

Whether the badge should overlap its contents or not

@Input('matBadgePosition')

position: MatBadgePosition

Position the badge should reside. Accepts any combination of 'above'|'below' and 'before'|'after'

@Input('matBadgeSize')

size: MatBadgeSize

Size of the badge. Can be 'small', 'medium', or 'large'.

Methods
getBadgeElement

Gets the element into which the badge's content is being rendered. Undefined if the element hasn't been created (e.g. if the badge doesn't have content).

Returns
HTMLElement | undefined

isAbove

Whether the badge is above the host or not

Returns
boolean

isAfter

Whether the badge is after the host or not

Returns
boolean

Allowed position options for matBadgePosition

type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after' | 'before' | 'after' | 'above' | 'below';

Allowed size options for matBadgeSize

type MatBadgeSize = 'small' | 'medium' | 'large';

API reference for Angular Material badge-testing

import {MatBadgeHarness} from '@angular/material/badge/testing';

Harness for interacting with a standard Material badge in tests.

Properties
Name Description

static hostSelector: '.mat-badge'

Methods
async
getPosition

Gets the position of the badge.

Returns
Promise<MatBadgePosition>

async
getSize

Gets the size of the badge.

Returns
Promise<MatBadgeSize>

async
getText

Gets a promise for the badge text.

Returns
Promise<string>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Gets whether the badge is disabled.

Returns
Promise<boolean>

async
isHidden

Gets whether the badge is hidden.

Returns
Promise<boolean>

async
isOverlapping

Gets whether the badge is overlapping the content.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a badge with specific attributes.

Parameters

options

BadgeHarnessFilters = {}

Options for narrowing the search:

  • text finds a badge host with a particular text.

Returns
HarnessPredicate<MatBadgeHarness>

a HarnessPredicate configured with the given options.

Properties
Name Description

text: string | RegExp

Azure & Blue theme selected.