@angular/common

  • Version 18.0.0
  • Published
  • 11.4 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

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

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

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

    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

        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'), or a standard UTC/GMT or continental US time zone abbreviation. 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

        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

          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

          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

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

                                                                            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'), or a standard UTC/GMT, or continental US timezone abbreviation. 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

                                                                                  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'}}
                                                                                      <!--will output '4'-->
                                                                                      {{-3.6 | number:'1.0-0'}}
                                                                                      <!--will output '-4'-->

                                                                                      ### 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;
                                                                                        };

                                                                                          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.

                                                                                                                                    ### 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.

                                                                                                                                                method subscribe

                                                                                                                                                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:

                                                                                                                                                                                                      ``` <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:

                                                                                                                                                                                                              ``` <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: {};

                                                                                                                                                                                                                        property count

                                                                                                                                                                                                                        count: number;

                                                                                                                                                                                                                          property even

                                                                                                                                                                                                                          readonly even: boolean;

                                                                                                                                                                                                                            property first

                                                                                                                                                                                                                            readonly first: boolean;

                                                                                                                                                                                                                              property index

                                                                                                                                                                                                                              index: number;

                                                                                                                                                                                                                                property last

                                                                                                                                                                                                                                readonly last: boolean;

                                                                                                                                                                                                                                  property ngForOf

                                                                                                                                                                                                                                  ngForOf: NgIterable<T>;

                                                                                                                                                                                                                                    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({
                                                                                                                                                                                                                                                                  standalone: true
                                                                                                                                                                                                                                                                  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 loaderParams

                                                                                                                                                                                                                                                                loaderParams?: { [key: string]: any };
                                                                                                                                                                                                                                                                • Data to pass through to custom loaders.

                                                                                                                                                                                                                                                                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;

                                                                                                                                                                                                                                                                                                          class NgSwitch

                                                                                                                                                                                                                                                                                                          class NgSwitch {}
                                                                                                                                                                                                                                                                                                          • CommonModule

                                                                                                                                                                                                                                                                                                            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>

                                                                                                                                                                                                                                                                                                            See Also

                                                                                                                                                                                                                                                                                                          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

                                                                                                                                                                                                                                                                                                              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

                                                                                                                                                                                                                                                                                                                    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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            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 {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property dateFormat

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      dateFormat?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property timezone

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        timezone?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface ImageLoaderConfig

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface ImageLoaderConfig {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          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 {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          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 {}