Badge

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

The color of the badge. Can be primary, accent, or warn.

@Input('matBadge')

content: string

The content for the badge

@Input('matBadgeDescription')

description: string

Message used to describe the decorated element via aria-describedby

@Input( matBadgeDisabled)

disabled: boolean

Whether the component is disabled.

@Input('matBadgeHidden')

hidden: boolean

Whether the badge is hidden.

@Input('matBadgeOverlap')

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
isAbove

Whether the badge is above the host or not

Returns
boolean

isAfter

Whether the badge is after the host or not

Returns
boolean

type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after';
type MatBadgeSize = 'small' | 'medium' | 'large';