package.index.d.ts Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of common Show documentation
Show all versions of common Show documentation
Angular - commonly needed directives and services
/**
* @license Angular v18.2.6
* (c) 2010-2024 Google LLC. https://angular.io/
* License: MIT
*/
import { ChangeDetectorRef } from '@angular/core';
import { DoCheck } from '@angular/core';
import { ElementRef } from '@angular/core';
import * as i0 from '@angular/core';
import { ɵIMAGE_CONFIG as IMAGE_CONFIG } from '@angular/core';
import { ɵImageConfig as ImageConfig } from '@angular/core';
import { InjectionToken } from '@angular/core';
import { Injector } from '@angular/core';
import { IterableDiffers } from '@angular/core';
import { KeyValueDiffers } from '@angular/core';
import { NgIterable } from '@angular/core';
import { NgModuleFactory } from '@angular/core';
import { Observable } from 'rxjs';
import { OnChanges } from '@angular/core';
import { OnDestroy } from '@angular/core';
import { OnInit } from '@angular/core';
import { PipeTransform } from '@angular/core';
import { Provider } from '@angular/core';
import { Renderer2 } from '@angular/core';
import { SimpleChanges } from '@angular/core';
import { Subscribable } from 'rxjs';
import { SubscriptionLike } from 'rxjs';
import { TemplateRef } from '@angular/core';
import { TrackByFunction } from '@angular/core';
import { Type } from '@angular/core';
import { Version } from '@angular/core';
import { ViewContainerRef } from '@angular/core';
/**
* 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.
*
* @usageNotes
*
* 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.
*
* ```typescript
* import {NgModule} from '@angular/core';
* import {APP_BASE_HREF} from '@angular/common';
*
* @NgModule({
* providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
* })
* class AppModule {}
* ```
*
* @publicApi
*/
export declare const APP_BASE_HREF: InjectionToken;
/**
* @ngModule CommonModule
* @description
*
* 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.
*
* @usageNotes
*
* ### Examples
*
* This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
* promise.
*
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipePromise'}
*
* 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.
*
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}
*
* @publicApi
*/
export declare class AsyncPipe implements OnDestroy, PipeTransform {
private _ref;
private _latestValue;
private markForCheckOnValueUpdate;
private _subscription;
private _obj;
private _strategy;
constructor(ref: ChangeDetectorRef);
ngOnDestroy(): void;
transform(obj: Observable | Subscribable | Promise): T | null;
transform(obj: null | undefined): null;
transform(obj: Observable | Subscribable | Promise | null | undefined): T | null;
private _subscribe;
private _selectStrategy;
private _dispose;
private _updateLatestValue;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
/**
* `PlatformLocation` encapsulates all of the direct calls to platform APIs.
* This class should not be used directly by an application developer. Instead, use
* {@link Location}.
*
* @publicApi
*/
export declare class BrowserPlatformLocation extends PlatformLocation {
private _location;
private _history;
private _doc;
constructor();
getBaseHrefFromDOM(): string;
onPopState(fn: LocationChangeListener): VoidFunction;
onHashChange(fn: LocationChangeListener): VoidFunction;
get href(): string;
get protocol(): string;
get hostname(): string;
get port(): string;
get pathname(): string;
get search(): string;
get hash(): string;
set pathname(newPath: string);
pushState(state: any, title: string, url: string): void;
replaceState(state: any, title: string, url: string): void;
forward(): void;
back(): void;
historyGo(relativePosition?: number): void;
getState(): unknown;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
/**
* 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.
*
* @publicApi
*/
export declare class CommonModule {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵmod: i0.ɵɵNgModuleDeclaration;
static ɵinj: i0.ɵɵInjectorDeclaration;
}
/**
* @ngModule CommonModule
* @description
*
* 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 {@link getCurrencySymbol}
* @see {@link formatCurrency}
*
* @usageNotes
* 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`.
*
* ;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
/**
* 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 {@link DatePipeConfig}
*
* @usageNotes
*
* 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:
* ```typescript
* providers: [
* {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}}
* ]
* ```
*
* Override the default timezone by providing a value using the token:
* ```typescript
* providers: [
* {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {timezone: '-1200'}}
* ]
* ```
*/
export declare const DATE_PIPE_DEFAULT_OPTIONS: InjectionToken;
/**
* 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
*/
export declare const DATE_PIPE_DEFAULT_TIMEZONE: InjectionToken;
/**
* @ngModule CommonModule
* @description
*
* 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 {@link formatDate}
*
*
* @usageNotes
*
* 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: `
* Today is {{today | date}}
* Or if you prefer, {{today | date:'fullDate'}}
* The time is {{today | date:'h:mm a z'}}
* `
* })
* // Get the current date and time as a date-time value.
* export class DatePipeComponent {
* today: number = Date.now();
* }
* ```
*
* @publicApi
*/
export declare class DatePipe implements PipeTransform {
private locale;
private defaultTimezone?;
private defaultOptions?;
constructor(locale: string, defaultTimezone?: (string | null) | undefined, defaultOptions?: (DatePipeConfig | null) | undefined);
/**
* @param value The date expression: a `Date` object, a number
* (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime).
* @param 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.
* @param timezone A timezone offset (such as `'+0430'`). When not provided, the `DatePipe`
* looks for the value using the `DATE_PIPE_DEFAULT_OPTIONS` injection token (and reads
* the `timezone` property). If the token is not configured, the end-user's local system
* timezone is used as a value.
* @param 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).
*
* @see {@link DATE_PIPE_DEFAULT_OPTIONS}
*
* @returns A date string in the desired format.
*/
transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string): string | null;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
/**
* An interface that describes the date pipe configuration, which can be provided using the
* `DATE_PIPE_DEFAULT_OPTIONS` token.
*
* @see {@link DATE_PIPE_DEFAULT_OPTIONS}
*
* @publicApi
*/
export declare interface DatePipeConfig {
dateFormat?: string;
timezone?: string;
}
/**
* @ngModule CommonModule
* @description
*
* 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 {@link formatNumber}
*
* @usageNotes
*
* ### digitsInfo
*
* The value's decimal representation is specified by the `digitsInfo`
* parameter, written in the following format:
*
* ```
* {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
* ```
*
* - `minIntegerDigits`:
* The minimum number of integer digits before the decimal point.
* Default is 1.
*
* - `minFractionDigits`:
* The minimum number of digits after the decimal point.
* Default is 0.
*
* - `maxFractionDigits`:
* The maximum number of digits after the decimal point.
* Default is 3.
*
* If the formatted value is truncated it will be rounded using the "to-nearest" method:
*
* ```
* {{3.6 | number: '1.0-0'}}
*
*
* {{-3.6 | number:'1.0-0'}}
*
* ```
*
* ### locale
*
* `locale` will format a value according to locale rules.
* Locale determines group sizing and separator,
* decimal point character, and other locale-specific configurations.
*
* When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.
*
* See [Setting your app locale](guide/i18n/locale-id).
*
* ### Example
*
* The following code shows how the pipe transforms values
* according to various format specifications,
* where the caller's default locale is `en-US`.
*
* ;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
declare function defaultComparator(keyValueA: KeyValue, keyValueB: KeyValue): number;
/**
* 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).
*
* @publicApi
*/
export declare const DOCUMENT: InjectionToken;
/**
* @ngModule CommonModule
* @description
*
* Formats a number as currency using locale rules.
*
* @param value The number to format.
* @param locale A locale code for the locale format rules to use.
* @param 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.
* @param 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.
* @param 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 {@link formatNumber}
* @see {@link DecimalPipe}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*/
export declare function formatCurrency(value: number, locale: string, currency: string, currencyCode?: string, digitsInfo?: string): string;
/**
* @ngModule CommonModule
* @description
*
* Formats a date according to locale rules.
*
* @param 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).
* @param format The date-time components to include. See `DatePipe` for details.
* @param locale A locale code for the locale format rules to use.
* @param timezone The time zone. A time zone offset from GMT (such as `'+0430'`).
* If not specified, uses host system settings.
*
* @returns The formatted date string.
*
* @see {@link DatePipe}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*/
export declare function formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string;
/**
* @ngModule CommonModule
* @description
*
* Formats a number as text, with group sizing, separator, and other
* parameters based on the locale.
*
* @param value The number to format.
* @param locale A locale code for the locale format rules to use.
* @param 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 [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*/
export declare function formatNumber(value: number, locale: string, digitsInfo?: string): string;
/**
* @ngModule CommonModule
* @description
*
* Formats a number as a percentage according to locale rules.
*
* @param value The number to format.
* @param locale A locale code for the locale format rules to use.
* @param 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 {@link formatNumber}
* @see {@link DecimalPipe}
* @see [Internationalization (i18n) Guide](guide/i18n)
* @publicApi
*
*/
export declare function formatPercent(value: number, locale: string, digitsInfo?: string): string;
/**
* String widths available for date-time formats.
* The specific character widths are locale-specific.
* Examples are given for `en-US`.
*
* @see {@link getLocaleDateFormat}
* @see {@link getLocaleTimeFormat}
* @see {@link getLocaleDateTimeFormat}
* @see [Internationalization (i18n) Guide](guide/i18n)
* @publicApi
*
* @deprecated Date locale data getters are deprecated
*/
export declare enum FormatWidth {
/**
* For `en-US`, `'M/d/yy, h:mm a'`
* (Example: `6/15/15, 9:03 AM`)
*/
Short = 0,
/**
* For `en-US`, `'MMM d, y, h:mm:ss a'`
* (Example: `Jun 15, 2015, 9:03:01 AM`)
*/
Medium = 1,
/**
* For `en-US`, `'MMMM d, y, h:mm:ss a z'`
* (Example: `June 15, 2015 at 9:03:01 AM GMT+1`)
*/
Long = 2,
/**
* For `en-US`, `'EEEE, MMMM d, y, h:mm:ss a zzzz'`
* (Example: `Monday, June 15, 2015 at 9:03:01 AM GMT+01:00`)
*/
Full = 3
}
/**
* Context-dependant translation forms for strings.
* Typically the standalone version is for the nominative form of the word,
* and the format version is used for the genitive case.
* @see [CLDR website](http://cldr.unicode.org/translation/date-time-1/date-time#TOC-Standalone-vs.-Format-Styles)
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated locale data getters are deprecated
*/
export declare enum FormStyle {
Format = 0,
Standalone = 1
}
/**
* 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$`.
*
* @param code The currency code.
* @param format The format, `wide` or `narrow`.
* @param locale A locale code for the locale format rules to use.
*
* @returns The symbol, or the currency code if no symbol is available.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @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.
*/
export declare function getCurrencySymbol(code: string, format: 'wide' | 'narrow', locale?: string): string;
/**
* Retrieves the default currency code for the given locale.
*
* The default is defined as the first currency which is still in use.
*
* @param locale The code of the locale whose currency code we want.
* @returns The code of the default currency for the given locale.
*
* @publicApi
*
* @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
*/
export declare function getLocaleCurrencyCode(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`.
* @param 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 [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Use the `Intl` API to format a currency with from currency code
*/
export declare function getLocaleCurrencyName(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`.
*
* @param 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 [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Use the `Intl` API to format a currency with from currency code
*/
export declare function getLocaleCurrencySymbol(locale: string): string | null;
/**
* Retrieves a localized date-value formatting string.
*
* @param locale A locale code for the locale format rules to use.
* @param width The format type.
* @returns The localized formatting string.
* @see {@link FormatWidth}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleDateFormat(locale: string, width: FormatWidth): string;
/**
* Retrieves a localized date-time formatting string.
*
* @param locale A locale code for the locale format rules to use.
* @param width The format type.
* @returns The localized formatting string.
* @see {@link FormatWidth}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleDateTimeFormat(locale: string, width: FormatWidth): string;
/**
* Retrieves days of the week for the given locale, using the Gregorian calendar.
*
* @param locale A locale code for the locale format rules to use.
* @param formStyle The required grammatical form.
* @param width The required character width.
* @returns An array of localized name strings.
* For example,`[Sunday, Monday, ... Saturday]` for `en-US`.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleDayNames(locale: string, formStyle: FormStyle, width: TranslationWidth): ReadonlyArray;
/**
* Retrieves day period strings for the given locale.
*
* @param locale A locale code for the locale format rules to use.
* @param formStyle The required grammatical form.
* @param width The required character width.
* @returns An array of localized period strings. For example, `[AM, PM]` for `en-US`.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth): Readonly<[string, string]>;
/**
* Retrieves the writing direction of a specified locale
* @param locale A locale code for the locale format rules to use.
* @publicApi
* @returns 'rtl' or 'ltr'
* @see [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.
*/
export declare function getLocaleDirection(locale: string): 'ltr' | 'rtl';
/**
* Retrieves Gregorian-calendar eras for the given locale.
* @param locale A locale code for the locale format rules to use.
* @param width The required character width.
* @returns An array of localized era strings.
* For example, `[AD, BC]` for `en-US`.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleEraNames(locale: string, width: TranslationWidth): Readonly<[string, string]>;
/**
* 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).
*
* @param 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 {@link getLocaleExtraDayPeriods}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Let `Intl.DateTimeFormat` determine the day period instead.
*/
export declare function getLocaleExtraDayPeriodRules(locale: string): (Time | [Time, Time])[];
/**
* 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).
*
* @param locale A locale code for the locale format rules to use.
* @param formStyle The required grammatical form.
* @param width The required character width.
* @returns The translated day-period strings.
* @see {@link getLocaleExtraDayPeriodRules}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* To extract a day period use `Intl.DateTimeFormat` with the `dayPeriod` option instead.
*/
export declare function getLocaleExtraDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
/**
* Retrieves the first day of the week for the given locale.
*
* @param 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 [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @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.
*/
export declare function getLocaleFirstDayOfWeek(locale: string): WeekDay;
/**
* Retrieves the locale ID from the currently loaded locale.
* The loaded locale could be, for example, a global one rather than a regional one.
* @param locale A locale code, such as `fr-FR`.
* @returns The locale code. For example, `fr`.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* This function serves no purpose when relying on the `Intl` API.
*/
export declare function getLocaleId(locale: string): string;
/**
* Retrieves months of the year for the given locale, using the Gregorian calendar.
*
* @param locale A locale code for the locale format rules to use.
* @param formStyle The required grammatical form.
* @param width The required character width.
* @returns An array of localized name strings.
* For example, `[January, February, ...]` for `en-US`.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleMonthNames(locale: string, formStyle: FormStyle, width: TranslationWidth): ReadonlyArray;
/**
* 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. |
*
* @param locale A locale code for the locale format rules to use.
* @param type The type of numeric value to be formatted (such as `Decimal` or `Currency`.)
* @returns The localized format string.
* @see {@link NumberFormatStyle}
* @see [CLDR website](http://cldr.unicode.org/translation/number-patterns)
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Let `Intl.NumberFormat` determine the number format instead
*/
export declare function getLocaleNumberFormat(locale: string, type: NumberFormatStyle): string;
/**
* Retrieves a localized number symbol that can be used to replace placeholders in number formats.
* @param locale The locale code.
* @param symbol The symbol to localize. Must be one of `NumberSymbol`.
* @returns The character for the localized symbol.
* @see {@link NumberSymbol}
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.NumberFormat` to format numbers instead.
*/
export declare function getLocaleNumberSymbol(locale: string, symbol: NumberSymbol): string;
/**
* @publicApi
*
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.PluralRules` instead
*/
export declare const getLocalePluralCase: (locale: string) => (value: number) => Plural;
/**
* Retrieves a localized time-value formatting string.
*
* @param locale A locale code for the locale format rules to use.
* @param width The format type.
* @returns The localized formatting string.
* @see {@link FormatWidth}
* @see [Internationalization (i18n) Guide](guide/i18n)
* @publicApi
* @deprecated Angular recommends relying on the `Intl` API for i18n.
* Use `Intl.DateTimeFormat` for date formating instead.
*/
export declare function getLocaleTimeFormat(locale: string, width: FormatWidth): string;
/**
* Range of week days that are considered the week-end for the given locale.
*
* @param locale A locale code for the locale format rules to use.
* @returns The range of day values, `[startDay, endDay]`.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @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 .
*/
export declare function getLocaleWeekEndRange(locale: string): [WeekDay, WeekDay];
/**
* Reports the number of decimal digits for a given currency.
* The value depends upon the presence of cents in that particular currency.
*
* @param code The currency code.
* @returns The number of decimal digits, typically 0 or 2.
* @see [Internationalization (i18n) Guide](guide/i18n)
*
* @publicApi
*
* @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
*/
export declare function getNumberOfCurrencyDigits(code: string): number;
/**
* @description
* A {@link LocationStrategy} used to configure the {@link 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`.
*
* @usageNotes
*
* ### Example
*
* {@example common/location/ts/hash_location_component.ts region='LocationComponent'}
*
* @publicApi
*/
export declare class HashLocationStrategy extends LocationStrategy implements OnDestroy {
private _platformLocation;
private _baseHref;
private _removeListenerFns;
constructor(_platformLocation: PlatformLocation, _baseHref?: string);
/** @nodoc */
ngOnDestroy(): void;
onPopState(fn: LocationChangeListener): void;
getBaseHref(): string;
path(includeHash?: boolean): string;
prepareExternalUrl(internal: string): string;
pushState(state: any, title: string, path: string, queryParams: string): void;
replaceState(state: any, title: string, path: string, queryParams: string): void;
forward(): void;
back(): void;
getState(): unknown;
historyGo(relativePosition?: number): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
declare namespace i1 {
export {
NgClass
}
}
declare namespace i10 {
export {
LowerCasePipe,
TitleCasePipe,
UpperCasePipe
}
}
declare namespace i11 {
export {
JsonPipe
}
}
declare namespace i12 {
export {
SlicePipe
}
}
declare namespace i13 {
export {
DecimalPipe,
PercentPipe,
CurrencyPipe
}
}
declare namespace i14 {
export {
DATE_PIPE_DEFAULT_TIMEZONE,
DATE_PIPE_DEFAULT_OPTIONS,
DatePipe
}
}
declare namespace i15 {
export {
I18nPluralPipe
}
}
declare namespace i16 {
export {
I18nSelectPipe
}
}
declare namespace i17 {
export {
defaultComparator,
KeyValue,
KeyValuePipe
}
}
/**
* @ngModule CommonModule
* @description
*
* Maps a value to a string that pluralizes the value according to locale rules.
*
* @usageNotes
*
* ### Example
*
* {@example common/pipes/ts/i18n_pipe.ts region='I18nPluralPipeComponent'}
*
* @publicApi
*/
export declare class I18nPluralPipe implements PipeTransform {
private _localization;
constructor(_localization: NgLocalization);
/**
* @param value the number to be formatted
* @param pluralMap an object that mimics the ICU format, see
* https://unicode-org.github.io/icu/userguide/format_parse/messages/.
* @param locale a `string` defining the locale to use (uses the current {@link LOCALE_ID} by
* default).
*/
transform(value: number | null | undefined, pluralMap: {
[count: string]: string;
}, locale?: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
/**
* @ngModule CommonModule
* @description
*
* 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.
*
* @usageNotes
*
* ### Example
*
* {@example common/pipes/ts/i18n_pipe.ts region='I18nSelectPipeComponent'}
*
* @publicApi
*/
export declare class I18nSelectPipe implements PipeTransform {
/**
* @param value a string to be internationalized.
* @param mapping an object that indicates the text that should be displayed
* for different values of the provided `value`.
*/
transform(value: string | null | undefined, mapping: {
[key: string]: string;
}): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
declare namespace i2 {
export {
NgComponentOutlet
}
}
declare namespace i3 {
export {
NgForOfContext,
NgForOf,
NgForOf as NgFor
}
}
declare namespace i4 {
export {
NgIf,
NgIfContext
}
}
declare namespace i5 {
export {
NgTemplateOutlet
}
}
declare namespace i6 {
export {
NgStyle
}
}
declare namespace i7 {
export {
SwitchView,
NgSwitch,
NgSwitchCase,
NgSwitchDefault
}
}
declare namespace i8 {
export {
NgPlural,
NgPluralCase
}
}
declare namespace i9 {
export {
AsyncPipe
}
}
export { IMAGE_CONFIG }
/**
* Injection token that configures the image loader function.
*
* @see {@link ImageLoader}
* @see {@link NgOptimizedImage}
* @publicApi
*/
export declare const IMAGE_LOADER: InjectionToken;
export { ImageConfig }
/**
* Represents an image loader function. Image loader functions are used by the
* NgOptimizedImage directive to produce full image URL based on the image name and its width.
*
* @publicApi
*/
export declare type ImageLoader = (config: ImageLoaderConfig) => string;
/**
* Config options recognized by the image loader function.
*
* @see {@link ImageLoader}
* @see {@link NgOptimizedImage}
* @publicApi
*/
export declare interface ImageLoaderConfig {
/**
* Image file name to be added to the image request URL.
*/
src: string;
/**
* Width of the requested image (to be used when generating srcset).
*/
width?: number;
/**
* Whether the loader should generate a URL for a small image placeholder instead of a full-sized
* image.
*/
isPlaceholder?: boolean;
/**
* Additional user-provided parameters for use by the ImageLoader.
*/
loaderParams?: {
[key: string]: any;
};
}
/**
* Config options used in rendering placeholder images.
*
* @see {@link NgOptimizedImage}
* @publicApi
*/
export declare interface ImagePlaceholderConfig {
blur?: boolean;
}
/**
* Returns whether a platform id represents a browser platform.
* @publicApi
*/
export declare function isPlatformBrowser(platformId: Object): boolean;
/**
* Returns whether a platform id represents a server platform.
* @publicApi
*/
export declare function isPlatformServer(platformId: Object): boolean;
/**
* @ngModule CommonModule
* @description
*
* Converts a value into its JSON-format representation. Useful for debugging.
*
* @usageNotes
*
* The following component uses a JSON pipe to convert an object
* to JSON format, and displays the string in both formats for comparison.
*
* {@example common/pipes/ts/json_pipe.ts region='JsonPipe'}
*
* @publicApi
*/
export declare class JsonPipe implements PipeTransform {
/**
* @param value A value of any type to convert into a JSON-format string.
*/
transform(value: any): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
/**
* A key value pair.
* Usually used to represent the key value pairs from a Map or Object.
*
* @publicApi
*/
export declare interface KeyValue {
key: K;
value: V;
}
/**
* @ngModule CommonModule
* @description
*
* 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.
*
* @usageNotes
* ### Examples
*
* This examples show how an Object or a Map can be iterated by ngFor with the use of this
* keyvalue pipe.
*
* {@example common/pipes/ts/keyvalue_pipe.ts region='KeyValuePipe'}
*
* @publicApi
*/
export declare class KeyValuePipe implements PipeTransform {
private readonly differs;
constructor(differs: KeyValueDiffers);
private differ;
private keyValues;
private compareFn;
transform(input: ReadonlyMap, compareFn?: (a: KeyValue, b: KeyValue) => number): Array>;
transform(input: Record, compareFn?: (a: KeyValue, b: KeyValue) => number): Array>;
transform(input: Record | ReadonlyMap, compareFn?: (a: KeyValue, b: KeyValue) => number): Array>;
transform(input: null | undefined, compareFn?: (a: KeyValue, b: KeyValue) => number): null;
transform(input: ReadonlyMap | null | undefined, compareFn?: (a: KeyValue, b: KeyValue) => number): Array> | null;
transform(input: Record | null | undefined, compareFn?: (a: KeyValue, b: KeyValue) => number): Array> | null;
transform(input: Record | ReadonlyMap | null | undefined, compareFn?: (a: KeyValue, b: KeyValue) => number): Array> | null;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
/**
* @description
*
* 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.
*
* @usageNotes
*
* 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
*
* ;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
export { Location_2 as Location }
/**
* @description
* Indicates when a location is initialized.
*
* @publicApi
*/
export declare const LOCATION_INITIALIZED: InjectionToken>;
/**
* @description
* A serializable version of the event from `onPopState` or `onHashChange`
*
* @publicApi
*/
export declare interface LocationChangeEvent {
type: string;
state: any;
}
/**
* @publicApi
*/
export declare interface LocationChangeListener {
(event: LocationChangeEvent): any;
}
/**
* 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.
*
* @publicApi
*/
export declare abstract class LocationStrategy {
abstract path(includeHash?: boolean): string;
abstract prepareExternalUrl(internal: string): string;
abstract getState(): unknown;
abstract pushState(state: any, title: string, url: string, queryParams: string): void;
abstract replaceState(state: any, title: string, url: string, queryParams: string): void;
abstract forward(): void;
abstract back(): void;
historyGo?(relativePosition: number): void;
abstract onPopState(fn: LocationChangeListener): void;
abstract getBaseHref(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
/**
* Transforms text to all lower case.
*
* @see {@link UpperCasePipe}
* @see {@link TitleCasePipe}
* @usageNotes
*
* 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.
*
* ;
static ɵpipe: i0.ɵɵPipeDeclaration;
}
declare class NavigateEvent extends Event {
constructor(type: string, eventInit?: NavigateEventInit);
readonly navigationType: NavigationTypeString;
readonly canIntercept: boolean;
readonly userInitiated: boolean;
readonly hashChange: boolean;
readonly destination: NavigationDestination;
readonly signal: AbortSignal;
readonly formData: FormData | null;
readonly downloadRequest: string | null;
readonly info?: unknown;
intercept(options?: NavigationInterceptOptions): void;
scroll(): void;
}
declare interface NavigateEventInit extends EventInit {
navigationType?: NavigationTypeString;
canIntercept?: boolean;
userInitiated?: boolean;
hashChange?: boolean;
destination: NavigationDestination;
signal: AbortSignal;
formData?: FormData | null;
downloadRequest?: string | null;
info?: unknown;
}
declare class Navigation extends EventTarget {
entries(): NavigationHistoryEntry[];
readonly currentEntry: NavigationHistoryEntry | null;
updateCurrentEntry(options: NavigationUpdateCurrentEntryOptions): void;
readonly transition: NavigationTransition | null;
readonly canGoBack: boolean;
readonly canGoForward: boolean;
navigate(url: string, options?: NavigationNavigateOptions): NavigationResult;
reload(options?: NavigationReloadOptions): NavigationResult;
traverseTo(key: string, options?: NavigationOptions): NavigationResult;
back(options?: NavigationOptions): NavigationResult;
forward(options?: NavigationOptions): NavigationResult;
onnavigate: ((this: Navigation, ev: NavigateEvent) => any) | null;
onnavigatesuccess: ((this: Navigation, ev: Event) => any) | null;
onnavigateerror: ((this: Navigation, ev: ErrorEvent) => any) | null;
oncurrententrychange: ((this: Navigation, ev: NavigationCurrentEntryChangeEvent) => any) | null;
addEventListener(type: K, listener: (this: Navigation, ev: NavigationEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: Navigation, ev: NavigationEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
declare class NavigationCurrentEntryChangeEvent extends Event {
constructor(type: string, eventInit?: NavigationCurrentEntryChangeEventInit);
readonly navigationType: NavigationTypeString | null;
readonly from: NavigationHistoryEntry;
}
declare interface NavigationCurrentEntryChangeEventInit extends EventInit {
navigationType?: NavigationTypeString | null;
from: NavigationHistoryEntry;
}
declare class NavigationDestination {
readonly url: string;
readonly key: string | null;
readonly id: string | null;
readonly index: number;
readonly sameDocument: boolean;
getState(): unknown;
}
declare interface NavigationEventMap {
navigate: NavigateEvent;
navigatesuccess: Event;
navigateerror: ErrorEvent;
currententrychange: NavigationCurrentEntryChangeEvent;
}
declare class NavigationHistoryEntry extends EventTarget {
readonly key: string;
readonly id: string;
readonly url: string | null;
readonly index: number;
readonly sameDocument: boolean;
getState(): unknown;
ondispose: ((this: NavigationHistoryEntry, ev: Event) => any) | null;
addEventListener(type: K, listener: (this: NavigationHistoryEntry, ev: NavigationHistoryEntryEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: NavigationHistoryEntry, ev: NavigationHistoryEntryEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
declare interface NavigationHistoryEntryEventMap {
dispose: Event;
}
declare interface NavigationInterceptOptions {
handler?: () => Promise;
focusReset?: 'after-transition' | 'manual';
scroll?: 'after-transition' | 'manual';
}
declare interface NavigationNavigateOptions extends NavigationOptions {
state?: unknown;
history?: 'auto' | 'push' | 'replace';
}
declare interface NavigationOptions {
info?: unknown;
}
declare interface NavigationReloadOptions extends NavigationOptions {
state?: unknown;
}
declare interface NavigationResult {
committed: Promise;
finished: Promise;
}
declare class NavigationTransition {
readonly navigationType: NavigationTypeString;
readonly from: NavigationHistoryEntry;
readonly finished: Promise;
}
declare type NavigationTypeString = 'reload' | 'push' | 'replace' | 'traverse';
declare interface NavigationUpdateCurrentEntryOptions {
state: unknown;
}
/**
* @ngModule CommonModule
*
* @usageNotes
* ```
* ...
*
* ...
*
* ...
*
* ...
*
* ...
* ```
*
* @description
*
* 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.
*
* @publicApi
*/
export declare class NgClass implements DoCheck {
private _ngEl;
private _renderer;
private initialClasses;
private rawClass;
private stateMap;
constructor(_ngEl: ElementRef, _renderer: Renderer2);
set klass(value: string);
set ngClass(value: string | string[] | Set | {
[klass: string]: any;
} | null | undefined);
ngDoCheck(): void;
private _updateState;
private _applyStateDiff;
private _toggleClass;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Instantiates a {@link 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.
*
* @usageNotes
*
* ### 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 {@link 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
* ```
*
*
* ```
*
* Customized injector/content
* ```
*
*
* ```
*
* Customized NgModule reference
* ```
*
*
* ```
*
* ### A simple example
*
* {@example common/ngComponentOutlet/ts/module.ts region='SimpleExample'}
*
* A more complete example with additional options:
*
* {@example common/ngComponentOutlet/ts/module.ts region='CompleteExample'}
*
* @publicApi
* @ngModule CommonModule
*/
export declare class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
private _viewContainerRef;
ngComponentOutlet: Type | null;
ngComponentOutletInputs?: Record;
ngComponentOutletInjector?: Injector;
ngComponentOutletContent?: any[][];
ngComponentOutletNgModule?: Type;
/**
* @deprecated This input is deprecated, use `ngComponentOutletNgModule` instead.
*/
ngComponentOutletNgModuleFactory?: NgModuleFactory;
private _componentRef;
private _moduleRef;
/**
* A helper data structure that allows us to track inputs that were part of the
* ngComponentOutletInputs expression. Tracking inputs is necessary for proper removal of ones
* that are no longer referenced.
*/
private _inputsUsed;
constructor(_viewContainerRef: ViewContainerRef);
private _needToReCreateNgModuleInstance;
private _needToReCreateComponentInstance;
/** @nodoc */
ngOnChanges(changes: SimpleChanges): void;
/** @nodoc */
ngDoCheck(): void;
/** @nodoc */
ngOnDestroy(): void;
private _applyInputStateDiff;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* 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 `` element.
*
* ```
* ...
* ```
*
* The shorthand form expands into a long form that uses the `ngForOf` selector
* on an `` element.
* The content of the `` element is the `` element that held the
* short-form directive.
*
* Here is the expanded version of the short-form example.
*
* ```
*
* ...
*
* ```
*
* 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).
*
* @usageNotes
*
* ### Local variables
*
* `NgForOf` provides exported values that can be aliased to local variables.
* For example:
*
* ```
*
* {{i}}/{{users.length}}. {{user}} 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`: 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 `` 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 [Structural Directives](guide/directives/structural-directives)
* @ngModule CommonModule
* @publicApi
*/
declare class NgForOf = NgIterable> implements DoCheck {
private _viewContainer;
private _template;
private _differs;
/**
* The value of the iterable expression, which can be used as a
* [template input variable](guide/directives/structural-directives#shorthand).
*/
set ngForOf(ngForOf: (U & NgIterable) | undefined | null);
/**
* Specifies a custom `TrackByFunction` to compute the identity of items in an iterable.
*
* If a custom `TrackByFunction` is not provided, `NgForOf` will use the item's [object
* identity](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
* as the key.
*
* `NgForOf` uses the computed key to associate items in an iterable with DOM elements
* it produces for these items.
*
* A custom `TrackByFunction` is useful to provide good user experience in cases when items in an
* iterable rendered using `NgForOf` have a natural identifier (for example, custom ID or a
* primary key), and this iterable could be updated with new object instances that still
* represent the same underlying entity (for example, when data is re-fetched from the server,
* and the iterable is recreated and re-rendered, but most of the data is still the same).
*
* @see {@link TrackByFunction}
*/
set ngForTrackBy(fn: TrackByFunction);
get ngForTrackBy(): TrackByFunction;
private _ngForOf;
private _ngForOfDirty;
private _differ;
private _trackByFn;
constructor(_viewContainer: ViewContainerRef, _template: TemplateRef>, _differs: IterableDiffers);
/**
* A reference to the template that is stamped out for each item in the iterable.
* @see [template reference variable](guide/templates/variables#template-reference-variables)
*/
set ngForTemplate(value: TemplateRef>);
/**
* Applies the changes when needed.
* @nodoc
*/
ngDoCheck(): void;
private _applyChanges;
/**
* 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.
*/
static ngTemplateContextGuard>(dir: NgForOf, ctx: any): ctx is NgForOfContext;
static ɵfac: i0.ɵɵFactoryDeclaration, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration, "[ngFor][ngForOf]", never, { "ngForOf": { "alias": "ngForOf"; "required": false; }; "ngForTrackBy": { "alias": "ngForTrackBy"; "required": false; }; "ngForTemplate": { "alias": "ngForTemplate"; "required": false; }; }, {}, never, never, true, never>;
}
export { NgForOf as NgFor }
export { NgForOf }
/**
* @publicApi
*/
export declare class NgForOfContext = NgIterable> {
$implicit: T;
ngForOf: U;
index: number;
count: number;
constructor($implicit: T, ngForOf: U, index: number, count: number);
get first(): boolean;
get last(): boolean;
get even(): boolean;
get odd(): boolean;
}
/**
* 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 `` element.
*
* Simple form with shorthand syntax:
*
* ```
* Content to render when condition is true.
* ```
*
* Simple form with expanded syntax:
*
* ```
* Content to render when condition is
* true.
* ```
*
* Form with an "else" block:
*
* ```
* Content to render when condition is true.
* Content to render when condition is false.
* ```
*
* Shorthand form with "then" and "else" blocks:
*
* ```
*
* Content to render when condition is true.
* Content to render when condition is false.
* ```
*
* Form with storing the value locally:
*
* ```
* {{value}}
* Content to render when value is null.
* ```
*
* @usageNotes
*
* 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.
*
* {@example common/ngIf/ts/module.ts region='NgIfSimple'}
*
* ### 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 `` element labeled `#elseBlock`.
* The template can be defined anywhere in the component view, but is typically placed right after
* `ngIf` for readability.
*
* {@example common/ngIf/ts/module.ts region='NgIfElse'}
*
* ### 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 `` element. When you do this, you can
* change which template to use at runtime, as shown in the following example.
*
* {@example common/ngIf/ts/module.ts region='NgIfThenElse'}
*
* ### 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.
*
* {@example common/ngIf/ts/module.ts region='NgIfAs'}
*
* 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.
*
* ```
*
* ...
*
*
*
* Loading...
*
* ```
*
* You can see that the "else" clause references the ``
* 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 `` tag, with `ngIf` and `ngIfElse` directives.
* The anchor element containing the template for the "then" clause becomes
* the content of this unlabeled `` tag.
*
* ```
*
*
* ...
*
*
*
*
* Loading...
*
* ```
*
* 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).
*
* @ngModule CommonModule
* @publicApi
*/
export declare class NgIf {
private _viewContainer;
private _context;
private _thenTemplateRef;
private _elseTemplateRef;
private _thenViewRef;
private _elseViewRef;
constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef>);
/**
* The Boolean expression to evaluate as the condition for showing a template.
*/
set ngIf(condition: T);
/**
* A template to show if the condition expression evaluates to true.
*/
set ngIfThen(templateRef: TemplateRef> | null);
/**
* A template to show if the condition expression evaluates to false.
*/
set ngIfElse(templateRef: TemplateRef> | null);
private _updateView;
/**
* 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`.
*/
static ngTemplateGuard_ngIf: 'binding';
/**
* 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.
*/
static ngTemplateContextGuard(dir: NgIf, ctx: any): ctx is NgIfContext>;
static ɵfac: i0.ɵɵFactoryDeclaration, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration, "[ngIf]", never, { "ngIf": { "alias": "ngIf"; "required": false; }; "ngIfThen": { "alias": "ngIfThen"; "required": false; }; "ngIfElse": { "alias": "ngIfElse"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* @publicApi
*/
export declare class NgIfContext {
$implicit: T;
ngIf: T;
}
/**
* Returns the plural case based on the locale
*
* @publicApi
*/
export declare class NgLocaleLocalization extends NgLocalization {
protected locale: string;
constructor(locale: string);
getPluralCategory(value: any, locale?: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
/**
* @publicApi
*/
export declare abstract class NgLocalization {
abstract getPluralCategory(value: any, locale?: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
/**
* 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 `![]()
` 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
*
* @usageNotes
* 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 `![]()
` 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.
*
* ```typescript
* 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:
*
* ```typescript
* 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.
*
* ```typescript
* 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 `![]()
` tags in templates to use `ngSrc` instead of `src`.
*
* ```
* ![]()
* ```
*
* @publicApi
*/
export declare class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
private imageLoader;
private config;
private renderer;
private imgElement;
private injector;
private readonly isServer;
private readonly preloadLinkCreator;
private lcpObserver;
/**
* Calculate the rewritten `src` once and store it.
* This is needed to avoid repetitive calculations and make sure the directive cleanup in the
* `ngOnDestroy` does not rely on the `IMAGE_LOADER` logic (which in turn can rely on some other
* instance that might be already destroyed).
*/
private _renderedSrc;
/**
* 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.
*/
ngSrc: 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:
* ```
* ![]()
=>
* 
* ```
*/
ngSrcset: string;
/**
* The base `sizes` attribute passed through to the `![]()
` element.
* Providing sizes causes the image to create an automatic responsive srcset.
*/
sizes?: string;
/**
* For responsive images: the intrinsic width of the image in pixels.
* For fixed size images: the desired rendered width of the image in pixels.
*/
width: number | undefined;
/**
* For responsive images: the intrinsic height of the image in pixels.
* For fixed size images: the desired rendered height of the image in pixels.
*/
height: number | undefined;
/**
* 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`.
*/
loading?: 'lazy' | 'eager' | 'auto';
/**
* Indicates whether this image should have a high priority.
*/
priority: boolean;
/**
* Data to pass through to custom loaders.
*/
loaderParams?: {
[key: string]: any;
};
/**
* Disables automatic srcset generation for this image.
*/
disableOptimizedSrcset: boolean;
/**
* Sets the image to "fill mode", which eliminates the height/width requirement and adds
* styles such that the image fills its containing element.
*/
fill: boolean;
/**
* A URL or data URL for an image to be used as a placeholder while this image loads.
*/
placeholder?: string | boolean;
/**
* Configuration object for placeholder settings. Options:
* * blur: Setting this to false disables the automatic CSS blur.
*/
placeholderConfig?: ImagePlaceholderConfig;
/** @nodoc */
ngOnInit(): void;
private setHostAttributes;
/** @nodoc */
ngOnChanges(changes: SimpleChanges): void;
private callImageLoader;
private getLoadingBehavior;
private getFetchPriority;
private getRewrittenSrc;
private getRewrittenSrcset;
private getAutomaticSrcset;
private getResponsiveSrcset;
private updateSrcAndSrcset;
private getFixedSrcset;
private shouldGenerateAutomaticSrcset;
/**
* Returns an image url formatted for use with the CSS background-image property. Expects one of:
* * A base64 encoded image, which is wrapped and passed through.
* * A boolean. If true, calls the image loader to generate a small placeholder url.
*/
private generatePlaceholder;
/**
* Determines if blur should be applied, based on an optional boolean
* property `blur` within the optional configuration object `placeholderConfig`.
*/
private shouldBlurPlaceholder;
private removePlaceholderOnLoad;
/** @nodoc */
ngOnDestroy(): void;
private setHostAttribute;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
static ngAcceptInputType_ngSrc: string | i0.ɵSafeValue;
static ngAcceptInputType_width: unknown;
static ngAcceptInputType_height: unknown;
static ngAcceptInputType_priority: unknown;
static ngAcceptInputType_disableOptimizedSrcset: unknown;
static ngAcceptInputType_fill: unknown;
static ngAcceptInputType_placeholder: boolean | string;
}
/**
* @ngModule CommonModule
*
* @usageNotes
* ```
*
* there is nothing
* there is one
* there are a few
*
* ```
*
* @description
*
* 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
*
* @publicApi
*/
export declare class NgPlural {
private _localization;
private _activeView?;
private _caseViews;
constructor(_localization: NgLocalization);
set ngPlural(value: number);
addCase(value: string, switchView: SwitchView): void;
private _updateView;
private _clearViews;
private _activateView;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @ngModule CommonModule
*
* @description
*
* Creates a view that will be added/removed from the parent {@link NgPlural} when the
* given expression matches the plural expression according to CLDR rules.
*
* @usageNotes
* ```
*
* ...
* ...
*
*```
*
* See {@link NgPlural} for more details and example.
*
* @publicApi
*/
export declare class NgPluralCase {
value: string;
constructor(value: string, template: TemplateRef