API reference for Angular Material core

import {MatCommonModule} from '@angular/material/core';

Services

`NativeDateAdapter` extends DateAdapter

Adapts the native JS Date for use with cdk-based components that work with dates.

Properties

Name Description

Name	Description
`localeChanges: Observable<void>`	A stream that emits when the locale changes.
`useUtcForDisplay: boolean`	Whether to use `timeZone: 'utc'` with `Intl.DateTimeFormat` when formatting dates. Without this `Intl.DateTimeFormat` sometimes chooses the wrong timeZone, which can throw off the result. (e.g. in the en-US locale `new Date(1800, 7, 14).toLocaleDateString()` will produce `'8/13/1800'`. TODO(mmalerba): drop this variable. It's not being used in the code right now. We're now getting the string representation of a Date object from its utc representation. We're keeping it here for sometime, just for precaution, in case we decide to revert some of these changes though.

localeChanges: Observable<void>

A stream that emits when the locale changes.

useUtcForDisplay: boolean

Whether to use timeZone: 'utc' with Intl.DateTimeFormat when formatting dates. Without this Intl.DateTimeFormat sometimes chooses the wrong timeZone, which can throw off the result. (e.g. in the en-US locale new Date(1800, 7, 14).toLocaleDateString() will produce '8/13/1800'.

TODO(mmalerba): drop this variable. It's not being used in the code right now. We're now getting the string representation of a Date object from its utc representation. We're keeping it here for sometime, just for precaution, in case we decide to revert some of these changes though.

Methods

addCalendarDays
Parameters
date `Date`
days `number`
Returns
`Date`

addCalendarMonths
Parameters
date `Date`
months `number`
Returns
`Date`

addCalendarYears
Parameters
date `Date`
years `number`
Returns
`Date`

clampDate
Clamp the given date between min and max dates.
Parameters
date `D`
min? `D`
max? `D`
Returns
`D`	`min` if `date` is less than `min`, `max` if date is greater than `max`, otherwise `date`.

clone
Parameters
date `Date`
Returns
`Date`

compareDate
Compares two dates.
Parameters
first `D`
second `D`
Returns
`number`	0 if the dates are equal, a number less than 0 if the first date is earlier, a number greater than 0 if the first date is later.

createDate
Parameters
year `number`
month `number`
date `number`
Returns
`Date`

deserialize
Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an invalid date for all other values.
Parameters
value `any`
Returns
`Date \| null`

format
Parameters
date `Date`
displayFormat `Object`
Returns
`string`

getDate
Parameters
date `Date`
Returns
`number`

getDateNames
Returns
`string[]`

getDayOfWeek
Parameters
date `Date`
Returns
`number`

getDayOfWeekNames
Parameters
style `"long" \| "short" \| "narrow"`
Returns
`string[]`

getFirstDayOfWeek
Returns
`number`

getMonth
Parameters
date `Date`
Returns
`number`

getMonthNames
Parameters
style `"long" \| "short" \| "narrow"`
Returns
`string[]`

getNumDaysInMonth
Parameters
date `Date`
Returns
`number`

getValidDateOrNull
Given a potential date object, returns that same date object if it is a valid date, or `null` if it's not a valid date.
Parameters
obj `unknown`
Returns
`D \| null`	A date or `null`.

getYear
Parameters
date `Date`
Returns
`number`

getYearName
Parameters
date `Date`
Returns
`string`

invalid
Returns
`Date`

isDateInstance
Parameters
obj `any`

isValid
Parameters
date `Date`

parse
Parameters
value `any`
Returns
`Date \| null`

sameDate
Checks if two dates are equal.
Parameters
first `D`
second `D`
Returns
`boolean`	Whether the two dates are equal. Null dates are considered equal to other null dates.

setLocale
Sets the locale used for all dates.
Parameters
locale `any`

toIso8601
Parameters
date `Date`
Returns
`string`

today
Returns
`Date`

`ShowOnDirtyErrorStateMatcher`

Error state matcher that matches when a control is invalid and dirty.

Methods

isErrorState
Parameters
control `FormControl`
form `NgForm \| FormGroupDirective`
Returns
`boolean`

`ErrorStateMatcher`

Provider that defines how form controls behave with regards to displaying error messages.

Methods

isErrorState
Parameters
control `FormControl`
form `NgForm \| FormGroupDirective`
Returns
`boolean`

Directives

`MatLine`

Shared directive to count lines inside a text area, such as a list item. Line elements can be extracted with a @ContentChildren(MatLine) query, then counted by checking the query list's length.

Selector: [mat-line] [matLine]

`MatOption`

Single option inside of a <mat-select> element.

Selector: mat-option

Exported as: matOption

Properties

Name	Description
@Input() `disabled: any`	Whether the option is disabled.
@Input() `id: string`	The unique ID of the option.
@Input() `value: any`	The form value of the option.
@Output() `onSelectionChange: EventEmitter<MatOptionSelectionChange>`	Event emitted when the option is selected or deselected.
`active: boolean`	Whether or not the option is currently active and ready to be selected. An active option displays styles as if it is focused, but the focus is actually retained somewhere else. This comes in handy for components like autocomplete where focus must remain on the input.
`disableRipple:`	Whether ripples for the option are disabled.
`group: _MatOptgroupBase`
`multiple:`	Whether the wrapping component is in multiple selection mode.
`selected: boolean`	Whether or not the option is currently selected.
`viewValue: string`	The displayed value of the option. It is necessary to show the selected option in the select's trigger.

Methods

deselect
Deselects the option.

focus
Sets focus onto this option.
Parameters
_origin? `FocusOrigin`
options? `FocusOptions`

getLabel
Gets the label to be used when determining whether the option should be focused.
Returns
`string`

select
Selects the option.

setActiveStyles
This method sets display styles on the option to make it appear active. This is used by the ActiveDescendantKeyManager so key events will display the proper options as active on arrow key events.

setInactiveStyles
This method removes display styles on the option that made it appear active. This is used by the ActiveDescendantKeyManager so key events will display the proper options as active on arrow key events.

`MatOptgroup`

Component that is used to group instances of mat-option.

Selector: mat-optgroup

Exported as: matOptgroup

Properties

Name	Description
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `label: string`	Label for the option group.

Classes

`DateAdapter`

Adapts type D to be usable as a date by cdk-based components that work with dates.

Properties

Name	Description
`locale: any`	The locale to use for all dates.
`localeChanges: Observable<void>`	A stream that emits when the locale changes.

Methods

addCalendarDays
Adds the given number of days to the date. Days are counted as if moving one cell on the calendar for each day.
Parameters
date `D`
days `number`
Returns
`D`	A new date equal to the given one with the specified number of days added.

addCalendarMonths
Adds the given number of months to the date. Months are counted as if flipping a page on the calendar for each month and then finding the closest date in the new month. For example when adding 1 month to Jan 31, 2017, the resulting date will be Feb 28, 2017.
Parameters
date `D`
months `number`
Returns
`D`	A new date equal to the given one with the specified number of months added.

addCalendarYears
Adds the given number of years to the date. Years are counted as if flipping 12 pages on the calendar for each year and then finding the closest date in the new month. For example when adding 1 year to Feb 29, 2016, the resulting date will be Feb 28, 2017.
Parameters
date `D`
years `number`
Returns
`D`	A new date equal to the given one with the specified number of years added.

clampDate
Clamp the given date between min and max dates.
Parameters
date `D`
min? `D`
max? `D`
Returns
`D`	`min` if `date` is less than `min`, `max` if date is greater than `max`, otherwise `date`.

clone
Clones the given date.
Parameters
date `D`
Returns
`D`	A new date equal to the given date.

compareDate
Compares two dates.
Parameters
first `D`
second `D`
Returns
`number`	0 if the dates are equal, a number less than 0 if the first date is earlier, a number greater than 0 if the first date is later.

createDate
Creates a date with the given year, month, and date. Does not allow over/under-flow of the month and date.
Parameters
year `number`
month `number`
date `number`
Returns
`D`	The new date, or null if invalid.

deserialize
Attempts to deserialize a value to a valid date object. This is different from parsing in that deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601 string). The default implementation does not allow any deserialization, it simply checks that the given value is already a valid date object or null. The `<mat-datepicker>` will call this method on all of its `@Input()` properties that accept dates. It is therefore possible to support passing values from your backend directly to these properties by overriding this method to also deserialize the format used by your backend.
Parameters
value `any`
Returns
`D \| null`	The deserialized date object, either a valid date, null if the value can be deserialized into a null date (e.g. the empty string), or an invalid date.

format
Formats a date as a string according to the given format.
Parameters
date `D`
displayFormat `any`
Returns
`string`	The formatted date string.

getDate
Gets the date of the month component of the given date.
Parameters
date `D`
Returns
`number`	The month component (1-indexed, 1 = first of month).

getDateNames

Gets a list of names for the dates of the month.

Returns

string[]

An ordered list of all date of the month names, starting with '1'.

getDayOfWeek
Gets the day of the week component of the given date.
Parameters
date `D`
Returns
`number`	The month component (0-indexed, 0 = Sunday).

getDayOfWeekNames
Gets a list of names for the days of the week.
Parameters
style `"long" \| "short" \| "narrow"`
Returns
`string[]`	An ordered list of all weekday names, starting with Sunday.

getFirstDayOfWeek

Gets the first day of the week.

Returns

number

The first day of the week (0-indexed, 0 = Sunday).

getMonth
Gets the month component of the given date.
Parameters
date `D`
Returns
`number`	The month component (0-indexed, 0 = January).

getMonthNames
Gets a list of names for the months.
Parameters
style `"long" \| "short" \| "narrow"`
Returns
`string[]`	An ordered list of all month names, starting with January.

getNumDaysInMonth
Gets the number of days in the month of the given date.
Parameters
date `D`
Returns
`number`	The number of days in the month of the given date.

getValidDateOrNull
Given a potential date object, returns that same date object if it is a valid date, or `null` if it's not a valid date.
Parameters
obj `unknown`
Returns
`D \| null`	A date or `null`.

getYear
Gets the year component of the given date.
Parameters
date `D`
Returns
`number`	The year component.

getYearName
Gets the name for the year of the given date.
Parameters
date `D`
Returns
`string`	The name of the given year (e.g. '2017').

invalid

Gets date instance that is not valid.

Returns

D

An invalid date.

isDateInstance
Checks whether the given object is considered a date instance by this DateAdapter.
Parameters
obj `any`
Returns
`boolean`	Whether the object is a date instance.

isValid
Checks whether the given date is valid.
Parameters
date `D`
Returns
`boolean`	Whether the date is valid.

parse
Parses a date from a user-provided value.
Parameters
value `any`
parseFormat `any`
Returns
`D \| null`	The parsed date.

sameDate
Checks if two dates are equal.
Parameters
first `D`
second `D`
Returns
`boolean`	Whether the two dates are equal. Null dates are considered equal to other null dates.

setLocale
Sets the locale used for all dates.
Parameters
locale `any`

toIso8601
Gets the RFC 3339 compatible string (https://tools.ietf.org/html/rfc3339) for the given date. This method is used to generate date strings that are compatible with native HTML attributes such as the `min` or `max` attribute of an `<input>`.
Parameters
date `D`
Returns
`string`	The ISO date string date string.

today

Gets today's date.

Returns

D

Today's date.

`MatOptionSelectionChange`

Event object emitted by MatOption when selected or deselected.

Properties

Name	Description
`isUserInput: false`	Whether the change in the option's value was a result of a user action.
`source: _MatOptionBase`	Reference to the option that emitted the event.

Interfaces

`GranularSanityChecks`

Object that can be used to configure the sanity checks granularly.

Properties

Name	Description
`doctype: boolean`
`theme: boolean`
`version: boolean`

Functions

mixinDisabled
Parameters
base `T`
Returns
`CanDisableCtor & T`

mixinColor
Parameters
base `T`
defaultColor? `ThemePalette`
Returns
`CanColorCtor & T`

mixinDisableRipple
Parameters
base `T`
Returns
`CanDisableRippleCtor & T`

mixinTabIndex
Parameters
base `T`
defaultTabIndex `number = 0`
Returns
`HasTabIndexCtor & T`

mixinErrorState
Parameters
base `T`
Returns
`CanUpdateErrorStateCtor & T`

mixinInitialized
Mixin to augment a directive with an initialized property that will emits when ngOnInit ends.
Parameters
base `T`
Returns
`HasInitializedCtor & T`

Type aliases

`SanityChecks`

Possible sanity checks that can be enabled. If set to true/false, all checks will be enabled/disabled.

type SanityChecks = boolean | GranularSanityChecks;

`ThemePalette`

Possible color palette values.

type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;

`MatDateFormats`

type MatDateFormats = {
    parse: {
        dateInput: any;
    };
    display: {
        dateInput: any;
        monthLabel?: any;
        monthYearLabel: any;
        dateA11yLabel: any;
        monthYearA11yLabel: any;
    };
};

Constants

`VERSION`

Current version of Angular Material.

const VERSION: Version;

`MATERIAL_SANITY_CHECKS`

Injection token that configures whether the Material sanity checks are enabled.

const MATERIAL_SANITY_CHECKS: InjectionToken<SanityChecks>;

`MAT_DATE_LOCALE`

InjectionToken for datepicker that can be used to override default locale code.

const MAT_DATE_LOCALE: InjectionToken<string>;

`MAT_DATE_FORMATS`

const MAT_DATE_FORMATS: InjectionToken<MatDateFormats>;

`MAT_NATIVE_DATE_FORMATS`

const MAT_NATIVE_DATE_FORMATS: MatDateFormats;

`MAT_OPTGROUP`

Injection token that can be used to reference instances of MatOptgroup. It serves as alternative token to the actual MatOptgroup class which could cause unnecessary retention of the class and its component metadata.

const MAT_OPTGROUP: InjectionToken<MatOptgroup>;

`MAT_OPTION_PARENT_COMPONENT`

Injection token used to provide the parent component to options.

const MAT_OPTION_PARENT_COMPONENT: InjectionToken<MatOptionParentComponent>;

API reference for Angular Material core

Services

NativeDateAdapter extends DateAdapter

Properties

Methods

ShowOnDirtyErrorStateMatcher

Methods

ErrorStateMatcher

Methods

Directives

MatLine

MatOption

Properties

Methods

MatOptgroup

Properties

Classes

DateAdapter

Properties

Methods

MatOptionSelectionChange

Properties

Interfaces

GranularSanityChecks

Properties

Functions

Type aliases

SanityChecks

ThemePalette

MatDateFormats

Constants

VERSION

MATERIAL_SANITY_CHECKS

MAT_DATE_LOCALE

MAT_DATE_FORMATS

MAT_NATIVE_DATE_FORMATS

MAT_OPTGROUP

MAT_OPTION_PARENT_COMPONENT

`NativeDateAdapter` extends DateAdapter

`ShowOnDirtyErrorStateMatcher`

`ErrorStateMatcher`

`MatLine`

`MatOption`

`MatOptgroup`

`DateAdapter`

`MatOptionSelectionChange`

`GranularSanityChecks`

`SanityChecks`

`ThemePalette`

`MatDateFormats`

`VERSION`

`MATERIAL_SANITY_CHECKS`

`MAT_DATE_LOCALE`

`MAT_DATE_FORMATS`

`MAT_NATIVE_DATE_FORMATS`

`MAT_OPTGROUP`

`MAT_OPTION_PARENT_COMPONENT`