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.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')
|
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 | |
---|---|
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
|
|
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';
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
|
|
---|---|
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 |
|
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 |
|
Parameters | |
options BadgeHarnessFilters = {}
|
Options for narrowing the search:
|
Returns | |
HarnessPredicate<MatBadgeHarness>
|
a |
Interfaces
BadgeHarnessFilters
Properties
Name | Description |
---|---|
|