@angular/core
Version:
Angular - the core framework
1,278 lines (1,265 loc) • 356 kB
TypeScript
/**
* @license Angular v20.0.3
* (c) 2010-2025 Google LLC. https://angular.io/
* License: MIT
*/
import { SIGNAL, ValueEqualityFn as ValueEqualityFn$1 } from './graph.d-BcIOep_B.js';
import { Signal, WritableSignal, OutputRef, Provider, EnvironmentProviders, Type as Type$1, ModuleWithProviders, TypeProvider, ValueProvider, ClassProvider, ConstructorProvider, ExistingProvider, FactoryProvider, StaticClassProvider, ProviderToken, StaticProvider, Injector, ValueSansProvider, ExistingSansProvider, StaticClassSansProvider, ConstructorSansProvider, FactorySansProvider, ClassSansProvider, InjectionToken, InternalInjectFlags, InjectOptions, ValueEqualityFn, EventCallback, isSignal, enableProfiling as enableProfiling$1 } from './chrome_dev_tools_performance.d-DvzAxqBc.js';
export { AbstractType, CreateSignalOptions, DestroyRef, DestroyableInjector, ImportedNgModuleProviders, OutputRefSubscription, signal, InternalEnvironmentProviders as ɵInternalEnvironmentProviders, JSACTION_EVENT_CONTRACT as ɵJSACTION_EVENT_CONTRACT, Writable as ɵWritable, isEnvironmentProviders as ɵisEnvironmentProviders, ɵunwrapWritableSignal } from './chrome_dev_tools_performance.d-DvzAxqBc.js';
import { InputSignalNode, TypeDecorator, AfterRenderRef, EffectCleanupRegisterFn, SchemaMetadata, ComponentDef, DirectiveDef, CssSelectorList, DirectiveDefFeature, HostBindingsFunction, TAttributes, ContentQueriesFunction, ViewQueriesFunction, ComponentTemplate, TConstantsOrFactory, ComponentDefFeature, ViewEncapsulation as ViewEncapsulation$1, ChangeDetectionStrategy as ChangeDetectionStrategy$1, TypeOrFactory, DependencyTypeList, InputFlags, InputTransformFunction, EmbeddedViewRef, LView, ApplicationRef, ChangeDetectorRef, ComponentFactory as ComponentFactory$1, NgModuleRef as NgModuleRef$1, EnvironmentInjector, DirectiveWithBindings, Binding, ComponentRef as ComponentRef$1, ElementRef, ComponentFactoryResolver as ComponentFactoryResolver$1, InternalNgModuleRef, NgModuleFactory as NgModuleFactory$1, ViewRef as ViewRef$1, PlatformRef, NgZone, ChangeDetectionScheduler, NotificationSource, ɵɵFactoryDeclaration as __FactoryDeclaration, ɵɵInjectableDeclaration as __InjectableDeclaration, ɵɵNgModuleDeclaration as __NgModuleDeclaration, ɵɵInjectorDeclaration as __InjectorDeclaration, DeferBlockDependencyInterceptor, DeferBlockConfig, DeferBlockState, TNode, LContainer, TView, TDeferBlockDetails, RNode, Component, TrustedHTML, DehydratedDeferBlock, CompilerOptions, HostDirectiveConfig, ComponentType, NgModuleScopeInfoFromDecorator, DependencyResolverFn, TDeferDetailsFlags, SanitizerFn, LocalRefExtractor, OpaqueViewState, GlobalTargetResolver, ProjectionSlots, QueryFlags, QueryList, RElement, RawScopeInfoFromDecorator, ClassDebugInfo, Directive, NgModule, Pipe, TrustedScriptURL, TrustedScript, PipeType, DirectiveType } from './discovery.d-C5dkZ8lJ.js';
export { APP_BOOTSTRAP_LISTENER, BootstrapOptions, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, Compiler, CompilerFactory, ComponentDecorator, CreateEffectOptions, DebugElement, DebugEventListener, DebugNode, DirectiveDecorator, EffectCleanupFn, EffectRef, EventEmitter, HostBinding, HostBindingDecorator, HostListener, HostListenerDecorator, InjectableType, InjectorType, Input, InputDecorator, ListenerOptions, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModuleDecorator, NgProbeToken, Output, OutputDecorator, PipeDecorator, Predicate, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, Sanitizer, SecurityContext, asNativeElements, defineInjectable, effect, getDebugNode, inputBinding, outputBinding, twoWayBinding, AfterRenderManager as ɵAfterRenderManager, AnimationRendererType as ɵAnimationRendererType, AttributeMarker as ɵAttributeMarker, CONTAINER_HEADER_OFFSET as ɵCONTAINER_HEADER_OFFSET, DeferBlockBehavior as ɵDeferBlockBehavior, DeferBlockDetails as ɵDeferBlockDetails, EffectScheduler as ɵEffectScheduler, INJECTOR_SCOPE as ɵINJECTOR_SCOPE, NG_INJ_DEF as ɵNG_INJ_DEF, NG_PROV_DEF as ɵNG_PROV_DEF, NavigateEvent as ɵNavigateEvent, Navigation as ɵNavigation, NavigationCurrentEntryChangeEvent as ɵNavigationCurrentEntryChangeEvent, NavigationDestination as ɵNavigationDestination, NavigationHistoryEntry as ɵNavigationHistoryEntry, NavigationInterceptOptions as ɵNavigationInterceptOptions, NavigationNavigateOptions as ɵNavigationNavigateOptions, NavigationOptions as ɵNavigationOptions, NavigationReloadOptions as ɵNavigationReloadOptions, NavigationResult as ɵNavigationResult, NavigationTransition as ɵNavigationTransition, NavigationTypeString as ɵNavigationTypeString, NavigationUpdateCurrentEntryOptions as ɵNavigationUpdateCurrentEntryOptions, NoopNgZone as ɵNoopNgZone, PipeDef as ɵPipeDef, R3Injector as ɵR3Injector, RenderFlags as ɵRenderFlags, TracingAction as ɵTracingAction, TracingService as ɵTracingService, TracingSnapshot as ɵTracingSnapshot, ZONELESS_ENABLED as ɵZONELESS_ENABLED, getDebugNode as ɵgetDebugNode, getDeferBlocks as ɵgetDeferBlocks, getInjectableDef as ɵgetInjectableDef, injectChangeDetectorRef as ɵinjectChangeDetectorRef, isBoundToModule as ɵisBoundToModule, isInjectable as ɵisInjectable, ɵɵComponentDeclaration, ɵɵDirectiveDeclaration, ɵɵInjectorDef, ɵɵPipeDeclaration, ɵɵdefineInjectable, ɵɵdefineInjector } from './discovery.d-C5dkZ8lJ.js';
import { ResourceOptions, ResourceRef, ResourceStreamingLoader, ResourceStatus, WritableResource, Resource } from './api.d-B0vztftH.js';
export { BaseResourceOptions, OutputEmitterRef, OutputOptions, PromiseResourceOptions, ResourceLoader, ResourceLoaderParams, ResourceStreamItem, StreamingResourceOptions, output, getOutputDestroyRef as ɵgetOutputDestroyRef } from './api.d-B0vztftH.js';
import './event_dispatcher.d-BReQpZfC.js';
import { Observable, Subscribable } from 'rxjs';
export { setAlternateWeakRefImpl as ɵsetAlternateWeakRefImpl } from './weak_ref.d-eGOEP9S1.js';
export { setCurrentInjector as ɵsetCurrentInjector } from './primitives/di/index.js';
import './signal.d-BcmOdASA.js';
import '@angular/core/primitives/di';
/**
* @publicAPI
*
* Options for signal inputs.
*/
interface InputOptions<T, TransformT> {
/** Optional public name for the input. By default, the class field name is used. */
alias?: string;
/**
* Optional transform that runs whenever a new value is bound. Can be used to
* transform the input value before the input is updated.
*
* The transform function can widen the type of the input. For example, consider
* an input for `disabled`. In practice, as the component author, you want to only
* deal with a boolean, but users may want to bind a string if they just use the
* attribute form to bind to the input via `<my-dir input>`. A transform can then
* handle such string values and convert them to `boolean`. See: {@link booleanAttribute}.
*/
transform?: (v: TransformT) => T;
/**
* A debug name for the input signal. Used in Angular DevTools to identify the signal.
*/
debugName?: string;
}
/**
* Signal input options without the transform option.
*
* @publicApi 19.0
*/
type InputOptionsWithoutTransform<T> = Omit<InputOptions<T, T>, 'transform'> & {
transform?: undefined;
};
/**
* Signal input options with the transform option required.
*
* @publicAPI
*/
type InputOptionsWithTransform<T, TransformT> = Required<Pick<InputOptions<T, TransformT>, 'transform'>> & InputOptions<T, TransformT>;
declare const ɵINPUT_SIGNAL_BRAND_READ_TYPE: unique symbol;
declare const ɵINPUT_SIGNAL_BRAND_WRITE_TYPE: unique symbol;
/**
* `InputSignalWithTransform` represents a special `Signal` for a
* directive/component input with a `transform` function.
*
* Signal inputs with transforms capture an extra generic for their transform write
* type. Transforms can expand the accepted bound values for an input while ensuring
* value retrievals of the signal input are still matching the generic input type.
*
* ```ts
* class MyDir {
* disabled = input(false, {
* transform: (v: string|boolean) => convertToBoolean(v),
* }); // InputSignalWithTransform<boolean, string|boolean>
*
* click() {
* this.disabled() // always returns a `boolean`.
* }
* }
* ```
*
* @see {@link InputSignal} for additional information.
*
* @publicApi 19.0
*/
interface InputSignalWithTransform<T, TransformT> extends Signal<T> {
[SIGNAL]: InputSignalNode<T, TransformT>;
[ɵINPUT_SIGNAL_BRAND_READ_TYPE]: T;
[ɵINPUT_SIGNAL_BRAND_WRITE_TYPE]: TransformT;
}
/**
* `InputSignal` represents a special `Signal` for a directive/component input.
*
* An input signal is similar to a non-writable signal except that it also
* carries additional type-information for transforms, and that Angular internally
* updates the signal whenever a new value is bound.
*
* @see {@link InputOptionsWithTransform} for inputs with transforms.
*
* @publicApi 19.0
*/
interface InputSignal<T> extends InputSignalWithTransform<T, T> {
}
/**
* The `input` function allows declaration of inputs in directives and
* components.
*
* The function exposes an API for also declaring required inputs via the
* `input.required` function.
*
* @publicAPI
* @docsPrivate Ignored because `input` is the canonical API entry.
*/
interface InputFunction {
/**
* Initializes an input of type `T` with an initial value of `undefined`.
* Angular will implicitly use `undefined` as initial value.
*/
<T>(): InputSignal<T | undefined>;
/** Declares an input of type `T` with an explicit initial value. */
<T>(initialValue: T, opts?: InputOptionsWithoutTransform<T>): InputSignal<T>;
/** Declares an input of type `T|undefined` without an initial value, but with input options */
<T>(initialValue: undefined, opts: InputOptionsWithoutTransform<T>): InputSignal<T | undefined>;
/**
* Declares an input of type `T` with an initial value and a transform
* function.
*
* The input accepts values of type `TransformT` and the given
* transform function will transform the value to type `T`.
*/
<T, TransformT>(initialValue: T, opts: InputOptionsWithTransform<T, TransformT>): InputSignalWithTransform<T, TransformT>;
/**
* Declares an input of type `T|undefined` without an initial value and with a transform
* function.
*
* The input accepts values of type `TransformT` and the given
* transform function will transform the value to type `T|undefined`.
*/ <T, TransformT>(initialValue: undefined, opts: InputOptionsWithTransform<T | undefined, TransformT>): InputSignalWithTransform<T | undefined, TransformT>;
/**
* Initializes a required input.
*
* Consumers of your directive/component need to bind to this
* input. If unset, a compile time error will be reported.
*
* @publicAPI
*/
required: {
/** Declares a required input of type `T`. */
<T>(opts?: InputOptionsWithoutTransform<T>): InputSignal<T>;
/**
* Declares a required input of type `T` with a transform function.
*
* The input accepts values of type `TransformT` and the given
* transform function will transform the value to type `T`.
*/
<T, TransformT>(opts: InputOptionsWithTransform<T, TransformT>): InputSignalWithTransform<T, TransformT>;
};
}
/**
* The `input` function allows declaration of Angular inputs in directives
* and components.
*
* There are two variants of inputs that can be declared:
*
* 1. **Optional inputs** with an initial value.
* 2. **Required inputs** that consumers need to set.
*
* By default, the `input` function will declare optional inputs that
* always have an initial value. Required inputs can be declared
* using the `input.required()` function.
*
* Inputs are signals. The values of an input are exposed as a `Signal`.
* The signal always holds the latest value of the input that is bound
* from the parent.
*
* @usageNotes
* To use signal-based inputs, import `input` from `@angular/core`.
*
* ```ts
* import {input} from '@angular/core`;
* ```
*
* Inside your component, introduce a new class member and initialize
* it with a call to `input` or `input.required`.
*
* ```ts
* @Component({
* ...
* })
* export class UserProfileComponent {
* firstName = input<string>(); // Signal<string|undefined>
* lastName = input.required<string>(); // Signal<string>
* age = input(0) // Signal<number>
* }
* ```
*
* Inside your component template, you can display values of the inputs
* by calling the signal.
*
* ```html
* <span>{{firstName()}}</span>
* ```
*
* @publicAPI
* @initializerApiFunction
*/
declare const input: InputFunction;
/** Retrieves the write type of an `InputSignal` and `InputSignalWithTransform`. */
type ɵUnwrapInputSignalWriteType<Field> = Field extends InputSignalWithTransform<any, infer WriteT> ? WriteT : never;
/**
* Unwraps all `InputSignal`/`InputSignalWithTransform` class fields of
* the given directive.
*/
type ɵUnwrapDirectiveSignalInputs<Dir, Fields extends keyof Dir> = {
[P in Fields]: ɵUnwrapInputSignalWriteType<Dir[P]>;
};
/**
* @publicAPI
*
* Options for model signals.
*/
interface ModelOptions {
/**
* Optional public name of the input side of the model. The output side will have the same
* name as the input, but suffixed with `Change`. By default, the class field name is used.
*/
alias?: string;
/**
* A debug name for the model signal. Used in Angular DevTools to identify the signal.
*/
debugName?: string;
}
/**
* `ModelSignal` represents a special `Signal` for a directive/component model field.
*
* A model signal is a writeable signal that can be exposed as an output.
* Whenever its value is updated, it emits to the output.
*
* @publicAPI
*/
interface ModelSignal<T> extends WritableSignal<T>, InputSignal<T>, OutputRef<T> {
[SIGNAL]: InputSignalNode<T, T>;
}
/**
* `model` declares a writeable signal that is exposed as an input/output pair on the containing
* directive. The input name is taken either from the class member or from the `alias` option.
* The output name is generated by taking the input name and appending `Change`.
*
* The function exposes an API for also declaring required models via the
* `model.required` function.
*
* @publicAPI
* @docsPrivate Ignored because `model` is the canonical API entry.
*/
interface ModelFunction {
/**
* Initializes a model of type `T` with an initial value of `undefined`.
* Angular will implicitly use `undefined` as initial value.
*/
<T>(): ModelSignal<T | undefined>;
/** Initializes a model of type `T` with the given initial value. */
<T>(initialValue: T, opts?: ModelOptions): ModelSignal<T>;
required: {
/**
* Initializes a required model.
*
* Users of your directive/component need to bind to the input side of the model.
* If unset, a compile time error will be reported.
*/
<T>(opts?: ModelOptions): ModelSignal<T>;
};
}
/**
* `model` declares a writeable signal that is exposed as an input/output
* pair on the containing directive.
*
* The input name is taken either from the class member or from the `alias` option.
* The output name is generated by taking the input name and appending `Change`.
*
* @usageNotes
*
* To use `model()`, import the function from `@angular/core`.
*
* ```ts
* import {model} from '@angular/core`;
* ```
*
* Inside your component, introduce a new class member and initialize
* it with a call to `model` or `model.required`.
*
* ```ts
* @Directive({
* ...
* })
* export class MyDir {
* firstName = model<string>(); // ModelSignal<string|undefined>
* lastName = model.required<string>(); // ModelSignal<string>
* age = model(0); // ModelSignal<number>
* }
* ```
*
* Inside your component template, you can display the value of a `model`
* by calling the signal.
*
* ```html
* <span>{{firstName()}}</span>
* ```
*
* Updating the `model` is equivalent to updating a writable signal.
*
* ```ts
* updateName(newFirstName: string): void {
* this.firstName.set(newFirstName);
* }
* ```
*
* @publicApi 19.0
* @initializerApiFunction
*/
declare const model: ModelFunction;
/**
* Wrap an array of `Provider`s into `EnvironmentProviders`, preventing them from being accidentally
* referenced in `@Component` in a component injector.
*
* @publicApi
*/
declare function makeEnvironmentProviders(providers: (Provider | EnvironmentProviders)[]): EnvironmentProviders;
/**
* @description
* This function is used to provide initialization functions that will be executed upon construction
* of an environment injector.
*
* Note that the provided initializer is run in the injection context.
*
* Previously, this was achieved using the `ENVIRONMENT_INITIALIZER` token which is now deprecated.
*
* @see {@link ENVIRONMENT_INITIALIZER}
*
* @usageNotes
* The following example illustrates how to configure an initialization function using
* `provideEnvironmentInitializer()`
* ```ts
* createEnvironmentInjector(
* [
* provideEnvironmentInitializer(() => {
* console.log('environment initialized');
* }),
* ],
* parentInjector
* );
* ```
*
* @publicApi
*/
declare function provideEnvironmentInitializer(initializerFn: () => void): EnvironmentProviders;
/**
* A source of providers for the `importProvidersFrom` function.
*
* @publicApi
*/
type ImportProvidersSource = Type$1<unknown> | ModuleWithProviders<unknown> | Array<ImportProvidersSource>;
/**
* Collects providers from all NgModules and standalone components, including transitively imported
* ones.
*
* Providers extracted via `importProvidersFrom` are only usable in an application injector or
* another environment injector (such as a route injector). They should not be used in component
* providers.
*
* More information about standalone components can be found in [this
* guide](guide/components/importing).
*
* @usageNotes
* The results of the `importProvidersFrom` call can be used in the `bootstrapApplication` call:
*
* ```ts
* await bootstrapApplication(RootComponent, {
* providers: [
* importProvidersFrom(NgModuleOne, NgModuleTwo)
* ]
* });
* ```
*
* You can also use the `importProvidersFrom` results in the `providers` field of a route, when a
* standalone component is used:
*
* ```ts
* export const ROUTES: Route[] = [
* {
* path: 'foo',
* providers: [
* importProvidersFrom(NgModuleOne, NgModuleTwo)
* ],
* component: YourStandaloneComponent
* }
* ];
* ```
*
* @returns Collected providers from the specified list of types.
* @publicApi
*/
declare function importProvidersFrom(...sources: ImportProvidersSource[]): EnvironmentProviders;
/**
* Internal type for a single provider in a deep provider array.
*/
type SingleProvider = TypeProvider | ValueProvider | ClassProvider | ConstructorProvider | ExistingProvider | FactoryProvider | StaticClassProvider;
/**
* Type of the `viewChild` function. The viewChild function creates a singular view query.
*
* It is a special function that also provides access to required query results via the `.required`
* property.
*
* @publicApi
* @docsPrivate Ignored because `viewChild` is the canonical API entry.
*/
interface ViewChildFunction {
/**
* Initializes a view child query. Consider using `viewChild.required` for queries that should
* always match.
*
* @publicAPI
*/
<LocatorT, ReadT>(locator: ProviderToken<LocatorT> | string, opts: {
read: ProviderToken<ReadT>;
debugName?: string;
}): Signal<ReadT | undefined>;
<LocatorT>(locator: ProviderToken<LocatorT> | string, opts?: {
debugName?: string;
}): Signal<LocatorT | undefined>;
/**
* Initializes a view child query that is expected to always match an element.
*
* @publicAPI
*/
required: {
<LocatorT>(locator: ProviderToken<LocatorT> | string, opts?: {
debugName?: string;
}): Signal<LocatorT>;
<LocatorT, ReadT>(locator: ProviderToken<LocatorT> | string, opts: {
read: ProviderToken<ReadT>;
debugName?: string;
}): Signal<ReadT>;
};
}
/**
* Initializes a view child query.
*
* Consider using `viewChild.required` for queries that should always match.
*
* @usageNotes
* Create a child query in your component by declaring a
* class field and initializing it with the `viewChild()` function.
*
* ```angular-ts
* @Component({template: '<div #el></div><my-component #cmp />'})
* export class TestComponent {
* divEl = viewChild<ElementRef>('el'); // Signal<ElementRef|undefined>
* divElRequired = viewChild.required<ElementRef>('el'); // Signal<ElementRef>
* cmp = viewChild(MyComponent); // Signal<MyComponent|undefined>
* cmpRequired = viewChild.required(MyComponent); // Signal<MyComponent>
* }
* ```
*
* @publicApi 19.0
* @initializerApiFunction
*/
declare const viewChild: ViewChildFunction;
declare function viewChildren<LocatorT>(locator: ProviderToken<LocatorT> | string, opts?: {
debugName?: string;
}): Signal<ReadonlyArray<LocatorT>>;
declare function viewChildren<LocatorT, ReadT>(locator: ProviderToken<LocatorT> | string, opts: {
read: ProviderToken<ReadT>;
debugName?: string;
}): Signal<ReadonlyArray<ReadT>>;
/**
* Type of the `contentChild` function.
*
* The contentChild function creates a singular content query. It is a special function that also
* provides access to required query results via the `.required` property.
*
* @publicApi 19.0
* @docsPrivate Ignored because `contentChild` is the canonical API entry.
*/
interface ContentChildFunction {
/**
* Initializes a content child query.
*
* Consider using `contentChild.required` for queries that should always match.
* @publicAPI
*/
<LocatorT>(locator: ProviderToken<LocatorT> | string, opts?: {
descendants?: boolean;
read?: undefined;
debugName?: string;
}): Signal<LocatorT | undefined>;
<LocatorT, ReadT>(locator: ProviderToken<LocatorT> | string, opts: {
descendants?: boolean;
read: ProviderToken<ReadT>;
debugName?: string;
}): Signal<ReadT | undefined>;
/**
* Initializes a content child query that is always expected to match.
*/
required: {
<LocatorT>(locator: ProviderToken<LocatorT> | string, opts?: {
descendants?: boolean;
read?: undefined;
debugName?: string;
}): Signal<LocatorT>;
<LocatorT, ReadT>(locator: ProviderToken<LocatorT> | string, opts: {
descendants?: boolean;
read: ProviderToken<ReadT>;
debugName?: string;
}): Signal<ReadT>;
};
}
/**
* Initializes a content child query. Consider using `contentChild.required` for queries that should
* always match.
*
* @usageNotes
* Create a child query in your component by declaring a
* class field and initializing it with the `contentChild()` function.
*
* ```ts
* @Component({...})
* export class TestComponent {
* headerEl = contentChild<ElementRef>('h'); // Signal<ElementRef|undefined>
* headerElElRequired = contentChild.required<ElementRef>('h'); // Signal<ElementRef>
* header = contentChild(MyHeader); // Signal<MyHeader|undefined>
* headerRequired = contentChild.required(MyHeader); // Signal<MyHeader>
* }
* ```
*
* Note: By default `descendants` is `true` which means the query will traverse all descendants in the same template.
*
* @initializerApiFunction
* @publicApi 19.0
*/
declare const contentChild: ContentChildFunction;
declare function contentChildren<LocatorT>(locator: ProviderToken<LocatorT> | string, opts?: {
descendants?: boolean;
read?: undefined;
debugName?: string;
}): Signal<ReadonlyArray<LocatorT>>;
declare function contentChildren<LocatorT, ReadT>(locator: ProviderToken<LocatorT> | string, opts: {
descendants?: boolean;
read: ProviderToken<ReadT>;
debugName?: string;
}): Signal<ReadonlyArray<ReadT>>;
/**
* Type of the Attribute decorator / constructor function.
*
* @publicApi
*/
interface AttributeDecorator {
/**
* Parameter decorator for a directive constructor that designates
* a host-element attribute whose value is injected as a constant string literal.
*
* @usageNotes
*
* Suppose we have an `<input>` element and want to know its `type`.
*
* ```html
* <input type="text">
* ```
*
* The following example uses the decorator to inject the string literal `text` in a directive.
*
* {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
*
* The following example uses the decorator in a component constructor.
*
* {@example core/ts/metadata/metadata.ts region='attributeFactory'}
*
*/
(name: string): any;
new (name: string): Attribute;
}
/**
* Type of the Attribute metadata.
*
* @publicApi
*/
interface Attribute {
/**
* The name of the attribute whose value can be injected.
*/
attributeName: string;
}
/**
* Attribute decorator and metadata.
*
* @Annotation
* @publicApi
*/
declare const Attribute: AttributeDecorator;
/**
* Represents a basic change from a previous to a new value for a single
* property on a directive instance. Passed as a value in a
* {@link SimpleChanges} object to the `ngOnChanges` hook.
*
* @see {@link OnChanges}
*
* @publicApi
*/
declare class SimpleChange {
previousValue: any;
currentValue: any;
firstChange: boolean;
constructor(previousValue: any, currentValue: any, firstChange: boolean);
/**
* Check whether the new value is the first value assigned.
*/
isFirstChange(): boolean;
}
/**
* A hashtable of changes represented by {@link SimpleChange} objects stored
* at the declared property name they belong to on a Directive or Component. This is
* the type passed to the `ngOnChanges` hook.
*
* @see {@link OnChanges}
*
* @publicApi
*/
interface SimpleChanges {
[propName: string]: SimpleChange;
}
/**
* @description
* A lifecycle hook that is called when any data-bound property of a directive changes.
* Define an `ngOnChanges()` method to handle the changes.
*
* @see {@link DoCheck}
* @see {@link OnInit}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface to
* define an on-changes handler for an input property.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='OnChanges'}
*
* @publicApi
*/
interface OnChanges {
/**
* A callback method that is invoked immediately after the
* default change detector has checked data-bound properties
* if at least one has changed, and before the view and content
* children are checked.
* @param changes The changed properties.
*/
ngOnChanges(changes: SimpleChanges): void;
}
/**
* @description
* A lifecycle hook that is called after Angular has initialized
* all data-bound properties of a directive.
* Define an `ngOnInit()` method to handle any additional initialization tasks.
*
* @see {@link AfterContentInit}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface to
* define its own initialization method.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='OnInit'}
*
* @publicApi
*/
interface OnInit {
/**
* A callback method that is invoked immediately after the
* default change detector has checked the directive's
* data-bound properties for the first time,
* and before any of the view or content children have been checked.
* It is invoked only once when the directive is instantiated.
*/
ngOnInit(): void;
}
/**
* A lifecycle hook that invokes a custom change-detection function for a directive,
* in addition to the check performed by the default change-detector.
*
* The default change-detection algorithm looks for differences by comparing
* bound-property values by reference across change detection runs. You can use this
* hook to check for and respond to changes by some other means.
*
* When the default change detector detects changes, it invokes `ngOnChanges()` if supplied,
* regardless of whether you perform additional change detection.
* Typically, you should not use both `DoCheck` and `OnChanges` to respond to
* changes on the same input.
*
* @see {@link OnChanges}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface
* to invoke it own change-detection cycle.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='DoCheck'}
*
* For a more complete example and discussion, see
* [Defining custom change detection](guide/components/lifecycle#defining-custom-change-detection).
*
* @publicApi
*/
interface DoCheck {
/**
* A callback method that performs change-detection, invoked
* after the default change-detector runs.
* See `KeyValueDiffers` and `IterableDiffers` for implementing
* custom change checking for collections.
*
*/
ngDoCheck(): void;
}
/**
* A lifecycle hook that is called when a directive, pipe, or service is destroyed.
* Use for any custom cleanup that needs to occur when the
* instance is destroyed.
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface
* to define its own custom clean-up method.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='OnDestroy'}
*
* @publicApi
*/
interface OnDestroy {
/**
* A callback method that performs custom clean-up, invoked immediately
* before a directive, pipe, or service instance is destroyed.
*/
ngOnDestroy(): void;
}
/**
* @description
* A lifecycle hook that is called after Angular has fully initialized
* all content of a directive. It will run only once when the projected content is initialized.
* Define an `ngAfterContentInit()` method to handle any additional initialization tasks.
*
* @see {@link OnInit}
* @see {@link AfterViewInit}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface to
* define its own content initialization method.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterContentInit'}
*
* @publicApi
*/
interface AfterContentInit {
/**
* A callback method that is invoked immediately after
* Angular has completed initialization of all of the directive's
* content.
* It is invoked only once when the directive is instantiated.
*/
ngAfterContentInit(): void;
}
/**
* @description
* A lifecycle hook that is called after the default change detector has
* completed checking all content of a directive. It will run after the content
* has been checked and most of the time it's during a change detection cycle.
*
* @see {@link AfterViewChecked}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface to
* define its own after-check functionality.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterContentChecked'}
*
* @publicApi
*/
interface AfterContentChecked {
/**
* A callback method that is invoked immediately after the
* default change detector has completed checking all of the directive's
* content.
*/
ngAfterContentChecked(): void;
}
/**
* @description
* A lifecycle hook that is called after Angular has fully initialized
* a component's view.
* Define an `ngAfterViewInit()` method to handle any additional initialization tasks.
*
* @see {@link OnInit}
* @see {@link AfterContentInit}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface to
* define its own view initialization method.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterViewInit'}
*
* @publicApi
*/
interface AfterViewInit {
/**
* A callback method that is invoked immediately after
* Angular has completed initialization of a component's view.
* It is invoked only once when the view is instantiated.
*
*/
ngAfterViewInit(): void;
}
/**
* @description
* A lifecycle hook that is called after the default change detector has
* completed checking a component's view for changes.
*
* @see {@link AfterContentChecked}
* @see [Lifecycle hooks guide](guide/components/lifecycle)
*
* @usageNotes
* The following snippet shows how a component can implement this interface to
* define its own after-check functionality.
*
* {@example core/ts/metadata/lifecycle_hooks_spec.ts region='AfterViewChecked'}
*
* @publicApi
*/
interface AfterViewChecked {
/**
* A callback method that is invoked immediately after the
* default change detector has completed one change-check cycle
* for a component's view.
*/
ngAfterViewChecked(): void;
}
/**
* Type of the Query metadata.
*
* @publicApi
*/
interface Query {
descendants: boolean;
emitDistinctChangesOnly: boolean;
first: boolean;
read: any;
isViewQuery: boolean;
selector: any;
static?: boolean;
}
/**
* Base class for query metadata.
*
* @see {@link ContentChildren}
* @see {@link ContentChild}
* @see {@link ViewChildren}
* @see {@link ViewChild}
*
* @publicApi
*/
declare abstract class Query {
}
/**
* Type of the ContentChildren decorator / constructor function.
*
* @see {@link ContentChildren}
* @publicApi
*/
interface ContentChildrenDecorator {
/**
* @description
* Property decorator that configures a content query.
*
* Use to get the `QueryList` of elements or directives from the content DOM.
* Any time a child element is added, removed, or moved, the query list will be
* updated, and the changes observable of the query list will emit a new value.
*
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* Does not retrieve elements or directives that are in other components' templates,
* since a component's template is always a black box to its ancestors.
*
* **Metadata Properties**:
*
* * **selector** - The directive type or the name used for querying.
* * **descendants** - If `true` include all descendants of the element. If `false` then only
* query direct children of the element.
* * **emitDistinctChangesOnly** - The ` QueryList#changes` observable will emit new values only
* if the QueryList result has changed. When `false` the `changes` observable might emit even
* if the QueryList has not changed.
* ** Note: *** This config option is **deprecated**, it will be permanently set to `true` and
* removed in future versions of Angular.
* * **read** - Used to read a different token from the queried elements.
*
* The following selectors are supported.
* * Any class with the `@Component` or `@Directive` decorator
* * A template reference variable as a string (e.g. query `<my-component #cmp></my-component>`
* with `@ContentChildren('cmp')`)
* * Any provider defined in the child component tree of the current component (e.g.
* `@ContentChildren(SomeService) someService: SomeService`)
* * Any provider defined through a string token (e.g. `@ContentChildren('someToken')
* someTokenVal: any`)
* * A `TemplateRef` (e.g. query `<ng-template></ng-template>` with
* `@ContentChildren(TemplateRef) template;`)
*
* In addition, multiple string selectors can be separated with a comma (e.g.
* `@ContentChildren('cmp1,cmp2')`)
*
* The following values are supported by `read`:
* * Any class with the `@Component` or `@Directive` decorator
* * Any provider defined on the injector of the component that is matched by the `selector` of
* this query
* * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
* * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
*
* @usageNotes
*
* Here is a simple demonstration of how the `ContentChildren` decorator can be used.
*
* {@example core/di/ts/contentChildren/content_children_howto.ts region='HowTo'}
*
* ### Tab-pane example
*
* Here is a slightly more realistic example that shows how `ContentChildren` decorators
* can be used to implement a tab pane component.
*
* {@example core/di/ts/contentChildren/content_children_example.ts region='Component'}
*
* @Annotation
*/
(selector: ProviderToken<unknown> | Function | string, opts?: {
descendants?: boolean;
emitDistinctChangesOnly?: boolean;
read?: any;
}): any;
new (selector: ProviderToken<unknown> | Function | string, opts?: {
descendants?: boolean;
emitDistinctChangesOnly?: boolean;
read?: any;
}): Query;
}
/**
* Type of the ContentChildren metadata.
*
*
* @Annotation
* @publicApi
*/
type ContentChildren = Query;
/**
* ContentChildren decorator and metadata.
*
*
* @Annotation
* @publicApi
*/
declare const ContentChildren: ContentChildrenDecorator;
/**
* Type of the ContentChild decorator / constructor function.
*
* @publicApi
*/
interface ContentChildDecorator {
/**
* @description
* Property decorator that configures a content query.
*
* Use to get the first element or the directive matching the selector from the content DOM.
* If the content DOM changes, and a new child matches the selector,
* the property will be updated.
*
* Does not retrieve elements or directives that are in other components' templates,
* since a component's template is always a black box to its ancestors.
*
* **Metadata Properties**:
*
* * **selector** - The directive type or the name used for querying.
* * **descendants** - If `true` (default) include all descendants of the element. If `false` then
* only query direct children of the element.
* * **read** - Used to read a different token from the queried element.
* * **static** - True to resolve query results before change detection runs,
* false to resolve after change detection. Defaults to false.
*
* The following selectors are supported.
* * Any class with the `@Component` or `@Directive` decorator
* * A template reference variable as a string (e.g. query `<my-component #cmp></my-component>`
* with `@ContentChild('cmp')`)
* * Any provider defined in the child component tree of the current component (e.g.
* `@ContentChild(SomeService) someService: SomeService`)
* * Any provider defined through a string token (e.g. `@ContentChild('someToken') someTokenVal:
* any`)
* * A `TemplateRef` (e.g. query `<ng-template></ng-template>` with `@ContentChild(TemplateRef)
* template;`)
*
* The following values are supported by `read`:
* * Any class with the `@Component` or `@Directive` decorator
* * Any provider defined on the injector of the component that is matched by the `selector` of
* this query
* * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
* * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
*
* Difference between dynamic and static queries:
*
* | Queries | Details |
* |:--- |:--- |
* | Dynamic queries \(`static: false`\) | The query resolves before the `ngAfterContentInit()`
* callback is called. The result will be updated for changes to your view, such as changes to
* `ngIf` and `ngFor` blocks. | | Static queries \(`static: true`\) | The query resolves once
* the view has been created, but before change detection runs (before the `ngOnInit()` callback
* is called). The result, though, will never be updated to reflect changes to your view, such as
* changes to `ngIf` and `ngFor` blocks. |
*
* @usageNotes
*
* {@example core/di/ts/contentChild/content_child_howto.ts region='HowTo'}
*
* ### Example
*
* {@example core/di/ts/contentChild/content_child_example.ts region='Component'}
*
* @Annotation
*/
(selector: ProviderToken<unknown> | Function | string, opts?: {
descendants?: boolean;
read?: any;
static?: boolean;
}): any;
new (selector: ProviderToken<unknown> | Function | string, opts?: {
descendants?: boolean;
read?: any;
static?: boolean;
}): ContentChild;
}
/**
* Type of the ContentChild metadata.
*
* @publicApi
*/
type ContentChild = Query;
/**
* ContentChild decorator and metadata.
*
*
* @Annotation
*
* @publicApi
*/
declare const ContentChild: ContentChildDecorator;
/**
* Type of the ViewChildren decorator / constructor function.
*
* @see {@link ViewChildren}
*
* @publicApi
*/
interface ViewChildrenDecorator {
/**
* @description
* Property decorator that configures a view query.
*
* Use to get the `QueryList` of elements or directives from the view DOM.
* Any time a child element is added, removed, or moved, the query list will be updated,
* and the changes observable of the query list will emit a new value.
*
* View queries are set before the `ngAfterViewInit` callback is called.
*
* **Metadata Properties**:
*
* * **selector** - The directive type or the name used for querying.
* * **read** - Used to read a different token from the queried elements.
* * **emitDistinctChangesOnly** - The ` QueryList#changes` observable will emit new values only
* if the QueryList result has changed. When `false` the `changes` observable might emit even
* if the QueryList has not changed.
* ** Note: *** This config option is **deprecated**, it will be permanently set to `true` and
* removed in future versions of Angular.
*
* The following selectors are supported.
* * Any class with the `@Component` or `@Directive` decorator
* * A template reference variable as a string (e.g. query `<my-component #cmp></my-component>`
* with `@ViewChildren('cmp')`)
* * Any provider defined in the child component tree of the current component (e.g.
* `@ViewChildren(SomeService) someService!: SomeService`)
* * Any provider defined through a string token (e.g. `@ViewChildren('someToken')
* someTokenVal!: any`)
* * A `TemplateRef` (e.g. query `<ng-template></ng-template>` with `@ViewChildren(TemplateRef)
* template;`)
*
* In addition, multiple string selectors can be separated with a comma (e.g.
* `@ViewChildren('cmp1,cmp2')`)
*
* The following values are supported by `read`:
* * Any class with the `@Component` or `@Directive` decorator
* * Any provider defined on the injector of the component that is matched by the `selector` of
* this query
* * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
* * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
*
* @usageNotes
*
* {@example core/di/ts/viewChildren/view_children_howto.ts region='HowTo'}
*
* ### Another example
*
* {@example core/di/ts/viewChildren/view_children_example.ts region='Component'}
*
* @Annotation
*/
(selector: ProviderToken<unknown> | Function | string, opts?: {
read?: any;
emitDistinctChangesOnly?: boolean;
}): any;
new (selector: ProviderToken<unknown> | Function | string, opts?: {
read?: any;
emitDistinctChangesOnly?: boolean;
}): ViewChildren;
}
/**
* Type of the ViewChildren metadata.
*
* @publicApi
*/
type ViewChildren = Query;
/**
* ViewChildren decorator and metadata.
*
* @Annotation
* @publicApi
*/
declare const ViewChildren: ViewChildrenDecorator;
/**
* Type of the ViewChild decorator / constructor function.
*
* @see {@link ViewChild}
* @publicApi
*/
interface ViewChildDecorator {
/**
* @description
* Property decorator that configures a view query.
* The change detector looks for the first element or the directive matching the selector
* in the view DOM. If the view DOM changes, and a new child matches the selector,
* the property is updated.
*
* **Metadata Properties**:
*
* * **selector** - The directive type or the name used for querying.
* * **read** - Used to read a different token from the queried elements.
* * **static** - `true` to resolve query results before change detection runs,
* `false` to resolve after change detection. Defaults to `false`.
*
*
* The following selectors are supported.
* * Any class with the `@Component` or `@Directive` decorator
* * A template reference variable as a string (e.g. query `<my-component #cmp></my-component>`
* with `@ViewChild('cmp')`)
* * Any provider defined in the child component tree of the current component (e.g.
* `@ViewChild(SomeService) someService: SomeService`)
* * Any provider defined through a string token (e.g. `@ViewChild('someToken') someTokenVal:
* any`)
* * A `TemplateRef` (e.g. query `<ng-template></ng-template>` with `@ViewChild(TemplateRef)
* template;`)
*
* The following values are supported by `read`:
* * Any class with the `@Component` or `@Directive` decorator
* * Any provider defined on the injector of the component that is matched by the `selector` of
* this query
* * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
* * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
*
* Difference between dynamic and static queries:
* * Dynamic queries \(`static: false`\) - The query resolves before the `ngAfterViewInit()`
* callback is called. The result will be updated for changes to your view, such as changes to
* `ngIf` and `ngFor` blocks.
* * Static queries \(`static: true`\) - The query resolves once
* the view has been created, but before change detection runs (before the `ngOnInit()` callback
* is called). The result, though, will never be updated to reflect changes to your view, such as
* changes to `ngIf` and `ngFor` blocks.
*
* @usageNotes
*
* ### Example 1
*
* {@example core/di/ts/viewChild/view_child_example.ts region='Component'}
*
* ### Example 2
*
* {@example core/di/ts/viewChild/view_child_howto.ts region='HowTo'}
*
* @Annotation
*/
(selector: ProviderToken<unknown> | Function | string, opts?: {
read?: any;
static?: boolean;
}): any;
new (selector: ProviderToken<unknown> | Function | string, opts?: {
read?: any;
static?: boolean;
}): ViewChild;
}
/**
* Type of the ViewChild metadata.
*
* @publicApi
*/
type ViewChild = Query;
/**
* ViewChild decorator and metadata.
*
* @Annotation
* @publicApi
*/
declare const ViewChild: ViewChildDecorator;
/**
* A type describing supported iterable types.
*
* @publicApi
*/
type NgIterable<T> = Array<T> | Iterable<T>;
/**
* A strategy for tracking changes over time to an iterable. Used by {@link /api/common/NgForOf NgForOf} to
* respond to changes in an iterable by effecting equivalent changes in the DOM.
*
* @publicApi
*/
interface IterableDiffer<V> {
/**
* Compute a difference between the previous state and the new `object` state.
*
* @param object containing the new value.
* @returns an object describing the difference. The return value is only valid until the next
* `diff()` invocation.
*/
diff(object: NgIterable<V> | undefined | null): IterableChanges<V> | null;
}
/**
* An object describing the changes in the `Iterable` collection since last time
* `IterableDiffer#diff()` was invoked.
*
* @publicApi
*/
interface IterableChanges<V> {
/**
* Iterate over all changes. `IterableChangeRecord` will contain information about changes
* to each item.
*/
forEachItem(fn: (record: IterableChangeRecord<V>) => void): void;
/**
* Iterate over a set of operations which when applied to the original `Iterable` will produce the
* new `Iterable`.
*
* NOTE: These are not necessarily the actual operations which were applied to the original
* `Iterable`, rather these are a set of computed operations which may not be the same as the
* ones applied.
*
* @param record A change which needs to be applied
* @param previousIndex The `IterableChangeRecord#previousIndex` of the `record` refers to the
* original `Iterable` location, where as `previousIndex` refers to the transient location
* of the item, after applying the operations up to this point.
* @param currentIndex The `IterableChangeRecord#currentIndex` of the `record` refers to the
*