API reference for Angular Material badge
import {MatBadgeModule} from '@angular/material/badge';
Directives
MatBadge
Directive to display a text badge.
Selector: [matBadge]
Properties
| Name | Description |
|---|---|
@Input('matBadgeColor')
|
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.dev/components/badge/styling. For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input('matBadge')
|
The content for the badge |
@Input('matBadgeDescription')
|
Message used to describe the decorated element via aria-describedby |
@Input({ alias: 'matBadgeDisabled', transform: booleanAttribute })
|
Whether the badge is disabled. |
@Input({ alias: 'matBadgeHidden', transform: booleanAttribute })
|
Whether the badge is hidden. |
@Input({ alias: 'matBadgeOverlap', transform: booleanAttribute })
|
Whether the badge should overlap its contents or not |
@Input('matBadgePosition')
|
Position the badge should reside. Accepts any combination of 'above'|'below' and 'before'|'after' |
@Input('matBadgeSize')
|
Size of the badge. Can be 'small', 'medium', or 'large'. |
Methods
getBadgeElement
(): HTMLElement | undefined
|
|
|---|---|
|
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
(): boolean
|
|
|---|---|
|
Whether the badge is above the host or not |
|
| Returns | |
boolean
|
|
isAfter
(): boolean
|
|
|---|---|
|
Whether the badge is after the host or not |
|
| Returns | |
boolean
|
|
Interfaces
MatBadgeConfig
Object that can be used to configure the default options for the badge component.
Properties
| Name | Description |
|---|---|
|
Default color to apply to all badges. |
|
Whether badges should overlap by default. |
|
Default position for badges. |
|
Default size for badges. |
Type aliases
MatBadgePosition
Allowed position options for matBadgePosition
type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after' | 'before' | 'after' | 'above' | 'below';
MatBadgeSize
Allowed size options for matBadgeSize
type MatBadgeSize = 'small' | 'medium' | 'large';
Constants
MAT_BADGE_CONFIG
Injection token that can be used to configure the default options for the badge component.
const MAT_BADGE_CONFIG: InjectionToken;
API reference for Angular Material badge-testing
import {MatBadgeHarness} from '@angular/material/badge/testing';
Classes
MatBadgeHarness
extends
ComponentHarness
Harness for interacting with a standard Material badge in tests.
Properties
| Name | Description |
|---|---|
|
Methods
async
getPosition
(): Promise<MatBadgePosition>
|
|
|---|---|
|
Gets the position of the badge. |
|
| Returns | |
Promise<MatBadgePosition>
|
|
async
getSize
(): Promise<MatBadgeSize>
|
|
|---|---|
|
Gets the size of the badge. |
|
| Returns | |
Promise<MatBadgeSize>
|
|
async
getText
(): Promise<string>
|
|
|---|---|
|
Gets a promise for the badge text. |
|
| Returns | |
Promise<string>
|
|
async
host
(): Promise<TestElement>
|
|
|---|---|
|
Gets a |
|
| Returns | |
Promise<TestElement>
|
|
async
isDisabled
(): Promise<boolean>
|
|
|---|---|
|
Gets whether the badge is disabled. |
|
| Returns | |
Promise<boolean>
|
|
async
isHidden
(): Promise<boolean>
|
|
|---|---|
|
Gets whether the badge is hidden. |
|
| Returns | |
Promise<boolean>
|
|
async
isOverlapping
(): Promise<boolean>
|
|
|---|---|
|
Gets whether the badge is overlapping the content. |
|
| Returns | |
Promise<boolean>
|
|
static
with
(options:
BadgeHarnessFilters = {}): HarnessPredicate<MatBadgeHarness>
|
|
|---|---|
|
Gets a |
|
| Parameters | |
|
options BadgeHarnessFilters = {}
|
Options for narrowing the search:
|
| Returns | |
HarnessPredicate<MatBadgeHarness>
|
a |
Interfaces
BadgeHarnessFilters
Properties
| Name | Description |
|---|---|
|