API reference for Angular Material card
import {MatCardModule} from '@angular/material/card';
Directives
MatCard
Material Design card component. Cards contain content and actions about a single subject. See https://material.io/design/components/cards.html
MatCard provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card
Exported as: matCardProperties
Name | Description |
---|---|
@Input()
|
MatCardTitle
Title of a card, intended for use within <mat-card>
. This component is an optional
convenience for one variety of card title; any custom title element may be used in its place.
MatCardTitle provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card-title [mat-card-title] [matCardTitle]
MatCardTitleGroup
Container intended to be used within the <mat-card>
component. Can contain exactly one
<mat-card-title>
, one <mat-card-subtitle>
and one content image of any size
(e.g. <img matCardLgImage>
).
Selector: mat-card-title-group
MatCardContent
Content of a card, intended for use within <mat-card>
. This component is an optional
convenience for use with other convenience elements, such as <mat-card-title>
; any custom
content block element may be used in its place.
MatCardContent provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card-content
MatCardSubtitle
Sub-title of a card, intended for use within <mat-card>
beneath a <mat-card-title>
. This
component is an optional convenience for use with other convenience elements, such as
<mat-card-title>
.
MatCardSubtitle provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card-subtitle [mat-card-subtitle] [matCardSubtitle]
MatCardActions
Bottom area of a card that contains action buttons, intended for use within <mat-card>
.
This component is an optional convenience for use with other convenience elements, such as
<mat-card-content>
; any custom action block element may be used in its place.
MatCardActions provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card-actions
Exported as: matCardActionsProperties
Name | Description |
---|---|
@Input()
|
Position of the actions inside the card. |
MatCardHeader
Header region of a card, intended for use within <mat-card>
. This header captures
a card title, subtitle, and avatar. This component is an optional convenience for use with
other convenience elements, such as <mat-card-footer>
; any custom header block element may be
used in its place.
MatCardHeader provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card-header
MatCardFooter
Footer area a card, intended for use within <mat-card>
.
This component is an optional convenience for use with other convenience elements, such as
<mat-card-content>
; any custom footer block element may be used in its place.
MatCardFooter provides no behaviors, instead serving as a purely visual treatment.
Selector: mat-card-footer
MatCardImage
Primary image content for a card, intended for use within <mat-card>
. Can be applied to
any media element, such as <img>
or <picture>
.
This component is an optional convenience for use with other convenience elements, such as
<mat-card-content>
; any custom media element may be used in its place.
MatCardImage provides no behaviors, instead serving as a purely visual treatment.
Selector: [mat-card-image] [matCardImage]
MatCardSmImage
Same as MatCardImage
, but small.
Selector: [mat-card-sm-image] [matCardImageSmall]
MatCardMdImage
Same as MatCardImage
, but medium.
Selector: [mat-card-md-image] [matCardImageMedium]
MatCardLgImage
Same as MatCardImage
, but large.
Selector: [mat-card-lg-image] [matCardImageLarge]
MatCardXlImage
Same as MatCardImage
, but extra-large.
Selector: [mat-card-xl-image] [matCardImageXLarge]
MatCardAvatar
Avatar image content for a card, intended for use within <mat-card>
. Can be applied to
any media element, such as <img>
or <picture>
.
This component is an optional convenience for use with other convenience elements, such as
<mat-card-title>
; any custom media element may be used in its place.
MatCardAvatar provides no behaviors, instead serving as a purely visual treatment.
Selector: [mat-card-avatar] [matCardAvatar]
Interfaces
MatCardConfig
Object that can be used to configure the default options for the card module.
Properties
Name | Description |
---|---|
|
Default appearance for cards. |
Type aliases
MatCardAppearance
type MatCardAppearance = 'outlined' | 'raised';
Constants
MAT_CARD_CONFIG
Injection token that can be used to provide the default options the card module.
const MAT_CARD_CONFIG: InjectionToken<MatCardConfig>;
API reference for Angular Material card-testing
import {MatCardHarness} from '@angular/material/card/testing';
Classes
MatCardHarness
extends
ContentContainerComponentHarness
Harness for interacting with a mat-card in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getSubtitleText
|
|
---|---|
Gets the cards's subtitle text. |
|
Returns | |
Promise<string>
|
|
async
getText
|
|
---|---|
Gets all of the card's content as text. |
|
Returns | |
Promise<string>
|
|
async
getTitleText
|
|
---|---|
Gets the cards's title text. |
|
Returns | |
Promise<string>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options CardHarnessFilters = {}
|
Options for filtering which card instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
CardHarnessFilters
A set of criteria that can be used to filter a list of MatCardHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose subtitle matches the given value. |
|
Only find instances whose text matches the given value. |
|
Only find instances whose title matches the given value. |