@angular/common

@angular/common

Version 19.0.5
Published 6 days ago
9.5 MB
1 dependency
MIT license

Install

npm i @angular/common

yarn add @angular/common

pnpm add @angular/common

Overview

Angular - commonly needed directives and services

Index

Variables

variable APP_BASE_HREF

const APP_BASE_HREF: InjectionToken<string>;

A predefined DI token for the base href to be used with the PathLocationStrategy. The base href is the URL prefix that should be preserved when generating and recognizing URLs.
The following example shows how to use this token to configure the root app injector with a base href value, so that the DI framework can supply the dependency anywhere in the app.
import {NgModule} from '@angular/core'; import {APP_BASE_HREF} from '@angular/common'; @NgModule({ providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}] }) class AppModule {}

variable DATE_PIPE_DEFAULT_OPTIONS

const DATE_PIPE_DEFAULT_OPTIONS: InjectionToken<DatePipeConfig>;

DI token that allows to provide default configuration for the DatePipe instances in an application. The value is an object which can include the following fields: - dateFormat: configures the default date format. If not provided, the DatePipe will use the 'mediumDate' as a value. - timezone: configures the default timezone. If not provided, the DatePipe will use the end-user's local system timezone.
See Also
- DatePipeConfig
  Various date pipe default values can be overwritten by providing this token with the value that has this interface.
  For example:
  Override the default date format by providing a value using the token:
  providers: [ {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}} ]
  Override the default timezone by providing a value using the token:
  providers: [ {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {timezone: '-1200'}} ]

variable DATE_PIPE_DEFAULT_TIMEZONE

const DATE_PIPE_DEFAULT_TIMEZONE: InjectionToken<string>;

Optionally-provided default timezone to use for all instances of DatePipe (such as '+0430'). If the value isn't provided, the DatePipe will use the end-user's local system timezone.
Deprecated
use DATE_PIPE_DEFAULT_OPTIONS token to configure DatePipe

variable DOCUMENT

const DOCUMENT: InjectionToken<Document>;

A DI Token representing the main rendering context. In a browser and SSR this is the DOM Document. When using SSR, that document is created by [Domino](https://github.com/angular/domino).

variable IMAGE_LOADER

const IMAGE_LOADER: InjectionToken<ImageLoader>;

Injection token that configures the image loader function.
See Also
- ImageLoader
- NgOptimizedImage

variable LOCATION_INITIALIZED

const LOCATION_INITIALIZED: InjectionToken<Promise<any>>;

Indicates when a location is initialized.

variable NumberSymbol

const NumberSymbol: {
    readonly Decimal: 0;
    readonly Group: 1;
    readonly List: 2;
    readonly PercentSign: 3;
    readonly PlusSign: 4;
    readonly MinusSign: 5;
    readonly Exponential: 6;
    readonly SuperscriptingExponent: 7;
    readonly PerMille: 8;
    readonly Infinity: 9;
    readonly NaN: 10;
    readonly TimeSeparator: 11;
    readonly CurrencyDecimal: 12;
    readonly CurrencyGroup: 13;
};

Symbols that can be used to replace placeholders in number patterns. Examples are based on en-US values.
See Also
- getLocaleNumberSymbol
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
getLocaleNumberSymbol is deprecated
@object-literal-as-enum

variable ɵPLATFORM_BROWSER_ID

const ɵPLATFORM_BROWSER_ID: string;

variable ɵPLATFORM_SERVER_ID

const ɵPLATFORM_SERVER_ID: string;

variable PRECONNECT_CHECK_BLOCKLIST

const PRECONNECT_CHECK_BLOCKLIST: InjectionToken<(string | string[])[]>;

Injection token to configure which origins should be excluded from the preconnect checks. It can either be a single string or an array of strings to represent a group of origins, for example:

 {provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}

or:

 {provide: PRECONNECT_CHECK_BLOCKLIST,
  useValue: ['https://your-domain-1.com', 'https://your-domain-2.com']}

variable VERSION

const VERSION: Version;

Functions

function defaultComparator

defaultComparator: <K, V>(
    keyValueA: KeyValue<K, V>,
    keyValueB: KeyValue<K, V>
) => number;

function formatCurrency

formatCurrency: (
    value: number,
    locale: string,
    currency: string,
    currencyCode?: string,
    digitsInfo?: string
) => string;

CommonModule
Formats a number as currency using locale rules.
Parameter value
The number to format.
Parameter locale
A locale code for the locale format rules to use.
Parameter currency
A string containing the currency symbol or its name, such as "$" or "Canadian Dollar". Used in output string, but does not affect the operation of the function.
Parameter currencyCode
The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such as USD for the US dollar and EUR for the euro. Used to determine the number of digits in the decimal part.
Parameter digitsInfo
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. See DecimalPipe for more details.
Returns
The formatted currency value.
See Also
- formatNumber
- DecimalPipe
- [Internationalization (i18n) Guide](guide/i18n)

function formatDate

formatDate: (
    value: string | number | Date,
    format: string,
    locale: string,
    timezone?: string
) => string;

CommonModule
Formats a date according to locale rules.
Parameter value
The date to format, as a Date, or a number (milliseconds since UTC epoch) or an [ISO date-time string](https://www.w3.org/TR/NOTE-datetime).
Parameter format
The date-time components to include. See DatePipe for details.
Parameter locale
A locale code for the locale format rules to use.
Parameter timezone
The time zone. A time zone offset from GMT (such as '+0430'). If not specified, uses host system settings.
Returns
The formatted date string.
See Also
- DatePipe
- [Internationalization (i18n) Guide](guide/i18n)

function formatNumber

formatNumber: (value: number, locale: string, digitsInfo?: string) => string;

CommonModule
Formats a number as text, with group sizing, separator, and other parameters based on the locale.
Parameter value
The number to format.
Parameter locale
A locale code for the locale format rules to use.
Parameter digitsInfo
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. See DecimalPipe for more details.
Returns
The formatted text string.
See Also
- [Internationalization (i18n) Guide](guide/i18n)

function formatPercent

formatPercent: (value: number, locale: string, digitsInfo?: string) => string;

CommonModule
Formats a number as a percentage according to locale rules.
Parameter value
The number to format.
Parameter locale
A locale code for the locale format rules to use.
Parameter digitsInfo
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. See DecimalPipe for more details.
Returns
The formatted percentage value.
See Also
- formatNumber
- DecimalPipe
- [Internationalization (i18n) Guide](guide/i18n)

function getCurrencySymbol

getCurrencySymbol: (
    code: string,
    format: 'wide' | 'narrow',
    locale?: string
) => string;

Retrieves the currency symbol for a given currency code.
For example, for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$.
Parameter code
The currency code.
Parameter format
The format, wide or narrow.
Parameter locale
A locale code for the locale format rules to use.
Returns
The symbol, or the currency code if no symbol is available.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. You can use Intl.NumberFormat().formatToParts() to extract the currency symbol. For example: Intl.NumberFormat('en', {style:'currency', currency: 'USD'}).formatToParts().find(part => part.type === 'currency').value returns $ for USD currency code in the en locale. Note: US$ is a currency symbol for the en-ca locale but not the en-us locale.

function getLocaleCurrencyCode

getLocaleCurrencyCode: (locale: string) => string | null;

Retrieves the default currency code for the given locale.
The default is defined as the first currency which is still in use.
Parameter locale
The code of the locale whose currency code we want.
Returns
The code of the default currency for the given locale.
Deprecated
We recommend you create a map of locale to ISO 4217 currency codes. Time relative currency data is provided by the CLDR project. See https://www.unicode.org/cldr/charts/44/supplemental/detailed_territory_currency_information.html

function getLocaleCurrencyName

getLocaleCurrencyName: (locale: string) => string | null;

Retrieves the name of the currency for the main country corresponding to a given locale. For example, 'US Dollar' for en-US.
Parameter locale
A locale code for the locale format rules to use.
Returns
The currency name, or null if the main country cannot be determined.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Use the Intl API to format a currency with from currency code

function getLocaleCurrencySymbol

getLocaleCurrencySymbol: (locale: string) => string | null;

Retrieves the symbol used to represent the currency for the main country corresponding to a given locale. For example, '$' for en-US.
Parameter locale
A locale code for the locale format rules to use.
Returns
The localized symbol character, or null if the main country cannot be determined.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Use the Intl API to format a currency with from currency code

function getLocaleDateFormat

getLocaleDateFormat: (locale: string, width: FormatWidth) => string;

Retrieves a localized date-value formatting string.
Parameter locale
A locale code for the locale format rules to use.
Parameter width
The format type.
Returns
The localized formatting string.
See Also
- FormatWidth
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleDateTimeFormat

getLocaleDateTimeFormat: (locale: string, width: FormatWidth) => string;

Retrieves a localized date-time formatting string.
Parameter locale
A locale code for the locale format rules to use.
Parameter width
The format type.
Returns
The localized formatting string.
See Also
- FormatWidth
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleDayNames

getLocaleDayNames: (
    locale: string,
    formStyle: FormStyle,
    width: TranslationWidth
) => ReadonlyArray<string>;

Retrieves days of the week for the given locale, using the Gregorian calendar.
Parameter locale
A locale code for the locale format rules to use.
Parameter formStyle
The required grammatical form.
Parameter width
The required character width.
Returns
An array of localized name strings. For example,[Sunday, Monday, ... Saturday] for en-US.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleDayPeriods

getLocaleDayPeriods: (
    locale: string,
    formStyle: FormStyle,
    width: TranslationWidth
) => readonly [string, string];

Retrieves day period strings for the given locale.
Parameter locale
A locale code for the locale format rules to use.
Parameter formStyle
The required grammatical form.
Parameter width
The required character width.
Returns
An array of localized period strings. For example, [AM, PM] for en-US.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleDirection

getLocaleDirection: (locale: string) => 'ltr' | 'rtl';

Retrieves the writing direction of a specified locale
Parameter locale
A locale code for the locale format rules to use.
Returns
'rtl' or 'ltr'
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. For dates and numbers, let Intl.DateTimeFormat() and Intl.NumberFormat() determine the writing direction. The Intl alternative [getTextInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo). has only partial support (Chromium M99 & Safari 17). 3rd party alternatives like [rtl-detect](https://www.npmjs.com/package/rtl-detect) can work around this issue.

function getLocaleEraNames

getLocaleEraNames: (
    locale: string,
    width: TranslationWidth
) => readonly [string, string];

Retrieves Gregorian-calendar eras for the given locale.
Parameter locale
A locale code for the locale format rules to use.
Parameter width
The required character width.
Returns
An array of localized era strings. For example, [AD, BC] for en-US.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleExtraDayPeriodRules

getLocaleExtraDayPeriodRules: (locale: string) => (Time | [Time, Time])[];

Retrieves locale-specific rules used to determine which day period to use when more than one period is defined for a locale.
There is a rule for each defined day period. The first rule is applied to the first day period and so on. Fall back to AM/PM when no rules are available.
A rule can specify a period as time range, or as a single time value.
This functionality is only available when you have loaded the full locale data. See the ["I18n guide"](guide/i18n/format-data-locale).
Parameter locale
A locale code for the locale format rules to use.
Returns
The rules for the locale, a single time value or array of *from-time, to-time*, or null if no periods are available.
See Also
- getLocaleExtraDayPeriods
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Let Intl.DateTimeFormat determine the day period instead.

function getLocaleExtraDayPeriods

getLocaleExtraDayPeriods: (
    locale: string,
    formStyle: FormStyle,
    width: TranslationWidth
) => string[];

Retrieves locale-specific day periods, which indicate roughly how a day is broken up in different languages. For example, for en-US, periods are morning, noon, afternoon, evening, and midnight.
This functionality is only available when you have loaded the full locale data. See the ["I18n guide"](guide/i18n/format-data-locale).
Parameter locale
A locale code for the locale format rules to use.
Parameter formStyle
The required grammatical form.
Parameter width
The required character width.
Returns
The translated day-period strings.
See Also
- getLocaleExtraDayPeriodRules
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. To extract a day period use Intl.DateTimeFormat with the dayPeriod option instead.

function getLocaleFirstDayOfWeek

getLocaleFirstDayOfWeek: (locale: string) => WeekDay;

Retrieves the first day of the week for the given locale.
Parameter locale
A locale code for the locale format rules to use.
Returns
A day index number, using the 0-based week-day index for en-US (Sunday = 0, Monday = 1, ...). For example, for fr-FR, returns 1 to indicate that the first day is Monday.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Intl's [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) has partial support (Chromium M99 & Safari 17). You may want to rely on the following alternatives: - Libraries like [Luxon](https://moment.github.io/luxon/#/) rely on Intl but fallback on the ISO 8601 definition (monday) if getWeekInfo is not supported. - Other librairies like [date-fns](https://date-fns.org/), [day.js](https://day.js.org/en/) or [weekstart](https://www.npmjs.com/package/weekstart) library provide their own locale based data for the first day of the week.

function getLocaleId

getLocaleId: (locale: string) => string;

Retrieves the locale ID from the currently loaded locale. The loaded locale could be, for example, a global one rather than a regional one.
Parameter locale
A locale code, such as fr-FR.
Returns
The locale code. For example, fr.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. This function serves no purpose when relying on the Intl API.

function getLocaleMonthNames

getLocaleMonthNames: (
    locale: string,
    formStyle: FormStyle,
    width: TranslationWidth
) => ReadonlyArray<string>;

Retrieves months of the year for the given locale, using the Gregorian calendar.
Parameter locale
A locale code for the locale format rules to use.
Parameter formStyle
The required grammatical form.
Parameter width
The required character width.
Returns
An array of localized name strings. For example, [January, February, ...] for en-US.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleNumberFormat

getLocaleNumberFormat: (locale: string, type: NumberFormatStyle) => string;

Retrieves a number format for a given locale.
Numbers are formatted using patterns, like #,###.00. For example, the pattern #,###.00 when used to format the number 12345.678 could result in "12'345,678". That would happen if the grouping separator for your language is an apostrophe, and the decimal separator is a comma.
Important: The characters . , 0 # (and others below) are special placeholders that stand for the decimal separator, and so on, and are NOT real characters. You must NOT "translate" the placeholders. For example, don't change . to , even though in your language the decimal point is written with a comma. The symbols should be replaced by the local equivalents, using the appropriate NumberSymbol for your language.
Here are the special characters used in number patterns:
| Symbol | Meaning | |--------|---------| | . | Replaced automatically by the character used for the decimal point. | | , | Replaced by the "grouping" (thousands) separator. | | 0 | Replaced by a digit (or zero if there aren't enough digits). | | # | Replaced by a digit (or nothing if there aren't enough). | | ¤ | Replaced by a currency symbol, such as $ or USD. | | % | Marks a percent format. The % symbol may change position, but must be retained. | | E | Marks a scientific format. The E symbol may change position, but must be retained. | | ' | Special characters used as literal characters are quoted with ASCII single quotes. |
Parameter locale
A locale code for the locale format rules to use.
Parameter type
The type of numeric value to be formatted (such as Decimal or Currency.)
Returns
The localized format string.
See Also
- NumberFormatStyle
- [CLDR website](http://cldr.unicode.org/translation/number-patterns)
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Let Intl.NumberFormat determine the number format instead

function getLocaleNumberSymbol

getLocaleNumberSymbol: (locale: string, symbol: NumberSymbol) => string;

Retrieves a localized number symbol that can be used to replace placeholders in number formats.
Parameter locale
The locale code.
Parameter symbol
The symbol to localize. Must be one of NumberSymbol.
Returns
The character for the localized symbol.
See Also
- NumberSymbol
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.NumberFormat to format numbers instead.

function getLocalePluralCase

getLocalePluralCase: (locale: string) => (value: number) => Plural;

Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.PluralRules instead

function getLocaleTimeFormat

getLocaleTimeFormat: (locale: string, width: FormatWidth) => string;

Retrieves a localized time-value formatting string.
Parameter locale
A locale code for the locale format rules to use.
Parameter width
The format type.
Returns
The localized formatting string.
See Also
- FormatWidth
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Use Intl.DateTimeFormat for date formating instead.

function getLocaleWeekEndRange

getLocaleWeekEndRange: (locale: string) => [WeekDay, WeekDay];

Range of week days that are considered the week-end for the given locale.
Parameter locale
A locale code for the locale format rules to use.
Returns
The range of day values, [startDay, endDay].
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. Intl's [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) has partial support (Chromium M99 & Safari 17). Libraries like [Luxon](https://moment.github.io/luxon/#/) rely on Intl but fallback on the ISO 8601 definition (Saturday+Sunday) if getWeekInfo is not supported .

function getNumberOfCurrencyDigits

getNumberOfCurrencyDigits: (code: string) => number;

Reports the number of decimal digits for a given currency. The value depends upon the presence of cents in that particular currency.
Parameter code
The currency code.
Returns
The number of decimal digits, typically 0 or 2.
See Also
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Angular recommends relying on the Intl API for i18n. This function should not be used anymore. Let Intl.NumberFormat determine the number of digits to display for the currency

function isPlatformBrowser

isPlatformBrowser: (platformId: Object) => boolean;

Returns whether a platform id represents a browser platform.

function isPlatformServer

isPlatformServer: (platformId: Object) => boolean;

Returns whether a platform id represents a server platform.

function ɵgetDOM

ɵgetDOM: () => ɵDomAdapter;

function ɵnormalizeQueryParams

ɵnormalizeQueryParams: (params: string) => string;

Normalizes URL parameters by prepending with ? if needed.
Parameter params
String of URL parameters.
Returns
The normalized URL parameters string.

function ɵparseCookieValue

ɵparseCookieValue: (cookieStr: string, name: string) => string | null;

function ɵsetRootDomAdapter

ɵsetRootDomAdapter: (adapter: ɵDomAdapter) => void;

function provideCloudflareLoader

provideCloudflareLoader: (path: string) => Provider[];

Function that generates an ImageLoader for [Cloudflare Image Resizing](https://developers.cloudflare.com/images/image-resizing/) and turns it into an Angular provider. Note: Cloudflare has multiple image products - this provider is specifically for Cloudflare Image Resizing; it will not work with Cloudflare Images or Cloudflare Polish.
Parameter path
Your domain name, e.g. https://mysite.com
Returns
Provider that provides an ImageLoader function

function provideCloudinaryLoader

provideCloudinaryLoader: (path: string) => Provider[];

Function that generates an ImageLoader for Cloudinary and turns it into an Angular provider.
Parameter path
Base URL of your Cloudinary images This URL should match one of the following formats: https://res.cloudinary.com/mysite https://mysite.cloudinary.com https://subdomain.mysite.com
Returns
Set of providers to configure the Cloudinary loader.

function provideImageKitLoader

provideImageKitLoader: (path: string) => Provider[];

Function that generates an ImageLoader for ImageKit and turns it into an Angular provider.
Parameter path
Base URL of your ImageKit images This URL should match one of the following formats: https://ik.imagekit.io/myaccount https://subdomain.mysite.com
Returns
Set of providers to configure the ImageKit loader.

function provideImgixLoader

provideImgixLoader: (path: string) => Provider[];

Function that generates an ImageLoader for Imgix and turns it into an Angular provider.
Parameter path
path to the desired Imgix origin, e.g. https://somepath.imgix.net or https://images.mysite.com
Returns
Set of providers to configure the Imgix loader.

function provideNetlifyLoader

provideNetlifyLoader: (path?: string) => Provider[];

Function that generates an ImageLoader for Netlify and turns it into an Angular provider.
Parameter path
optional URL of the desired Netlify site. Defaults to the current site.
Returns
Set of providers to configure the Netlify loader.

function registerLocaleData

registerLocaleData: (
    data: any,
    localeId?: string | any,
    extraData?: any
) => void;

Register global data to be used internally by Angular. See the ["I18n guide"](guide/i18n/format-data-locale) to know how to import additional locale data.
The signature registerLocaleData(data: any, extraData?: any) is deprecated since v5.1

Classes

class AsyncPipe

class AsyncPipe implements OnDestroy, PipeTransform {}

CommonModule
Unwraps a value from an asynchronous primitive.
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. When the reference of the expression changes, the async pipe automatically unsubscribes from the old Observable or Promise and subscribes to the new one.
### Examples
This example binds a Promise to the view. Clicking the Resolve button resolves the promise.
It's also possible to use async with Observables. The example below binds the time Observable to the view. The Observable continuously updates the view with the current time.

constructor

constructor(ref: ChangeDetectorRef);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<AsyncPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<AsyncPipe, 'async', true>;

method ngOnDestroy

ngOnDestroy: () => void;

method transform

transform: {
    <T>(obj: Observable<T> | Subscribable<T> | Promise<T>): T | null;
    <T>(obj: null): null;
    <T>(obj: any): T;
};

class BrowserPlatformLocation

class BrowserPlatformLocation extends PlatformLocation {}

PlatformLocation encapsulates all of the direct calls to platform APIs. This class should not be used directly by an application developer. Instead, use Location.

constructor

constructor();

property hash

readonly hash: string;

property hostname

readonly hostname: string;

property href

readonly href: string;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<BrowserPlatformLocation, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<BrowserPlatformLocation>;

property pathname

pathname: string;

property port

readonly port: string;

property protocol

readonly protocol: string;

property search

readonly search: string;

method back

back: () => void;

method forward

forward: () => void;

method getBaseHrefFromDOM

getBaseHrefFromDOM: () => string;

method getState

getState: () => unknown;

method historyGo

historyGo: (relativePosition?: number) => void;

method onHashChange

onHashChange: (fn: LocationChangeListener) => VoidFunction;

method onPopState

onPopState: (fn: LocationChangeListener) => VoidFunction;

method pushState

pushState: (state: any, title: string, url: string) => void;

method replaceState

replaceState: (state: any, title: string, url: string) => void;

class CommonModule

class CommonModule {}

Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule, which is included automatically in the root AppModule when you create a new app with the CLI new command.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CommonModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<CommonModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    CommonModule,
    never,
    [
        typeof NgClass,
        typeof NgComponentOutlet,
        typeof NgForOf,
        typeof NgIf,
        typeof NgTemplateOutlet,
        typeof NgStyle,
        typeof NgSwitch,
        typeof NgSwitchCase,
        typeof NgSwitchDefault,
        typeof NgPlural,
        typeof NgPluralCase,
        typeof AsyncPipe,
        typeof UpperCasePipe,
        typeof LowerCasePipe,
        typeof JsonPipe,
        typeof SlicePipe,
        typeof DecimalPipe,
        typeof PercentPipe,
        typeof TitleCasePipe,
        typeof CurrencyPipe,
        typeof DatePipe,
        typeof I18nPluralPipe,
        typeof I18nSelectPipe,
        typeof KeyValuePipe
    ],
    [
        typeof NgClass,
        typeof NgComponentOutlet,
        typeof NgForOf,
        typeof NgIf,
        typeof NgTemplateOutlet,
        typeof NgStyle,
        typeof NgSwitch,
        typeof NgSwitchCase,
        typeof NgSwitchDefault,
        typeof NgPlural,
        typeof NgPluralCase,
        typeof AsyncPipe,
        typeof UpperCasePipe,
        typeof LowerCasePipe,
        typeof JsonPipe,
        typeof SlicePipe,
        typeof DecimalPipe,
        typeof PercentPipe,
        typeof TitleCasePipe,
        typeof CurrencyPipe,
        typeof DatePipe,
        typeof I18nPluralPipe,
        typeof I18nSelectPipe,
        typeof KeyValuePipe
    ]
>;

class CurrencyPipe

class CurrencyPipe implements PipeTransform {}

CommonModule
Transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.
See Also
- getCurrencySymbol
- formatCurrency
  The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US.

constructor

constructor(_locale: string, _defaultCurrencyCode?: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<CurrencyPipe, 'currency', true>;

method transform

transform: {
    (
        value: number | string,
        currencyCode?: string,
        display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean,
        digitsInfo?: string,
        locale?: string
    ): string | null;
    (
        value: null,
        currencyCode?: string,
        display?: string | boolean,
        digitsInfo?: string,
        locale?: string
    ): null;
    (
        value: string | number,
        currencyCode?: string,
        display?: string | boolean,
        digitsInfo?: string,
        locale?: string
    ): string;
};

Parameter value
The number to be formatted as currency.
Parameter currencyCode
The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such as USD for the US dollar and EUR for the euro. The default currency code can be configured using the DEFAULT_CURRENCY_CODE injection token.
Parameter display
The format for the currency indicator. One of the following: - code: Show the code (such as USD). - symbol(default): Show the symbol (such as $). - symbol-narrow: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale. - String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol. - Boolean (marked deprecated in v5): true for symbol and false for code.
Parameter digitsInfo
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. - minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1. - minFractionDigits: The minimum number of digits after the decimal point. Default is 2. - maxFractionDigits: The maximum number of digits after the decimal point. Default is 2. If not provided, the number will be formatted with the proper amount of digits, depending on what the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) specifies. For example, the Canadian dollar has 2 digits, whereas the Chilean peso has none.
Parameter locale
A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See [Setting your app locale](guide/i18n/locale-id).

class DatePipe

class DatePipe implements PipeTransform {}

CommonModule
Formats a date value according to locale rules.
DatePipe is executed only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String, Number, Boolean, or Symbol), or a changed object reference (such as Date, Array, Function, or Object).
Note that mutating a Date object does not cause the pipe to be rendered again. To ensure that the pipe is executed, you must create a new Date object.
Only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. See the [I18n guide](guide/i18n/format-data-locale) for more information.
The time zone of the formatted value can be specified either by passing it in as the second parameter of the pipe, or by setting the default through the DATE_PIPE_DEFAULT_OPTIONS injection token. The value that is passed in as the second parameter takes precedence over the one defined using the injection token.
See Also
- formatDate
  The result of this pipe is not reevaluated when the input is mutated. To avoid the need to reformat the date on every change-detection cycle, treat the date as an immutable object and change the reference when the pipe needs to run again.
  ### Pre-defined format options
  | Option | Equivalent to | Examples (given in en-US locale) | |---------------|-------------------------------------|-------------------------------------------------| | 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM | | 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM | | 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 | | 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 | | 'shortDate' | 'M/d/yy' | 6/15/15 | | 'mediumDate'| 'MMM d, y' | Jun 15, 2015 | | 'longDate' | 'MMMM d, y' | June 15, 2015 | | 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 | | 'shortTime' | 'h:mm a' | 9:03 AM | | 'mediumTime'| 'h:mm:ss a' | 9:03:01 AM | | 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 | | 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 |
  ### Custom format options
  You can construct a format string using symbols to specify the components of a date-time value, as described in the following table. Format details depend on the locale. Fields marked with (*) are only available in the extra data set for the given locale.
  | Field type | Format | Description | Example Value | |-------------------------|-------------|---------------------------------------------------------------|------------------------------------------------------------| | Era | G, GG & GGG | Abbreviated | AD | | | GGGG | Wide | Anno Domini | | | GGGGG | Narrow | A | | Year | y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 | | | yy | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | | | yyy | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | | | yyyy | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | | ISO Week-numbering year | Y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 | | | YY | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | | | YYY | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | | | YYYY | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | | Month | M | Numeric: 1 digit | 9, 12 | | | MM | Numeric: 2 digits + zero padded | 09, 12 | | | MMM | Abbreviated | Sep | | | MMMM | Wide | September | | | MMMMM | Narrow | S | | Month standalone | L | Numeric: 1 digit | 9, 12 | | | LL | Numeric: 2 digits + zero padded | 09, 12 | | | LLL | Abbreviated | Sep | | | LLLL | Wide | September | | | LLLLL | Narrow | S | | ISO Week of year | w | Numeric: minimum digits | 1... 53 | | | ww | Numeric: 2 digits + zero padded | 01... 53 | | Week of month | W | Numeric: 1 digit | 1... 5 | | Day of month | d | Numeric: minimum digits | 1 | | | dd | Numeric: 2 digits + zero padded | 01 | | Week day | E, EE & EEE | Abbreviated | Tue | | | EEEE | Wide | Tuesday | | | EEEEE | Narrow | T | | | EEEEEE | Short | Tu | | Week day standalone | c, cc | Numeric: 1 digit | 2 | | | ccc | Abbreviated | Tue | | | cccc | Wide | Tuesday | | | ccccc | Narrow | T | | | cccccc | Short | Tu | | Period | a, aa & aaa | Abbreviated | am/pm or AM/PM | | | aaaa | Wide (fallback to a when missing) | ante meridiem/post meridiem | | | aaaaa | Narrow | a/p | | Period* | B, BB & BBB | Abbreviated | mid. | | | BBBB | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | | | BBBBB | Narrow | md | | Period standalone* | b, bb & bbb | Abbreviated | mid. | | | bbbb | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | | | bbbbb | Narrow | md | | Hour 1-12 | h | Numeric: minimum digits | 1, 12 | | | hh | Numeric: 2 digits + zero padded | 01, 12 | | Hour 0-23 | H | Numeric: minimum digits | 0, 23 | | | HH | Numeric: 2 digits + zero padded | 00, 23 | | Minute | m | Numeric: minimum digits | 8, 59 | | | mm | Numeric: 2 digits + zero padded | 08, 59 | | Second | s | Numeric: minimum digits | 0... 59 | | | ss | Numeric: 2 digits + zero padded | 00... 59 | | Fractional seconds | S | Numeric: 1 digit | 0... 9 | | | SS | Numeric: 2 digits + zero padded | 00... 99 | | | SSS | Numeric: 3 digits + zero padded (= milliseconds) | 000... 999 | | Zone | z, zz & zzz | Short specific non location format (fallback to O) | GMT-8 | | | zzzz | Long specific non location format (fallback to OOOO) | GMT-08:00 | | | Z, ZZ & ZZZ | ISO8601 basic format | -0800 | | | ZZZZ | Long localized GMT format | GMT-8:00 | | | ZZZZZ | ISO8601 extended format + Z indicator for offset 0 (= XXXXX) | -08:00 | | | O, OO & OOO | Short localized GMT format | GMT-8 | | | OOOO | Long localized GMT format | GMT-08:00 |
  ### Format examples
  These examples transform a date into various formats, assuming that dateObj is a JavaScript Date object for year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11, given in the local time for the en-US locale.
  {{ dateObj | date }} // output is 'Jun 15, 2015' {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM' {{ dateObj | date:'shortTime' }} // output is '9:43 PM' {{ dateObj | date:'mm:ss' }} // output is '43:11' {{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }} // output is 'Jun 15, 2015 at 09:43 PM'
  ### Usage example
  The following component uses a date pipe to display the current date in different formats.
  @Component({ selector: 'date-pipe', template: `<div> <p>Today is {{today | date}}</p> <p>Or if you prefer, {{today | date:'fullDate'}}</p> <p>The time is {{today | date:'h:mm a z'}}</p> </div>` }) // Get the current date and time as a date-time value. export class DatePipeComponent { today: number = Date.now(); }

constructor

constructor(
    locale: string,
    defaultTimezone?: string,
    defaultOptions?: DatePipeConfig
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    DatePipe,
    [null, { optional: true }, { optional: true }]
>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<DatePipe, 'date', true>;

method transform

transform: {
    (
        value: Date | string | number,
        format?: string,
        timezone?: string,
        locale?: string
    ): string | null;
    (value: null, format?: string, timezone?: string, locale?: string): null;
    (
        value: string | number | Date,
        format?: string,
        timezone?: string,
        locale?: string
    ): string;
};

Parameter value
The date expression: a Date object, a number (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime).
Parameter format
The date/time components to include, using predefined options or a custom format string. When not provided, the DatePipe looks for the value using the DATE_PIPE_DEFAULT_OPTIONS injection token (and reads the dateFormat property). If the token is not configured, the mediumDate is used as a value.
Parameter timezone
A timezone offset (such as '+0430'). When not provided, the DatePipe looks for the value using the DATE_PIPE_DEFAULT_OPTIONS injection token (and reads the timezone property). If the token is not configured, the end-user's local system timezone is used as a value.
Parameter locale
A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See [Setting your app locale](guide/i18n/locale-id).
Returns
A date string in the desired format.
See Also
- DATE_PIPE_DEFAULT_OPTIONS

class DecimalPipe

class DecimalPipe implements PipeTransform {}

CommonModule
Formats a value according to digit options and locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.
See Also
- formatNumber
  ### digitsInfo
  The value's decimal representation is specified by the digitsInfo parameter, written in the following format:
  {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  - minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
  - minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
  - maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.
  If the formatted value is truncated it will be rounded using the "to-nearest" method:
  {{3.6 | number: '1.0-0'}}  {{-3.6 | number:'1.0-0'}} 
  ### locale
  locale will format a value according to locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.
  When not supplied, uses the value of LOCALE_ID, which is en-US by default.
  See [Setting your app locale](guide/i18n/locale-id).
  ### Example
  The following code shows how the pipe transforms values according to various format specifications, where the caller's default locale is en-US.

constructor

constructor(_locale: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DecimalPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<DecimalPipe, 'number', true>;

method transform

transform: {
    (value: number | string, digitsInfo?: string, locale?: string):
        | string
        | null;
    (value: null, digitsInfo?: string, locale?: string): null;
    (value: string | number, digitsInfo?: string, locale?: string): string;
};

Parameter value
The value to be formatted.
Parameter digitsInfo
Sets digit and decimal representation. [See more](#digitsinfo).
Parameter locale
Specifies what locale format rules to use. [See more](#locale).

class HashLocationStrategy

class HashLocationStrategy extends LocationStrategy implements OnDestroy {}

A LocationStrategy used to configure the Location service to represent its state in the [hash fragment](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax) of the browser's URL.
For instance, if you call location.go('/foo'), the browser's URL will become example.com#/foo.
### Example

constructor

constructor(_platformLocation: PlatformLocation, _baseHref?: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    HashLocationStrategy,
    [null, { optional: true }]
>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<HashLocationStrategy>;

method back

back: () => void;

method forward

forward: () => void;

method getBaseHref

getBaseHref: () => string;

method getState

getState: () => unknown;

method historyGo

historyGo: (relativePosition?: number) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onPopState

onPopState: (fn: LocationChangeListener) => void;

method path

path: (includeHash?: boolean) => string;

method prepareExternalUrl

prepareExternalUrl: (internal: string) => string;

method pushState

pushState: (
    state: any,
    title: string,
    path: string,
    queryParams: string
) => void;

method replaceState

replaceState: (
    state: any,
    title: string,
    path: string,
    queryParams: string
) => void;

class I18nPluralPipe

class I18nPluralPipe implements PipeTransform {}

CommonModule
Maps a value to a string that pluralizes the value according to locale rules.
### Example

constructor

constructor(_localization: NgLocalization);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<I18nPluralPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<I18nPluralPipe, 'i18nPlural', true>;

method transform

transform: (
    value: number | null | undefined,
    pluralMap: { [count: string]: string },
    locale?: string
) => string;

Parameter value
the number to be formatted
Parameter pluralMap
an object that mimics the ICU format, see https://unicode-org.github.io/icu/userguide/format_parse/messages/.
Parameter locale
a string defining the locale to use (uses the current LOCALE_ID by default).

class I18nSelectPipe

class I18nSelectPipe implements PipeTransform {}

CommonModule
Generic selector that displays the string that matches the current value.
If none of the keys of the mapping match the value, then the content of the other key is returned when present, otherwise an empty string is returned.
### Example

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<I18nSelectPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<I18nSelectPipe, 'i18nSelect', true>;

method transform

transform: (
    value: string | null | undefined,
    mapping: { [key: string]: string }
) => string;

Parameter value
a string to be internationalized.
Parameter mapping
an object that indicates the text that should be displayed for different values of the provided value.

class JsonPipe

class JsonPipe implements PipeTransform {}

CommonModule
Converts a value into its JSON-format representation. Useful for debugging.
The following component uses a JSON pipe to convert an object to JSON format, and displays the string in both formats for comparison.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<JsonPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<JsonPipe, 'json', true>;

method transform

transform: (value: any) => string;

Parameter value
A value of any type to convert into a JSON-format string.

class KeyValuePipe

class KeyValuePipe implements PipeTransform {}

CommonModule
Transforms Object or Map into an array of key value pairs.
The output array will be ordered by keys. By default the comparator will be by Unicode point value. You can optionally pass a compareFn if your keys are complex types. Passing null as the compareFn will use natural ordering of the input.
### Examples
This examples show how an Object or a Map can be iterated by ngFor with the use of this keyvalue pipe.

constructor

constructor(differs: KeyValueDiffers);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<KeyValuePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<KeyValuePipe, 'keyvalue', true>;

method transform

transform: {
    <K, V>(
        input: ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): Array<KeyValue<K, V>>;
    <K extends number, V>(
        input: Record<K, V>,
        compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number
    ): KeyValue<string, V>[];
    <K extends string, V>(
        input: Record<K, V> | ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): KeyValue<K, V>[];
    (
        input: null,
        compareFn?: (
            a: KeyValue<unknown, unknown>,
            b: KeyValue<unknown, unknown>
        ) => number
    ): null;
    <K, V>(
        input: ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): KeyValue<K, V>[];
    <K extends number, V>(
        input: Record<K, V>,
        compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number
    ): KeyValue<string, V>[];
    <K extends string, V>(
        input: Record<K, V> | ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): KeyValue<K, V>[];
};

class Location

class Location_2 implements OnDestroy {}

A service that applications can use to interact with a browser's URL.
Depending on the LocationStrategy used, Location persists to the URL's path or the URL's hash segment.
It's better to use the Router.navigate() service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing.
Location is responsible for normalizing the URL against the application's base href. A normalized URL is absolute from the URL host, includes the application's base href, and has no trailing slash: - /my/app/user/123 is normalized - my/app/user/123 **is not** normalized - /my/app/user/123/ **is not** normalized
### Example

constructor

constructor(locationStrategy: LocationStrategy);

property joinWithSlash

static joinWithSlash: (start: string, end: string) => string;

Joins two parts of a URL with a slash if needed.
Parameter start
URL string
Parameter end
URL string
Returns
The joined URL string.

property normalizeQueryParams

static normalizeQueryParams: (params: string) => string;

Normalizes URL parameters by prepending with ? if needed.
Parameter params
String of URL parameters.
Returns
The normalized URL parameters string.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<Location_2, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<Location_2>;

property stripTrailingSlash

static stripTrailingSlash: (url: string) => string;

Removes a trailing slash from a URL string if needed. Looks for the first occurrence of either #, ?, or the end of the line as / characters and removes the trailing slash if one exists.
Parameter url
URL string.
Returns
The URL string, modified if needed.

method back

back: () => void;

Navigates back in the platform's history.

method forward

forward: () => void;

Navigates forward in the platform's history.

method getState

getState: () => unknown;

Reports the current state of the location history.
Returns
The current value of the history.state object.

method go

go: (path: string, query?: string, state?: any) => void;

Changes the browser's URL to a normalized version of a given URL, and pushes a new item onto the platform's history.
Parameter path
URL path to normalize.
Parameter query
Query parameters.
Parameter state
Location history state.

method historyGo

historyGo: (relativePosition?: number) => void;

Navigate to a specific page from session history, identified by its relative position to the current page.
Parameter relativePosition
Position of the target page in the history relative to the current page. A negative value moves backwards, a positive value moves forwards, e.g. location.historyGo(2) moves forward two pages and location.historyGo(-2) moves back two pages. When we try to go beyond what's stored in the history session, we stay in the current page. Same behaviour occurs when relativePosition equals 0.
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/History_API#Moving_to_a_specific_point_in_history

method isCurrentPathEqualTo

isCurrentPathEqualTo: (path: string, query?: string) => boolean;

Normalizes the given path and compares to the current normalized path.
Parameter path
The given URL path.
Parameter query
Query parameters.
Returns
True if the given URL path is equal to the current normalized path, false otherwise.

method ngOnDestroy

ngOnDestroy: () => void;

method normalize

normalize: (url: string) => string;

Normalizes a URL path by stripping any trailing slashes.
Parameter url
String representing a URL.
Returns
The normalized URL string.

method onUrlChange

onUrlChange: (fn: (url: string, state: unknown) => void) => VoidFunction;

Registers a URL change listener. Use to catch updates performed by the Angular framework that are not detectible through "popstate" or "hashchange" events.
Parameter fn
The change handler function, which take a URL and a location history state.
Returns
A function that, when executed, unregisters a URL change listener.

method path

path: (includeHash?: boolean) => string;

Normalizes the URL path for this location.
Parameter includeHash
True to include an anchor fragment in the path.
Returns
The normalized URL path.

method prepareExternalUrl

prepareExternalUrl: (url: string) => string;

Normalizes an external URL path. If the given URL doesn't begin with a leading slash ('/'), adds one before normalizing. Adds a hash if HashLocationStrategy is in use, or the APP_BASE_HREF if the PathLocationStrategy is in use.
Parameter url
String representing a URL.
Returns
A normalized platform-specific URL.

method replaceState

replaceState: (path: string, query?: string, state?: any) => void;

Changes the browser's URL to a normalized version of the given URL, and replaces the top item on the platform's history stack.
Parameter path
URL path to normalize.
Parameter query
Query parameters.
Parameter state
Location history state.

subscribe: (
    onNext: (value: PopStateEvent_2) => void,
    onThrow?: (exception: any) => void,
    onReturn?: (() => void) | null
) => SubscriptionLike;

Subscribes to the platform's popState events.
Note: Location.go() does not trigger the popState event in the browser. Use Location.onUrlChange() to subscribe to URL changes instead.
Parameter value
Event that is triggered when the state history changes.
Parameter exception
The exception to throw.
Returns
Subscribed events.
See Also
- [onpopstate](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate)

class LocationStrategy

abstract class LocationStrategy {}

Enables the Location service to read route state from the browser's URL. Angular provides two strategies: HashLocationStrategy and PathLocationStrategy.
Applications should use the Router or Location services to interact with application route state.
For instance, HashLocationStrategy produces URLs like http://example.com/#/foo, and PathLocationStrategy produces http://example.com/foo as an equivalent URL.
See these two classes for more.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<LocationStrategy, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<LocationStrategy>;

method back

abstract back: () => void;

method forward

abstract forward: () => void;

method getBaseHref

abstract getBaseHref: () => string;

method getState

abstract getState: () => unknown;

method historyGo

historyGo: (relativePosition: number) => void;

method onPopState

abstract onPopState: (fn: LocationChangeListener) => void;

method path

abstract path: (includeHash?: boolean) => string;

method prepareExternalUrl

abstract prepareExternalUrl: (internal: string) => string;

method pushState

abstract pushState: (
    state: any,
    title: string,
    url: string,
    queryParams: string
) => void;

method replaceState

abstract replaceState: (
    state: any,
    title: string,
    url: string,
    queryParams: string
) => void;

class LowerCasePipe

class LowerCasePipe implements PipeTransform {}

Transforms text to all lower case.
See Also
- UpperCasePipe
- TitleCasePipe
  The following example defines a view that allows the user to enter text, and then uses the pipe to convert the input text to all lower case.
  CommonModule

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<LowerCasePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<LowerCasePipe, 'lowercase', true>;

method transform

transform: {
    (value: string): string;
    (value: null): null;
    (value: string): string;
};

Parameter value
The string to transform to lower case.

class NgClass

class NgClass implements DoCheck {}

CommonModule
<some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
Adds and removes CSS classes on an HTML element.
The CSS classes are updated as follows, depending on the type of the expression evaluation: - string - the CSS classes listed in the string (space delimited) are added, - Array - the CSS classes declared as Array elements are added, - Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

constructor

constructor(_ngEl: ElementRef, _renderer: Renderer2);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgClass,
    '[ngClass]',
    never,
    {
        klass: { alias: 'class'; required: false };
        ngClass: { alias: 'ngClass'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgClass, never>;

method ngDoCheck

ngDoCheck: () => void;

class NgComponentOutlet

class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {}

Instantiates a Component type and inserts its Host View into the current View. NgComponentOutlet provides a declarative approach for dynamic component creation.
NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will be destroyed.
### Fine tune control
You can control the component creation process by using the following optional attributes:
* ngComponentOutletInputs: Optional component inputs object, which will be bind to the component.
* ngComponentOutletInjector: Optional custom Injector that will be used as parent for the Component. Defaults to the injector of the current view container.
* ngComponentOutletContent: Optional list of projectable nodes to insert into the content section of the component, if it exists.
* ngComponentOutletNgModule: Optional NgModule class reference to allow loading another module dynamically, then loading a component from that module.
* ngComponentOutletNgModuleFactory: Deprecated config option that allows providing optional NgModule factory to allow loading another module dynamically, then loading a component from that module. Use ngComponentOutletNgModule instead.
### Syntax
Simple
<ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
With inputs
<ng-container *ngComponentOutlet="componentTypeExpression; inputs: inputsExpression;"> </ng-container>
Customized injector/content
<ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
Customized NgModule reference
<ng-container *ngComponentOutlet="componentTypeExpression; ngModule: ngModuleClass;"> </ng-container>
### A simple example
A more complete example with additional options:
CommonModule

constructor

constructor(_viewContainerRef: ViewContainerRef);

property ngComponentOutlet

ngComponentOutlet: any;

property ngComponentOutletContent

ngComponentOutletContent?: any[][];

property ngComponentOutletInjector

ngComponentOutletInjector?: Injector;

property ngComponentOutletInputs

ngComponentOutletInputs?: Record<string, unknown>;

property ngComponentOutletNgModule

ngComponentOutletNgModule?: Type<any>;

property ngComponentOutletNgModuleFactory

ngComponentOutletNgModuleFactory?: NgModuleFactory<any>;

Deprecated
This input is deprecated, use ngComponentOutletNgModule instead.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgComponentOutlet,
    '[ngComponentOutlet]',
    never,
    {
        ngComponentOutlet: { alias: 'ngComponentOutlet'; required: false };
        ngComponentOutletInputs: {
            alias: 'ngComponentOutletInputs';
            required: false;
        };
        ngComponentOutletInjector: {
            alias: 'ngComponentOutletInjector';
            required: false;
        };
        ngComponentOutletContent: {
            alias: 'ngComponentOutletContent';
            required: false;
        };
        ngComponentOutletNgModule: {
            alias: 'ngComponentOutletNgModule';
            required: false;
        };
        ngComponentOutletNgModuleFactory: {
            alias: 'ngComponentOutletNgModuleFactory';
            required: false;
        };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet, never>;

method ngDoCheck

ngDoCheck: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

class NgFor

class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {}

A [structural directive](guide/directives/structural-directives) that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.
The ngForOf directive is generally used in the [shorthand form](guide/directives/structural-directives#asterisk) *ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.
The following example shows the shorthand syntax with some options, contained in an <li> element.
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive.
Here is the expanded version of the short-form example.
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn"> <li>...</li> </ng-template>
Angular automatically expands the shorthand syntax as it compiles the template. The context for each embedded view is logically merged to the current component context according to its lexical position.
When using the shorthand syntax, Angular allows only [one structural directive on an element](guide/directives/structural-directives#one-per-element). If you want to iterate conditionally, for example, put the *ngIf on a container element that wraps the *ngFor element. For further discussion, see [Structural Directives](guide/directives/structural-directives#one-per-element).
### Local variables
NgForOf provides exported values that can be aliased to local variables. For example:
```html <li *ngFor="let user of users; index as i; first as isFirst"> {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default ```
The following exported values can be aliased to local variables:
- $implicit: T: The value of the individual items in the iterable (ngForOf). - ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (`userStreams | async`). - index: number: The index of the current item in the iterable. - count: number: The length of the iterable. - first: boolean: True when the item is the first item in the iterable. - last: boolean: True when the item is the last item in the iterable. - even: boolean: True when the item has an even index in the iterable. - odd: boolean: True when the item has an odd index in the iterable.
### Change propagation
When the contents of the iterator changes, NgForOf makes the corresponding changes to the DOM:
* When an item is added, a new instance of the template is added to the DOM. * When an item is removed, its template instance is removed from the DOM. * When items are reordered, their respective templates are reordered in the DOM.
Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls that are present, such as <input> elements that accept user input. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input. For more on animations, see [Transitions and Triggers](guide/animations/transition-and-triggers).
The identities of elements in the iterator can change while the data does not. This can happen, for example, if the iterator is produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response produces objects with different identities, and Angular must tear down the entire DOM and rebuild it (as if all old elements were deleted and all new elements inserted).
To avoid this expensive operation, you can customize the default tracking algorithm. by supplying the trackBy option to NgForOf. trackBy takes a function that has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.
See Also
- [Structural Directives](guide/directives/structural-directives) CommonModule

constructor

constructor(
    _viewContainer: ViewContainerRef,
    _template: TemplateRef<NgForOfContext<T, U>>,
    _differs: IterableDiffers
);

property ngForTrackBy

ngForTrackBy: TrackByFunction<T>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgForOf<any, any>,
    '[ngFor][ngForOf]',
    never,
    {
        ngForOf: { alias: 'ngForOf'; required: false };
        ngForTrackBy: { alias: 'ngForTrackBy'; required: false };
        ngForTemplate: { alias: 'ngForTemplate'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgForOf<any, any>, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: <T, U extends NgIterable<T>>(
    dir: NgForOf<T, U>,
    ctx: any
) => ctx is NgForOfContext<T, U>;

Asserts the correct type of the context for the template that NgForOf will render.
The presence of this method is a signal to the Ivy template type-check compiler that the NgForOf structural directive renders its template with a specific context type.

class NgForOf

class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {}

A [structural directive](guide/directives/structural-directives) that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.
The ngForOf directive is generally used in the [shorthand form](guide/directives/structural-directives#asterisk) *ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.
The following example shows the shorthand syntax with some options, contained in an <li> element.
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive.
Here is the expanded version of the short-form example.
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn"> <li>...</li> </ng-template>
Angular automatically expands the shorthand syntax as it compiles the template. The context for each embedded view is logically merged to the current component context according to its lexical position.
When using the shorthand syntax, Angular allows only [one structural directive on an element](guide/directives/structural-directives#one-per-element). If you want to iterate conditionally, for example, put the *ngIf on a container element that wraps the *ngFor element. For further discussion, see [Structural Directives](guide/directives/structural-directives#one-per-element).
### Local variables
NgForOf provides exported values that can be aliased to local variables. For example:
```html <li *ngFor="let user of users; index as i; first as isFirst"> {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default ```
The following exported values can be aliased to local variables:
- $implicit: T: The value of the individual items in the iterable (ngForOf). - ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (`userStreams | async`). - index: number: The index of the current item in the iterable. - count: number: The length of the iterable. - first: boolean: True when the item is the first item in the iterable. - last: boolean: True when the item is the last item in the iterable. - even: boolean: True when the item has an even index in the iterable. - odd: boolean: True when the item has an odd index in the iterable.
### Change propagation
When the contents of the iterator changes, NgForOf makes the corresponding changes to the DOM:
* When an item is added, a new instance of the template is added to the DOM. * When an item is removed, its template instance is removed from the DOM. * When items are reordered, their respective templates are reordered in the DOM.
Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls that are present, such as <input> elements that accept user input. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input. For more on animations, see [Transitions and Triggers](guide/animations/transition-and-triggers).
The identities of elements in the iterator can change while the data does not. This can happen, for example, if the iterator is produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response produces objects with different identities, and Angular must tear down the entire DOM and rebuild it (as if all old elements were deleted and all new elements inserted).
To avoid this expensive operation, you can customize the default tracking algorithm. by supplying the trackBy option to NgForOf. trackBy takes a function that has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.
See Also
- [Structural Directives](guide/directives/structural-directives) CommonModule

constructor

constructor(
    _viewContainer: ViewContainerRef,
    _template: TemplateRef<NgForOfContext<T, U>>,
    _differs: IterableDiffers
);

property ngForTrackBy

ngForTrackBy: TrackByFunction<T>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgForOf<any, any>,
    '[ngFor][ngForOf]',
    never,
    {
        ngForOf: { alias: 'ngForOf'; required: false };
        ngForTrackBy: { alias: 'ngForTrackBy'; required: false };
        ngForTemplate: { alias: 'ngForTemplate'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgForOf<any, any>, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: <T, U extends NgIterable<T>>(
    dir: NgForOf<T, U>,
    ctx: any
) => ctx is NgForOfContext<T, U>;

Asserts the correct type of the context for the template that NgForOf will render.
The presence of this method is a signal to the Ivy template type-check compiler that the NgForOf structural directive renders its template with a specific context type.

class NgForOfContext

class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {}

constructor

constructor($implicit: {}, ngForOf: NgIterable<T>, index: number, count: number);

property $implicit

$implicit: {};

Reference to the current item from the collection.

property count

count: number;

Returns total amount of items in the collection.

property even

readonly even: boolean;

property first

readonly first: boolean;

property index

index: number;

Returns an index of the current item in the collection.

property last

readonly last: boolean;

property ngForOf

ngForOf: NgIterable<T>;

The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async).

property odd

readonly odd: boolean;

class NgIf

class NgIf<T = unknown> {}

A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause. The default template for the else clause is blank.
A [shorthand form](guide/directives/structural-directives#asterisk) of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.
Simple form with shorthand syntax:
<div *ngIf="condition">Content to render when condition is true.</div>
Simple form with expanded syntax:
<ng-template [ngIf]="condition"><div>Content to render when condition is true.</div></ng-template>
Form with an "else" block:
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div> <ng-template #elseBlock>Content to render when condition is false.</ng-template>
Shorthand form with "then" and "else" blocks:
<div *ngIf="condition; then thenBlock else elseBlock"></div> <ng-template #thenBlock>Content to render when condition is true.</ng-template> <ng-template #elseBlock>Content to render when condition is false.</ng-template>
Form with storing the value locally:
<div *ngIf="condition as value; else elseBlock">{{value}}</div> <ng-template #elseBlock>Content to render when value is null.</ng-template>
The *ngIf directive is most commonly used to conditionally show an inline template, as seen in the following example. The default else template is blank.
### Showing an alternative template using else
To display a template when expression evaluates to false, use an else template binding as shown in the following example. The else binding points to an <ng-template> element labeled #elseBlock. The template can be defined anywhere in the component view, but is typically placed right after ngIf for readability.
### Using an external then template
In the previous example, the then-clause template is specified inline, as the content of the tag that contains the ngIf directive. You can also specify a template that is defined externally, by referencing a labeled <ng-template> element. When you do this, you can change which template to use at runtime, as shown in the following example.
### Storing a conditional result in a variable
You might want to show a set of properties from the same object. If you are waiting for asynchronous data, the object can be undefined. In this case, you can use ngIf and store the result of the condition in a local variable as shown in the following example.
This code uses only one AsyncPipe, so only one subscription is created. The conditional statement stores the result of userStream|async in the local variable user. You can then bind the local user repeatedly.
The conditional displays the data only if userStream returns a value, so you don't need to use the safe-navigation-operator (?.) to guard against null values when accessing properties. You can display an alternative template while waiting for the data.
### Shorthand syntax
The shorthand syntax *ngIf expands into two separate template specifications for the "then" and "else" clauses. For example, consider the following shorthand statement, that is meant to show a loading page while waiting for data to be loaded.
<div class="hero-list" *ngIf="heroes else loading"> ... </div> <ng-template #loading> <div>Loading...</div> </ng-template>
You can see that the "else" clause references the <ng-template> with the #loading label, and the template for the "then" clause is provided as the content of the anchor element.
However, when Angular expands the shorthand syntax, it creates another <ng-template> tag, with ngIf and ngIfElse directives. The anchor element containing the template for the "then" clause becomes the content of this unlabeled <ng-template> tag.
<ng-template [ngIf]="heroes" [ngIfElse]="loading"> <div class="hero-list"> ... </div> </ng-template> <ng-template #loading> <div>Loading...</div> </ng-template>
The presence of the implicit template object has implications for the nesting of structural directives. For more on this subject, see [Structural Directives](guide/directives/structural-directives#one-per-element).
CommonModule

constructor

constructor(
    _viewContainer: ViewContainerRef,
    templateRef: TemplateRef<NgIfContext<T>>
);

property ngTemplateGuard_ngIf

static ngTemplateGuard_ngIf: string;

Assert the correct type of the expression bound to the ngIf input within the template.
The presence of this static field is a signal to the Ivy template type check compiler that when the NgIf structural directive renders its template, the type of the expression bound to ngIf should be narrowed in some way. For NgIf, the binding expression itself is used to narrow its type, which allows the strictNullChecks feature of TypeScript to work with NgIf.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgIf<any>,
    '[ngIf]',
    never,
    {
        ngIf: { alias: 'ngIf'; required: false };
        ngIfThen: { alias: 'ngIfThen'; required: false };
        ngIfElse: { alias: 'ngIfElse'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgIf<any>, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: <T>(
    dir: NgIf<T>,
    ctx: any
) => ctx is NgIfContext<Exclude<T, false | '' | 0>>;

Asserts the correct type of the context for the template that NgIf will render.
The presence of this method is a signal to the Ivy template type-check compiler that the NgIf structural directive renders its template with a specific context type.

class NgIfContext

class NgIfContext<T = unknown> {}

property $implicit

$implicit: {};

property ngIf

ngIf: {};

class NgLocaleLocalization

class NgLocaleLocalization extends NgLocalization {}

Returns the plural case based on the locale

constructor

constructor(locale: string);

property locale

protected locale: string;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgLocaleLocalization, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NgLocaleLocalization>;

method getPluralCategory

getPluralCategory: (value: any, locale?: string) => string;

class NgLocalization

abstract class NgLocalization {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgLocalization, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NgLocalization>;

method getPluralCategory

abstract getPluralCategory: (value: any, locale?: string) => string;

class NgOptimizedImage

class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {}

Directive that improves image loading performance by enforcing best practices.
NgOptimizedImage ensures that the loading of the Largest Contentful Paint (LCP) image is prioritized by: - Automatically setting the fetchpriority attribute on the <img> tag - Lazy loading non-priority images by default - Automatically generating a preconnect link tag in the document head
In addition, the directive: - Generates appropriate asset URLs if a corresponding ImageLoader function is provided - Automatically generates a srcset - Requires that width and height are set - Warns if width or height have been set incorrectly - Warns if the image will be visually distorted when rendered
The NgOptimizedImage directive is marked as [standalone](guide/components/importing) and can be imported directly.
Follow the steps below to enable and use the directive: 1. Import it into the necessary NgModule or a standalone Component. 2. Optionally provide an ImageLoader if you use an image hosting service. 3. Update the necessary <img> tags in templates and replace src attributes with ngSrc. Using a ngSrc allows the directive to control when the src gets set, which triggers an image download.
Step 1: import the NgOptimizedImage directive.
import { NgOptimizedImage } from '@angular/common'; // Include it into the necessary NgModule @NgModule({ imports: [NgOptimizedImage], }) class AppModule {} // ... or a standalone Component @Component({ imports: [NgOptimizedImage], }) class MyStandaloneComponent {}
Step 2: configure a loader.
To use the **default loader**: no additional code changes are necessary. The URL returned by the generic loader will always match the value of "src". In other words, this loader applies no transformations to the resource URL and the value of the ngSrc attribute will be used as is.
To use an existing loader for a **third-party image service**: add the provider factory for your chosen service to the providers array. In the example below, the Imgix loader is used:
import {provideImgixLoader} from '@angular/common'; // Call the function and add the result to the `providers` array: providers: [ provideImgixLoader("https://my.base.url/"), ],
The NgOptimizedImage directive provides the following functions: - provideCloudflareLoader - provideCloudinaryLoader - provideImageKitLoader - provideImgixLoader
If you use a different image provider, you can create a custom loader function as described below.
To use a **custom loader**: provide your loader function as a value for the IMAGE_LOADER DI token.
import {IMAGE_LOADER, ImageLoaderConfig} from '@angular/common'; // Configure the loader using the `IMAGE_LOADER` token. providers: [ { provide: IMAGE_LOADER, useValue: (config: ImageLoaderConfig) => { return `https://example.com/${config.src}-${config.width}.jpg`; } }, ],
Step 3: update <img> tags in templates to use ngSrc instead of src.
<img ngSrc="logo.png" width="200" height="100">

property disableOptimizedSrcset

disableOptimizedSrcset: boolean;

Disables automatic srcset generation for this image.

property fill

fill: boolean;

Sets the image to "fill mode", which eliminates the height/width requirement and adds styles such that the image fills its containing element.

property height

height: number;

For responsive images: the intrinsic height of the image in pixels. For fixed size images: the desired rendered height of the image in pixels.

property loading

loading?: 'lazy' | 'eager' | 'auto';

The desired loading behavior (lazy, eager, or auto). Defaults to lazy, which is recommended for most images.
Warning: Setting images as loading="eager" or loading="auto" marks them as non-priority images and can hurt loading performance. For images which may be the LCP element, use the priority attribute instead of loading.

property ngAcceptInputType_disableOptimizedSrcset

static ngAcceptInputType_disableOptimizedSrcset: {};

property ngAcceptInputType_fill

static ngAcceptInputType_fill: {};

property ngAcceptInputType_height

static ngAcceptInputType_height: {};

property ngAcceptInputType_ngSrc

static ngAcceptInputType_ngSrc: any;

property ngAcceptInputType_placeholder

static ngAcceptInputType_placeholder: string | boolean;

property ngAcceptInputType_priority

static ngAcceptInputType_priority: {};

property ngAcceptInputType_width

static ngAcceptInputType_width: {};

property ngSrc

ngSrc: string;

Name of the source image. Image name will be processed by the image loader and the final URL will be applied as the src property of the image.

property ngSrcset

ngSrcset: string;

A comma separated list of width or density descriptors. The image name will be taken from ngSrc and combined with the list of width or density descriptors to generate the final srcset property of the image.
Example:
<img ngSrc="hello.jpg" ngSrcset="100w, 200w" /> => <img src="path/hello.jpg" srcset="path/hello.jpg?w=100 100w, path/hello.jpg?w=200 200w" />

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgOptimizedImage,
    'img[ngSrc]',
    never,
    {
        ngSrc: { alias: 'ngSrc'; required: true };
        ngSrcset: { alias: 'ngSrcset'; required: false };
        sizes: { alias: 'sizes'; required: false };
        width: { alias: 'width'; required: false };
        height: { alias: 'height'; required: false };
        loading: { alias: 'loading'; required: false };
        priority: { alias: 'priority'; required: false };
        loaderParams: { alias: 'loaderParams'; required: false };
        disableOptimizedSrcset: {
            alias: 'disableOptimizedSrcset';
            required: false;
        };
        fill: { alias: 'fill'; required: false };
        placeholder: { alias: 'placeholder'; required: false };
        placeholderConfig: { alias: 'placeholderConfig'; required: false };
        src: { alias: 'src'; required: false };
        srcset: { alias: 'srcset'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgOptimizedImage, never>;

property placeholder

placeholder?: string | boolean;

A URL or data URL for an image to be used as a placeholder while this image loads.

property placeholderConfig

placeholderConfig?: ImagePlaceholderConfig;

Configuration object for placeholder settings. Options: * blur: Setting this to false disables the automatic CSS blur.

property priority

priority: boolean;

Indicates whether this image should have a high priority.

property sizes

sizes?: string;

The base sizes attribute passed through to the <img> element. Providing sizes causes the image to create an automatic responsive srcset.

property width

width: number;

For responsive images: the intrinsic width of the image in pixels. For fixed size images: the desired rendered width of the image in pixels.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

class NgPlural

class NgPlural {}

CommonModule
<some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">there is nothing</ng-template> <ng-template ngPluralCase="=1">there is one</ng-template> <ng-template ngPluralCase="few">there are a few</ng-template> </some-element>
Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.
Displays DOM sub-trees that match the switch expression value, or failing that, DOM sub-trees that match the switch expression's pluralization category.
To use this directive you must provide a container element that sets the [ngPlural] attribute to a switch expression. Inner elements with a [ngPluralCase] will display based on their expression: - if [ngPluralCase] is set to a value starting with =, it will only display if the value matches the switch expression exactly, - otherwise, the view will be treated as a "category match", and will only display if exact value matches aren't found and the value maps to its category for the defined locale.
See http://cldr.unicode.org/index/cldr-spec/plural-rules

constructor

constructor(_localization: NgLocalization);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgPlural,
    '[ngPlural]',
    never,
    { ngPlural: { alias: 'ngPlural'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgPlural, never>;

method addCase

addCase: (value: string, switchView: SwitchView) => void;

class NgPluralCase

class NgPluralCase {}

CommonModule
Creates a view that will be added/removed from the parent NgPlural when the given expression matches the plural expression according to CLDR rules.
<some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">...</ng-template> <ng-template ngPluralCase="other">...</ng-template> </some-element>
See NgPlural for more details and example.

constructor

constructor(
    value: string,
    template: TemplateRef<Object>,
    viewContainer: ViewContainerRef,
    ngPlural: NgPlural
);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgPluralCase,
    '[ngPluralCase]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NgPluralCase,
    [{ attribute: 'ngPluralCase' }, null, null, { host: true }]
>;

property value

value: string;

class NgStyle

class NgStyle implements DoCheck {}

CommonModule
Set the font of the containing element to the result of an expression.
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
Set the width of the containing element to a pixel value returned by an expression.
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
Set a collection of style values using an expression that returns key-value pairs.
<some-element [ngStyle]="objExp">...</some-element>
An attribute directive that updates styles for the containing HTML element. Sets one or more style properties, specified as colon-separated key-value pairs. The key is a style name, with an optional .<unit> suffix (such as 'top.px', 'font-style.em'). The value is an expression to be evaluated. The resulting non-null value, expressed in the given unit, is assigned to the given style property. If the result of evaluation is null, the corresponding style is removed.

constructor

constructor(_ngEl: ElementRef, _differs: KeyValueDiffers, _renderer: Renderer2);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgStyle,
    '[ngStyle]',
    never,
    { ngStyle: { alias: 'ngStyle'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgStyle, never>;

method ngDoCheck

ngDoCheck: () => void;

The [ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container. - Every view that matches is rendered. - If there are no matches, a view with the ngSwitchDefault directive is rendered. - Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.

Define a container element for the directive, and specify the switch expression to match against as an attribute:

<container-element [ngSwitch]="switch_expression">

Within the container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.

<container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

### Usage Examples

The following example shows how to use more than one case to display the same view:

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

The following example shows how cases can be nested:

<container-element [ngSwitch]="switch_expression">
      <some-element *ngSwitchCase="match_expression_1">...</some-element>
      <some-element *ngSwitchCase="match_expression_2">...</some-element>
      <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
      <ng-container *ngSwitchCase="match_expression_3">
        <!-- use a ng-container to group multiple root nodes -->
        <inner-element></inner-element>
        <inner-other-element></inner-other-element>
      </ng-container>
      <some-element *ngSwitchDefault>...</some-element>
    </container-element>

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgSwitch,
    '[ngSwitch]',
    never,
    { ngSwitch: { alias: 'ngSwitch'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgSwitch, never>;

class NgSwitchCase

class NgSwitchCase implements DoCheck {}

CommonModule
Provides a switch case expression to match against an enclosing ngSwitch expression. When the expressions match, the given NgSwitchCase template is rendered. If multiple match expressions match the switch expression value, all of them are displayed.
Within a switch container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.
<container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> ... <some-element *ngSwitchDefault>...</some-element> </container-element>
Each switch-case statement contains an in-line HTML template or template reference that defines the subtree to be selected if the value of the match expression matches the value of the switch expression.
As of Angular v17 the NgSwitch directive uses strict equality comparison (===) instead of loose equality (==) to match different cases.
See Also
- NgSwitch
- NgSwitchDefault

constructor

constructor(
    viewContainer: ViewContainerRef,
    templateRef: TemplateRef<Object>,
    ngSwitch: NgSwitch
);

property ngSwitchCase

ngSwitchCase: any;

Stores the HTML template to be selected on match.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgSwitchCase,
    '[ngSwitchCase]',
    never,
    { ngSwitchCase: { alias: 'ngSwitchCase'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NgSwitchCase,
    [null, null, { optional: true; host: true }]
>;

method ngDoCheck

ngDoCheck: () => void;

Performs case matching. For internal use only.

class NgSwitchDefault

class NgSwitchDefault {}

CommonModule
Creates a view that is rendered when no NgSwitchCase expressions match the NgSwitch expression. This statement should be the final case in an NgSwitch.
See Also
- NgSwitch
- NgSwitchCase

constructor

constructor(
    viewContainer: ViewContainerRef,
    templateRef: TemplateRef<Object>,
    ngSwitch: NgSwitch
);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgSwitchDefault,
    '[ngSwitchDefault]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NgSwitchDefault,
    [null, null, { optional: true; host: true }]
>;

class NgTemplateOutlet

class NgTemplateOutlet<C = unknown> implements OnChanges {}

CommonModule
Inserts an embedded view from a prepared TemplateRef.
You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext]. [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations.
<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
Using the key $implicit in the context object will set its value as default.
### Example

constructor

constructor(_viewContainerRef: ViewContainerRef);

property ngTemplateOutlet

ngTemplateOutlet: any;

A string defining the template reference and optionally the context object for the template.

property ngTemplateOutletContext

ngTemplateOutletContext: {};

A context object to attach to the EmbeddedViewRef. This should be an object, the object's keys will be available for binding by the local template let declarations. Using the key $implicit in the context object will set its value as default.

property ngTemplateOutletInjector

ngTemplateOutletInjector: any;

Injector to be used within the embedded view.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgTemplateOutlet<any>,
    '[ngTemplateOutlet]',
    never,
    {
        ngTemplateOutletContext: {
            alias: 'ngTemplateOutletContext';
            required: false;
        };
        ngTemplateOutlet: { alias: 'ngTemplateOutlet'; required: false };
        ngTemplateOutletInjector: {
            alias: 'ngTemplateOutletInjector';
            required: false;
        };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgTemplateOutlet<any>, never>;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class ɵDomAdapter

abstract class ɵDomAdapter {}

Provides DOM operations in an environment-agnostic way.
Tread carefully! Interacting with the DOM directly is dangerous and can introduce XSS risks.

property supportsDOMEvents

abstract readonly supportsDOMEvents: boolean;

method createElement

abstract createElement: (tagName: any, doc?: any) => HTMLElement;

method createHtmlDocument

abstract createHtmlDocument: () => Document;

method dispatchEvent

abstract dispatchEvent: (el: any, evt: any) => any;

method getBaseHref

abstract getBaseHref: (doc: Document) => string | null;

method getCookie

abstract getCookie: (name: string) => string | null;

method getDefaultDocument

abstract getDefaultDocument: () => Document;

method getGlobalEventTarget

abstract getGlobalEventTarget: (doc: Document, target: string) => any;

method getUserAgent

abstract getUserAgent: () => string;

method isElementNode

abstract isElementNode: (node: any) => boolean;

method isShadowRoot

abstract isShadowRoot: (node: any) => boolean;

method onAndCancel

abstract onAndCancel: (el: any, evt: any, listener: any) => Function;

method remove

abstract remove: (el: any) => void;

method resetBaseElement

abstract resetBaseElement: () => void;

class ɵNullViewportScroller

class ɵNullViewportScroller implements ViewportScroller {}

Provides an empty implementation of the viewport scroller.

method getScrollPosition

getScrollPosition: () => [number, number];

Empty implementation

method scrollToAnchor

scrollToAnchor: (anchor: string) => void;

Empty implementation

method scrollToPosition

scrollToPosition: (position: [number, number]) => void;

Empty implementation

method setHistoryScrollRestoration

setHistoryScrollRestoration: (scrollRestoration: 'auto' | 'manual') => void;

Empty implementation

method setOffset

setOffset: (offset: [number, number] | (() => [number, number])) => void;

Empty implementation

class ɵPlatformNavigation

abstract class ɵPlatformNavigation implements Navigation {}

This class wraps the platform Navigation API which allows server-specific and test implementations.

property canGoBack

abstract canGoBack: boolean;

property canGoForward

abstract canGoForward: boolean;

property currentEntry

abstract currentEntry: NavigationHistoryEntry;

property oncurrententrychange

abstract oncurrententrychange: (
    this: Navigation,
    ev: NavigationCurrentEntryChangeEvent
) => any;

property onnavigate

abstract onnavigate: (this: Navigation, ev: NavigateEvent) => any;

property onnavigateerror

abstract onnavigateerror: (this: Navigation, ev: ErrorEvent) => any;

property onnavigatesuccess

abstract onnavigatesuccess: (this: Navigation, ev: Event) => any;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ɵPlatformNavigation, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<ɵPlatformNavigation>;

property transition

abstract transition: NavigationTransition;

method addEventListener

abstract addEventListener: (
    type: unknown,
    listener: unknown,
    options?: unknown
) => void;

method back

abstract back: (options?: NavigationOptions | undefined) => NavigationResult;

method dispatchEvent

abstract dispatchEvent: (event: Event) => boolean;

method entries

abstract entries: () => NavigationHistoryEntry[];

method forward

abstract forward: (options?: NavigationOptions | undefined) => NavigationResult;

method navigate

abstract navigate: (
    url: string,
    options?: NavigationNavigateOptions | undefined
) => NavigationResult;

method reload

abstract reload: (
    options?: NavigationReloadOptions | undefined
) => NavigationResult;

method removeEventListener

abstract removeEventListener: (
    type: unknown,
    listener: unknown,
    options?: unknown
) => void;

method traverseTo

abstract traverseTo: (
    key: string,
    options?: NavigationOptions | undefined
) => NavigationResult;

method updateCurrentEntry

abstract updateCurrentEntry: (
    options: NavigationUpdateCurrentEntryOptions
) => void;

class PathLocationStrategy

class PathLocationStrategy extends LocationStrategy implements OnDestroy {}

A LocationStrategy used to configure the Location service to represent its state in the [path](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax) of the browser's URL.
If you're using PathLocationStrategy, you may provide a APP_BASE_HREF or add a <base href> element to the document to override the default.
For instance, if you provide an APP_BASE_HREF of '/my/app/' and call location.go('/foo'), the browser's URL will become example.com/my/app/foo. To ensure all relative URIs resolve correctly, the <base href> and/or APP_BASE_HREF should end with a /.
Similarly, if you add <base href='/my/app/'/> to the document and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.
Note that when using PathLocationStrategy, neither the query nor the fragment in the <base href> will be preserved, as outlined by the [RFC](https://tools.ietf.org/html/rfc3986#section-5.2.2).
### Example

constructor

constructor(_platformLocation: PlatformLocation, href?: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    PathLocationStrategy,
    [null, { optional: true }]
>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<PathLocationStrategy>;

method back

back: () => void;

method forward

forward: () => void;

method getBaseHref

getBaseHref: () => string;

method getState

getState: () => unknown;

method historyGo

historyGo: (relativePosition?: number) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onPopState

onPopState: (fn: LocationChangeListener) => void;

method path

path: (includeHash?: boolean) => string;

method prepareExternalUrl

prepareExternalUrl: (internal: string) => string;

method pushState

pushState: (state: any, title: string, url: string, queryParams: string) => void;

method replaceState

replaceState: (
    state: any,
    title: string,
    url: string,
    queryParams: string
) => void;

class PercentPipe

class PercentPipe implements PipeTransform {}

CommonModule
Transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.
See Also
- formatPercent
  The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US.

constructor

constructor(_locale: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<PercentPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<PercentPipe, 'percent', true>;

method transform

transform: {
    (value: number | string, digitsInfo?: string, locale?: string):
        | string
        | null;
    (value: null, digitsInfo?: string, locale?: string): null;
    (value: string | number, digitsInfo?: string, locale?: string): string;
};

class PlatformLocation

abstract class PlatformLocation {}

This class should not be used directly by an application developer. Instead, use Location.
PlatformLocation encapsulates all calls to DOM APIs, which allows the Router to be platform-agnostic. This means that we can have different implementation of PlatformLocation for the different platforms that Angular supports. For example, @angular/platform-browser provides an implementation specific to the browser environment, while @angular/platform-server provides one suitable for use with server-side rendering.
The PlatformLocation class is used directly by all implementations of LocationStrategy when they need to interact with the DOM APIs like pushState, popState, etc.
LocationStrategy in turn is used by the Location service which is used directly by the Router in order to navigate between routes. Since all interactions between Router / Location / LocationStrategy and DOM APIs flow through the PlatformLocation class, they are all platform-agnostic.

property hash

readonly hash: string;

property hostname

readonly hostname: string;

property href

readonly href: string;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<PlatformLocation, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<PlatformLocation>;

property pathname

readonly pathname: string;

property port

readonly port: string;

property protocol

readonly protocol: string;

property search

readonly search: string;

method back

abstract back: () => void;

method forward

abstract forward: () => void;

method getBaseHrefFromDOM

abstract getBaseHrefFromDOM: () => string;

method getState

abstract getState: () => unknown;

method historyGo

historyGo: (relativePosition: number) => void;

method onHashChange

abstract onHashChange: (fn: LocationChangeListener) => VoidFunction;

Returns a function that, when executed, removes the hashchange event handler.

method onPopState

abstract onPopState: (fn: LocationChangeListener) => VoidFunction;

Returns a function that, when executed, removes the popstate event handler.

method pushState

abstract pushState: (state: any, title: string, url: string) => void;

method replaceState

abstract replaceState: (state: any, title: string, url: string) => void;

class SlicePipe

class SlicePipe implements PipeTransform {}

CommonModule
Creates a new Array or String containing a subset (slice) of the elements.
All behavior is based on the expected behavior of the JavaScript API Array.prototype.slice() and String.prototype.slice().
When operating on an Array, the returned Array is always a copy even when all the elements are being returned.
When operating on a blank value, the pipe returns the blank value.
### List Example
This ngFor example:
produces the following:
<li>b</li> <li>c</li>
### String Examples

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<SlicePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<SlicePipe, 'slice', true>;

method transform

transform: {
    <T>(value: ReadonlyArray<T>, start: number, end?: number): Array<T>;
    (value: null, start: number, end?: number): null;
    <T>(value: readonly T[], start: number, end?: number): T[];
    (value: string, start: number, end?: number): string;
    (value: string, start: number, end?: number): string;
};

Parameter value
a list or a string to be sliced.
Parameter start
the starting index of the subset to return: - **a positive integer**: return the item at start index and all items after in the list or string expression. - **a negative integer**: return the item at start index from the end and all items after in the list or string expression. - **if positive and greater than the size of the expression**: return an empty list or string. - **if negative and greater than the size of the expression**: return entire list or string.
Parameter end
the ending index of the subset to return: - **omitted**: return all items until the end. - **if positive**: return all items before end index of the list or string. - **if negative**: return all items before end index from the end of the list or string.

class TitleCasePipe

class TitleCasePipe implements PipeTransform {}

Transforms text to title case. Capitalizes the first letter of each word and transforms the rest of the word to lower case. Words are delimited by any whitespace character, such as a space, tab, or line-feed character.
See Also
- LowerCasePipe
- UpperCasePipe
  The following example shows the result of transforming various strings into title case.
  CommonModule

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<TitleCasePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<TitleCasePipe, 'titlecase', true>;

method transform

transform: {
    (value: string): string;
    (value: null): null;
    (value: string): string;
};

Parameter value
The string to transform to title case.

class UpperCasePipe

class UpperCasePipe implements PipeTransform {}

Transforms text to all upper case.
See Also
- LowerCasePipe
- TitleCasePipe
  CommonModule

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<UpperCasePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<UpperCasePipe, 'uppercase', true>;

method transform

transform: {
    (value: string): string;
    (value: null): null;
    (value: string): string;
};

Parameter value
The string to transform to upper case.

class ViewportScroller

abstract class ViewportScroller {}

Defines a scroll position manager. Implemented by BrowserViewportScroller.

property ɵprov

static ɵprov: {};

method getScrollPosition

abstract getScrollPosition: () => [number, number];

Retrieves the current scroll position.
Returns
A position in screen coordinates (a tuple with x and y values).

method scrollToAnchor

abstract scrollToAnchor: (anchor: string) => void;

Scrolls to an anchor element.
Parameter anchor
The ID of the anchor element.

method scrollToPosition

abstract scrollToPosition: (position: [number, number]) => void;

Scrolls to a specified position.
Parameter position
A position in screen coordinates (a tuple with x and y values).

method setHistoryScrollRestoration

abstract setHistoryScrollRestoration: (
    scrollRestoration: 'auto' | 'manual'
) => void;

Disables automatic scroll restoration provided by the browser. See also [window.history.scrollRestoration info](https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration).

method setOffset

abstract setOffset: (
    offset: [number, number] | (() => [number, number])
) => void;

Configures the top offset used when scrolling to an anchor.
Parameter offset
A position in screen coordinates (a tuple with x and y values) or a function that returns the top offset position.

class XhrFactory

abstract class XhrFactory {}

A wrapper around the XMLHttpRequest constructor.

method build

abstract build: () => XMLHttpRequest;

Interfaces

interface DatePipeConfig

interface DatePipeConfig {}

An interface that describes the date pipe configuration, which can be provided using the DATE_PIPE_DEFAULT_OPTIONS token.
See Also
- DATE_PIPE_DEFAULT_OPTIONS

property dateFormat

dateFormat?: string;

property timezone

timezone?: string;

interface ImageLoaderConfig

interface ImageLoaderConfig {}

Config options recognized by the image loader function.
See Also
- ImageLoader
- NgOptimizedImage

property isPlaceholder

isPlaceholder?: boolean;

Whether the loader should generate a URL for a small image placeholder instead of a full-sized image.

property loaderParams

loaderParams?: {
    [key: string]: any;
};

Additional user-provided parameters for use by the ImageLoader.

property src

src: string;

Image file name to be added to the image request URL.

property width

width?: number;

Width of the requested image (to be used when generating srcset).

interface ImagePlaceholderConfig

interface ImagePlaceholderConfig {}

Config options used in rendering placeholder images.
See Also
- NgOptimizedImage

property blur

blur?: boolean;

interface KeyValue

interface KeyValue<K, V> {}

A key value pair. Usually used to represent the key value pairs from a Map or Object.

property key

key: K;

property value

value: V;

interface LocationChangeEvent

interface LocationChangeEvent {}

A serializable version of the event from onPopState or onHashChange

property state

state: any;

property type

type: string;

interface LocationChangeListener

interface LocationChangeListener {}

call signature

(event: LocationChangeEvent): any;

interface PopStateEvent

interface PopStateEvent_2 {}

property pop

pop?: boolean;

property state

state?: any;

property type

type?: string;

property url

url?: string;

Enums

enum FormatWidth

enum FormatWidth {
    Short = 0,
    Medium = 1,
    Long = 2,
    Full = 3,
}

String widths available for date-time formats. The specific character widths are locale-specific. Examples are given for en-US.
See Also
- getLocaleDateFormat
- getLocaleTimeFormat
- getLocaleDateTimeFormat
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
Date locale data getters are deprecated

member Full

Full = 3

For en-US, 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Example: Monday, June 15, 2015 at 9:03:01 AM GMT+01:00)

member Long

Long = 2

For en-US, 'MMMM d, y, h:mm:ss a z' (Example: June 15, 2015 at 9:03:01 AM GMT+1)

member Medium

Medium = 1

For en-US, 'MMM d, y, h:mm:ss a' (Example: Jun 15, 2015, 9:03:01 AM)

member Short

Short = 0

For en-US, 'M/d/yy, h:mm a' (Example: 6/15/15, 9:03 AM)

enum FormStyle

enum FormStyle {
    Format = 0,
    Standalone = 1,
}

Context-dependant translation forms for strings. Typically the standalone version is for the nominative form of the word, and the format version is used for the genitive case.
See Also
- [CLDR website](http://cldr.unicode.org/translation/date-time-1/date-time#TOC-Standalone-vs.-Format-Styles)
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
locale data getters are deprecated

member Format

Format = 0

member Standalone

Standalone = 1

enum NumberFormatStyle

enum NumberFormatStyle {
    Decimal = 0,
    Percent = 1,
    Currency = 2,
    Scientific = 3,
}

Format styles that can be used to represent numbers.
See Also
- getLocaleNumberFormat
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
getLocaleNumberFormat is deprecated

member Currency

Currency = 2

member Decimal

Decimal = 0

member Percent

Percent = 1

member Scientific

Scientific = 3

enum Plural

enum Plural {
    Zero = 0,
    One = 1,
    Two = 2,
    Few = 3,
    Many = 4,
    Other = 5,
}

Plurality cases used for translating plurals to different languages.
See Also
- NgPlural
- NgPluralCase
- [Internationalization (i18n) Guide](guide/i18n)
Deprecated
getLocalePluralCase is deprecated

member Few

Few = 3

member Many

Many = 4

member One

One = 1

member Other

Other = 5

member Two

Two = 2

member Zero

Zero = 0

enum TranslationWidth

enum TranslationWidth {
    Narrow = 0,
    Abbreviated = 1,
    Wide = 2,
    Short = 3,
}

String widths available for translations. The specific character widths are locale-specific. Examples are given for the word "Sunday" in English.
Deprecated
locale data getters are deprecated

member Abbreviated

Abbreviated = 1

3 characters for en-US. For example: 'Sun'

member Narrow

Narrow = 0

1 character for en-US. For example: 'S'

member Short

Short = 3

2 characters for en-US, For example: "Su"

member Wide

Wide = 2

Full length for en-US. For example: "Sunday"

enum WeekDay

enum WeekDay {
    Sunday = 0,
    Monday = 1,
    Tuesday = 2,
    Wednesday = 3,
    Thursday = 4,
    Friday = 5,
    Saturday = 6,
}

The value for each day of the week, based on the en-US locale
Deprecated
Week locale getters are deprecated

member Friday

Friday = 5

member Monday

Monday = 1

member Saturday

Saturday = 6

member Sunday

Sunday = 0

member Thursday

Thursday = 4

member Tuesday

Tuesday = 2

member Wednesday

Wednesday = 3

Type Aliases

type ImageLoader

type ImageLoader = (config: ImageLoaderConfig) => string;

Represents an image loader function. Image loader functions are used by the NgOptimizedImage directive to produce full image URL based on the image name and its width.

type NumberSymbol

type NumberSymbol = (typeof NumberSymbol)[keyof typeof NumberSymbol];

type Time

type Time = {
    hours: number;
    minutes: number;
};

Represents a time value with hours and minutes.
Deprecated
Locale date getters are deprecated

Namespaces

namespace i1

namespace i1 {}

class NgClass

class NgClass implements DoCheck {}

CommonModule
<some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
Adds and removes CSS classes on an HTML element.
The CSS classes are updated as follows, depending on the type of the expression evaluation: - string - the CSS classes listed in the string (space delimited) are added, - Array - the CSS classes declared as Array elements are added, - Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

constructor

constructor(_ngEl: ElementRef, _renderer: Renderer2);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgClass,
    '[ngClass]',
    never,
    {
        klass: { alias: 'class'; required: false };
        ngClass: { alias: 'ngClass'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgClass, never>;

method ngDoCheck

ngDoCheck: () => void;

namespace i10

namespace i10 {}

class LowerCasePipe

class LowerCasePipe implements PipeTransform {}

Transforms text to all lower case.
See Also
- UpperCasePipe
- TitleCasePipe
  The following example defines a view that allows the user to enter text, and then uses the pipe to convert the input text to all lower case.
  CommonModule

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<LowerCasePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<LowerCasePipe, 'lowercase', true>;

method transform

transform: {
    (value: string): string;
    (value: null): null;
    (value: string): string;
};

Parameter value
The string to transform to lower case.

class TitleCasePipe

class TitleCasePipe implements PipeTransform {}

Transforms text to title case. Capitalizes the first letter of each word and transforms the rest of the word to lower case. Words are delimited by any whitespace character, such as a space, tab, or line-feed character.
See Also
- LowerCasePipe
- UpperCasePipe
  The following example shows the result of transforming various strings into title case.
  CommonModule

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<TitleCasePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<TitleCasePipe, 'titlecase', true>;

method transform

transform: {
    (value: string): string;
    (value: null): null;
    (value: string): string;
};

Parameter value
The string to transform to title case.

class UpperCasePipe

class UpperCasePipe implements PipeTransform {}

Transforms text to all upper case.
See Also
- LowerCasePipe
- TitleCasePipe
  CommonModule

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<UpperCasePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<UpperCasePipe, 'uppercase', true>;

method transform

transform: {
    (value: string): string;
    (value: null): null;
    (value: string): string;
};

Parameter value
The string to transform to upper case.

namespace i11

namespace i11 {}

class JsonPipe

class JsonPipe implements PipeTransform {}

CommonModule
Converts a value into its JSON-format representation. Useful for debugging.
The following component uses a JSON pipe to convert an object to JSON format, and displays the string in both formats for comparison.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<JsonPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<JsonPipe, 'json', true>;

method transform

transform: (value: any) => string;

Parameter value
A value of any type to convert into a JSON-format string.

namespace i12

namespace i12 {}

class SlicePipe

class SlicePipe implements PipeTransform {}

CommonModule
Creates a new Array or String containing a subset (slice) of the elements.
All behavior is based on the expected behavior of the JavaScript API Array.prototype.slice() and String.prototype.slice().
When operating on an Array, the returned Array is always a copy even when all the elements are being returned.
When operating on a blank value, the pipe returns the blank value.
### List Example
This ngFor example:
produces the following:
<li>b</li> <li>c</li>
### String Examples

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<SlicePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<SlicePipe, 'slice', true>;

method transform

transform: {
    <T>(value: ReadonlyArray<T>, start: number, end?: number): Array<T>;
    (value: null, start: number, end?: number): null;
    <T>(value: readonly T[], start: number, end?: number): T[];
    (value: string, start: number, end?: number): string;
    (value: string, start: number, end?: number): string;
};

Parameter value
a list or a string to be sliced.
Parameter start
the starting index of the subset to return: - **a positive integer**: return the item at start index and all items after in the list or string expression. - **a negative integer**: return the item at start index from the end and all items after in the list or string expression. - **if positive and greater than the size of the expression**: return an empty list or string. - **if negative and greater than the size of the expression**: return entire list or string.
Parameter end
the ending index of the subset to return: - **omitted**: return all items until the end. - **if positive**: return all items before end index of the list or string. - **if negative**: return all items before end index from the end of the list or string.

namespace i13

namespace i13 {}

class CurrencyPipe

class CurrencyPipe implements PipeTransform {}

CommonModule
Transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.
See Also
- getCurrencySymbol
- formatCurrency
  The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US.

constructor

constructor(_locale: string, _defaultCurrencyCode?: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<CurrencyPipe, 'currency', true>;

method transform

transform: {
    (
        value: number | string,
        currencyCode?: string,
        display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean,
        digitsInfo?: string,
        locale?: string
    ): string | null;
    (
        value: null,
        currencyCode?: string,
        display?: string | boolean,
        digitsInfo?: string,
        locale?: string
    ): null;
    (
        value: string | number,
        currencyCode?: string,
        display?: string | boolean,
        digitsInfo?: string,
        locale?: string
    ): string;
};

Parameter value
The number to be formatted as currency.
Parameter currencyCode
The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such as USD for the US dollar and EUR for the euro. The default currency code can be configured using the DEFAULT_CURRENCY_CODE injection token.
Parameter display
The format for the currency indicator. One of the following: - code: Show the code (such as USD). - symbol(default): Show the symbol (such as $). - symbol-narrow: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale. - String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol. - Boolean (marked deprecated in v5): true for symbol and false for code.
Parameter digitsInfo
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. - minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1. - minFractionDigits: The minimum number of digits after the decimal point. Default is 2. - maxFractionDigits: The maximum number of digits after the decimal point. Default is 2. If not provided, the number will be formatted with the proper amount of digits, depending on what the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) specifies. For example, the Canadian dollar has 2 digits, whereas the Chilean peso has none.
Parameter locale
A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See [Setting your app locale](guide/i18n/locale-id).

class DecimalPipe

class DecimalPipe implements PipeTransform {}

CommonModule
Formats a value according to digit options and locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.
See Also
- formatNumber
  ### digitsInfo
  The value's decimal representation is specified by the digitsInfo parameter, written in the following format:
  {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  - minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
  - minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
  - maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.
  If the formatted value is truncated it will be rounded using the "to-nearest" method:
  {{3.6 | number: '1.0-0'}}  {{-3.6 | number:'1.0-0'}} 
  ### locale
  locale will format a value according to locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.
  When not supplied, uses the value of LOCALE_ID, which is en-US by default.
  See [Setting your app locale](guide/i18n/locale-id).
  ### Example
  The following code shows how the pipe transforms values according to various format specifications, where the caller's default locale is en-US.

constructor

constructor(_locale: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DecimalPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<DecimalPipe, 'number', true>;

method transform

transform: {
    (value: number | string, digitsInfo?: string, locale?: string):
        | string
        | null;
    (value: null, digitsInfo?: string, locale?: string): null;
    (value: string | number, digitsInfo?: string, locale?: string): string;
};

Parameter value
The value to be formatted.
Parameter digitsInfo
Sets digit and decimal representation. [See more](#digitsinfo).
Parameter locale
Specifies what locale format rules to use. [See more](#locale).

class PercentPipe

class PercentPipe implements PipeTransform {}

CommonModule
Transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.
See Also
- formatPercent
  The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US.

constructor

constructor(_locale: string);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<PercentPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<PercentPipe, 'percent', true>;

method transform

transform: {
    (value: number | string, digitsInfo?: string, locale?: string):
        | string
        | null;
    (value: null, digitsInfo?: string, locale?: string): null;
    (value: string | number, digitsInfo?: string, locale?: string): string;
};

namespace i14

namespace i14 {}

variable DATE_PIPE_DEFAULT_OPTIONS

const DATE_PIPE_DEFAULT_OPTIONS: InjectionToken<DatePipeConfig>;

DI token that allows to provide default configuration for the DatePipe instances in an application. The value is an object which can include the following fields: - dateFormat: configures the default date format. If not provided, the DatePipe will use the 'mediumDate' as a value. - timezone: configures the default timezone. If not provided, the DatePipe will use the end-user's local system timezone.
See Also
- DatePipeConfig
  Various date pipe default values can be overwritten by providing this token with the value that has this interface.
  For example:
  Override the default date format by providing a value using the token:
  providers: [ {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}} ]
  Override the default timezone by providing a value using the token:
  providers: [ {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {timezone: '-1200'}} ]

variable DATE_PIPE_DEFAULT_TIMEZONE

const DATE_PIPE_DEFAULT_TIMEZONE: InjectionToken<string>;

Optionally-provided default timezone to use for all instances of DatePipe (such as '+0430'). If the value isn't provided, the DatePipe will use the end-user's local system timezone.
Deprecated
use DATE_PIPE_DEFAULT_OPTIONS token to configure DatePipe

class DatePipe

class DatePipe implements PipeTransform {}

CommonModule
Formats a date value according to locale rules.
DatePipe is executed only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String, Number, Boolean, or Symbol), or a changed object reference (such as Date, Array, Function, or Object).
Note that mutating a Date object does not cause the pipe to be rendered again. To ensure that the pipe is executed, you must create a new Date object.
Only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. See the [I18n guide](guide/i18n/format-data-locale) for more information.
The time zone of the formatted value can be specified either by passing it in as the second parameter of the pipe, or by setting the default through the DATE_PIPE_DEFAULT_OPTIONS injection token. The value that is passed in as the second parameter takes precedence over the one defined using the injection token.
See Also
- formatDate
  The result of this pipe is not reevaluated when the input is mutated. To avoid the need to reformat the date on every change-detection cycle, treat the date as an immutable object and change the reference when the pipe needs to run again.
  ### Pre-defined format options
  | Option | Equivalent to | Examples (given in en-US locale) | |---------------|-------------------------------------|-------------------------------------------------| | 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM | | 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM | | 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 | | 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 | | 'shortDate' | 'M/d/yy' | 6/15/15 | | 'mediumDate'| 'MMM d, y' | Jun 15, 2015 | | 'longDate' | 'MMMM d, y' | June 15, 2015 | | 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 | | 'shortTime' | 'h:mm a' | 9:03 AM | | 'mediumTime'| 'h:mm:ss a' | 9:03:01 AM | | 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 | | 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 |
  ### Custom format options
  You can construct a format string using symbols to specify the components of a date-time value, as described in the following table. Format details depend on the locale. Fields marked with (*) are only available in the extra data set for the given locale.
  | Field type | Format | Description | Example Value | |-------------------------|-------------|---------------------------------------------------------------|------------------------------------------------------------| | Era | G, GG & GGG | Abbreviated | AD | | | GGGG | Wide | Anno Domini | | | GGGGG | Narrow | A | | Year | y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 | | | yy | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | | | yyy | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | | | yyyy | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | | ISO Week-numbering year | Y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 | | | YY | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | | | YYY | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | | | YYYY | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | | Month | M | Numeric: 1 digit | 9, 12 | | | MM | Numeric: 2 digits + zero padded | 09, 12 | | | MMM | Abbreviated | Sep | | | MMMM | Wide | September | | | MMMMM | Narrow | S | | Month standalone | L | Numeric: 1 digit | 9, 12 | | | LL | Numeric: 2 digits + zero padded | 09, 12 | | | LLL | Abbreviated | Sep | | | LLLL | Wide | September | | | LLLLL | Narrow | S | | ISO Week of year | w | Numeric: minimum digits | 1... 53 | | | ww | Numeric: 2 digits + zero padded | 01... 53 | | Week of month | W | Numeric: 1 digit | 1... 5 | | Day of month | d | Numeric: minimum digits | 1 | | | dd | Numeric: 2 digits + zero padded | 01 | | Week day | E, EE & EEE | Abbreviated | Tue | | | EEEE | Wide | Tuesday | | | EEEEE | Narrow | T | | | EEEEEE | Short | Tu | | Week day standalone | c, cc | Numeric: 1 digit | 2 | | | ccc | Abbreviated | Tue | | | cccc | Wide | Tuesday | | | ccccc | Narrow | T | | | cccccc | Short | Tu | | Period | a, aa & aaa | Abbreviated | am/pm or AM/PM | | | aaaa | Wide (fallback to a when missing) | ante meridiem/post meridiem | | | aaaaa | Narrow | a/p | | Period* | B, BB & BBB | Abbreviated | mid. | | | BBBB | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | | | BBBBB | Narrow | md | | Period standalone* | b, bb & bbb | Abbreviated | mid. | | | bbbb | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | | | bbbbb | Narrow | md | | Hour 1-12 | h | Numeric: minimum digits | 1, 12 | | | hh | Numeric: 2 digits + zero padded | 01, 12 | | Hour 0-23 | H | Numeric: minimum digits | 0, 23 | | | HH | Numeric: 2 digits + zero padded | 00, 23 | | Minute | m | Numeric: minimum digits | 8, 59 | | | mm | Numeric: 2 digits + zero padded | 08, 59 | | Second | s | Numeric: minimum digits | 0... 59 | | | ss | Numeric: 2 digits + zero padded | 00... 59 | | Fractional seconds | S | Numeric: 1 digit | 0... 9 | | | SS | Numeric: 2 digits + zero padded | 00... 99 | | | SSS | Numeric: 3 digits + zero padded (= milliseconds) | 000... 999 | | Zone | z, zz & zzz | Short specific non location format (fallback to O) | GMT-8 | | | zzzz | Long specific non location format (fallback to OOOO) | GMT-08:00 | | | Z, ZZ & ZZZ | ISO8601 basic format | -0800 | | | ZZZZ | Long localized GMT format | GMT-8:00 | | | ZZZZZ | ISO8601 extended format + Z indicator for offset 0 (= XXXXX) | -08:00 | | | O, OO & OOO | Short localized GMT format | GMT-8 | | | OOOO | Long localized GMT format | GMT-08:00 |
  ### Format examples
  These examples transform a date into various formats, assuming that dateObj is a JavaScript Date object for year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11, given in the local time for the en-US locale.
  {{ dateObj | date }} // output is 'Jun 15, 2015' {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM' {{ dateObj | date:'shortTime' }} // output is '9:43 PM' {{ dateObj | date:'mm:ss' }} // output is '43:11' {{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }} // output is 'Jun 15, 2015 at 09:43 PM'
  ### Usage example
  The following component uses a date pipe to display the current date in different formats.
  @Component({ selector: 'date-pipe', template: `<div> <p>Today is {{today | date}}</p> <p>Or if you prefer, {{today | date:'fullDate'}}</p> <p>The time is {{today | date:'h:mm a z'}}</p> </div>` }) // Get the current date and time as a date-time value. export class DatePipeComponent { today: number = Date.now(); }

constructor

constructor(
    locale: string,
    defaultTimezone?: string,
    defaultOptions?: DatePipeConfig
);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    DatePipe,
    [null, { optional: true }, { optional: true }]
>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<DatePipe, 'date', true>;

method transform

transform: {
    (
        value: Date | string | number,
        format?: string,
        timezone?: string,
        locale?: string
    ): string | null;
    (value: null, format?: string, timezone?: string, locale?: string): null;
    (
        value: string | number | Date,
        format?: string,
        timezone?: string,
        locale?: string
    ): string;
};

Parameter value
The date expression: a Date object, a number (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime).
Parameter format
The date/time components to include, using predefined options or a custom format string. When not provided, the DatePipe looks for the value using the DATE_PIPE_DEFAULT_OPTIONS injection token (and reads the dateFormat property). If the token is not configured, the mediumDate is used as a value.
Parameter timezone
A timezone offset (such as '+0430'). When not provided, the DatePipe looks for the value using the DATE_PIPE_DEFAULT_OPTIONS injection token (and reads the timezone property). If the token is not configured, the end-user's local system timezone is used as a value.
Parameter locale
A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See [Setting your app locale](guide/i18n/locale-id).
Returns
A date string in the desired format.
See Also
- DATE_PIPE_DEFAULT_OPTIONS

namespace i15

namespace i15 {}

class I18nPluralPipe

class I18nPluralPipe implements PipeTransform {}

CommonModule
Maps a value to a string that pluralizes the value according to locale rules.
### Example

constructor

constructor(_localization: NgLocalization);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<I18nPluralPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<I18nPluralPipe, 'i18nPlural', true>;

method transform

transform: (
    value: number | null | undefined,
    pluralMap: { [count: string]: string },
    locale?: string
) => string;

Parameter value
the number to be formatted
Parameter pluralMap
an object that mimics the ICU format, see https://unicode-org.github.io/icu/userguide/format_parse/messages/.
Parameter locale
a string defining the locale to use (uses the current LOCALE_ID by default).

namespace i16

namespace i16 {}

class I18nSelectPipe

class I18nSelectPipe implements PipeTransform {}

CommonModule
Generic selector that displays the string that matches the current value.
If none of the keys of the mapping match the value, then the content of the other key is returned when present, otherwise an empty string is returned.
### Example

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<I18nSelectPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<I18nSelectPipe, 'i18nSelect', true>;

method transform

transform: (
    value: string | null | undefined,
    mapping: { [key: string]: string }
) => string;

Parameter value
a string to be internationalized.
Parameter mapping
an object that indicates the text that should be displayed for different values of the provided value.

namespace i17

namespace i17 {}

function defaultComparator

defaultComparator: <K, V>(
    keyValueA: KeyValue<K, V>,
    keyValueB: KeyValue<K, V>
) => number;

class KeyValuePipe

class KeyValuePipe implements PipeTransform {}

CommonModule
Transforms Object or Map into an array of key value pairs.
The output array will be ordered by keys. By default the comparator will be by Unicode point value. You can optionally pass a compareFn if your keys are complex types. Passing null as the compareFn will use natural ordering of the input.
### Examples
This examples show how an Object or a Map can be iterated by ngFor with the use of this keyvalue pipe.

constructor

constructor(differs: KeyValueDiffers);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<KeyValuePipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<KeyValuePipe, 'keyvalue', true>;

method transform

transform: {
    <K, V>(
        input: ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): Array<KeyValue<K, V>>;
    <K extends number, V>(
        input: Record<K, V>,
        compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number
    ): KeyValue<string, V>[];
    <K extends string, V>(
        input: Record<K, V> | ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): KeyValue<K, V>[];
    (
        input: null,
        compareFn?: (
            a: KeyValue<unknown, unknown>,
            b: KeyValue<unknown, unknown>
        ) => number
    ): null;
    <K, V>(
        input: ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): KeyValue<K, V>[];
    <K extends number, V>(
        input: Record<K, V>,
        compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number
    ): KeyValue<string, V>[];
    <K extends string, V>(
        input: Record<K, V> | ReadonlyMap<K, V>,
        compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number
    ): KeyValue<K, V>[];
};

interface KeyValue

interface KeyValue<K, V> {}

A key value pair. Usually used to represent the key value pairs from a Map or Object.

property key

key: K;

property value

value: V;

namespace i2

namespace i2 {}

class NgComponentOutlet

class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {}

Instantiates a Component type and inserts its Host View into the current View. NgComponentOutlet provides a declarative approach for dynamic component creation.
NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will be destroyed.
### Fine tune control
You can control the component creation process by using the following optional attributes:
* ngComponentOutletInputs: Optional component inputs object, which will be bind to the component.
* ngComponentOutletInjector: Optional custom Injector that will be used as parent for the Component. Defaults to the injector of the current view container.
* ngComponentOutletContent: Optional list of projectable nodes to insert into the content section of the component, if it exists.
* ngComponentOutletNgModule: Optional NgModule class reference to allow loading another module dynamically, then loading a component from that module.
* ngComponentOutletNgModuleFactory: Deprecated config option that allows providing optional NgModule factory to allow loading another module dynamically, then loading a component from that module. Use ngComponentOutletNgModule instead.
### Syntax
Simple
<ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
With inputs
<ng-container *ngComponentOutlet="componentTypeExpression; inputs: inputsExpression;"> </ng-container>
Customized injector/content
<ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
Customized NgModule reference
<ng-container *ngComponentOutlet="componentTypeExpression; ngModule: ngModuleClass;"> </ng-container>
### A simple example
A more complete example with additional options:
CommonModule

constructor

constructor(_viewContainerRef: ViewContainerRef);

property ngComponentOutlet

ngComponentOutlet: any;

property ngComponentOutletContent

ngComponentOutletContent?: any[][];

property ngComponentOutletInjector

ngComponentOutletInjector?: Injector;

property ngComponentOutletInputs

ngComponentOutletInputs?: Record<string, unknown>;

property ngComponentOutletNgModule

ngComponentOutletNgModule?: Type<any>;

property ngComponentOutletNgModuleFactory

ngComponentOutletNgModuleFactory?: NgModuleFactory<any>;

Deprecated
This input is deprecated, use ngComponentOutletNgModule instead.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgComponentOutlet,
    '[ngComponentOutlet]',
    never,
    {
        ngComponentOutlet: { alias: 'ngComponentOutlet'; required: false };
        ngComponentOutletInputs: {
            alias: 'ngComponentOutletInputs';
            required: false;
        };
        ngComponentOutletInjector: {
            alias: 'ngComponentOutletInjector';
            required: false;
        };
        ngComponentOutletContent: {
            alias: 'ngComponentOutletContent';
            required: false;
        };
        ngComponentOutletNgModule: {
            alias: 'ngComponentOutletNgModule';
            required: false;
        };
        ngComponentOutletNgModuleFactory: {
            alias: 'ngComponentOutletNgModuleFactory';
            required: false;
        };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet, never>;

method ngDoCheck

ngDoCheck: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

namespace i3

namespace i3 {}

class NgFor

class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {}

A [structural directive](guide/directives/structural-directives) that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.
The ngForOf directive is generally used in the [shorthand form](guide/directives/structural-directives#asterisk) *ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.
The following example shows the shorthand syntax with some options, contained in an <li> element.
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive.
Here is the expanded version of the short-form example.
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn"> <li>...</li> </ng-template>
Angular automatically expands the shorthand syntax as it compiles the template. The context for each embedded view is logically merged to the current component context according to its lexical position.
When using the shorthand syntax, Angular allows only [one structural directive on an element](guide/directives/structural-directives#one-per-element). If you want to iterate conditionally, for example, put the *ngIf on a container element that wraps the *ngFor element. For further discussion, see [Structural Directives](guide/directives/structural-directives#one-per-element).
### Local variables
NgForOf provides exported values that can be aliased to local variables. For example:
```html <li *ngFor="let user of users; index as i; first as isFirst"> {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default ```
The following exported values can be aliased to local variables:
- $implicit: T: The value of the individual items in the iterable (ngForOf). - ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (`userStreams | async`). - index: number: The index of the current item in the iterable. - count: number: The length of the iterable. - first: boolean: True when the item is the first item in the iterable. - last: boolean: True when the item is the last item in the iterable. - even: boolean: True when the item has an even index in the iterable. - odd: boolean: True when the item has an odd index in the iterable.
### Change propagation
When the contents of the iterator changes, NgForOf makes the corresponding changes to the DOM:
* When an item is added, a new instance of the template is added to the DOM. * When an item is removed, its template instance is removed from the DOM. * When items are reordered, their respective templates are reordered in the DOM.
Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls that are present, such as <input> elements that accept user input. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input. For more on animations, see [Transitions and Triggers](guide/animations/transition-and-triggers).
The identities of elements in the iterator can change while the data does not. This can happen, for example, if the iterator is produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response produces objects with different identities, and Angular must tear down the entire DOM and rebuild it (as if all old elements were deleted and all new elements inserted).
To avoid this expensive operation, you can customize the default tracking algorithm. by supplying the trackBy option to NgForOf. trackBy takes a function that has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.
See Also
- [Structural Directives](guide/directives/structural-directives) CommonModule

constructor

constructor(
    _viewContainer: ViewContainerRef,
    _template: TemplateRef<NgForOfContext<T, U>>,
    _differs: IterableDiffers
);

property ngForTrackBy

ngForTrackBy: TrackByFunction<T>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgForOf<any, any>,
    '[ngFor][ngForOf]',
    never,
    {
        ngForOf: { alias: 'ngForOf'; required: false };
        ngForTrackBy: { alias: 'ngForTrackBy'; required: false };
        ngForTemplate: { alias: 'ngForTemplate'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgForOf<any, any>, never>;

method ngDoCheck

ngDoCheck: () => void;

Applies the changes when needed.

method ngTemplateContextGuard

static ngTemplateContextGuard: <T, U extends NgIterable<T>>(
    dir: NgForOf<T, U>,
    ctx: any
) => ctx is NgForOfContext<T, U>;

Asserts the correct type of the context for the template that NgForOf will render.
The presence of this method is a signal to the Ivy template type-check compiler that the NgForOf structural directive renders its template with a specific context type.

class NgForOf

class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {}

A [structural directive](guide/directives/structural-directives) that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.
The ngForOf directive is generally used in the [shorthand form](guide/directives/structural-directives#asterisk) *ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.
The following example shows the shorthand syntax with some options, contained in an <li> element.
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive.
Here is the expanded version of the short-form example.
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn"> <li>...</li> </ng-template>
Angular automatically expands the shorthand syntax as it compiles the template. The context for each embedded view is logically merged to the current component context according to its lexical position.
When using the shorthand syntax, Angular allows only [one structural directive on an element](guide/directives/structural-directives#one-per-element). If you want to iterate conditionally, for example, put the *ngIf on a container element that wraps the *ngFor element. For further discussion, see [Structural Directives](guide/directives/structural-directives#one-per-element).
### Local variables
NgForOf provides exported values that can be aliased to local variables. For example:
```html <li *ngFor="let user of users; index as i; first as isFirst"> {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default ```
The following exported values can be aliased to local variables:
- $implicit: T: The value of the individual items in the iterable (ngForOf). - ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (`userStreams | async`). - index: number: The index of the current item in the iterable. - count: number: The length of the iterable. - first: boolean: True when the item is the first item in the iterable. - last: boolean: True when the item is the last item in the iterable. - even: boolean: True when the item has an even index in the iterable. - odd: boolean: True when the item has an odd index in the iterable.
### Change propagation
When the contents of the iterator changes, NgForOf makes the corresponding changes to the DOM:
* When an item is added, a new instance of the template is added to the DOM. * When an item is removed, its template instance is removed from the DOM. * When items are reordered, their respective templates are reordered in the DOM.
Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls that are present, such as <input> elements that accept user input. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input. For more on animations, see [Transitions and Triggers](guide/animations/transition-and-triggers).
The identities of elements in the iterator can change while the data does not. This can happen, for example, if the iterator is produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response produces objects with different identities, and Angular must tear down the entire DOM and rebuild it (as if all old elements were deleted and all new elements inserted).
To avoid this expensive operation, you can customize the default tracking algorithm. by supplying the trackBy option to NgForOf. trackBy takes a function that has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.
See Also
- [Structural Directives](guide/directives/structural-directives) CommonModule

constructor

constructor(
    _viewContainer: ViewContainerRef,
    _template: TemplateRef<NgForOfContext<T, U>>,
    _differs: IterableDiffers
);

property ngForTrackBy

ngForTrackBy: TrackByFunction<T>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgForOf<any, any>,
    '[ngFor][ngForOf]',
    never,
    {
        ngForOf: { alias: 'ngForOf'; required: false };
        ngForTrackBy: { alias: 'ngForTrackBy'; required: false };
        ngForTemplate: { alias: 'ngForTemplate'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgForOf<any, any>, never>;

method ngDoCheck

ngDoCheck: () => void;

Applies the changes when needed.

method ngTemplateContextGuard

static ngTemplateContextGuard: <T, U extends NgIterable<T>>(
    dir: NgForOf<T, U>,
    ctx: any
) => ctx is NgForOfContext<T, U>;

Asserts the correct type of the context for the template that NgForOf will render.
The presence of this method is a signal to the Ivy template type-check compiler that the NgForOf structural directive renders its template with a specific context type.

class NgForOfContext

class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {}

constructor

constructor($implicit: {}, ngForOf: NgIterable<T>, index: number, count: number);

property $implicit

$implicit: {};

Reference to the current item from the collection.

property count

count: number;

Returns total amount of items in the collection.

property even

readonly even: boolean;

property first

readonly first: boolean;

property index

index: number;

Returns an index of the current item in the collection.

property last

readonly last: boolean;

property ngForOf

ngForOf: NgIterable<T>;

The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async).

property odd

readonly odd: boolean;

namespace i4

namespace i4 {}

class NgIf

class NgIf<T = unknown> {}

A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause. The default template for the else clause is blank.
A [shorthand form](guide/directives/structural-directives#asterisk) of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.
Simple form with shorthand syntax:
<div *ngIf="condition">Content to render when condition is true.</div>
Simple form with expanded syntax:
<ng-template [ngIf]="condition"><div>Content to render when condition is true.</div></ng-template>
Form with an "else" block:
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div> <ng-template #elseBlock>Content to render when condition is false.</ng-template>
Shorthand form with "then" and "else" blocks:
<div *ngIf="condition; then thenBlock else elseBlock"></div> <ng-template #thenBlock>Content to render when condition is true.</ng-template> <ng-template #elseBlock>Content to render when condition is false.</ng-template>
Form with storing the value locally:
<div *ngIf="condition as value; else elseBlock">{{value}}</div> <ng-template #elseBlock>Content to render when value is null.</ng-template>
The *ngIf directive is most commonly used to conditionally show an inline template, as seen in the following example. The default else template is blank.
### Showing an alternative template using else
To display a template when expression evaluates to false, use an else template binding as shown in the following example. The else binding points to an <ng-template> element labeled #elseBlock. The template can be defined anywhere in the component view, but is typically placed right after ngIf for readability.
### Using an external then template
In the previous example, the then-clause template is specified inline, as the content of the tag that contains the ngIf directive. You can also specify a template that is defined externally, by referencing a labeled <ng-template> element. When you do this, you can change which template to use at runtime, as shown in the following example.
### Storing a conditional result in a variable
You might want to show a set of properties from the same object. If you are waiting for asynchronous data, the object can be undefined. In this case, you can use ngIf and store the result of the condition in a local variable as shown in the following example.
This code uses only one AsyncPipe, so only one subscription is created. The conditional statement stores the result of userStream|async in the local variable user. You can then bind the local user repeatedly.
The conditional displays the data only if userStream returns a value, so you don't need to use the safe-navigation-operator (?.) to guard against null values when accessing properties. You can display an alternative template while waiting for the data.
### Shorthand syntax
The shorthand syntax *ngIf expands into two separate template specifications for the "then" and "else" clauses. For example, consider the following shorthand statement, that is meant to show a loading page while waiting for data to be loaded.
<div class="hero-list" *ngIf="heroes else loading"> ... </div> <ng-template #loading> <div>Loading...</div> </ng-template>
You can see that the "else" clause references the <ng-template> with the #loading label, and the template for the "then" clause is provided as the content of the anchor element.
However, when Angular expands the shorthand syntax, it creates another <ng-template> tag, with ngIf and ngIfElse directives. The anchor element containing the template for the "then" clause becomes the content of this unlabeled <ng-template> tag.
<ng-template [ngIf]="heroes" [ngIfElse]="loading"> <div class="hero-list"> ... </div> </ng-template> <ng-template #loading> <div>Loading...</div> </ng-template>
The presence of the implicit template object has implications for the nesting of structural directives. For more on this subject, see [Structural Directives](guide/directives/structural-directives#one-per-element).
CommonModule

constructor

constructor(
    _viewContainer: ViewContainerRef,
    templateRef: TemplateRef<NgIfContext<T>>
);

property ngTemplateGuard_ngIf

static ngTemplateGuard_ngIf: string;

Assert the correct type of the expression bound to the ngIf input within the template.
The presence of this static field is a signal to the Ivy template type check compiler that when the NgIf structural directive renders its template, the type of the expression bound to ngIf should be narrowed in some way. For NgIf, the binding expression itself is used to narrow its type, which allows the strictNullChecks feature of TypeScript to work with NgIf.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgIf<any>,
    '[ngIf]',
    never,
    {
        ngIf: { alias: 'ngIf'; required: false };
        ngIfThen: { alias: 'ngIfThen'; required: false };
        ngIfElse: { alias: 'ngIfElse'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgIf<any>, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: <T>(
    dir: NgIf<T>,
    ctx: any
) => ctx is NgIfContext<Exclude<T, false | '' | 0>>;

Asserts the correct type of the context for the template that NgIf will render.
The presence of this method is a signal to the Ivy template type-check compiler that the NgIf structural directive renders its template with a specific context type.

class NgIfContext

class NgIfContext<T = unknown> {}

property $implicit

$implicit: {};

property ngIf

ngIf: {};

namespace i5

namespace i5 {}

class NgTemplateOutlet

class NgTemplateOutlet<C = unknown> implements OnChanges {}

CommonModule
Inserts an embedded view from a prepared TemplateRef.
You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext]. [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations.
<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
Using the key $implicit in the context object will set its value as default.
### Example

constructor

constructor(_viewContainerRef: ViewContainerRef);

property ngTemplateOutlet

ngTemplateOutlet: any;

A string defining the template reference and optionally the context object for the template.

property ngTemplateOutletContext

ngTemplateOutletContext: {};

A context object to attach to the EmbeddedViewRef. This should be an object, the object's keys will be available for binding by the local template let declarations. Using the key $implicit in the context object will set its value as default.

property ngTemplateOutletInjector

ngTemplateOutletInjector: any;

Injector to be used within the embedded view.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgTemplateOutlet<any>,
    '[ngTemplateOutlet]',
    never,
    {
        ngTemplateOutletContext: {
            alias: 'ngTemplateOutletContext';
            required: false;
        };
        ngTemplateOutlet: { alias: 'ngTemplateOutlet'; required: false };
        ngTemplateOutletInjector: {
            alias: 'ngTemplateOutletInjector';
            required: false;
        };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgTemplateOutlet<any>, never>;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

namespace i6

namespace i6 {}

class NgStyle

class NgStyle implements DoCheck {}

CommonModule
Set the font of the containing element to the result of an expression.
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
Set the width of the containing element to a pixel value returned by an expression.
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
Set a collection of style values using an expression that returns key-value pairs.
<some-element [ngStyle]="objExp">...</some-element>
An attribute directive that updates styles for the containing HTML element. Sets one or more style properties, specified as colon-separated key-value pairs. The key is a style name, with an optional .<unit> suffix (such as 'top.px', 'font-style.em'). The value is an expression to be evaluated. The resulting non-null value, expressed in the given unit, is assigned to the given style property. If the result of evaluation is null, the corresponding style is removed.

constructor

constructor(_ngEl: ElementRef, _differs: KeyValueDiffers, _renderer: Renderer2);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgStyle,
    '[ngStyle]',
    never,
    { ngStyle: { alias: 'ngStyle'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgStyle, never>;

method ngDoCheck

ngDoCheck: () => void;

namespace i7

namespace i7 {}

class NgSwitch

class NgSwitch {}

CommonModule

Define a container element for the directive, and specify the switch expression to match against as an attribute:

<container-element [ngSwitch]="switch_expression">

Within the container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.

<container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

### Usage Examples

The following example shows how to use more than one case to display the same view:

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

The following example shows how cases can be nested:

<container-element [ngSwitch]="switch_expression">
      <some-element *ngSwitchCase="match_expression_1">...</some-element>
      <some-element *ngSwitchCase="match_expression_2">...</some-element>
      <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
      <ng-container *ngSwitchCase="match_expression_3">
        <!-- use a ng-container to group multiple root nodes -->
        <inner-element></inner-element>
        <inner-other-element></inner-other-element>
      </ng-container>
      <some-element *ngSwitchDefault>...</some-element>
    </container-element>

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgSwitch,
    '[ngSwitch]',
    never,
    { ngSwitch: { alias: 'ngSwitch'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgSwitch, never>;

class NgSwitchCase

class NgSwitchCase implements DoCheck {}

CommonModule
Provides a switch case expression to match against an enclosing ngSwitch expression. When the expressions match, the given NgSwitchCase template is rendered. If multiple match expressions match the switch expression value, all of them are displayed.
Within a switch container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.
<container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> ... <some-element *ngSwitchDefault>...</some-element> </container-element>
Each switch-case statement contains an in-line HTML template or template reference that defines the subtree to be selected if the value of the match expression matches the value of the switch expression.
As of Angular v17 the NgSwitch directive uses strict equality comparison (===) instead of loose equality (==) to match different cases.
See Also
- NgSwitch
- NgSwitchDefault

constructor

constructor(
    viewContainer: ViewContainerRef,
    templateRef: TemplateRef<Object>,
    ngSwitch: NgSwitch
);

property ngSwitchCase

ngSwitchCase: any;

Stores the HTML template to be selected on match.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgSwitchCase,
    '[ngSwitchCase]',
    never,
    { ngSwitchCase: { alias: 'ngSwitchCase'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NgSwitchCase,
    [null, null, { optional: true; host: true }]
>;

method ngDoCheck

ngDoCheck: () => void;

Performs case matching. For internal use only.

class NgSwitchDefault

class NgSwitchDefault {}

CommonModule
Creates a view that is rendered when no NgSwitchCase expressions match the NgSwitch expression. This statement should be the final case in an NgSwitch.
See Also
- NgSwitch
- NgSwitchCase

constructor

constructor(
    viewContainer: ViewContainerRef,
    templateRef: TemplateRef<Object>,
    ngSwitch: NgSwitch
);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgSwitchDefault,
    '[ngSwitchDefault]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NgSwitchDefault,
    [null, null, { optional: true; host: true }]
>;

class SwitchView

class SwitchView {}

constructor

constructor(
    _viewContainerRef: ViewContainerRef,
    _templateRef: TemplateRef<Object>
);

method create

create: () => void;

method destroy

destroy: () => void;

method enforceState

enforceState: (created: boolean) => void;

namespace i8

namespace i8 {}

class NgPlural

class NgPlural {}

CommonModule
<some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">there is nothing</ng-template> <ng-template ngPluralCase="=1">there is one</ng-template> <ng-template ngPluralCase="few">there are a few</ng-template> </some-element>
Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.
Displays DOM sub-trees that match the switch expression value, or failing that, DOM sub-trees that match the switch expression's pluralization category.
To use this directive you must provide a container element that sets the [ngPlural] attribute to a switch expression. Inner elements with a [ngPluralCase] will display based on their expression: - if [ngPluralCase] is set to a value starting with =, it will only display if the value matches the switch expression exactly, - otherwise, the view will be treated as a "category match", and will only display if exact value matches aren't found and the value maps to its category for the defined locale.
See http://cldr.unicode.org/index/cldr-spec/plural-rules

constructor

constructor(_localization: NgLocalization);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgPlural,
    '[ngPlural]',
    never,
    { ngPlural: { alias: 'ngPlural'; required: false } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgPlural, never>;

method addCase

addCase: (value: string, switchView: SwitchView) => void;

class NgPluralCase

class NgPluralCase {}

CommonModule
Creates a view that will be added/removed from the parent NgPlural when the given expression matches the plural expression according to CLDR rules.
<some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">...</ng-template> <ng-template ngPluralCase="other">...</ng-template> </some-element>
See NgPlural for more details and example.

constructor

constructor(
    value: string,
    template: TemplateRef<Object>,
    viewContainer: ViewContainerRef,
    ngPlural: NgPlural
);

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgPluralCase,
    '[ngPluralCase]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    NgPluralCase,
    [{ attribute: 'ngPluralCase' }, null, null, { host: true }]
>;

property value

value: string;

namespace i9

namespace i9 {}

class AsyncPipe

class AsyncPipe implements OnDestroy, PipeTransform {}

CommonModule
Unwraps a value from an asynchronous primitive.
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. When the reference of the expression changes, the async pipe automatically unsubscribes from the old Observable or Promise and subscribes to the new one.
### Examples
This example binds a Promise to the view. Clicking the Resolve button resolves the promise.
It's also possible to use async with Observables. The example below binds the time Observable to the view. The Observable continuously updates the view with the current time.

constructor

constructor(ref: ChangeDetectorRef);

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<AsyncPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<AsyncPipe, 'async', true>;

method ngOnDestroy

ngOnDestroy: () => void;

method transform

transform: {
    <T>(obj: Observable<T> | Subscribable<T> | Promise<T>): T | null;
    <T>(obj: null): null;
    <T>(obj: any): T;
};

Package Files (1)

index.d.ts

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular/common.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@angular/common)

HTML

<a href="https://www.jsdocs.io/package/@angular/common"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 6 days ago.
Package analyzed in 10957 ms.
Missing or incorrect documentation? Open an issue for this package.

@angular/common

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable APP_BASE_HREF

variable DATE_PIPE_DEFAULT_OPTIONS

See Also

variable DATE_PIPE_DEFAULT_TIMEZONE

Deprecated

variable DOCUMENT

variable IMAGE_LOADER

See Also

variable LOCATION_INITIALIZED

variable NumberSymbol

See Also

Deprecated

variable ɵPLATFORM_BROWSER_ID

variable ɵPLATFORM_SERVER_ID

variable PRECONNECT_CHECK_BLOCKLIST

variable VERSION

Functions

function defaultComparator

function formatCurrency

Parameter value

Parameter locale

Parameter currency

Parameter currencyCode

Parameter digitsInfo

Returns

See Also

function formatDate

Parameter value

Parameter format

Parameter locale

Parameter timezone

Returns

See Also

function formatNumber

Parameter value

Parameter locale

Parameter digitsInfo

Returns

See Also

function formatPercent

Parameter value

Parameter locale

Parameter digitsInfo

Returns

See Also

function getCurrencySymbol

Parameter code

Parameter format

Parameter locale

Returns

See Also

Deprecated

function getLocaleCurrencyCode

Parameter locale

Returns

Deprecated

function getLocaleCurrencyName

Parameter locale

Returns

See Also

Deprecated

function getLocaleCurrencySymbol

Parameter locale

Returns

See Also

Deprecated

function getLocaleDateFormat

Parameter locale