API for card

API reference for Angular Material card

import {MatCardModule} from '@angular/material/card';

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: matCard
Properties
Name Description
@Input()

appearance: MatCardAppearance

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]

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

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

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]

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: matCardActions
Properties
Name Description
@Input()

align: 'start' | 'end'

Position of the actions inside the card.

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

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

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]

Same as MatCardImage, but small.

Selector: [mat-card-sm-image] [matCardImageSmall]

Same as MatCardImage, but medium.

Selector: [mat-card-md-image] [matCardImageMedium]

Same as MatCardImage, but large.

Selector: [mat-card-lg-image] [matCardImageLarge]

Same as MatCardImage, but extra-large.

Selector: [mat-card-xl-image] [matCardImageXLarge]

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]

Object that can be used to configure the default options for the card module.

Properties
Name Description

appearance: MatCardAppearance

Default appearance for cards.

type MatCardAppearance = 'outlined' | 'raised';

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';

Harness for interacting with a mat-card in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-card'

The selector for the host element of a MatCard instance.

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 Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

static
with

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

Parameters

options

CardHarnessFilters = {}

Options for filtering which card instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatCardHarness instances.

Properties
Name Description

subtitle: string | RegExp

Only find instances whose subtitle matches the given value.

text: string | RegExp

Only find instances whose text matches the given value.

title: string | RegExp

Only find instances whose title matches the given value.