@angular/core
- Version 19.2.8
- Published
- 9.94 MB
- 1 dependency
- MIT license
Install
npm i @angular/core
yarn add @angular/core
pnpm add @angular/core
Overview
Angular - the core framework
Index
Variables
- AFTER_RENDER_SEQUENCES_TO_ADD
- ANIMATION_MODULE_TYPE
- APP_BOOTSTRAP_LISTENER
- APP_ID
- APP_INITIALIZER
- Attribute
- CHILD_HEAD
- CHILD_TAIL
- CLEANUP
- COMPILER_OPTIONS
- Component
- CONTAINERS
- contentChild
- ContentChild
- ContentChildren
- CONTEXT
- createNgModuleRef
- CSP_NONCE
- CUSTOM_ELEMENTS_SCHEMA
- DECLARATION_COMPONENT_VIEW
- DECLARATION_LCONTAINER
- DECLARATION_VIEW
- DEFAULT_CURRENCY_CODE
- DEFER_BLOCK_ID
- DEFER_BLOCK_STATE
- defineInjectable
- DEHYDRATED_VIEWS
- Directive
- DISCONNECTED_NODES
- EFFECTS
- EFFECTS_TO_SCHEDULE
- ELEMENT_CONTAINERS
- ELEMENT_MARKER
- EMBEDDED_VIEW_INJECTOR
- ENVIRONMENT
- ENVIRONMENT_INITIALIZER
- EventEmitter
- FLAGS
- GLOBAL_PUBLISH_EXPANDO_KEY
- globalUtilsFunctions
- Host
- HOST
- HOST_TAG_NAME
- HostBinding
- HostListener
- HYDRATION
- HYDRATION_INFO_KEY
- I18N_DATA
- ICU_MARKER
- ID
- Inject
- Injectable
- INJECTOR
- INJECTOR$1
- input
- Input
- LOCALE_ID
- model
- MOVED_VIEWS
- MULTIPLIER
- NATIVE
- NEXT
- NgModule
- NO_ERRORS_SCHEMA
- NODES
- NUM_ROOT_NODES
- ON_DESTROY_HOOKS
- Optional
- Output
- ɵALLOW_MULTIPLE_PLATFORMS
- ɵCONTAINER_HEADER_OFFSET
- ɵDEFAULT_LOCALE_ID
- ɵdefaultIterableDiffers
- ɵdefaultKeyValueDiffers
- ɵDEFER_BLOCK_CONFIG
- ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR
- ɵdepsTracker
- ɵENABLE_ROOT_COMPONENT_BOOTSTRAP
- ɵglobal
- ɵIMAGE_CONFIG
- ɵIMAGE_CONFIG_DEFAULTS
- ɵINJECTOR_SCOPE
- ɵINPUT_SIGNAL_BRAND_READ_TYPE
- ɵINPUT_SIGNAL_BRAND_WRITE_TYPE
- ɵINTERNAL_APPLICATION_ERROR_HANDLER
- ɵIS_HYDRATION_DOM_REUSE_ENABLED
- ɵIS_INCREMENTAL_HYDRATION_ENABLED
- ɵJSACTION_EVENT_CONTRACT
- ɵNG_COMP_DEF
- ɵNG_DIR_DEF
- ɵNG_ELEMENT_ID
- ɵNG_INJ_DEF
- ɵNG_MOD_DEF
- ɵNG_PIPE_DEF
- ɵNG_PROV_DEF
- ɵNO_CHANGE
- ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR
- ɵPERFORMANCE_MARK_PREFIX
- ɵPROVIDED_NG_ZONE
- ɵSIGNAL
- ɵSSR_CONTENT_INTEGRITY_MARKER
- ɵTESTABILITY
- ɵTESTABILITY_GETTER
- ɵTracingService
- ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT
- ɵWRITABLE_SIGNAL
- ɵXSS_SECURITY_URL
- ɵZONELESS_ENABLED
- PACKAGE_ROOT_URL
- PARENT
- Pipe
- PLATFORM_ID
- PLATFORM_INITIALIZER
- PREORDER_HOOK_FLAGS
- QUERIES
- REACTIVE_TEMPLATE_CONSUMER
- RENDERER
- REQUEST
- REQUEST_CONTEXT
- RESPONSE_INIT
- Self
- SkipSelf
- T_HOST
- TEMPLATE_ID
- TEMPLATES
- TRANSLATIONS
- TRANSLATIONS_FORMAT
- TVIEW
- Type
- TYPE
- VERSION
- VIEW_REFS
- viewChild
- ViewChild
- ViewChildren
Functions
- afterNextRender()
- afterRender()
- afterRenderEffect()
- applyChanges()
- asNativeElements()
- assertInInjectionContext()
- assertNotInReactiveContext()
- assertPlatform()
- booleanAttribute()
- computed()
- contentChildren()
- createComponent()
- createEnvironmentInjector()
- createNgModule()
- createPlatform()
- createPlatformFactory()
- destroyPlatform()
- effect()
- enableProdMode()
- forwardRef()
- getComponent()
- getContext()
- getDebugNode()
- getDeferBlocks()
- getDependenciesFromInjectable()
- getDirectiveMetadata()
- getInjector()
- getInjectorMetadata()
- getInjectorProviders()
- getInjectorResolutionPath()
- getListeners()
- getModuleFactory()
- getNgModuleById()
- getOwningComponent()
- getPlatform()
- getRootComponents()
- getSignalGraph()
- importProvidersFrom()
- inject()
- isDevMode()
- isSignal()
- isStandalone()
- linkedSignal()
- makeEnvironmentProviders()
- makeStateKey()
- mergeApplicationConfig()
- numberAttribute()
- output()
- ɵ_sanitizeHtml()
- ɵ_sanitizeUrl()
- ɵallowSanitizationBypassAndThrow()
- ɵannotateForHydration()
- ɵbypassSanitizationTrustHtml()
- ɵbypassSanitizationTrustResourceUrl()
- ɵbypassSanitizationTrustScript()
- ɵbypassSanitizationTrustStyle()
- ɵbypassSanitizationTrustUrl()
- ɵclearResolutionOfComponentResourcesQueue()
- ɵcompileComponent()
- ɵcompileDirective()
- ɵcompileNgModule()
- ɵcompileNgModuleDefs()
- ɵcompileNgModuleFactory()
- ɵcompilePipe()
- ɵconvertToBitFlags()
- ɵcreateInjector()
- ɵdetectChangesInViewIfRequired()
- ɵdevModeEqual()
- ɵdisableProfiling()
- ɵenableProfiling()
- ɵfindLocaleData()
- ɵflushModuleScopingQueueAsMuchAsPossible()
- ɵformatRuntimeError()
- ɵgenerateStandaloneInDeclarationsError()
- ɵgetAsyncClassMetadataFn()
- ɵgetClosestComponentName()
- ɵgetDebugNode()
- ɵgetDeferBlocks()
- ɵgetDirectives()
- ɵgetHostElement()
- ɵgetInjectableDef()
- ɵgetLContext()
- ɵgetLocaleCurrencyCode()
- ɵgetLocalePluralCase()
- ɵgetOutputDestroyRef()
- ɵgetSanitizationBypassType()
- ɵgetUnknownElementStrictMode()
- ɵgetUnknownPropertyStrictMode()
- ɵinjectChangeDetectorRef()
- ɵinternalCreateApplication()
- ɵinternalProvideZoneChangeDetection()
- ɵisBoundToModule()
- ɵisComponentDefPendingResolution()
- ɵisEnvironmentProviders()
- ɵisInjectable()
- ɵisNgModule()
- ɵisPromise()
- ɵisSubscribable()
- ɵisViewDirty()
- ɵmarkForRefresh()
- ɵmicrotaskEffect()
- ɵnoSideEffects()
- ɵɵadvance()
- ɵɵattachSourceLocations()
- ɵɵattribute()
- ɵɵattributeInterpolate1()
- ɵɵattributeInterpolate2()
- ɵɵattributeInterpolate3()
- ɵɵattributeInterpolate4()
- ɵɵattributeInterpolate5()
- ɵɵattributeInterpolate6()
- ɵɵattributeInterpolate7()
- ɵɵattributeInterpolate8()
- ɵɵattributeInterpolateV()
- ɵɵclassMap()
- ɵɵclassMapInterpolate1()
- ɵɵclassMapInterpolate2()
- ɵɵclassMapInterpolate3()
- ɵɵclassMapInterpolate4()
- ɵɵclassMapInterpolate5()
- ɵɵclassMapInterpolate6()
- ɵɵclassMapInterpolate7()
- ɵɵclassMapInterpolate8()
- ɵɵclassMapInterpolateV()
- ɵɵclassProp()
- ɵɵcomponentInstance()
- ɵɵconditional()
- ɵɵcontentQuery()
- ɵɵcontentQuerySignal()
- ɵɵCopyDefinitionFeature()
- ɵɵdeclareLet()
- ɵɵdefer()
- ɵɵdeferEnableTimerScheduling()
- ɵɵdeferHydrateNever()
- ɵɵdeferHydrateOnHover()
- ɵɵdeferHydrateOnIdle()
- ɵɵdeferHydrateOnImmediate()
- ɵɵdeferHydrateOnInteraction()
- ɵɵdeferHydrateOnTimer()
- ɵɵdeferHydrateOnViewport()
- ɵɵdeferHydrateWhen()
- ɵɵdeferOnHover()
- ɵɵdeferOnIdle()
- ɵɵdeferOnImmediate()
- ɵɵdeferOnInteraction()
- ɵɵdeferOnTimer()
- ɵɵdeferOnViewport()
- ɵɵdeferPrefetchOnHover()
- ɵɵdeferPrefetchOnIdle()
- ɵɵdeferPrefetchOnImmediate()
- ɵɵdeferPrefetchOnInteraction()
- ɵɵdeferPrefetchOnTimer()
- ɵɵdeferPrefetchOnViewport()
- ɵɵdeferPrefetchWhen()
- ɵɵdeferWhen()
- ɵɵdefineComponent()
- ɵɵdefineDirective()
- ɵɵdefineInjectable()
- ɵɵdefineInjector()
- ɵɵdefineNgModule()
- ɵɵdefinePipe()
- ɵɵdirectiveInject()
- ɵɵdisableBindings()
- ɵɵelement()
- ɵɵelementContainer()
- ɵɵelementContainerEnd()
- ɵɵelementContainerStart()
- ɵɵelementEnd()
- ɵɵelementStart()
- ɵɵenableBindings()
- ɵɵExternalStylesFeature()
- ɵɵgetComponentDepsFactory()
- ɵɵgetCurrentView()
- ɵɵgetInheritedFactory()
- ɵɵHostDirectivesFeature()
- ɵɵhostProperty()
- ɵɵi18n()
- ɵɵi18nApply()
- ɵɵi18nAttributes()
- ɵɵi18nEnd()
- ɵɵi18nExp()
- ɵɵi18nPostprocess()
- ɵɵi18nStart()
- ɵɵInheritDefinitionFeature()
- ɵɵinject()
- ɵɵinjectAttribute()
- ɵɵinvalidFactory()
- ɵɵinvalidFactoryDep()
- ɵɵlistener()
- ɵɵloadQuery()
- ɵɵnamespaceHTML()
- ɵɵnamespaceMathML()
- ɵɵnamespaceSVG()
- ɵɵnextContext()
- ɵɵngDeclareClassMetadata()
- ɵɵngDeclareClassMetadataAsync()
- ɵɵngDeclareComponent()
- ɵɵngDeclareDirective()
- ɵɵngDeclareFactory()
- ɵɵngDeclareInjectable()
- ɵɵngDeclareInjector()
- ɵɵngDeclareNgModule()
- ɵɵngDeclarePipe()
- ɵɵNgOnChangesFeature()
- ɵɵpipe()
- ɵɵpipeBind1()
- ɵɵpipeBind2()
- ɵɵpipeBind3()
- ɵɵpipeBind4()
- ɵɵpipeBindV()
- ɵɵprojection()
- ɵɵprojectionDef()
- ɵɵproperty()
- ɵɵpropertyInterpolate()
- ɵɵpropertyInterpolate1()
- ɵɵpropertyInterpolate2()
- ɵɵpropertyInterpolate3()
- ɵɵpropertyInterpolate4()
- ɵɵpropertyInterpolate5()
- ɵɵpropertyInterpolate6()
- ɵɵpropertyInterpolate7()
- ɵɵpropertyInterpolate8()
- ɵɵpropertyInterpolateV()
- ɵɵProvidersFeature()
- ɵɵpureFunction0()
- ɵɵpureFunction1()
- ɵɵpureFunction2()
- ɵɵpureFunction3()
- ɵɵpureFunction4()
- ɵɵpureFunction5()
- ɵɵpureFunction6()
- ɵɵpureFunction7()
- ɵɵpureFunction8()
- ɵɵpureFunctionV()
- ɵɵqueryAdvance()
- ɵɵqueryRefresh()
- ɵɵreadContextLet()
- ɵɵreference()
- ɵɵregisterNgModuleType()
- ɵɵrepeater()
- ɵɵrepeaterCreate()
- ɵɵrepeaterTrackByIdentity()
- ɵɵrepeaterTrackByIndex()
- ɵɵreplaceMetadata()
- ɵɵresetView()
- ɵɵresolveBody()
- ɵɵresolveDocument()
- ɵɵresolveWindow()
- ɵɵrestoreView()
- ɵɵsanitizeHtml()
- ɵɵsanitizeResourceUrl()
- ɵɵsanitizeScript()
- ɵɵsanitizeStyle()
- ɵɵsanitizeUrl()
- ɵɵsanitizeUrlOrResourceUrl()
- ɵɵsetComponentScope()
- ɵɵsetNgModuleScope()
- ɵɵstoreLet()
- ɵɵstyleMap()
- ɵɵstyleMapInterpolate1()
- ɵɵstyleMapInterpolate2()
- ɵɵstyleMapInterpolate3()
- ɵɵstyleMapInterpolate4()
- ɵɵstyleMapInterpolate5()
- ɵɵstyleMapInterpolate6()
- ɵɵstyleMapInterpolate7()
- ɵɵstyleMapInterpolate8()
- ɵɵstyleMapInterpolateV()
- ɵɵstyleProp()
- ɵɵstylePropInterpolate1()
- ɵɵstylePropInterpolate2()
- ɵɵstylePropInterpolate3()
- ɵɵstylePropInterpolate4()
- ɵɵstylePropInterpolate5()
- ɵɵstylePropInterpolate6()
- ɵɵstylePropInterpolate7()
- ɵɵstylePropInterpolate8()
- ɵɵstylePropInterpolateV()
- ɵɵsyntheticHostListener()
- ɵɵsyntheticHostProperty()
- ɵɵtemplate()
- ɵɵtemplateRefExtractor()
- ɵɵtext()
- ɵɵtextInterpolate()
- ɵɵtextInterpolate1()
- ɵɵtextInterpolate2()
- ɵɵtextInterpolate3()
- ɵɵtextInterpolate4()
- ɵɵtextInterpolate5()
- ɵɵtextInterpolate6()
- ɵɵtextInterpolate7()
- ɵɵtextInterpolate8()
- ɵɵtextInterpolateV()
- ɵɵtrustConstantHtml()
- ɵɵtrustConstantResourceUrl()
- ɵɵtwoWayBindingSet()
- ɵɵtwoWayListener()
- ɵɵtwoWayProperty()
- ɵɵvalidateIframeAttribute()
- ɵɵviewQuery()
- ɵɵviewQuerySignal()
- ɵpatchComponentDefWithScope()
- ɵperformanceMarkFeature()
- ɵpublishExternalGlobalUtil()
- ɵreadHydrationInfo()
- ɵregisterLocaleData()
- ɵrenderDeferBlockState()
- ɵresetCompiledComponents()
- ɵresetJitOptions()
- ɵresolveComponentResources()
- ɵrestoreComponentResolutionQueue()
- ɵsetAllowDuplicateNgModuleIdsForTest()
- ɵsetAlternateWeakRefImpl()
- ɵsetClassDebugInfo()
- ɵsetClassMetadata()
- ɵsetClassMetadataAsync()
- ɵsetCurrentInjector()
- ɵsetDocument()
- ɵsetInjectorProfilerContext()
- ɵsetLocaleId()
- ɵsetUnknownElementStrictMode()
- ɵsetUnknownPropertyStrictMode()
- ɵstartMeasuring()
- ɵstopMeasuring()
- ɵstore()
- ɵstringify()
- ɵtransitiveScopesFor()
- ɵtriggerResourceLoading()
- ɵtruncateMiddle()
- ɵunregisterLocaleData()
- ɵunwrapSafeValue()
- ɵunwrapWritableSignal()
- ɵwithDomHydration()
- ɵwithEventReplay()
- ɵwithI18nSupport()
- ɵwithIncrementalHydration()
- platformCore()
- provideAppInitializer()
- provideEnvironmentInitializer()
- provideExperimentalCheckNoChangesForDebug()
- provideExperimentalZonelessChangeDetection()
- providePlatformInitializer()
- provideZoneChangeDetection()
- reflectComponentType()
- resolveForwardRef()
- resource()
- runInInjectionContext()
- setTestabilityGetter()
- signal()
- untracked()
- viewChildren()
Classes
Interfaces
Enums
ɵProfilerEvent
- AfterRenderHooksEnd
- AfterRenderHooksStart
- BootstrapApplicationEnd
- BootstrapApplicationStart
- BootstrapComponentEnd
- BootstrapComponentStart
- ChangeDetectionEnd
- ChangeDetectionStart
- ChangeDetectionSyncEnd
- ChangeDetectionSyncStart
- ComponentEnd
- ComponentStart
- DeferBlockStateEnd
- DeferBlockStateStart
- DynamicComponentEnd
- DynamicComponentStart
- HostBindingsUpdateEnd
- HostBindingsUpdateStart
- LifecycleHookEnd
- LifecycleHookStart
- OutputEnd
- OutputStart
- TemplateCreateEnd
- TemplateCreateStart
- TemplateUpdateEnd
- TemplateUpdateStart
ɵRuntimeErrorCode
- APPLICATION_REF_ALREADY_DESTROYED
- ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT
- ASYNC_INITIALIZERS_STILL_RUNNING
- BOOTSTRAP_COMPONENTS_NOT_FOUND
- COMPONENT_ID_COLLISION
- CYCLIC_DI_DEPENDENCY
- DEFER_IN_HMR_MODE
- DEFER_LOADING_FAILED
- DUPLICATE_DIRECTIVE
- EXPORT_NOT_FOUND
- EXPRESSION_CHANGED_AFTER_CHECKED
- HOST_DIRECTIVE_COMPONENT
- HOST_DIRECTIVE_CONFLICTING_ALIAS
- HOST_DIRECTIVE_NOT_STANDALONE
- HOST_DIRECTIVE_UNDEFINED_BINDING
- HOST_DIRECTIVE_UNRESOLVABLE
- HYDRATION_MISSING_NODE
- HYDRATION_MISSING_SIBLINGS
- HYDRATION_NODE_MISMATCH
- HYDRATION_STABLE_TIMEDOUT
- IMAGE_PERFORMANCE_WARNING
- IMPORT_PROVIDERS_FROM_STANDALONE
- INFINITE_CHANGE_DETECTION
- INJECTOR_ALREADY_DESTROYED
- INVALID_DIFFER_INPUT
- INVALID_EVENT_BINDING
- INVALID_FACTORY_DEPENDENCY
- INVALID_I18N_STRUCTURE
- INVALID_INHERITANCE
- INVALID_INJECTION_TOKEN
- INVALID_MULTI_PROVIDER
- INVALID_SKIP_HYDRATION_HOST
- LOOP_TRACK_DUPLICATE_KEYS
- LOOP_TRACK_RECREATE
- MISCONFIGURED_INCREMENTAL_HYDRATION
- MISSING_DOCUMENT
- MISSING_GENERATED_DEF
- MISSING_HYDRATION_ANNOTATIONS
- MISSING_INJECTION_CONTEXT
- MISSING_INJECTION_TOKEN
- MISSING_LOCALE_DATA
- MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP
- MISSING_SSR_CONTENT_INTEGRITY_MARKER
- MISSING_ZONEJS
- MULTIPLE_COMPONENTS_MATCH
- MULTIPLE_MATCHING_PIPES
- MULTIPLE_PLATFORMS
- NO_SUPPORTING_DIFFER_FACTORY
- OUTPUT_REF_DESTROYED
- PIPE_NOT_FOUND
- PLATFORM_ALREADY_DESTROYED
- PLATFORM_NOT_FOUND
- PROVIDED_BOTH_ZONE_AND_ZONELESS
- PROVIDER_IN_WRONG_CONTEXT
- PROVIDER_NOT_FOUND
- RECURSIVE_APPLICATION_REF_TICK
- RENDERER_NOT_FOUND
- REQUIRE_SYNC_WITHOUT_SYNC_EMIT
- REQUIRED_INPUT_NO_VALUE
- REQUIRED_MODEL_NO_VALUE
- REQUIRED_QUERY_NO_VALUE
- RUNTIME_DEPS_INVALID_IMPORTED_TYPE
- RUNTIME_DEPS_ORPHAN_COMPONENT
- SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT
- TEMPLATE_STRUCTURE_ERROR
- TYPE_IS_NOT_STANDALONE
- UNEXPECTED_ZONE_STATE
- UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE
- UNINITIALIZED_LET_ACCESS
- UNKNOWN_BINDING
- UNKNOWN_ELEMENT
- UNSAFE_IFRAME_ATTRS
- UNSAFE_VALUE_IN_RESOURCE_URL
- UNSAFE_VALUE_IN_SCRIPT
- UNSUPPORTED_PROJECTION_DOM_NODES
- VIEW_ALREADY_ATTACHED
- VIEW_ALREADY_DESTROYED
Type Aliases
- CompilerOptions
- ContentChild
- ContentChildren
- EffectCleanupFn
- EffectCleanupRegisterFn
- EnvironmentProviders
- ImportedNgModuleProviders
- ImportProvidersSource
- InjectableProvider
- InputOptionsWithoutTransform
- InputOptionsWithTransform
- NgIterable
- ɵCssSelectorList
- ɵFirstAvailable
- ɵFirstAvailableSignal
- ɵGlobalDevModeUtils
- ɵHydratedNode
- ɵHydrationInfo
- ɵImageConfig
- ɵNavigationTypeString
- ɵɵComponentDeclaration
- ɵɵDirectiveDeclaration
- ɵɵFactoryDeclaration
- ɵɵInjectorDeclaration
- ɵɵNgModuleDeclaration
- ɵɵPipeDeclaration
- ɵUnwrapDirectiveSignalInputs
- ɵWritable
- Predicate
- Provider
- ProviderToken
- ResourceLoader
- ResourceOptions
- ResourceStreamingLoader
- ResourceStreamItem
- Signal
- StateKey
- StaticProvider
- ValueEqualityFn
- ViewChild
- ViewChildren
Namespaces
Variables
variable AFTER_RENDER_SEQUENCES_TO_ADD
const AFTER_RENDER_SEQUENCES_TO_ADD: number;
variable ANIMATION_MODULE_TYPE
const ANIMATION_MODULE_TYPE: InjectionToken<'NoopAnimations' | 'BrowserAnimations'>;
A [DI token](api/core/InjectionToken) that indicates which animations module has been loaded.
variable APP_BOOTSTRAP_LISTENER
const APP_BOOTSTRAP_LISTENER: InjectionToken< readonly ((compRef: ComponentRef$1<any>) => void)[]>;
A DI token that provides a set of callbacks to be called for every component that is bootstrapped.
Each callback must take a
ComponentRef
instance and return nothing.(componentRef: ComponentRef) => void
variable APP_ID
const APP_ID: InjectionToken<string>;
A DI token representing a string ID, used primarily for prefixing application attributes and CSS styles when ViewEncapsulation#Emulated is being used.
The token is needed in cases when multiple applications are bootstrapped on a page (for example, using
bootstrapApplication
calls). In this case, ensure that those applications have differentAPP_ID
value setup. For example:bootstrapApplication(ComponentA, {providers: [{ provide: APP_ID, useValue: 'app-a' },// ... other providers ...]});bootstrapApplication(ComponentB, {providers: [{ provide: APP_ID, useValue: 'app-b' },// ... other providers ...]});By default, when there is only one application bootstrapped, you don't need to provide the
APP_ID
token (theng
will be used as an app ID).
variable APP_INITIALIZER
const APP_INITIALIZER: InjectionToken< readonly (() => Observable<unknown> | Promise<unknown> | void)[]>;
A DI token that you can use to provide one or more initialization functions.
The provided functions are injected at application startup and executed during app initialization. If any of these functions returns a Promise or an Observable, initialization does not complete until the Promise is resolved or the Observable is completed.
You can, for example, create a factory function that loads language data or an external configuration, and provide that function to the
APP_INITIALIZER
token. The function is executed during the application bootstrap process, and the needed data is available on startup.Note that the provided initializer is run in the injection context.
See Also
The following example illustrates how to configure a multi-provider using
APP_INITIALIZER
token and a function returning a promise. ### Example with NgModule-based applicationfunction initializeApp(): Promise<any> {const http = inject(HttpClient);return firstValueFrom(http.get("https://someUrl.com/api/user").pipe(tap(user => { ... })));}@NgModule({imports: [BrowserModule],declarations: [AppComponent],bootstrap: [AppComponent],providers: [{provide: APP_INITIALIZER,useValue: initializeApp,multi: true,}]})export class AppModule {}### Example with standalone application
function initializeApp() {const http = inject(HttpClient);return firstValueFrom(http.get("https://someUrl.com/api/user").pipe(tap(user => { ... })));}bootstrapApplication(App, {providers: [provideHttpClient(),{provide: APP_INITIALIZER,useValue: initializeApp,multi: true,},],});It's also possible to configure a multi-provider using
APP_INITIALIZER
token and a function returning an observable, see an example below. Note: theHttpClient
in this example is used for demo purposes to illustrate how the factory function can work with other providers available through DI.### Example with NgModule-based application
function initializeApp() {const http = inject(HttpClient);return firstValueFrom(http.get("https://someUrl.com/api/user").pipe(tap(user => { ... })));}@NgModule({imports: [BrowserModule, HttpClientModule],declarations: [AppComponent],bootstrap: [AppComponent],providers: [{provide: APP_INITIALIZER,useValue: initializeApp,multi: true,}]})export class AppModule {}### Example with standalone application
function initializeApp() {const http = inject(HttpClient);return firstValueFrom(http.get("https://someUrl.com/api/user").pipe(tap(user => { ... })));}bootstrapApplication(App, {providers: [provideHttpClient(),{provide: APP_INITIALIZER,useValue: initializeApp,multi: true,},],});
Deprecated
from v19.0.0, use provideAppInitializer instead
variable Attribute
const Attribute: AttributeDecorator;
Attribute decorator and metadata.
variable CHILD_HEAD
const CHILD_HEAD: number;
variable CHILD_TAIL
const CHILD_TAIL: number;
variable CLEANUP
const CLEANUP: number;
variable COMPILER_OPTIONS
const COMPILER_OPTIONS: InjectionToken<CompilerOptions[]>;
Token to provide CompilerOptions in the platform injector.
variable Component
const Component: ComponentDecorator;
Component decorator and metadata.
variable CONTAINERS
const CONTAINERS: string;
variable contentChild
const contentChild: ContentChildFunction;
Initializes a content child query. Consider using
contentChild.required
for queries that should always match.Create a child query in your component by declaring a class field and initializing it with the
contentChild()
function.@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>}
variable ContentChild
const ContentChild: ContentChildDecorator;
ContentChild decorator and metadata.
variable ContentChildren
const ContentChildren: ContentChildrenDecorator;
ContentChildren decorator and metadata.
variable CONTEXT
const CONTEXT: number;
variable createNgModuleRef
const createNgModuleRef: <T>( ngModule: Type$1<T>, parentInjector?: Injector) => NgModuleRef$1<T>;
The
createNgModule
function alias for backwards-compatibility. Please avoid using it directly and usecreateNgModule
instead.Deprecated
Use
createNgModule
instead.
variable CSP_NONCE
const CSP_NONCE: InjectionToken<string>;
Token used to configure the [Content Security Policy](https://web.dev/strict-csp/) nonce that Angular will apply when inserting inline styles. If not provided, Angular will look up its value from the
ngCspNonce
attribute of the application root node.
variable CUSTOM_ELEMENTS_SCHEMA
const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata;
Defines a schema that allows an NgModule to contain the following: - Non-Angular elements named with dash case (
-
). - Element properties named with dash case (-
). Dash case is the naming convention for custom elements.
variable DECLARATION_COMPONENT_VIEW
const DECLARATION_COMPONENT_VIEW: number;
variable DECLARATION_LCONTAINER
const DECLARATION_LCONTAINER: number;
variable DECLARATION_VIEW
const DECLARATION_VIEW: number;
variable DEFAULT_CURRENCY_CODE
const DEFAULT_CURRENCY_CODE: InjectionToken<string>;
Provide this token to set the default currency code your application uses for CurrencyPipe when there is no currency code passed into it. This is only used by CurrencyPipe and has no relation to locale currency. Defaults to USD if not configured.
See the [i18n guide](guide/i18n/locale-id) for more information.
The default currency code is currently always
USD
.If you need the previous behavior then set it by creating a
DEFAULT_CURRENCY_CODE
provider in your applicationNgModule
:{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}### Example
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule, {providers: [{provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }]});
variable DEFER_BLOCK_ID
const DEFER_BLOCK_ID: string;
variable DEFER_BLOCK_STATE
const DEFER_BLOCK_STATE: string;
variable defineInjectable
const defineInjectable: <T>(opts: { token: unknown; providedIn?: Type$1<any> | 'root' | 'platform' | 'any' | 'environment'; factory: () => T;}) => unknown;
Deprecated
in v8, delete after v10. This API should be used only by generated code, and that code should now use ɵɵdefineInjectable instead.
variable DEHYDRATED_VIEWS
const DEHYDRATED_VIEWS: number;
Below are constants for LContainer indices to help us look up LContainer members without having to remember the specific indices. Uglify will inline these when minifying so there shouldn't be a cost.
variable Directive
const Directive: DirectiveDecorator;
Type of the Directive metadata.
variable DISCONNECTED_NODES
const DISCONNECTED_NODES: string;
variable EFFECTS
const EFFECTS: number;
variable EFFECTS_TO_SCHEDULE
const EFFECTS_TO_SCHEDULE: number;
variable ELEMENT_CONTAINERS
const ELEMENT_CONTAINERS: string;
Keys within serialized view data structure to represent various parts. See the
SerializedView
interface below for additional information.
variable ELEMENT_MARKER
const ELEMENT_MARKER: ELEMENT_MARKER;
Marks that the next string is an element name.
See
I18nMutateOpCodes
documentation.
variable EMBEDDED_VIEW_INJECTOR
const EMBEDDED_VIEW_INJECTOR: number;
variable ENVIRONMENT
const ENVIRONMENT: number;
variable ENVIRONMENT_INITIALIZER
const ENVIRONMENT_INITIALIZER: InjectionToken<readonly (() => void)[]>;
A multi-provider token for initialization functions that will run upon construction of an environment injector.
See Also
Note: As opposed to the
APP_INITIALIZER
token, theENVIRONMENT_INITIALIZER
functions are not awaited, hence they should not beasync
.
Deprecated
from v19.0.0, use provideEnvironmentInitializer instead
variable EventEmitter
const EventEmitter: { new (isAsync?: boolean): EventEmitter<any>; new <T>(isAsync?: boolean): EventEmitter<T>; readonly prototype: EventEmitter<any>;};
variable FLAGS
const FLAGS: number;
variable GLOBAL_PUBLISH_EXPANDO_KEY
const GLOBAL_PUBLISH_EXPANDO_KEY: string;
This value reflects the property on the window where the dev tools are patched (window.ng).
variable globalUtilsFunctions
const globalUtilsFunctions: { ɵgetDependenciesFromInjectable: typeof getDependenciesFromInjectable; ɵgetInjectorProviders: typeof getInjectorProviders; ɵgetInjectorResolutionPath: typeof getInjectorResolutionPath; ɵgetInjectorMetadata: typeof getInjectorMetadata; ɵsetProfiler: (profiler: _angular_core.ɵProfiler | null) => void; ɵgetSignalGraph: typeof getSignalGraph; ɵgetDeferBlocks: typeof getDeferBlocks; getDirectiveMetadata: typeof getDirectiveMetadata; getComponent: typeof getComponent; getContext: typeof getContext; getListeners: typeof getListeners; getOwningComponent: typeof getOwningComponent; getHostElement: typeof getHostElement; getInjector: typeof getInjector; getRootComponents: typeof getRootComponents; getDirectives: typeof getDirectives; applyChanges: typeof applyChanges; isSignal: typeof isSignal;};
variable Host
const Host: HostDecorator;
Host decorator and metadata.
variable HOST
const HOST: number;
variable HOST_TAG_NAME
const HOST_TAG_NAME: InjectionToken<string>;
A token that can be used to inject the tag name of the host node.
### Injecting a tag name that is known to exist
@Directive()class MyDir {tagName: string = inject(HOST_TAG_NAME);}### Optionally injecting a tag name
@Directive()class MyDir {tagName: string | null = inject(HOST_TAG_NAME, {optional: true});}
variable HostBinding
const HostBinding: HostBindingDecorator;
variable HostListener
const HostListener: HostListenerDecorator;
variable HYDRATION
const HYDRATION: number;
variable HYDRATION_INFO_KEY
const HYDRATION_INFO_KEY: string;
variable I18N_DATA
const I18N_DATA: string;
variable ICU_MARKER
const ICU_MARKER: ICU_MARKER;
Marks that the next string is comment text need for ICU.
See
I18nMutateOpCodes
documentation.
variable ID
const ID: number;
variable Inject
const Inject: InjectDecorator;
Inject decorator and metadata.
variable Injectable
const Injectable: InjectableDecorator;
Injectable decorator and metadata.
variable INJECTOR
const INJECTOR: InjectionToken<Injector>;
An InjectionToken that gets the current
Injector
forcreateInjector()
-style injectors.Requesting this token instead of
Injector
allowsStaticInjector
to be tree-shaken from a project.
variable INJECTOR$1
const INJECTOR$1: number;
variable input
const input: InputFunction;
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 theinput.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.To use signal-based inputs, import
input
from@angular/core
.import {input} from '@angular/core`;Inside your component, introduce a new class member and initialize it with a call to
input
orinput.required
.@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.
<span>{{firstName()}}</span>
variable Input
const Input: InputDecorator;
variable LOCALE_ID
const LOCALE_ID: InjectionToken<string>;
Provide this token to set the locale of your application. It is used for i18n extraction, by i18n pipes (DatePipe, I18nPluralPipe, CurrencyPipe, DecimalPipe and PercentPipe) and by ICU expressions.
See the [i18n guide](guide/i18n/locale-id) for more information.
### Example
import { LOCALE_ID } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule, {providers: [{provide: LOCALE_ID, useValue: 'en-US' }]});
variable model
const model: ModelFunction;
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 appendingChange
.To use
model()
, import the function from@angular/core
.import {model} from '@angular/core`;Inside your component, introduce a new class member and initialize it with a call to
model
ormodel.required
.@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.<span>{{firstName()}}</span>Updating the
model
is equivalent to updating a writable signal.updateName(newFirstName: string): void {this.firstName.set(newFirstName);}
variable MOVED_VIEWS
const MOVED_VIEWS: number;
variable MULTIPLIER
const MULTIPLIER: string;
variable NATIVE
const NATIVE: number;
variable NEXT
const NEXT: number;
variable NgModule
const NgModule: NgModuleDecorator;
variable NO_ERRORS_SCHEMA
const NO_ERRORS_SCHEMA: SchemaMetadata;
Defines a schema that allows any property on any element.
This schema allows you to ignore the errors related to any unknown elements or properties in a template. The usage of this schema is generally discouraged because it prevents useful validation and may hide real errors in your template. Consider using the
CUSTOM_ELEMENTS_SCHEMA
instead.
variable NODES
const NODES: string;
variable NUM_ROOT_NODES
const NUM_ROOT_NODES: string;
variable ON_DESTROY_HOOKS
const ON_DESTROY_HOOKS: number;
variable Optional
const Optional: OptionalDecorator;
Optional decorator and metadata.
variable Output
const Output: OutputDecorator;
variable ɵALLOW_MULTIPLE_PLATFORMS
const ɵALLOW_MULTIPLE_PLATFORMS: InjectionToken<boolean>;
Internal token to indicate whether having multiple bootstrapped platform should be allowed (only one bootstrapped platform is allowed by default). This token helps to support SSR scenarios.
variable ɵCONTAINER_HEADER_OFFSET
const ɵCONTAINER_HEADER_OFFSET: number;
Size of LContainer's header. Represents the index after which all views in the container will be inserted. We need to keep a record of current views so we know which views are already in the DOM (and don't need to be re-added) and so we can remove views from the DOM when they are no longer required.
variable ɵDEFAULT_LOCALE_ID
const ɵDEFAULT_LOCALE_ID: string;
The locale id that the application is using by default (for translations and ICU expressions).
variable ɵdefaultIterableDiffers
const ɵdefaultIterableDiffers: IterableDiffers;
variable ɵdefaultKeyValueDiffers
const ɵdefaultKeyValueDiffers: KeyValueDiffers;
variable ɵDEFER_BLOCK_CONFIG
const ɵDEFER_BLOCK_CONFIG: InjectionToken<DeferBlockConfig>;
**INTERNAL**, token used for configuring defer block behavior.
variable ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR
const ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR: InjectionToken<DeferBlockDependencyInterceptor>;
**INTERNAL**, avoid referencing it in application code. * Injector token that allows to provide
DeferBlockDependencyInterceptor
class implementation.This token is only injected in devMode
variable ɵdepsTracker
const ɵdepsTracker: DepsTracker;
The deps tracker to be used in the current Angular app in dev mode.
variable ɵENABLE_ROOT_COMPONENT_BOOTSTRAP
const ɵENABLE_ROOT_COMPONENT_BOOTSTRAP: InjectionToken<boolean>;
InjectionToken to control root component bootstrap behavior.
This token is primarily used in Angular's server-side rendering (SSR) scenarios, particularly by the
@angular/ssr
package, to manage whether the root component should be bootstrapped during the application initialization process.## Purpose: During SSR route extraction, setting this token to
false
prevents Angular from bootstrapping the root component. This avoids unnecessary component rendering, enabling route extraction without requiring additional APIs or triggering component logic.## Behavior: - **
false
**: Prevents the root component from being bootstrapped. - **true
** (default): Proceeds with the normal root component bootstrap process.This mechanism ensures SSR can efficiently separate route extraction logic from component rendering.
variable ɵglobal
const ɵglobal: any;
variable ɵIMAGE_CONFIG
const ɵIMAGE_CONFIG: InjectionToken<ImageConfig>;
Injection token that configures the image optimized image functionality. See ImageConfig for additional information about parameters that can be used.
See Also
variable ɵIMAGE_CONFIG_DEFAULTS
const ɵIMAGE_CONFIG_DEFAULTS: ImageConfig;
variable ɵINJECTOR_SCOPE
const ɵINJECTOR_SCOPE: InjectionToken<InjectorScope>;
An internal token whose presence in an injector indicates that the injector should treat itself as a root scoped injector when processing requests for unknown tokens which may indicate they are provided in the root scope.
variable ɵINPUT_SIGNAL_BRAND_READ_TYPE
const ɵINPUT_SIGNAL_BRAND_READ_TYPE: Symbol;
variable ɵINPUT_SIGNAL_BRAND_WRITE_TYPE
const ɵINPUT_SIGNAL_BRAND_WRITE_TYPE: Symbol;
variable ɵINTERNAL_APPLICATION_ERROR_HANDLER
const ɵINTERNAL_APPLICATION_ERROR_HANDLER: InjectionToken<(e: any) => void>;
InjectionToken
used to configure how to call theErrorHandler
.NgZone
is provided by default today so the default (and only) implementation for this is callingErrorHandler.handleError
outside of the Angular zone.
variable ɵIS_HYDRATION_DOM_REUSE_ENABLED
const ɵIS_HYDRATION_DOM_REUSE_ENABLED: InjectionToken<boolean>;
Internal token that specifies whether DOM reuse logic during hydration is enabled.
variable ɵIS_INCREMENTAL_HYDRATION_ENABLED
const ɵIS_INCREMENTAL_HYDRATION_ENABLED: InjectionToken<boolean>;
Internal token that indicates whether incremental hydration support is enabled.
variable ɵJSACTION_EVENT_CONTRACT
const ɵJSACTION_EVENT_CONTRACT: InjectionToken<EventContractDetails>;
variable ɵNG_COMP_DEF
const ɵNG_COMP_DEF: string;
variable ɵNG_DIR_DEF
const ɵNG_DIR_DEF: string;
variable ɵNG_ELEMENT_ID
const ɵNG_ELEMENT_ID: string;
If a directive is diPublic, bloomAdd sets a property on the type with this constant as the key and the directive's unique ID as the value. This allows us to map directives to their bloom filter bit for DI.
variable ɵNG_INJ_DEF
const ɵNG_INJ_DEF: string;
variable ɵNG_MOD_DEF
const ɵNG_MOD_DEF: string;
variable ɵNG_PIPE_DEF
const ɵNG_PIPE_DEF: string;
variable ɵNG_PROV_DEF
const ɵNG_PROV_DEF: string;
variable ɵNO_CHANGE
const ɵNO_CHANGE: NO_CHANGE;
A special value which designates that a value has not changed.
variable ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR
const ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR: {};
variable ɵPERFORMANCE_MARK_PREFIX
const ɵPERFORMANCE_MARK_PREFIX: string;
variable ɵPROVIDED_NG_ZONE
const ɵPROVIDED_NG_ZONE: InjectionToken<boolean>;
Internal token used to verify that
provideZoneChangeDetection
is not used with the bootstrapModule API.
variable ɵSIGNAL
const ɵSIGNAL: Symbol;
Symbol used to tell
Signal
s apart from other functions.This can be used to auto-unwrap signals in various cases, or to auto-wrap non-signal values.
variable ɵSSR_CONTENT_INTEGRITY_MARKER
const ɵSSR_CONTENT_INTEGRITY_MARKER: string;
Marker used in a comment node to ensure hydration content integrity
variable ɵTESTABILITY
const ɵTESTABILITY: InjectionToken<Testability>;
Internal injection token that can used to access an instance of a Testability class.
This token acts as a bridge between the core bootstrap code and the
Testability
class. This is needed to ensure that there are no direct references to theTestability
class, so it can be tree-shaken away (if not referenced). For the environments/setups when theTestability
class should be available, this token is used to add a provider that references theTestability
class. Otherwise, only this token is retained in a bundle, but theTestability
class is not.
variable ɵTESTABILITY_GETTER
const ɵTESTABILITY_GETTER: InjectionToken<GetTestability>;
Internal injection token to retrieve Testability getter class instance.
variable ɵTracingService
const ɵTracingService: InjectionToken<TracingService<TracingSnapshot>>;
Injection token for a
TracingService
, optionally provided.
variable ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT
const ɵUSE_RUNTIME_DEPS_TRACKER_FOR_JIT: boolean;
Indicates whether to use the runtime dependency tracker for scope calculation in JIT compilation. The value "false" means the old code path based on patching scope info into the types will be used.
Deprecated
For migration purposes only, to be removed soon.
variable ɵWRITABLE_SIGNAL
const ɵWRITABLE_SIGNAL: Symbol;
Symbol used distinguish
WritableSignal
from other non-writable signals and functions.
variable ɵXSS_SECURITY_URL
const ɵXSS_SECURITY_URL: string;
URL for the XSS security documentation.
variable ɵZONELESS_ENABLED
const ɵZONELESS_ENABLED: InjectionToken<boolean>;
Token used to indicate if zoneless was enabled via provideZonelessChangeDetection().
variable PACKAGE_ROOT_URL
const PACKAGE_ROOT_URL: InjectionToken<string>;
A DI token that indicates the root directory of the application
Deprecated
variable PARENT
const PARENT: number;
variable Pipe
const Pipe: PipeDecorator;
variable PLATFORM_ID
const PLATFORM_ID: InjectionToken<Object>;
A token that indicates an opaque platform ID.
variable PLATFORM_INITIALIZER
const PLATFORM_INITIALIZER: InjectionToken<readonly (() => void)[]>;
A function that is executed when a platform is initialized.
See Also
Deprecated
from v19.0.0, use providePlatformInitializer instead
variable PREORDER_HOOK_FLAGS
const PREORDER_HOOK_FLAGS: number;
variable QUERIES
const QUERIES: number;
variable REACTIVE_TEMPLATE_CONSUMER
const REACTIVE_TEMPLATE_CONSUMER: number;
variable RENDERER
const RENDERER: number;
variable REQUEST
const REQUEST: InjectionToken<Request>;
Injection token representing the current HTTP request object.
Use this token to access the current request when handling server-side rendering (SSR).
Remarks
This token may be
null
in the following scenarios:* During the build processes. * When the application is rendered in the browser (client-side rendering). * When performing static site generation (SSG). * During route extraction in development (at the time of the request).
See Also
variable REQUEST_CONTEXT
const REQUEST_CONTEXT: InjectionToken<unknown>;
Injection token for additional request context.
Use this token to pass custom metadata or context related to the current request in server-side rendering.
Remarks
This token is only available during server-side rendering and will be
null
in other contexts.
variable RESPONSE_INIT
const RESPONSE_INIT: InjectionToken<ResponseInit>;
Injection token for response initialization options.
Use this token to provide response options for configuring or initializing HTTP responses in server-side rendering or API endpoints.
Remarks
This token may be
null
in the following scenarios:* During the build processes. * When the application is rendered in the browser (client-side rendering). * When performing static site generation (SSG). * During route extraction in development (at the time of the request).
See Also
variable Self
const Self: SelfDecorator;
Self decorator and metadata.
variable SkipSelf
const SkipSelf: SkipSelfDecorator;
SkipSelf
decorator and metadata.
variable T_HOST
const T_HOST: number;
variable TEMPLATE_ID
const TEMPLATE_ID: string;
variable TEMPLATES
const TEMPLATES: string;
variable TRANSLATIONS
const TRANSLATIONS: InjectionToken<string>;
Use this token at bootstrap to provide the content of your translation file (
xtb
,xlf
orxlf2
) when you want to translate your application in another language.See the [i18n guide](guide/i18n/merge) for more information.
### Example
import { TRANSLATIONS } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';// content of your translation fileconst translations = '....';platformBrowserDynamic().bootstrapModule(AppModule, {providers: [{provide: TRANSLATIONS, useValue: translations }]});
variable TRANSLATIONS_FORMAT
const TRANSLATIONS_FORMAT: InjectionToken<string>;
Provide this token at bootstrap to set the format of your TRANSLATIONS:
xtb
,xlf
orxlf2
.See the [i18n guide](guide/i18n/merge) for more information.
### Example
import { TRANSLATIONS_FORMAT } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule, {providers: [{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }]});
variable TVIEW
const TVIEW: number;
variable Type
const Type: FunctionConstructor;
Represents a type that a Component or other object is instances of.
An example of a
Type
isMyCustomComponent
class, which in JavaScript is represented by theMyCustomComponent
constructor function.
variable TYPE
const TYPE: number;
Special location which allows easy identification of type. If we have an array which was retrieved from the
LView
and that array hastrue
atTYPE
location, we know it isLContainer
.
variable VERSION
const VERSION: Version;
variable VIEW_REFS
const VIEW_REFS: number;
variable viewChild
const viewChild: ViewChildFunction;
Initializes a view child query.
Consider using
viewChild.required
for queries that should always match.Create a child query in your component by declaring a class field and initializing it with the
viewChild()
function.@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>}
variable ViewChild
const ViewChild: ViewChildDecorator;
ViewChild decorator and metadata.
variable ViewChildren
const ViewChildren: ViewChildrenDecorator;
ViewChildren decorator and metadata.
Functions
function afterNextRender
afterNextRender: { <E = never, W = never, M = never>( spec: { earlyRead?: () => E; write?: (...args: ɵFirstAvailable<[E]>) => W; mixedReadWrite?: (...args: ɵFirstAvailable<[W, E]>) => M; read?: (...args: ɵFirstAvailable<[M, W, E]>) => void; }, options?: Omit<AfterRenderOptions, 'phase'> ): AfterRenderRef; (callback: VoidFunction, options?: AfterRenderOptions): AfterRenderRef;};
Register callbacks to be invoked the next time the application finishes rendering, during the specified phases. The available phases are: -
earlyRead
Use this phase to **read** from the DOM before a subsequentwrite
callback, for example to perform custom layout that the browser doesn't natively support. Prefer theread
phase if reading can wait until after the write phase. **Never** write to the DOM in this phase. -write
Use this phase to **write** to the DOM. **Never** read from the DOM in this phase. -mixedReadWrite
Use this phase to read from and write to the DOM simultaneously. **Never** use this phase if it is possible to divide the work among the other phases instead. -read
Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.You should prefer using the
read
andwrite
phases over theearlyRead
andmixedReadWrite
phases when possible, to avoid performance degradation.Note that: - Callbacks run in the following phase order *once, after the next render*: 1.
earlyRead
2.write
3.mixedReadWrite
4.read
- Callbacks in the same phase run in the order they are registered. - Callbacks run on browser platforms only, they will not run on the server.The first phase callback to run as part of this spec will receive no parameters. Each subsequent phase callback in this spec will receive the return value of the previously run phase callback as a parameter. This can be used to coordinate work across multiple phases.
Angular is unable to verify or enforce that phases are used correctly, and instead relies on each developer to follow the guidelines documented for each value and carefully choose the appropriate one, refactoring their code if necessary. By doing so, Angular is better able to minimize the performance degradation associated with manual DOM access, ensuring the best experience for the end users of your application or library.
Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Parameter spec
The callback functions to register
Parameter options
Options to control the behavior of the callback
Use
afterNextRender
to read or write the DOM once, for example to initialize a non-Angular library.### Example
@Component({selector: 'my-chart-cmp',template: `<div #chart>{{ ... }}</div>`,})export class MyChartCmp {@ViewChild('chart') chartRef: ElementRef;chart: MyChart|null;constructor() {afterNextRender({write: () => {this.chart = new MyChart(this.chartRef.nativeElement);}});}}Register a callback to be invoked the next time the application finishes rendering, during the
mixedReadWrite
phase.You should prefer specifying an explicit phase for the callback instead, or you risk significant performance degradation.
Note that the callback will run - in the order it was registered - on browser platforms only - during the
mixedReadWrite
phaseComponents are not guaranteed to be [hydrated](guide/hydration) before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Parameter callback
A callback function to register
Parameter options
Options to control the behavior of the callback
Use
afterNextRender
to read or write the DOM once, for example to initialize a non-Angular library.### Example
@Component({selector: 'my-chart-cmp',template: `<div #chart>{{ ... }}</div>`,})export class MyChartCmp {@ViewChild('chart') chartRef: ElementRef;chart: MyChart|null;constructor() {afterNextRender({write: () => {this.chart = new MyChart(this.chartRef.nativeElement);}});}}
function afterRender
afterRender: { <E = never, W = never, M = never>( spec: { earlyRead?: () => E; write?: (...args: ɵFirstAvailable<[E]>) => W; mixedReadWrite?: (...args: ɵFirstAvailable<[W, E]>) => M; read?: (...args: ɵFirstAvailable<[M, W, E]>) => void; }, options?: Omit<AfterRenderOptions, 'phase'> ): AfterRenderRef; (callback: VoidFunction, options?: AfterRenderOptions): AfterRenderRef;};
Register callbacks to be invoked each time the application finishes rendering, during the specified phases. The available phases are: -
earlyRead
Use this phase to **read** from the DOM before a subsequentwrite
callback, for example to perform custom layout that the browser doesn't natively support. Prefer theread
phase if reading can wait until after the write phase. **Never** write to the DOM in this phase. -write
Use this phase to **write** to the DOM. **Never** read from the DOM in this phase. -mixedReadWrite
Use this phase to read from and write to the DOM simultaneously. **Never** use this phase if it is possible to divide the work among the other phases instead. -read
Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.You should prefer using the
read
andwrite
phases over theearlyRead
andmixedReadWrite
phases when possible, to avoid performance degradation.Note that: - Callbacks run in the following phase order *after each render*: 1.
earlyRead
2.write
3.mixedReadWrite
4.read
- Callbacks in the same phase run in the order they are registered. - Callbacks run on browser platforms only, they will not run on the server.The first phase callback to run as part of this spec will receive no parameters. Each subsequent phase callback in this spec will receive the return value of the previously run phase callback as a parameter. This can be used to coordinate work across multiple phases.
Angular is unable to verify or enforce that phases are used correctly, and instead relies on each developer to follow the guidelines documented for each value and carefully choose the appropriate one, refactoring their code if necessary. By doing so, Angular is better able to minimize the performance degradation associated with manual DOM access, ensuring the best experience for the end users of your application or library.
Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Parameter spec
The callback functions to register
Parameter options
Options to control the behavior of the callback
Use
afterRender
to read or write the DOM after each render.### Example
@Component({selector: 'my-cmp',template: `<span #content>{{ ... }}</span>`,})export class MyComponent {@ViewChild('content') contentRef: ElementRef;constructor() {afterRender({read: () => {console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);}});}}Register a callback to be invoked each time the application finishes rendering, during the
mixedReadWrite
phase.You should prefer specifying an explicit phase for the callback instead, or you risk significant performance degradation.
Note that the callback will run - in the order it was registered - once per render - on browser platforms only - during the
mixedReadWrite
phaseComponents are not guaranteed to be [hydrated](guide/hydration) before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Parameter callback
A callback function to register
Parameter options
Options to control the behavior of the callback
Use
afterRender
to read or write the DOM after each render.### Example
@Component({selector: 'my-cmp',template: `<span #content>{{ ... }}</span>`,})export class MyComponent {@ViewChild('content') contentRef: ElementRef;constructor() {afterRender({read: () => {console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);}});}}
function afterRenderEffect
afterRenderEffect: { ( callback: (onCleanup: EffectCleanupRegisterFn) => void, options?: Omit<AfterRenderOptions, 'phase'> ): AfterRenderRef; <E = never, W = never, M = never>( spec: { earlyRead?: (onCleanup: EffectCleanupRegisterFn) => E; write?: ( ...args: [ ...([E] extends [never] ? [] : [Signal<E>]), EffectCleanupRegisterFn ] ) => W; mixedReadWrite?: ( ...args: [ ...([W] extends [never] ? [E] extends [never] ? [] : [Signal<E>] : [Signal<W>]), EffectCleanupRegisterFn ] ) => M; read?: ( ...args: [ ...([M] extends [never] ? [W] extends [never] ? [E] extends [never] ? [] : [Signal<E>] : [Signal<W>] : [Signal<M>]), EffectCleanupRegisterFn ] ) => void; }, options?: Omit<AfterRenderOptions, 'phase'> ): AfterRenderRef;};
Register an effect that, when triggered, is invoked when the application finishes rendering, during the
mixedReadWrite
phase.You should prefer specifying an explicit phase for the effect instead, or you risk significant performance degradation.
Note that callback-based
afterRenderEffect
s will run - in the order it they are registered - only when dirty - on browser platforms only - during themixedReadWrite
phaseComponents are not guaranteed to be [hydrated](guide/hydration) before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Parameter callback
An effect callback function to register
Parameter options
Options to control the behavior of the callback
Modifiers
@experimental
Register effects that, when triggered, are invoked when the application finishes rendering, during the specified phases. The available phases are: -
earlyRead
Use this phase to **read** from the DOM before a subsequentwrite
callback, for example to perform custom layout that the browser doesn't natively support. Prefer theread
phase if reading can wait until after the write phase. **Never** write to the DOM in this phase. -write
Use this phase to **write** to the DOM. **Never** read from the DOM in this phase. -mixedReadWrite
Use this phase to read from and write to the DOM simultaneously. **Never** use this phase if it is possible to divide the work among the other phases instead. -read
Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.You should prefer using the
read
andwrite
phases over theearlyRead
andmixedReadWrite
phases when possible, to avoid performance degradation.Note that: - Effects run in the following phase order, only when dirty through signal dependencies: 1.
earlyRead
2.write
3.mixedReadWrite
4.read
-afterRenderEffect
s in the same phase run in the order they are registered. -afterRenderEffect
s run on browser platforms only, they will not run on the server. -afterRenderEffect
s will run at least once.The first phase callback to run as part of this spec will receive no parameters. Each subsequent phase callback in this spec will receive the return value of the previously run phase callback as a
Signal
. This can be used to coordinate work across multiple phases.Angular is unable to verify or enforce that phases are used correctly, and instead relies on each developer to follow the guidelines documented for each value and carefully choose the appropriate one, refactoring their code if necessary. By doing so, Angular is better able to minimize the performance degradation associated with manual DOM access, ensuring the best experience for the end users of your application or library.
Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Parameter spec
The effect functions to register
Parameter options
Options to control the behavior of the effects
Use
afterRenderEffect
to create effects that will read or write from the DOM and thus should run after rendering.Modifiers
@experimental
function applyChanges
applyChanges: (component: {}) => void;
Marks a component for check (in case of OnPush components) and synchronously performs change detection on the application this component belongs to.
Parameter component
Component to
function asNativeElements
asNativeElements: (debugEls: DebugElement[]) => any;
function assertInInjectionContext
assertInInjectionContext: (debugFn: Function) => void;
Asserts that the current stack frame is within an [injection context](guide/di/dependency-injection-context) and has access to
inject
.Parameter debugFn
a reference to the function making the assertion (used for the error message).
function assertNotInReactiveContext
assertNotInReactiveContext: (debugFn: Function, extraContext?: string) => void;
Asserts that the current stack frame is not within a reactive context. Useful to disallow certain code from running inside a reactive context (see )
Parameter debugFn
a reference to the function making the assertion (used for the error message).
function assertPlatform
assertPlatform: (requiredToken: any) => PlatformRef;
Checks that there is currently a platform that contains the given token as a provider.
function booleanAttribute
booleanAttribute: (value: unknown) => boolean;
Transforms a value (typically a string) to a boolean. Intended to be used as a transform function of an input.
```ts @Input({ transform: booleanAttribute }) status!: boolean; ```
Parameter value
Value to be transformed.
function computed
computed: <T>( computation: () => T, options?: CreateComputedOptions<T>) => Signal<T>;
Create a computed
Signal
which derives a reactive value from an expression.
function contentChildren
contentChildren: { <LocatorT>( locator: ProviderToken<LocatorT> | string, opts?: { descendants?: boolean; read?: undefined; debugName?: string } ): Signal<ReadonlyArray<LocatorT>>; <LocatorT, ReadT>( locator: string | ProviderToken<LocatorT>, opts: { descendants?: boolean; read: ProviderToken<ReadT>; debugName?: string; } ): Signal<readonly ReadT[]>;};
function createComponent
createComponent: <C>( component: Type$1<C>, options: { environmentInjector: EnvironmentInjector; hostElement?: Element; elementInjector?: Injector; projectableNodes?: Node[][]; }) => ComponentRef$1<C>;
Creates a
ComponentRef
instance based on provided component type and a set of options.The example below demonstrates how the
createComponent
function can be used to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef, so that it gets included into change detection cycles.Note: the example uses standalone components, but the function can also be used for non-standalone components (declared in an NgModule) as well.
@Component({standalone: true,template: `Hello {{ name }}!`})class HelloComponent {name = 'Angular';}@Component({standalone: true,template: `<div id="hello-component-host"></div>`})class RootComponent {}// Bootstrap an application.const applicationRef = await bootstrapApplication(RootComponent);// Locate a DOM node that would be used as a host.const hostElement = document.getElementById('hello-component-host');// Get an `EnvironmentInjector` instance from the `ApplicationRef`.const environmentInjector = applicationRef.injector;// We can now create a `ComponentRef` instance.const componentRef = createComponent(HelloComponent, {hostElement, environmentInjector});// Last step is to register the newly created ref using the `ApplicationRef` instance// to include the component view into change detection cycles.applicationRef.attachView(componentRef.hostView);componentRef.changeDetectorRef.detectChanges();Parameter component
Component class reference.
Parameter options
Set of options to use: *
environmentInjector
: AnEnvironmentInjector
instance to be used for the component. *hostElement
(optional): A DOM node that should act as a host node for the component. If not provided, Angular creates one based on the tag name used in the component selector (and falls back to usingdiv
if selector doesn't have tag name info). *elementInjector
(optional): AnElementInjector
instance, see additional info about it [here](guide/di/hierarchical-dependency-injection#elementinjector). *projectableNodes
(optional): A list of DOM nodes that should be projected through [<ng-content>
](api/core/ng-content) of the new component instance, e.g.,[[element1, element2]]
: projectselement1
andelement2
into the same<ng-content>
.[[element1, element2], [element3]]
: projectselement1
andelement2
into one<ng-content>
, andelement3
into a separate<ng-content>
.Returns
ComponentRef instance that represents a given Component.
function createEnvironmentInjector
createEnvironmentInjector: ( providers: Array<Provider | EnvironmentProviders>, parent: EnvironmentInjector, debugName?: string | null) => EnvironmentInjector;
Create a new environment injector.
Parameter providers
An array of providers.
Parameter parent
A parent environment injector.
Parameter debugName
An optional name for this injector instance, which will be used in error messages.
function createNgModule
createNgModule: <T>( ngModule: Type$1<T>, parentInjector?: Injector) => NgModuleRef$1<T>;
Returns a new NgModuleRef instance based on the NgModule class and parent injector provided.
Parameter ngModule
NgModule class.
Parameter parentInjector
Optional injector instance to use as a parent for the module injector. If not provided,
NullInjector
will be used instead.Returns
NgModuleRef that represents an NgModule instance.
function createPlatform
createPlatform: (injector: Injector) => PlatformRef;
Creates a platform. Platforms must be created on launch using this function.
function createPlatformFactory
createPlatformFactory: ( parentPlatformFactory: (extraProviders?: StaticProvider[]) => PlatformRef, name: string, providers?: StaticProvider[]) => (extraProviders?: StaticProvider[]) => PlatformRef;
Creates a factory for a platform. Can be used to provide or override
Providers
specific to your application's runtime needs, such asPLATFORM_INITIALIZER
andPLATFORM_ID
.Parameter parentPlatformFactory
Another platform factory to modify. Allows you to compose factories to build up configurations that might be required by different libraries or parts of the application.
Parameter name
Identifies the new platform factory.
Parameter providers
A set of dependency providers for platforms created with the new factory.
function destroyPlatform
destroyPlatform: () => void;
Destroys the current Angular platform and all Angular applications on the page. Destroys all modules and listeners registered with the platform.
function effect
effect: ( effectFn: (onCleanup: EffectCleanupRegisterFn) => void, options?: CreateEffectOptions) => EffectRef;
Registers an "effect" that will be scheduled & executed whenever the signals that it reads changes.
Angular has two different kinds of effect: component effects and root effects. Component effects are created when
effect()
is called from a component, directive, or within a service of a component/directive. Root effects are created wheneffect()
is called from outside the component tree, such as in a root service, or when theforceRoot
option is provided.The two effect types differ in their timing. Component effects run as a component lifecycle event during Angular's synchronization (change detection) process, and can safely read input signals or create/destroy views that depend on component state. Root effects run as microtasks and have no connection to the component tree or change detection.
effect()
must be run in injection context, unless theinjector
option is manually specified.
function enableProdMode
enableProdMode: () => void;
Disable Angular's development mode, which turns off assertions and other checks within the framework.
One important assertion this disables verifies that a change detection pass does not result in additional changes to any bindings (also known as unidirectional data flow).
Using this method is discouraged as the Angular CLI will set production mode when using the
optimization
option.See Also
function forwardRef
forwardRef: (forwardRefFn: ForwardRefFn) => Type$1<any>;
Allows to refer to references which are not yet defined.
For instance,
forwardRef
is used when thetoken
which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when thetoken
which we use when creating a query is not yet defined.forwardRef
is also used to break circularities in standalone components imports.### Circular dependency example
### Circular standalone reference import example
@Component({standalone: true,imports: [ChildComponent],selector: 'app-parent',template: `<app-child [hideParent]="hideParent"></app-child>`,})export class ParentComponent {@Input() hideParent: boolean;}@Component({standalone: true,imports: [CommonModule, forwardRef(() => ParentComponent)],selector: 'app-child',template: `<app-parent *ngIf="!hideParent"></app-parent>`,})export class ChildComponent {@Input() hideParent: boolean;}
function getComponent
getComponent: <T>(element: Element) => T | null;
Retrieves the component instance associated with a given DOM element.
Given the following DOM structure:
<app-root><div><child-comp></child-comp></div></app-root>Calling
getComponent
on<child-comp>
will return the instance ofChildComponent
associated with this DOM element.Calling the function on
<app-root>
will return theMyApp
instance.Parameter element
DOM element from which the component should be retrieved.
Returns
Component instance associated with the element or
null
if there is no component associated with it.
function getContext
getContext: <T extends {}>(element: Element) => T | null;
If inside an embedded view (e.g.
*ngIf
or*ngFor
), retrieves the context of the embedded view that the element is part of. Otherwise retrieves the instance of the component whose view owns the element (in this case, the result is the same as callinggetOwningComponent
).Parameter element
Element for which to get the surrounding component instance.
Returns
Instance of the component that is around the element or null if the element isn't inside any component.
function getDebugNode
getDebugNode: (nativeNode: any) => DebugNode | null;
function getDeferBlocks
getDeferBlocks: (node: Node) => DeferBlockData[];
Gets all of the
@defer
blocks that are present inside the specified DOM node.Parameter node
Node in which to look for
@defer
blocks.
function getDependenciesFromInjectable
getDependenciesFromInjectable: <T>( injector: Injector, token: Type$1<T> | InjectionToken<T>) => | { instance: T; dependencies: Omit<InjectedService, 'injectedIn'>[] } | undefined;
Discovers the dependencies of an injectable instance. Provides DI information about each dependency that the injectable was instantiated with, including where they were provided from.
Parameter injector
An injector instance
Parameter token
a DI token that was constructed by the given injector instance
Returns
an object that contains the created instance of token as well as all of the dependencies that it was instantiated with OR undefined if the token was not created within the given injector.
function getDirectiveMetadata
getDirectiveMetadata: ( directiveOrComponentInstance: any) => ComponentDebugMetadata | DirectiveDebugMetadata | null;
Returns the debug (partial) metadata for a particular directive or component instance. The function accepts an instance of a directive or component and returns the corresponding metadata.
Parameter directiveOrComponentInstance
Instance of a directive or component
Returns
metadata of the passed directive or component
function getInjector
getInjector: (elementOrDir: Element | {}) => Injector;
Retrieves an
Injector
associated with an element, component or directive instance.Parameter elementOrDir
DOM element, component or directive instance for which to retrieve the injector.
Returns
Injector associated with the element, component or directive instance.
function getInjectorMetadata
getInjectorMetadata: ( injector: Injector) => | { type: 'element'; source: RElement } | { type: 'environment'; source: string | null } | { type: 'null'; source: null } | null;
Given an injector, this function will return an object containing the type and source of the injector.
| | type | source | |--------------|-------------|-------------------------------------------------------------| | NodeInjector | element | DOM element that created this injector | | R3Injector | environment |
injector.source
| | NullInjector | null | null |Parameter injector
the Injector to get metadata for
Returns
an object containing the type and source of the given injector. If the injector metadata cannot be determined, returns null.
function getInjectorProviders
getInjectorProviders: (injector: Injector) => ProviderRecord[];
Gets the providers configured on an injector.
Parameter injector
the injector to lookup the providers of
Returns
ProviderRecord[] an array of objects representing the providers of the given injector
function getInjectorResolutionPath
getInjectorResolutionPath: (injector: Injector) => Injector[];
function getListeners
getListeners: (element: Element) => Listener[];
Retrieves a list of event listeners associated with a DOM element. The list does include host listeners, but it does not include event listeners defined outside of the Angular context (e.g. through
addEventListener
).Given the following DOM structure:
<app-root><div (click)="doSomething()"></div></app-root>Calling
getListeners
on<div>
will return an object that looks as follows:{name: 'click',element: <div>,callback: () => doSomething(),useCapture: false}Parameter element
Element for which the DOM listeners should be retrieved.
Returns
Array of event listeners on the DOM element.
function getModuleFactory
getModuleFactory: (id: string) => NgModuleFactory$1<any>;
Returns the NgModuleFactory with the given id (specified using [@NgModule.id field](api/core/NgModule#id)), if it exists and has been loaded. Factories for NgModules that do not specify an
id
cannot be retrieved. Throws if an NgModule cannot be found.Deprecated
Use
getNgModuleById
instead.
function getNgModuleById
getNgModuleById: <T>(id: string) => Type$1<T>;
Returns the NgModule class with the given id (specified using [@NgModule.id field](api/core/NgModule#id)), if it exists and has been loaded. Classes for NgModules that do not specify an
id
cannot be retrieved. Throws if an NgModule cannot be found.
function getOwningComponent
getOwningComponent: <T>(elementOrDir: Element | {}) => T | null;
Retrieves the component instance whose view contains the DOM element.
For example, if
<child-comp>
is used in the template of<app-comp>
(i.e. aViewChild
of<app-comp>
), callinggetOwningComponent
on<child-comp>
would return<app-comp>
.Parameter elementOrDir
DOM element, component or directive instance for which to retrieve the root components.
Returns
Component instance whose view owns the DOM element or null if the element is not part of a component view.
function getPlatform
getPlatform: () => PlatformRef | null;
Returns the current platform.
function getRootComponents
getRootComponents: (elementOrDir: Element | {}) => {}[];
Retrieves all root components associated with a DOM element, directive or component instance. Root components are those which have been bootstrapped by Angular.
Parameter elementOrDir
DOM element, component or directive instance for which to retrieve the root components.
Returns
Root components associated with the target object.
function getSignalGraph
getSignalGraph: (injector: Injector) => DebugSignalGraph;
Returns a debug representation of the signal graph for the given injector.
Currently only supports element injectors. Starts by discovering the consumer nodes and then traverses their producer nodes to build the signal graph.
Parameter injector
The injector to get the signal graph for.
Returns
A debug representation of the signal graph.
Throws
If the injector is an environment injector.
function importProvidersFrom
importProvidersFrom: ( ...sources: ImportProvidersSource[]) => EnvironmentProviders;
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).
The results of the
importProvidersFrom
call can be used in thebootstrapApplication
call:await bootstrapApplication(RootComponent, {providers: [importProvidersFrom(NgModuleOne, NgModuleTwo)]});You can also use the
importProvidersFrom
results in theproviders
field of a route, when a standalone component is used:export const ROUTES: Route[] = [{path: 'foo',providers: [importProvidersFrom(NgModuleOne, NgModuleTwo)],component: YourStandaloneComponent}];Returns
Collected providers from the specified list of types.
function inject
inject: { <T>(token: ProviderToken<T>): T; <T>(token: ProviderToken<T>, flags?: InjectFlags): T; <T>(token: ProviderToken<T>, options: InjectOptions & { optional?: false }): T; <T>(token: ProviderToken<T>, options: InjectOptions): T; (token: HostAttributeToken): string; (token: HostAttributeToken, options: { optional: true }): string; (token: HostAttributeToken, options: { optional: false }): string;};
Parameter token
A token that represents a dependency that should be injected.
Returns
the injected value if operation is successful,
null
otherwise.Throws
if called outside of a supported context.
Parameter token
A token that represents a dependency that should be injected.
Parameter flags
Control how injection is executed. The flags correspond to injection strategies that can be specified with parameter decorators
@Host
,@Self
,@SkipSelf
, and@Optional
.Returns
the injected value if operation is successful,
null
otherwise.Throws
if called outside of a supported context.
Deprecated
prefer an options object instead of
InjectFlags
Parameter token
A token that represents a dependency that should be injected.
Parameter options
Control how injection is executed. Options correspond to injection strategies that can be specified with parameter decorators
@Host
,@Self
,@SkipSelf
, and@Optional
.Returns
the injected value if operation is successful.
Throws
if called outside of a supported context, or if the token is not found.
Parameter token
A token that represents a dependency that should be injected.
Parameter options
Control how injection is executed. Options correspond to injection strategies that can be specified with parameter decorators
@Host
,@Self
,@SkipSelf
, and@Optional
.Returns
the injected value if operation is successful,
null
if the token is not found and optional injection has been requested.Throws
if called outside of a supported context, or if the token is not found and optional injection was not requested.
Parameter token
A token that represents a static attribute on the host node that should be injected.
Returns
Value of the attribute if it exists.
Throws
If called outside of a supported context or the attribute does not exist.
Parameter token
A token that represents a static attribute on the host node that should be injected.
Returns
Value of the attribute if it exists, otherwise
null
.Throws
If called outside of a supported context.
function isDevMode
isDevMode: () => boolean;
Returns whether Angular is in development mode.
By default, this is true, unless
enableProdMode
is invoked prior to calling this method or the application is built using the Angular CLI with theoptimization
option.See Also
function isSignal
isSignal: (value: unknown) => value is Signal<unknown>;
Checks if the given
value
is a reactiveSignal
.
function isStandalone
isStandalone: (type: Type$1<unknown>) => boolean;
Checks whether a given Component, Directive or Pipe is marked as standalone. This will return false if passed anything other than a Component, Directive, or Pipe class See [this guide](guide/components/importing) for additional information:
Parameter type
A reference to a Component, Directive or Pipe.
function linkedSignal
linkedSignal: { <D>( computation: () => D, options?: { equal?: ValueEqualityFn<NoInfer<D>> } ): WritableSignal<D>; <S, D>(options: { source: () => S; computation: ( source: NoInfer<S>, previous?: { source: NoInfer<S>; value: NoInfer<D> } ) => D; equal?: ValueEqualityFn<NoInfer<D>>; }): WritableSignal<D>;};
Creates a writable signal whose value is initialized and reset by the linked, reactive computation.
Creates a writable signal whose value is initialized and reset by the linked, reactive computation. This is an advanced API form where the computation has access to the previous value of the signal and the computation result.
Note: The computation is reactive, meaning the linked signal will automatically update whenever any of the signals used within the computation change.
function makeEnvironmentProviders
makeEnvironmentProviders: ( providers: (Provider | EnvironmentProviders)[]) => EnvironmentProviders;
Wrap an array of
Provider
s intoEnvironmentProviders
, preventing them from being accidentally referenced in@Component
in a component injector.
function makeStateKey
makeStateKey: <T = void>(key: string) => StateKey<T>;
Create a
StateKey<T>
that can be used to store value of type T withTransferState
.Example:
const COUNTER_KEY = makeStateKey<number>('counter');let value = 10;transferState.set(COUNTER_KEY, value);
function mergeApplicationConfig
mergeApplicationConfig: (...configs: ApplicationConfig[]) => ApplicationConfig;
Merge multiple application configurations from left to right.
Parameter configs
Two or more configurations to be merged.
Returns
A merged [ApplicationConfig](api/core/ApplicationConfig).
function numberAttribute
numberAttribute: (value: unknown, fallbackValue?: number) => number;
Transforms a value (typically a string) to a number. Intended to be used as a transform function of an input.
Parameter value
Value to be transformed.
Parameter fallbackValue
Value to use if the provided value can't be parsed as a number.
```ts @Input({ transform: numberAttribute }) id!: number; ```
function output
output: <T = void>(opts?: OutputOptions) => OutputEmitterRef<T>;
The
output
function allows declaration of Angular outputs in directives and components.You can use outputs to emit values to parent directives and component. Parents can subscribe to changes via:
- template event bindings. For example,
(myOutput)="doSomething($event)"
- programmatic subscription by usingOutputRef#subscribe
.To use
output()
, import the function from@angular/core
.import {output} from '@angular/core';Inside your component, introduce a new class member and initialize it with a call to
output
.@Directive({...})export class MyDir {nameChange = output<string>(); // OutputEmitterRef<string>onClick = output(); // OutputEmitterRef<void>}You can emit values to consumers of your directive, by using the
emit
method fromOutputEmitterRef
.updateName(newName: string): void {this.nameChange.emit(newName);}{"showTypesInSignaturePreview": true}
function ɵ_sanitizeHtml
ɵ_sanitizeHtml: ( defaultDoc: any, unsafeHtmlInput: string) => TrustedHTML | string;
Sanitizes the given unsafe, untrusted HTML fragment, and returns HTML text that is safe to add to the DOM in a browser environment.
function ɵ_sanitizeUrl
ɵ_sanitizeUrl: (url: string) => string;
function ɵallowSanitizationBypassAndThrow
ɵallowSanitizationBypassAndThrow: { (value: any, type: BypassType.Html): value is SafeHtml; (value: any, type: BypassType.ResourceUrl): value is SafeResourceUrl; (value: any, type: BypassType.Script): value is SafeScript; (value: any, type: BypassType.Style): value is SafeStyle; (value: any, type: BypassType.Url): value is SafeUrl; (value: any, type: BypassType): boolean;};
function ɵannotateForHydration
ɵannotateForHydration: ( appRef: ApplicationRef, doc: Document) => { regular: Set<string>; capture: Set<string> };
Annotates all components bootstrapped in a given ApplicationRef with info needed for hydration.
Parameter appRef
An instance of an ApplicationRef.
Parameter doc
A reference to the current Document instance. event types that need to be replayed
function ɵbypassSanitizationTrustHtml
ɵbypassSanitizationTrustHtml: (trustedHtml: string) => SafeHtml;
Mark
html
string as trusted.This function wraps the trusted string in
String
and brands it in a way which makes it recognizable to htmlSanitizer to be trusted implicitly.Parameter trustedHtml
html
string which needs to be implicitly trusted.Returns
a
html
which has been branded to be implicitly trusted.
function ɵbypassSanitizationTrustResourceUrl
ɵbypassSanitizationTrustResourceUrl: ( trustedResourceUrl: string) => SafeResourceUrl;
Mark
url
string as trusted.This function wraps the trusted string in
String
and brands it in a way which makes it recognizable to resourceUrlSanitizer to be trusted implicitly.Parameter trustedResourceUrl
url
string which needs to be implicitly trusted.Returns
a
url
which has been branded to be implicitly trusted.
function ɵbypassSanitizationTrustScript
ɵbypassSanitizationTrustScript: (trustedScript: string) => SafeScript;
Mark
script
string as trusted.This function wraps the trusted string in
String
and brands it in a way which makes it recognizable to scriptSanitizer to be trusted implicitly.Parameter trustedScript
script
string which needs to be implicitly trusted.Returns
a
script
which has been branded to be implicitly trusted.
function ɵbypassSanitizationTrustStyle
ɵbypassSanitizationTrustStyle: (trustedStyle: string) => SafeStyle;
Mark
style
string as trusted.This function wraps the trusted string in
String
and brands it in a way which makes it recognizable to styleSanitizer to be trusted implicitly.Parameter trustedStyle
style
string which needs to be implicitly trusted.Returns
a
style
hich has been branded to be implicitly trusted.
function ɵbypassSanitizationTrustUrl
ɵbypassSanitizationTrustUrl: (trustedUrl: string) => SafeUrl;
Mark
url
string as trusted.This function wraps the trusted string in
String
and brands it in a way which makes it recognizable to urlSanitizer to be trusted implicitly.Parameter trustedUrl
url
string which needs to be implicitly trusted.Returns
a
url
which has been branded to be implicitly trusted.
function ɵclearResolutionOfComponentResourcesQueue
ɵclearResolutionOfComponentResourcesQueue: () => Map<Type$1<any>, Component>;
function ɵcompileComponent
ɵcompileComponent: (type: Type$1<any>, metadata: Component) => void;
Compile an Angular component according to its decorator metadata, and patch the resulting component def (ɵcmp) onto the component type.
Compilation may be asynchronous (due to the need to resolve URLs for the component template or other resources, for example). In the event that compilation is not immediate,
compileComponent
will enqueue resource resolution into a global queue and will fail to return theɵcmp
until the global queue has been resolved with a call toresolveComponentResources
.
function ɵcompileDirective
ɵcompileDirective: (type: Type$1<any>, directive: Directive | null) => void;
Compile an Angular directive according to its decorator metadata, and patch the resulting directive def onto the component type.
In the event that compilation is not immediate,
compileDirective
will return aPromise
which will resolve when compilation completes and the directive becomes usable.
function ɵcompileNgModule
ɵcompileNgModule: (moduleType: Type$1<any>, ngModule?: NgModule) => void;
Compiles a module in JIT mode.
This function automatically gets called when a class has a
@NgModule
decorator.
function ɵcompileNgModuleDefs
ɵcompileNgModuleDefs: ( moduleType: NgModuleType, ngModule: NgModule, allowDuplicateDeclarationsInRoot?: boolean) => void;
Compiles and adds the
ɵmod
,ɵfac
andɵinj
properties to the module class.It's possible to compile a module via this API which will allow duplicate declarations in its root.
function ɵcompileNgModuleFactory
ɵcompileNgModuleFactory: <M>( injector: Injector, options: CompilerOptions, moduleType: Type$1<M>) => Promise<NgModuleFactory$1<M>>;
function ɵcompilePipe
ɵcompilePipe: (type: Type$1<any>, meta: Pipe) => void;
function ɵconvertToBitFlags
ɵconvertToBitFlags: ( flags: InjectOptions | InjectFlags | undefined) => InjectFlags | undefined;
function ɵcreateInjector
ɵcreateInjector: ( defType: any, parent?: Injector | null, additionalProviders?: Array<Provider | StaticProvider> | null, name?: string) => Injector;
Create a new
Injector
which is configured using adefType
ofInjectorType<any>
s.
function ɵdetectChangesInViewIfRequired
ɵdetectChangesInViewIfRequired: ( lView: LView, notifyErrorHandler: boolean, isFirstPass: boolean, zonelessEnabled: boolean) => void;
function ɵdevModeEqual
ɵdevModeEqual: (a: any, b: any) => boolean;
function ɵdisableProfiling
ɵdisableProfiling: () => void;
function ɵenableProfiling
ɵenableProfiling: () => void;
This enables an internal performance profiler
It should not be imported in application code
function ɵfindLocaleData
ɵfindLocaleData: (locale: string) => any;
Finds the locale data for a given locale.
Parameter locale
The locale code.
Returns
The locale data.
See Also
[Internationalization (i18n) Guide](https://angular.io/guide/i18n)
function ɵflushModuleScopingQueueAsMuchAsPossible
ɵflushModuleScopingQueueAsMuchAsPossible: () => void;
Loops over queued module definitions, if a given module definition has all of its declarations resolved, it dequeues that module definition and sets the scope on its declarations.
function ɵformatRuntimeError
ɵformatRuntimeError: <T extends number = RuntimeErrorCode>( code: T, message: null | false | string) => string;
Called to format a runtime error. See additional info on the
message
argument type in theRuntimeError
class description.
function ɵgenerateStandaloneInDeclarationsError
ɵgenerateStandaloneInDeclarationsError: ( type: Type$1<any>, location: string) => string;
function ɵgetAsyncClassMetadataFn
ɵgetAsyncClassMetadataFn: ( type: Type$1<unknown>) => (() => Promise<Array<Type$1<unknown>>>) | null;
If a given component has unresolved async metadata - returns a reference to a function that applies component metadata after resolving defer-loadable dependencies. Otherwise - this function returns
null
.
function ɵgetClosestComponentName
ɵgetClosestComponentName: (node: Node) => string | null;
Gets the class name of the closest component to a node. Warning! this function will return minified names if the name of the component is minified. The consumer of the function is responsible for resolving the minified name to its original name.
Parameter node
Node from which to start the search.
function ɵgetDebugNode
ɵgetDebugNode: (nativeNode: any) => DebugNode | null;
function ɵgetDeferBlocks
ɵgetDeferBlocks: (lView: LView, deferBlocks: DeferBlockDetails[]) => void;
Retrieves all defer blocks in a given LView.
Parameter lView
lView with defer blocks
Parameter deferBlocks
defer block aggregator array
function ɵgetDirectives
ɵgetDirectives: (node: Node) => {}[];
Retrieves directive instances associated with a given DOM node. Does not include component instances.
Given the following DOM structure:
<app-root><button my-button></button><my-comp></my-comp></app-root>Calling
getDirectives
on<button>
will return an array with an instance of theMyButton
directive that is associated with the DOM node.Calling
getDirectives
on<my-comp>
will return an empty array.Parameter node
DOM node for which to get the directives.
Returns
Array of directives associated with the node.
function ɵgetHostElement
ɵgetHostElement: (componentOrDirective: {}) => Element;
Retrieves the host element of a component or directive instance. The host element is the DOM element that matched the selector of the directive.
Parameter componentOrDirective
Component or directive instance for which the host element should be retrieved.
Returns
Host element of the target.
function ɵgetInjectableDef
ɵgetInjectableDef: <T>(type: any) => ɵɵInjectableDeclaration<T> | null;
Read the injectable def (
ɵprov
) fortype
in a way which is immune to accidentally reading inherited value.Parameter type
A type which may have its own (non-inherited)
ɵprov
.
function ɵgetLContext
ɵgetLContext: (target: any) => LContext | null;
Returns the matching
LContext
data for a given DOM node, directive or component instance.This function will examine the provided DOM element, component, or directive instance's monkey-patched property to derive the
LContext
data. Once called then the monkey-patched value will be that of the newly createdLContext
.If the monkey-patched value is the
LView
instance then the context value for that target will be created and the monkey-patch reference will be updated. Therefore when this function is called it may mutate the provided element's, component's or any of the associated directive's monkey-patch values.If the monkey-patch value is not detected then the code will walk up the DOM until an element is found which contains a monkey-patch reference. When that occurs then the provided element will be updated with a new context (which is then returned). If the monkey-patch value is not detected for a component/directive instance then it will throw an error (all components and directives should be automatically monkey-patched by ivy).
Parameter target
Component, Directive or DOM Node.
function ɵgetLocaleCurrencyCode
ɵgetLocaleCurrencyCode: (locale: string) => string | null;
Retrieves the default currency code for the given locale.
The default is defined as the first currency which is still in use.
Parameter locale
The code of the locale whose currency code we want.
Returns
The code of the default currency for the given locale.
function ɵgetLocalePluralCase
ɵgetLocalePluralCase: (locale: string) => (value: number) => number;
Retrieves the plural function used by ICU expressions to determine the plural case to use for a given locale.
Parameter locale
A locale code for the locale format rules to use.
Returns
The plural function for the locale.
See Also
[Internationalization (i18n) Guide](guide/i18n)
function ɵgetOutputDestroyRef
ɵgetOutputDestroyRef: (ref: OutputRef<unknown>) => DestroyRef | undefined;
Gets the owning
DestroyRef
for the given output.
function ɵgetSanitizationBypassType
ɵgetSanitizationBypassType: (value: any) => BypassType | null;
function ɵgetUnknownElementStrictMode
ɵgetUnknownElementStrictMode: () => boolean;
Gets the current value of the strict mode.
function ɵgetUnknownPropertyStrictMode
ɵgetUnknownPropertyStrictMode: () => boolean;
Gets the current value of the strict mode.
function ɵinjectChangeDetectorRef
ɵinjectChangeDetectorRef: (flags: InjectFlags) => ChangeDetectorRef;
Returns a ChangeDetectorRef (a.k.a. a ViewRef)
function ɵinternalCreateApplication
ɵinternalCreateApplication: (config: { rootComponent?: Type$1<unknown>; appProviders?: Array<Provider | EnvironmentProviders>; platformProviders?: Provider[];}) => Promise<ApplicationRef>;
Internal create application API that implements the core application creation logic and optional bootstrap logic.
Platforms (such as
platform-browser
) may require different set of application and platform providers for an application to function correctly. As a result, platforms may use this function internally and supply the necessary providers during the bootstrap, while exposing platform-specific APIs as a part of their public API.Returns
A promise that returns an
ApplicationRef
instance once resolved.
function ɵinternalProvideZoneChangeDetection
ɵinternalProvideZoneChangeDetection: ({ ngZoneFactory, ignoreChangesOutsideZone, scheduleInRootZone,}: { ngZoneFactory?: () => NgZone; ignoreChangesOutsideZone?: boolean; scheduleInRootZone?: boolean;}) => StaticProvider[];
function ɵisBoundToModule
ɵisBoundToModule: <C>(cf: ComponentFactory$1<C>) => boolean;
function ɵisComponentDefPendingResolution
ɵisComponentDefPendingResolution: (type: Type$1<any>) => boolean;
function ɵisEnvironmentProviders
ɵisEnvironmentProviders: ( value: Provider | EnvironmentProviders | InternalEnvironmentProviders) => value is InternalEnvironmentProviders;
function ɵisInjectable
ɵisInjectable: (type: any) => boolean;
function ɵisNgModule
ɵisNgModule: <T>( value: Type$1<T>) => value is Type$1<T> & { ɵmod: NgModuleDef<T> };
function ɵisPromise
ɵisPromise: <T = any>(obj: any) => obj is Promise<T>;
Determine if the argument is shaped like a Promise
function ɵisSubscribable
ɵisSubscribable: <T>(obj: any | Subscribable<T>) => obj is Subscribable<T>;
Determine if the argument is a Subscribable
function ɵisViewDirty
ɵisViewDirty: (view: ViewRef<unknown>) => boolean;
Reports whether the given view is considered dirty according to the different marking mechanisms.
function ɵmarkForRefresh
ɵmarkForRefresh: (view: ViewRef<unknown>) => void;
function ɵmicrotaskEffect
ɵmicrotaskEffect: ( effectFn: (onCleanup: EffectCleanupRegisterFn) => void, options?: CreateEffectOptions) => EffectRef;
Create a global
Effect
for the given reactive function.
function ɵnoSideEffects
ɵnoSideEffects: <T>(fn: () => T) => T;
Convince closure compiler that the wrapped function has no side-effects.
Closure compiler always assumes that
toString
has no side-effects. We use this quirk to allow us to execute a function but have closure compiler mark the call as no-side-effects. It is important that the return value for thenoSideEffects
function be assigned to something which is retained otherwise the call tonoSideEffects
will be removed by closure compiler.
function ɵɵadvance
ɵɵadvance: (delta?: number) => void;
Advances to an element for later binding instructions.
Used in conjunction with instructions like property to act on elements with specified indices, for example those created with element or elementStart.
(rf: RenderFlags, ctx: any) => {if (rf & 1) {text(0, 'Hello');text(1, 'Goodbye')element(2, 'div');}if (rf & 2) {advance(2); // Advance twice to the <div>.property('title', 'test');}}Parameter delta
Number of elements to advance forwards by.
function ɵɵattachSourceLocations
ɵɵattachSourceLocations: ( templatePath: string, locations: [index: number, offset: number, line: number, column: number][]) => void;
Sets the location within the source template at which each element in the current view was defined.
Parameter index
Index at which the DOM node was created.
Parameter templatePath
Path to the template at which the node was defined.
Parameter locations
Element locations to which to attach the source location.
function ɵɵattribute
ɵɵattribute: ( name: string, value: any, sanitizer?: SanitizerFn | null, namespace?: string) => typeof ɵɵattribute;
Updates the value of or removes a bound attribute on an Element.
Used in the case of
[attr.title]="value"
Parameter name
name The name of the attribute.
Parameter value
value The attribute is removed when value is
null
orundefined
. Otherwise the attribute value is set to the stringified value.Parameter sanitizer
An optional function used to sanitize the value.
Parameter namespace
Optional namespace to use when setting the attribute.
function ɵɵattributeInterpolate1
ɵɵattributeInterpolate1: ( attrName: string, prefix: string, v0: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate1;
Update an interpolated attribute on an element with single bound value surrounded by text.
Used when the value passed to a property has 1 interpolated value in it:
<div attr.title="prefix{{v0}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate1('title', 'prefix', v0, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate2
ɵɵattributeInterpolate2: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate2;
Update an interpolated attribute on an element with 2 bound values surrounded by text.
Used when the value passed to a property has 2 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate3
ɵɵattributeInterpolate3: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate3;
Update an interpolated attribute on an element with 3 bound values surrounded by text.
Used when the value passed to a property has 3 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate3('title', 'prefix', v0, '-', v1, '-', v2, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate4
ɵɵattributeInterpolate4: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate4;
Update an interpolated attribute on an element with 4 bound values surrounded by text.
Used when the value passed to a property has 4 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate4('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate5
ɵɵattributeInterpolate5: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate5;
Update an interpolated attribute on an element with 5 bound values surrounded by text.
Used when the value passed to a property has 5 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate5('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate6
ɵɵattributeInterpolate6: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate6;
Update an interpolated attribute on an element with 6 bound values surrounded by text.
Used when the value passed to a property has 6 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate6('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate7
ɵɵattributeInterpolate7: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate7;
Update an interpolated attribute on an element with 7 bound values surrounded by text.
Used when the value passed to a property has 7 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate7('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolate8
ɵɵattributeInterpolate8: ( attrName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any, suffix: string, sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolate8;
Update an interpolated attribute on an element with 8 bound values surrounded by text.
Used when the value passed to a property has 8 interpolated values in it:
<div attr.title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolate8('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix');Parameter attrName
The name of the attribute to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter i6
Static value used for concatenation only.
Parameter v7
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵattributeInterpolateV
ɵɵattributeInterpolateV: ( attrName: string, values: any[], sanitizer?: SanitizerFn, namespace?: string) => typeof ɵɵattributeInterpolateV;
Update an interpolated attribute on an element with 9 or more bound values surrounded by text.
Used when the number of interpolated values exceeds 8.
<divtitle="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix"></div>Its compiled representation is::
ɵɵattributeInterpolateV('title', ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,'suffix']);Parameter attrName
The name of the attribute to update.
Parameter values
The collection of values and the strings in-between those values, beginning with a string prefix and ending with a string suffix. (e.g.
['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']
)Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵclassMap
ɵɵclassMap: (classes: string | { [className: string]: boolean }) => void;
Update class bindings using an object literal or class-string on an element.
This instruction is meant to apply styling via the
[class]="exp"
template bindings. When classes are applied to the element they will then be updated with respect to any styles/classes set viaclassProp
. If any classes are set to falsy then they will be removed from the element.Note that the styling instruction will not be applied until
stylingApply
is called. Note that this will the provided classMap value to the host element if this function is called within a host binding.Parameter classes
A key/value map or string of CSS classes that will be added to the given element. Any missing classes (that have already been applied to the element beforehand) will be removed (unset) from the element's list of CSS classes.
function ɵɵclassMapInterpolate1
ɵɵclassMapInterpolate1: (prefix: string, v0: any, suffix: string) => void;
Update an interpolated class on an element with single bound value surrounded by text.
Used when the value passed to a property has 1 interpolated value in it:
<div class="prefix{{v0}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate1('prefix', v0, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate2
ɵɵclassMapInterpolate2: ( prefix: string, v0: any, i0: string, v1: any, suffix: string) => void;
Update an interpolated class on an element with 2 bound values surrounded by text.
Used when the value passed to a property has 2 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate2('prefix', v0, '-', v1, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate3
ɵɵclassMapInterpolate3: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string) => void;
Update an interpolated class on an element with 3 bound values surrounded by text.
Used when the value passed to a property has 3 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate3('prefix', v0, '-', v1, '-', v2, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate4
ɵɵclassMapInterpolate4: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, suffix: string) => void;
Update an interpolated class on an element with 4 bound values surrounded by text.
Used when the value passed to a property has 4 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate4('prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate5
ɵɵclassMapInterpolate5: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, suffix: string) => void;
Update an interpolated class on an element with 5 bound values surrounded by text.
Used when the value passed to a property has 5 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate5('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate6
ɵɵclassMapInterpolate6: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string) => void;
Update an interpolated class on an element with 6 bound values surrounded by text.
Used when the value passed to a property has 6 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate6('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate7
ɵɵclassMapInterpolate7: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string) => void;
Update an interpolated class on an element with 7 bound values surrounded by text.
Used when the value passed to a property has 7 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate7('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolate8
ɵɵclassMapInterpolate8: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any, suffix: string) => void;
Update an interpolated class on an element with 8 bound values surrounded by text.
Used when the value passed to a property has 8 interpolated values in it:
<div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolate8('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter i6
Static value used for concatenation only.
Parameter v7
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵclassMapInterpolateV
ɵɵclassMapInterpolateV: (values: any[]) => void;
Update an interpolated class on an element with 9 or more bound values surrounded by text.
Used when the number of interpolated values exceeds 8.
<divclass="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix"></div>Its compiled representation is:
ɵɵclassMapInterpolateV(['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,'suffix']);.
Parameter values
The collection of values and the strings in-between those values, beginning with a string prefix and ending with a string suffix. (e.g.
['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']
)
function ɵɵclassProp
ɵɵclassProp: ( className: string, value: boolean | undefined | null) => typeof ɵɵclassProp;
Update a class binding on an element with the provided value.
This instruction is meant to handle the
[class.foo]="exp"
case and, therefore, the class binding itself must already be allocated usingstyling
within the creation block.Parameter prop
A valid CSS class (only one).
Parameter value
A true/false value which will turn the class on or off.
Note that this will apply the provided class value to the host element if this function is called within a host binding function.
function ɵɵcomponentInstance
ɵɵcomponentInstance: () => unknown;
Instruction that returns the component instance in which the current instruction is executing. This is a constant-time version of
nextContent
for the case where we know that we need the component instance specifically, rather than the context of a particular template.
function ɵɵconditional
ɵɵconditional: <T>(matchingTemplateIndex: number, contextValue?: T) => void;
The conditional instruction represents the basic building block on the runtime side to support built-in "if" and "switch". On the high level this instruction is responsible for adding and removing views selected by a conditional expression.
Parameter matchingTemplateIndex
Index of a template TNode representing a conditional view to be inserted; -1 represents a special case when there is no view to insert.
Parameter contextValue
Value that should be exposed as the context of the conditional.
function ɵɵcontentQuery
ɵɵcontentQuery: <T>( directiveIndex: number, predicate: ProviderToken<unknown> | string | string[], flags: QueryFlags, read?: any) => void;
Registers a QueryList, associated with a content query, for later refresh (part of a view refresh).
Parameter directiveIndex
Current directive index
Parameter predicate
The type for which the query will search
Parameter flags
Flags associated with the query
Parameter read
What to save in the query
Returns
QueryList
function ɵɵcontentQuerySignal
ɵɵcontentQuerySignal: <T>( directiveIndex: number, target: Signal<T>, predicate: ProviderToken<unknown> | string[], flags: QueryFlags, read?: any) => void;
Creates a new content query and binds it to a signal created by an authoring function.
Parameter directiveIndex
Current directive index
Parameter target
The target signal to which the query should be bound
Parameter predicate
The type for which the query will search
Parameter flags
Flags associated with the query
Parameter read
What to save in the query
function ɵɵCopyDefinitionFeature
ɵɵCopyDefinitionFeature: ( definition: DirectiveDef<any> | ComponentDef<any>) => void;
Copies the fields not handled by the
ɵɵInheritDefinitionFeature
from the supertype of a definition.This exists primarily to support ngcc migration of an existing View Engine pattern, where an entire decorator is inherited from a parent to a child class. When ngcc detects this case, it generates a skeleton definition on the child class, and applies this feature.
The
ɵɵCopyDefinitionFeature
then copies any needed fields from the parent class' definition, including things like the component template function.Parameter definition
The definition of a child class which inherits from a parent class with its own definition.
function ɵɵdeclareLet
ɵɵdeclareLet: (index: number) => typeof ɵɵdeclareLet;
Declares an
@let
at a specific data slot. Returns itself to allow chaining.Parameter index
Index at which to declare the
@let
.
function ɵɵdefer
ɵɵdefer: ( index: number, primaryTmplIndex: number, dependencyResolverFn?: DependencyResolverFn | null, loadingTmplIndex?: number | null, placeholderTmplIndex?: number | null, errorTmplIndex?: number | null, loadingConfigIndex?: number | null, placeholderConfigIndex?: number | null, enableTimerScheduling?: typeof ɵɵdeferEnableTimerScheduling, flags?: TDeferDetailsFlags | null) => void;
Creates runtime data structures for defer blocks.
Parameter index
Index of the
defer
instruction.Parameter primaryTmplIndex
Index of the template with the primary block content.
Parameter dependencyResolverFn
Function that contains dependencies for this defer block.
Parameter loadingTmplIndex
Index of the template with the loading block content.
Parameter placeholderTmplIndex
Index of the template with the placeholder block content.
Parameter errorTmplIndex
Index of the template with the error block content.
Parameter loadingConfigIndex
Index in the constants array of the configuration of the loading. block.
Parameter placeholderConfigIndex
Index in the constants array of the configuration of the placeholder block.
Parameter enableTimerScheduling
Function that enables timer-related scheduling if
after
orminimum
parameters are setup on the@loading
or@placeholder
blocks.Parameter flags
A set of flags to define a particular behavior (e.g. to indicate that hydrate triggers are present and regular triggers should be deactivated in certain scenarios).
function ɵɵdeferEnableTimerScheduling
ɵɵdeferEnableTimerScheduling: ( tView: TView, tDetails: TDeferBlockDetails, placeholderConfigIndex?: number | null, loadingConfigIndex?: number | null) => void;
Enables timer-related scheduling if
after
orminimum
parameters are setup on the@loading
or@placeholder
blocks.
function ɵɵdeferHydrateNever
ɵɵdeferHydrateNever: () => void;
Specifies that hydration never occurs.
function ɵɵdeferHydrateOnHover
ɵɵdeferHydrateOnHover: () => void;
Creates runtime data structures for the
on hover
hydrate trigger.
function ɵɵdeferHydrateOnIdle
ɵɵdeferHydrateOnIdle: () => void;
Sets up logic to handle the
on idle
deferred trigger.
function ɵɵdeferHydrateOnImmediate
ɵɵdeferHydrateOnImmediate: () => void;
Sets up logic to handle the
on immediate
hydrate trigger.
function ɵɵdeferHydrateOnInteraction
ɵɵdeferHydrateOnInteraction: () => void;
Creates runtime data structures for the
on interaction
hydrate trigger.
function ɵɵdeferHydrateOnTimer
ɵɵdeferHydrateOnTimer: (delay: number) => void;
Creates runtime data structures for the
on timer
hydrate trigger.Parameter delay
Amount of time to wait before loading the content.
function ɵɵdeferHydrateOnViewport
ɵɵdeferHydrateOnViewport: () => void;
Creates runtime data structures for the
on viewport
hydrate trigger.
function ɵɵdeferHydrateWhen
ɵɵdeferHydrateWhen: (rawValue: unknown) => void;
Hydrates the deferred content when a value becomes truthy.
function ɵɵdeferOnHover
ɵɵdeferOnHover: (triggerIndex: number, walkUpTimes?: number) => void;
Creates runtime data structures for the
on hover
deferred trigger.Parameter triggerIndex
Index at which to find the trigger element.
Parameter walkUpTimes
Number of times to walk up/down the tree hierarchy to find the trigger.
function ɵɵdeferOnIdle
ɵɵdeferOnIdle: () => void;
Sets up logic to handle the
on idle
deferred trigger.
function ɵɵdeferOnImmediate
ɵɵdeferOnImmediate: () => void;
Sets up logic to handle the
on immediate
deferred trigger.
function ɵɵdeferOnInteraction
ɵɵdeferOnInteraction: (triggerIndex: number, walkUpTimes?: number) => void;
Creates runtime data structures for the
on interaction
deferred trigger.Parameter triggerIndex
Index at which to find the trigger element.
Parameter walkUpTimes
Number of times to walk up/down the tree hierarchy to find the trigger.
function ɵɵdeferOnTimer
ɵɵdeferOnTimer: (delay: number) => void;
Creates runtime data structures for the
on timer
deferred trigger.Parameter delay
Amount of time to wait before loading the content.
function ɵɵdeferOnViewport
ɵɵdeferOnViewport: (triggerIndex: number, walkUpTimes?: number) => void;
Creates runtime data structures for the
on viewport
deferred trigger.Parameter triggerIndex
Index at which to find the trigger element.
Parameter walkUpTimes
Number of times to walk up/down the tree hierarchy to find the trigger.
function ɵɵdeferPrefetchOnHover
ɵɵdeferPrefetchOnHover: (triggerIndex: number, walkUpTimes?: number) => void;
Creates runtime data structures for the
prefetch on hover
deferred trigger.Parameter triggerIndex
Index at which to find the trigger element.
Parameter walkUpTimes
Number of times to walk up/down the tree hierarchy to find the trigger.
function ɵɵdeferPrefetchOnIdle
ɵɵdeferPrefetchOnIdle: () => void;
Sets up logic to handle the
prefetch on idle
deferred trigger.
function ɵɵdeferPrefetchOnImmediate
ɵɵdeferPrefetchOnImmediate: () => void;
Sets up logic to handle the
prefetch on immediate
deferred trigger.
function ɵɵdeferPrefetchOnInteraction
ɵɵdeferPrefetchOnInteraction: ( triggerIndex: number, walkUpTimes?: number) => void;
Creates runtime data structures for the
prefetch on interaction
deferred trigger.Parameter triggerIndex
Index at which to find the trigger element.
Parameter walkUpTimes
Number of times to walk up/down the tree hierarchy to find the trigger.
function ɵɵdeferPrefetchOnTimer
ɵɵdeferPrefetchOnTimer: (delay: number) => void;
Creates runtime data structures for the
prefetch on timer
deferred trigger.Parameter delay
Amount of time to wait before prefetching the content.
function ɵɵdeferPrefetchOnViewport
ɵɵdeferPrefetchOnViewport: (triggerIndex: number, walkUpTimes?: number) => void;
Creates runtime data structures for the
prefetch on viewport
deferred trigger.Parameter triggerIndex
Index at which to find the trigger element.
Parameter walkUpTimes
Number of times to walk up/down the tree hierarchy to find the trigger.
function ɵɵdeferPrefetchWhen
ɵɵdeferPrefetchWhen: (rawValue: unknown) => void;
Prefetches the deferred content when a value becomes truthy.
function ɵɵdeferWhen
ɵɵdeferWhen: (rawValue: unknown) => void;
Loads defer block dependencies when a trigger value becomes truthy.
function ɵɵdefineComponent
ɵɵdefineComponent: <T>( componentDefinition: ComponentDefinition<T>) => ComponentDef<any>;
Create a component definition object.
# Example
class MyComponent {// Generated by Angular Template Compiler// [Symbol] syntax will not be supported by TypeScript until v2.7static ɵcmp = defineComponent({...});}
function ɵɵdefineDirective
ɵɵdefineDirective: <T>( directiveDefinition: DirectiveDefinition<T>) => DirectiveDef<any>;
Create a directive definition object.
# Example
class MyDirective {// Generated by Angular Template Compiler// [Symbol] syntax will not be supported by TypeScript until v2.7static ɵdir = ɵɵdefineDirective({...});}
function ɵɵdefineInjectable
ɵɵdefineInjectable: <T>(opts: { token: unknown; providedIn?: Type$1<any> | 'root' | 'platform' | 'any' | 'environment' | null; factory: () => T;}) => unknown;
Construct an injectable definition which defines how a token will be constructed by the DI system, and in which injectors (if any) it will be available.
This should be assigned to a static
ɵprov
field on a type, which will then be anInjectableType
.Options: *
providedIn
determines which injectors will include the injectable, by either associating it with an@NgModule
or otherInjectorType
, or by specifying that this injectable should be provided in the'root'
injector, which will be the application-level injector in most apps. *factory
gives the zero argument function which will create an instance of the injectable. The factory can call [inject
](api/core/inject) to access theInjector
and request injection of dependencies.This instruction has been emitted by ViewEngine for some time and is deployed to npm.
function ɵɵdefineInjector
ɵɵdefineInjector: (options: { providers?: any[]; imports?: any[] }) => unknown;
Construct an
InjectorDef
which configures an injector.This should be assigned to a static injector def (
ɵinj
) field on a type, which will then be anInjectorType
.Options:
*
providers
: an optional array of providers to add to the injector. Each provider must either have a factory or point to a type which has aɵprov
static property (the type must be anInjectableType
). *imports
: an optional array of imports of otherInjectorType
s orInjectorTypeWithModule
s whose providers will also be added to the injector. Locally provided types will override providers from imports.
function ɵɵdefineNgModule
ɵɵdefineNgModule: <T>(def: { type: T; bootstrap?: Type$1<any>[] | (() => Type$1<any>[]); declarations?: Type$1<any>[] | (() => Type$1<any>[]); imports?: Type$1<any>[] | (() => Type$1<any>[]); exports?: Type$1<any>[] | (() => Type$1<any>[]); schemas?: SchemaMetadata[] | null; id?: string | null;}) => unknown;
function ɵɵdefinePipe
ɵɵdefinePipe: <T>(pipeDef: { name: string; type: Type$1<T>; pure?: boolean; standalone?: boolean;}) => unknown;
Create a pipe definition object.
# Example
class MyPipe implements PipeTransform {// Generated by Angular Template Compilerstatic ɵpipe = definePipe({...});}Parameter pipeDef
Pipe definition generated by the compiler
function ɵɵdirectiveInject
ɵɵdirectiveInject: { <T>(token: ProviderToken<T>): T; <T>(token: ProviderToken<T>, flags: InjectFlags): T;};
Returns the value associated to the given token from the injectors.
directiveInject
is intended to be used for directive, component and pipe factories. All other injection useinject
which does not walk the node injector tree.Usage example (in factory function):
class SomeDirective {constructor(directive: DirectiveA) {}static ɵdir = ɵɵdefineDirective({type: SomeDirective,factory: () => new SomeDirective(ɵɵdirectiveInject(DirectiveA))});}Parameter token
the type or token to inject
Parameter flags
Injection flags
Returns
the value from the injector or
null
when not found
function ɵɵdisableBindings
ɵɵdisableBindings: () => void;
Disables directive matching on element.
* Example:
<my-comp my-directive>Should match component / directive.</my-comp><div ngNonBindable><!-- ɵɵdisableBindings() --><my-comp my-directive>Should not match component / directive because we are in ngNonBindable.</my-comp><!-- ɵɵenableBindings() --></div>
function ɵɵelement
ɵɵelement: ( index: number, name: string, attrsIndex?: number | null, localRefsIndex?: number) => typeof ɵɵelement;
Creates an empty element using elementStart and elementEnd
Parameter index
Index of the element in the data array
Parameter name
Name of the DOM Node
Parameter attrsIndex
Index of the element's attributes in the
consts
array.Parameter localRefsIndex
Index of the element's local references in the
consts
array.Returns
This function returns itself so that it may be chained.
function ɵɵelementContainer
ɵɵelementContainer: ( index: number, attrsIndex?: number | null, localRefsIndex?: number) => typeof ɵɵelementContainer;
Creates an empty logical container using elementContainerStart and elementContainerEnd
Parameter index
Index of the element in the LView array
Parameter attrsIndex
Index of the container attributes in the
consts
array.Parameter localRefsIndex
Index of the container's local references in the
consts
array.Returns
This function returns itself so that it may be chained.
function ɵɵelementContainerEnd
ɵɵelementContainerEnd: () => typeof ɵɵelementContainerEnd;
Mark the end of the .
Returns
This function returns itself so that it may be chained.
function ɵɵelementContainerStart
ɵɵelementContainerStart: ( index: number, attrsIndex?: number | null, localRefsIndex?: number) => typeof ɵɵelementContainerStart;
Creates a logical container for other nodes () backed by a comment node in the DOM. The instruction must later be followed by
elementContainerEnd()
call.Parameter index
Index of the element in the LView array
Parameter attrsIndex
Index of the container attributes in the
consts
array.Parameter localRefsIndex
Index of the container's local references in the
consts
array.Returns
This function returns itself so that it may be chained.
Even if this instruction accepts a set of attributes no actual attribute values are propagated to the DOM (as a comment node can't have attributes). Attributes are here only for directive matching purposes and setting initial inputs of directives.
function ɵɵelementEnd
ɵɵelementEnd: () => typeof ɵɵelementEnd;
Mark the end of the element.
Returns
This function returns itself so that it may be chained.
function ɵɵelementStart
ɵɵelementStart: ( index: number, name: string, attrsIndex?: number | null, localRefsIndex?: number) => typeof ɵɵelementStart;
Create DOM element. The instruction must later be followed by
elementEnd()
call.Parameter index
Index of the element in the LView array
Parameter name
Name of the DOM Node
Parameter attrsIndex
Index of the element's attributes in the
consts
array.Parameter localRefsIndex
Index of the element's local references in the
consts
array.Returns
This function returns itself so that it may be chained.
Attributes and localRefs are passed as an array of strings where elements with an even index hold an attribute name and elements with an odd index hold an attribute value, ex.: ['id', 'warning5', 'class', 'alert']
function ɵɵenableBindings
ɵɵenableBindings: () => void;
Enables directive matching on elements.
* Example:
<my-comp my-directive>Should match component / directive.</my-comp><div ngNonBindable><!-- ɵɵdisableBindings() --><my-comp my-directive>Should not match component / directive because we are in ngNonBindable.</my-comp><!-- ɵɵenableBindings() --></div>
function ɵɵExternalStylesFeature
ɵɵExternalStylesFeature: (styleUrls: string[]) => ComponentDefFeature;
A feature that adds support for external runtime styles for a component. An external runtime style is a URL to a CSS stylesheet that contains the styles for a given component. For browsers, this URL will be used in an appended
link
element when the component is rendered. This feature is typically used for Hot Module Replacement (HMR) of component stylesheets by leveraging preexisting global stylesheet HMR available in most development servers.
function ɵɵgetComponentDepsFactory
ɵɵgetComponentDepsFactory: ( type: ComponentType<any>, rawImports?: RawScopeInfoFromDecorator[]) => () => DependencyTypeList;
function ɵɵgetCurrentView
ɵɵgetCurrentView: () => OpaqueViewState;
Returns the current OpaqueViewState instance.
Used in conjunction with the restoreView() instruction to save a snapshot of the current view and restore it when listeners are invoked. This allows walking the declaration view tree in listeners to get vars from parent views.
function ɵɵgetInheritedFactory
ɵɵgetInheritedFactory: <T>(type: Type$1<any>) => (type: Type$1<T>) => T;
function ɵɵHostDirectivesFeature
ɵɵHostDirectivesFeature: ( rawHostDirectives: HostDirectiveConfig[] | (() => HostDirectiveConfig[])) => DirectiveDefFeature;
This feature adds the host directives behavior to a directive definition by patching a function onto it. The expectation is that the runtime will invoke the function during directive matching.
For example:
class ComponentWithHostDirective {static ɵcmp = defineComponent({type: ComponentWithHostDirective,features: [ɵɵHostDirectivesFeature([SimpleHostDirective,{directive: AdvancedHostDirective, inputs: ['foo: alias'], outputs: ['bar']},])]});}
function ɵɵhostProperty
ɵɵhostProperty: <T>( propName: string, value: T, sanitizer?: SanitizerFn | null) => typeof ɵɵhostProperty;
Update a property on a host element. Only applies to native node properties, not inputs.
Operates on the element selected by index via the select instruction.
Parameter propName
Name of property. Because it is going to DOM, this is not subject to renaming as part of minification.
Parameter value
New value to write.
Parameter sanitizer
An optional function used to sanitize the value.
Returns
This function returns itself so that it may be chained (e.g.
property('name', ctx.name)('title', ctx.title)
)
function ɵɵi18n
ɵɵi18n: (index: number, messageIndex: number, subTemplateIndex?: number) => void;
Use this instruction to create a translation block that doesn't contain any placeholder. It calls both i18nStart and i18nEnd in one instruction.
The translation
message
is the value which is locale specific. The translation string may contain placeholders which associate inner elements and sub-templates within the translation.The translation
message
placeholders are: -�{index}(:{block})�
: *Binding Placeholder*: Marks a location where an expression will be interpolated into. The placeholderindex
points to the expression binding index. An optionalblock
that matches the sub-template in which it was declared. -�#{index}(:{block})�
/�/#{index}(:{block})�
: *Element Placeholder*: Marks the beginning and end of DOM element that were embedded in the original translation block. The placeholderindex
points to the element index in the template instructions set. An optionalblock
that matches the sub-template in which it was declared. -�*{index}:{block}�
/�/*{index}:{block}�
: *Sub-template Placeholder*: Sub-templates must be split up and translated separately in each angular template function. Theindex
points to thetemplate
instruction index. Ablock
that matches the sub-template in which it was declared.Parameter index
A unique index of the translation in the static block.
Parameter messageIndex
An index of the translation message from the
def.consts
array.Parameter subTemplateIndex
Optional sub-template index in the
message
.
function ɵɵi18nApply
ɵɵi18nApply: (index: number) => void;
Updates a translation block or an i18n attribute when the bindings have changed.
Parameter index
Index of either i18nStart (translation block) or i18nAttributes (i18n attribute) on which it should update the content.
function ɵɵi18nAttributes
ɵɵi18nAttributes: (index: number, attrsIndex: number) => void;
Marks a list of attributes as translatable.
Parameter index
A unique index in the static block
Parameter values
function ɵɵi18nEnd
ɵɵi18nEnd: () => void;
Translates a translation block marked by
i18nStart
andi18nEnd
. It inserts the text/ICU nodes into the render tree, moves the placeholder nodes and removes the deleted nodes.
function ɵɵi18nExp
ɵɵi18nExp: <T>(value: T) => typeof ɵɵi18nExp;
Stores the values of the bindings during each update cycle in order to determine if we need to update the translated nodes.
Parameter value
The binding's value
Returns
This function returns itself so that it may be chained (e.g.
i18nExp(ctx.name)(ctx.title)
)
function ɵɵi18nPostprocess
ɵɵi18nPostprocess: ( message: string, replacements?: { [key: string]: string | string[] }) => string;
Handles message string post-processing for internationalization.
Handles message string post-processing by transforming it from intermediate format (that might contain some markers that we need to replace) to the final form, consumable by i18nStart instruction. Post processing steps include:
1. Resolve all multi-value cases (like [�*1:1��#2:1�|�#4:1�|�5�]) 2. Replace all ICU vars (like "VAR_PLURAL") 3. Replace all placeholders used inside ICUs in a form of {PLACEHOLDER} 4. Replace all ICU references with corresponding values (like �ICU_EXP_ICU_1�) in case multiple ICUs have the same placeholder name
Parameter message
Raw translation string for post processing
Parameter replacements
Set of replacements that should be applied
Returns
Transformed string that can be consumed by i18nStart instruction
function ɵɵi18nStart
ɵɵi18nStart: ( index: number, messageIndex: number, subTemplateIndex?: number) => void;
Marks a block of text as translatable.
The instructions
i18nStart
andi18nEnd
mark the translation block in the template. The translationmessage
is the value which is locale specific. The translation string may contain placeholders which associate inner elements and sub-templates within the translation.The translation
message
placeholders are: -�{index}(:{block})�
: *Binding Placeholder*: Marks a location where an expression will be interpolated into. The placeholderindex
points to the expression binding index. An optionalblock
that matches the sub-template in which it was declared. -�#{index}(:{block})�
/�/#{index}(:{block})�
: *Element Placeholder*: Marks the beginning and end of DOM element that were embedded in the original translation block. The placeholderindex
points to the element index in the template instructions set. An optionalblock
that matches the sub-template in which it was declared. -�*{index}:{block}�
/�/*{index}:{block}�
: *Sub-template Placeholder*: Sub-templates must be split up and translated separately in each angular template function. Theindex
points to thetemplate
instruction index. Ablock
that matches the sub-template in which it was declared.Parameter index
A unique index of the translation in the static block.
Parameter messageIndex
An index of the translation message from the
def.consts
array.Parameter subTemplateIndex
Optional sub-template index in the
message
.
function ɵɵInheritDefinitionFeature
ɵɵInheritDefinitionFeature: ( definition: DirectiveDef<any> | ComponentDef<any>) => void;
Merges the definition from a super class to a sub class.
Parameter definition
The definition that is a SubClass of another directive of component
function ɵɵinject
ɵɵinject: { <T>(token: ProviderToken<T>): T; <T>(token: ProviderToken<T>, flags?: InjectFlags): T; (token: HostAttributeToken): string; (token: HostAttributeToken, flags?: InjectFlags): string; <T>(token: HostAttributeToken | ProviderToken<T>, flags?: InjectFlags): string;};
Generated instruction: injects a token from the currently active injector.
(Additional documentation moved to
inject
, as it is the public API, and an alias for this instruction)See Also
inject This instruction has been emitted by ViewEngine for some time and is deployed to npm.
function ɵɵinjectAttribute
ɵɵinjectAttribute: (attrNameToInject: string) => string | null;
Facade for the attribute injection from DI.
function ɵɵinvalidFactory
ɵɵinvalidFactory: () => never;
Throws an error indicating that a factory function could not be generated by the compiler for a particular class.
This instruction allows the actual error message to be optimized away when ngDevMode is turned off, saving bytes of generated code while still providing a good experience in dev mode.
The name of the class is not mentioned here, but will be in the generated factory function name and thus in the stack trace.
function ɵɵinvalidFactoryDep
ɵɵinvalidFactoryDep: (index: number) => never;
Throws an error indicating that a factory function could not be generated by the compiler for a particular class.
The name of the class is not mentioned here, but will be in the generated factory function name and thus in the stack trace.
function ɵɵlistener
ɵɵlistener: ( eventName: string, listenerFn: (e?: any) => any, useCapture?: boolean, eventTargetResolver?: GlobalTargetResolver) => typeof ɵɵlistener;
Adds an event listener to the current node.
If an output exists on one of the node's directives, it also subscribes to the output and saves the subscription for later cleanup.
Parameter eventName
Name of the event
Parameter listenerFn
The function to be called when event emits
Parameter useCapture
Whether or not to use capture in event listener - this argument is a reminder from the Renderer3 infrastructure and should be removed from the instruction arguments
Parameter eventTargetResolver
Function that returns global target information in case this listener should be attached to a global object like window, document or body
function ɵɵloadQuery
ɵɵloadQuery: <T>() => QueryList<T>;
Loads a QueryList corresponding to the current view or content query.
function ɵɵnamespaceHTML
ɵɵnamespaceHTML: () => void;
Sets the namespace used to create elements to
null
, which forces element creation to usecreateElement
rather thancreateElementNS
.
function ɵɵnamespaceMathML
ɵɵnamespaceMathML: () => void;
Sets the namespace used to create elements to
'http://www.w3.org/1998/MathML/'
in global state.
function ɵɵnamespaceSVG
ɵɵnamespaceSVG: () => void;
Sets the namespace used to create elements to
'http://www.w3.org/2000/svg'
in global state.
function ɵɵnextContext
ɵɵnextContext: <T = any>(level?: number) => T;
Retrieves a context at the level specified and saves it as the global, contextViewData. Will get the next level up if level is not specified.
This is used to save contexts of parent views so they can be bound in embedded views, or in conjunction with reference() to bind a ref from a parent view.
Parameter level
The relative level of the view from which to grab context compared to contextVewData
Returns
context
function ɵɵngDeclareClassMetadata
ɵɵngDeclareClassMetadata: (decl: { type: Type$1<any>; decorators: any[]; ctorParameters?: () => any[]; propDecorators?: { [field: string]: any };}) => void;
Evaluates the class metadata declaration.
function ɵɵngDeclareClassMetadataAsync
ɵɵngDeclareClassMetadataAsync: (decl: { type: Type$1<any>; resolveDeferredDeps: () => Promise<Type$1<unknown>>[]; resolveMetadata: (...types: Type$1<unknown>[]) => { decorators: any[]; ctorParameters: (() => any[]) | null; propDecorators: { [field: string]: any }; };}) => void;
Evaluates the class metadata of a component that contains deferred blocks.
function ɵɵngDeclareComponent
ɵɵngDeclareComponent: (decl: R3DeclareComponentFacade) => unknown;
Compiles a partial component declaration object into a full component definition object.
function ɵɵngDeclareDirective
ɵɵngDeclareDirective: (decl: R3DeclareDirectiveFacade) => unknown;
Compiles a partial directive declaration object into a full directive definition object.
function ɵɵngDeclareFactory
ɵɵngDeclareFactory: (decl: R3DeclareFactoryFacade) => unknown;
Compiles a partial pipe declaration object into a full pipe definition object.
function ɵɵngDeclareInjectable
ɵɵngDeclareInjectable: (decl: R3DeclareInjectableFacade) => unknown;
Compiles a partial injectable declaration object into a full injectable definition object.
function ɵɵngDeclareInjector
ɵɵngDeclareInjector: (decl: R3DeclareInjectorFacade) => unknown;
Compiles a partial injector declaration object into a full injector definition object.
function ɵɵngDeclareNgModule
ɵɵngDeclareNgModule: (decl: R3DeclareNgModuleFacade) => unknown;
Compiles a partial NgModule declaration object into a full NgModule definition object.
function ɵɵngDeclarePipe
ɵɵngDeclarePipe: (decl: R3DeclarePipeFacade) => unknown;
Compiles a partial pipe declaration object into a full pipe definition object.
function ɵɵNgOnChangesFeature
ɵɵNgOnChangesFeature: () => DirectiveDefFeature;
The NgOnChangesFeature decorates a component with support for the ngOnChanges lifecycle hook, so it should be included in any component that implements that hook.
If the component or directive uses inheritance, the NgOnChangesFeature MUST be included as a feature AFTER InheritDefinitionFeature, otherwise inherited properties will not be propagated to the ngOnChanges lifecycle hook.
Example usage:
static ɵcmp = defineComponent({...inputs: {name: 'publicName'},features: [NgOnChangesFeature]});
function ɵɵpipe
ɵɵpipe: (index: number, pipeName: string) => any;
Create a pipe.
Parameter index
Pipe index where the pipe will be stored.
Parameter pipeName
The name of the pipe
Returns
T the instance of the pipe.
function ɵɵpipeBind1
ɵɵpipeBind1: (index: number, offset: number, v1: any) => any;
Invokes a pipe with 1 arguments.
This instruction acts as a guard to PipeTransform#transform invoking the pipe only when an input to the pipe changes.
Parameter index
Pipe index where the pipe was stored on creation.
Parameter offset
the binding offset
Parameter v1
1st argument to PipeTransform#transform.
function ɵɵpipeBind2
ɵɵpipeBind2: (index: number, slotOffset: number, v1: any, v2: any) => any;
Invokes a pipe with 2 arguments.
This instruction acts as a guard to PipeTransform#transform invoking the pipe only when an input to the pipe changes.
Parameter index
Pipe index where the pipe was stored on creation.
Parameter slotOffset
the offset in the reserved slot space
Parameter v1
1st argument to PipeTransform#transform.
Parameter v2
2nd argument to PipeTransform#transform.
function ɵɵpipeBind3
ɵɵpipeBind3: ( index: number, slotOffset: number, v1: any, v2: any, v3: any) => any;
Invokes a pipe with 3 arguments.
This instruction acts as a guard to PipeTransform#transform invoking the pipe only when an input to the pipe changes.
Parameter index
Pipe index where the pipe was stored on creation.
Parameter slotOffset
the offset in the reserved slot space
Parameter v1
1st argument to PipeTransform#transform.
Parameter v2
2nd argument to PipeTransform#transform.
Parameter v3
4rd argument to PipeTransform#transform.
function ɵɵpipeBind4
ɵɵpipeBind4: ( index: number, slotOffset: number, v1: any, v2: any, v3: any, v4: any) => any;
Invokes a pipe with 4 arguments.
This instruction acts as a guard to PipeTransform#transform invoking the pipe only when an input to the pipe changes.
Parameter index
Pipe index where the pipe was stored on creation.
Parameter slotOffset
the offset in the reserved slot space
Parameter v1
1st argument to PipeTransform#transform.
Parameter v2
2nd argument to PipeTransform#transform.
Parameter v3
3rd argument to PipeTransform#transform.
Parameter v4
4th argument to PipeTransform#transform.
function ɵɵpipeBindV
ɵɵpipeBindV: (index: number, slotOffset: number, values: [any, ...any[]]) => any;
Invokes a pipe with variable number of arguments.
This instruction acts as a guard to PipeTransform#transform invoking the pipe only when an input to the pipe changes.
Parameter index
Pipe index where the pipe was stored on creation.
Parameter slotOffset
the offset in the reserved slot space
Parameter values
Array of arguments to pass to PipeTransform#transform method.
function ɵɵprojection
ɵɵprojection: ( nodeIndex: number, selectorIndex?: number, attrs?: TAttributes, fallbackTemplateFn?: ComponentTemplate<unknown>, fallbackDecls?: number, fallbackVars?: number) => void;
Inserts previously re-distributed projected nodes. This instruction must be preceded by a call to the projectionDef instruction.
Parameter nodeIndex
Index of the projection node.
Parameter selectorIndex
Index of the slot selector. - 0 when the selector is
*
(or unspecified as this is the default value), - 1 based index of the selector from the projectionDefParameter attrs
Static attributes set on the
ng-content
node.Parameter fallbackTemplateFn
Template function with fallback content. Will be rendered if the slot is empty at runtime.
Parameter fallbackDecls
Number of declarations in the fallback template.
Parameter fallbackVars
Number of variables in the fallback template.
function ɵɵprojectionDef
ɵɵprojectionDef: (projectionSlots?: ProjectionSlots) => void;
Instruction to distribute projectable nodes among occurrences in a given template. It takes all the selectors from the entire component's template and decides where each projected node belongs (it re-distributes nodes among "buckets" where each "bucket" is backed by a selector).
This function requires CSS selectors to be provided in 2 forms: parsed (by a compiler) and text, un-parsed form.
The parsed form is needed for efficient matching of a node against a given CSS selector. The un-parsed, textual form is needed for support of the ngProjectAs attribute.
Having a CSS selector in 2 different formats is not ideal, but alternatives have even more drawbacks: - having only a textual form would require runtime parsing of CSS selectors; - we can't have only a parsed as we can't re-construct textual form from it (as entered by a template author).
Parameter projectionSlots
? A collection of projection slots. A projection slot can be based on a parsed CSS selectors or set to the wildcard selector ("*") in order to match all nodes which do not match any selector. If not specified, a single wildcard selector projection slot will be defined.
function ɵɵproperty
ɵɵproperty: <T>( propName: string, value: T, sanitizer?: SanitizerFn | null) => typeof ɵɵproperty;
Update a property on a selected element.
Operates on the element selected by index via the select instruction.
If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiledParameter propName
Name of property. Because it is going to DOM, this is not subject to renaming as part of minification.
Parameter value
New value to write.
Parameter sanitizer
An optional function used to sanitize the value.
Returns
This function returns itself so that it may be chained (e.g.
property('name', ctx.name)('title', ctx.title)
)
function ɵɵpropertyInterpolate
ɵɵpropertyInterpolate: ( propName: string, v0: any, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate;
Update an interpolated property on an element with a lone bound value
Used when the value passed to a property has 1 interpolated value in it, an no additional text surrounds that interpolated value:
<div title="{{v0}}"></div>Its compiled representation is::
ɵɵpropertyInterpolate('title', v0);If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate1
ɵɵpropertyInterpolate1: ( propName: string, prefix: string, v0: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate1;
Update an interpolated property on an element with single bound value surrounded by text.
Used when the value passed to a property has 1 interpolated value in it:
<div title="prefix{{v0}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate1('title', 'prefix', v0, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate2
ɵɵpropertyInterpolate2: ( propName: string, prefix: string, v0: any, i0: string, v1: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate2;
Update an interpolated property on an element with 2 bound values surrounded by text.
Used when the value passed to a property has 2 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate2('title', 'prefix', v0, '-', v1, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate3
ɵɵpropertyInterpolate3: ( propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate3;
Update an interpolated property on an element with 3 bound values surrounded by text.
Used when the value passed to a property has 3 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate3('title', 'prefix', v0, '-', v1, '-', v2, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate4
ɵɵpropertyInterpolate4: ( propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate4;
Update an interpolated property on an element with 4 bound values surrounded by text.
Used when the value passed to a property has 4 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate4('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate5
ɵɵpropertyInterpolate5: ( propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate5;
Update an interpolated property on an element with 5 bound values surrounded by text.
Used when the value passed to a property has 5 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate5('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate6
ɵɵpropertyInterpolate6: ( propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate6;
Update an interpolated property on an element with 6 bound values surrounded by text.
Used when the value passed to a property has 6 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate6('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate7
ɵɵpropertyInterpolate7: ( propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate7;
Update an interpolated property on an element with 7 bound values surrounded by text.
Used when the value passed to a property has 7 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate7('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolate8
ɵɵpropertyInterpolate8: ( propName: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any, suffix: string, sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolate8;
Update an interpolated property on an element with 8 bound values surrounded by text.
Used when the value passed to a property has 8 interpolated values in it:
<div title="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolate8('title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix');If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update
Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter i6
Static value used for concatenation only.
Parameter v7
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵpropertyInterpolateV
ɵɵpropertyInterpolateV: ( propName: string, values: any[], sanitizer?: SanitizerFn) => typeof ɵɵpropertyInterpolateV;
Update an interpolated property on an element with 9 or more bound values surrounded by text.
Used when the number of interpolated values exceeds 8.
<divtitle="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix"></div>Its compiled representation is::
ɵɵpropertyInterpolateV('title', ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,'suffix']);If the property name also exists as an input property on one of the element's directives, the component property will be set instead of the element property. This check must be conducted at runtime so child components that add new
@Inputs
don't have to be re-compiled.Parameter propName
The name of the property to update.
Parameter values
The collection of values and the strings in between those values, beginning with a string prefix and ending with a string suffix. (e.g.
['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']
)Parameter sanitizer
An optional sanitizer function
Returns
itself, so that it may be chained.
function ɵɵProvidersFeature
ɵɵProvidersFeature: <T>( providers: Provider[], viewProviders?: Provider[]) => (definition: DirectiveDef<T>) => void;
This feature resolves the providers of a directive (or component), and publish them into the DI system, making it visible to others for injection.
For example:
class ComponentWithProviders {constructor(private greeter: GreeterDE) {}static ɵcmp = defineComponent({type: ComponentWithProviders,selectors: [['component-with-providers']],factory: () => new ComponentWithProviders(directiveInject(GreeterDE as any)),decls: 1,vars: 1,template: function(fs: RenderFlags, ctx: ComponentWithProviders) {if (fs & RenderFlags.Create) {ɵɵtext(0);}if (fs & RenderFlags.Update) {ɵɵtextInterpolate(ctx.greeter.greet());}},features: [ɵɵProvidersFeature([GreeterDE])]});}Parameter definition
function ɵɵpureFunction0
ɵɵpureFunction0: <T>(slotOffset: number, pureFn: () => T, thisArg?: any) => T;
If the value hasn't been saved, calls the pure function to store and return the value. If it has been saved, returns the saved value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Function that returns a value
Parameter thisArg
Optional calling context of pureFn
Returns
value
function ɵɵpureFunction1
ɵɵpureFunction1: ( slotOffset: number, pureFn: (v: any) => any, exp: any, thisArg?: any) => any;
If the value of the provided exp has changed, calls the pure function to return an updated value. Or if the value has not changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Function that returns an updated value
Parameter exp
Updated expression value
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction2
ɵɵpureFunction2: ( slotOffset: number, pureFn: (v1: any, v2: any) => any, exp1: any, exp2: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction3
ɵɵpureFunction3: ( slotOffset: number, pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter exp3
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction4
ɵɵpureFunction4: ( slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any, exp3: any, exp4: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter exp3
Parameter exp4
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction5
ɵɵpureFunction5: ( slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any, exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter exp3
Parameter exp4
Parameter exp5
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction6
ɵɵpureFunction6: ( slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any, exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter exp3
Parameter exp4
Parameter exp5
Parameter exp6
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction7
ɵɵpureFunction7: ( slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any, exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter exp3
Parameter exp4
Parameter exp5
Parameter exp6
Parameter exp7
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunction8
ɵɵpureFunction8: ( slotOffset: number, pureFn: ( v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any ) => any, exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, exp8: any, thisArg?: any) => any;
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
Parameter exp1
Parameter exp2
Parameter exp3
Parameter exp4
Parameter exp5
Parameter exp6
Parameter exp7
Parameter exp8
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵpureFunctionV
ɵɵpureFunctionV: ( slotOffset: number, pureFn: (...v: any[]) => any, exps: any[], thisArg?: any) => any;
pureFunction instruction that can support any number of bindings.
If the value of any provided exp has changed, calls the pure function to return an updated value. Or if no values have changed, returns cached value.
Parameter slotOffset
the offset from binding root to the reserved slot
Parameter pureFn
A pure function that takes binding values and builds an object or array containing those values.
Parameter exps
An array of binding values
Parameter thisArg
Optional calling context of pureFn
Returns
Updated or cached value
function ɵɵqueryAdvance
ɵɵqueryAdvance: (indexOffset?: number) => void;
Advances the current query index by a specified offset.
Adjusting the current query index is necessary in cases where a given directive has a mix of zone-based and signal-based queries. The signal-based queries don't require tracking of the current index (those are refreshed on demand and not during change detection) so this instruction is only necessary for backward-compatibility.
Parameter index
offset to apply to the current query index (defaults to 1)
function ɵɵqueryRefresh
ɵɵqueryRefresh: (queryList: QueryList<any>) => boolean;
Refreshes a query by combining matches from all active views and removing matches from deleted views.
Returns
true
if a query got dirty during change detection or if this is a static query resolving in creation mode,false
otherwise.
function ɵɵreadContextLet
ɵɵreadContextLet: <T>(index: number) => T;
Retrieves the value of a
@let
declaration defined in a parent view.Parameter index
Index of the declaration within the view.
function ɵɵreference
ɵɵreference: <T>(index: number) => T;
Retrieves a local reference from the current contextViewData.
If the reference to retrieve is in a parent view, this instruction is used in conjunction with a nextContext() call, which walks up the tree and updates the contextViewData instance.
Parameter index
The index of the local ref in contextViewData.
function ɵɵregisterNgModuleType
ɵɵregisterNgModuleType: (ngModuleType: NgModuleType, id: string) => void;
Adds the given NgModule type to Angular's NgModule registry.
This is generated as a side-effect of NgModule compilation. Note that the
id
is passed in explicitly and not read from the NgModule definition. This is for two reasons: it avoids a megamorphic read, and in JIT there's a chicken-and-egg problem where the NgModule may not be fully resolved when it's registered.
function ɵɵrepeater
ɵɵrepeater: (collection: Iterable<unknown> | undefined | null) => void;
The repeater instruction does update-time diffing of a provided collection (against the collection seen previously) and maps changes in the collection to views structure (by adding, removing or moving views as needed).
Parameter collection
the collection instance to be checked for changes
function ɵɵrepeaterCreate
ɵɵrepeaterCreate: ( index: number, templateFn: ComponentTemplate<unknown>, decls: number, vars: number, tagName: string | null, attrsIndex: number | null, trackByFn: TrackByFunction<unknown>, trackByUsesComponentInstance?: boolean, emptyTemplateFn?: ComponentTemplate<unknown>, emptyDecls?: number, emptyVars?: number, emptyTagName?: string | null, emptyAttrsIndex?: number | null) => void;
The repeaterCreate instruction runs in the creation part of the template pass and initializes internal data structures required by the update pass of the built-in repeater logic. Repeater metadata are allocated in the data part of LView with the following layout: - LView[HEADER_OFFSET + index] - metadata - LView[HEADER_OFFSET + index + 1] - reference to a template function rendering an item - LView[HEADER_OFFSET + index + 2] - optional reference to a template function rendering an empty block
Parameter index
Index at which to store the metadata of the repeater.
Parameter templateFn
Reference to the template of the main repeater block.
Parameter decls
The number of nodes, local refs, and pipes for the main block.
Parameter vars
The number of bindings for the main block.
Parameter tagName
The name of the container element, if applicable
Parameter attrsIndex
Index of template attributes in the
consts
array.Parameter trackByFn
Reference to the tracking function.
Parameter trackByUsesComponentInstance
Whether the tracking function has any references to the component instance. If it doesn't, we can avoid rebinding it.
Parameter emptyTemplateFn
Reference to the template function of the empty block.
Parameter emptyDecls
The number of nodes, local refs, and pipes for the empty block.
Parameter emptyVars
The number of bindings for the empty block.
Parameter emptyTagName
The name of the empty block container element, if applicable
Parameter emptyAttrsIndex
Index of the empty block template attributes in the
consts
array.
function ɵɵrepeaterTrackByIdentity
ɵɵrepeaterTrackByIdentity: <T>(_: number, value: T) => T;
A built-in trackBy function used for situations where users specified collection item reference as a tracking expression. Having this function body in the runtime avoids unnecessary code generation.
Parameter index
Returns
function ɵɵrepeaterTrackByIndex
ɵɵrepeaterTrackByIndex: (index: number) => number;
A built-in trackBy function used for situations where users specified collection index as a tracking expression. Having this function body in the runtime avoids unnecessary code generation.
Parameter index
Returns
function ɵɵreplaceMetadata
ɵɵreplaceMetadata: ( type: Type$1<unknown>, applyMetadata: ( args_0: Type$1<unknown>, args_1: unknown[], ...args_2: unknown[] ) => void, namespaces: unknown[], locals: unknown[], importMeta?: ImportMetaExtended | null, id?: string | null) => void;
Replaces the metadata of a component type and re-renders all live instances of the component.
Parameter type
Class whose metadata will be replaced.
Parameter applyMetadata
Callback that will apply a new set of metadata on the
type
when invoked.Parameter environment
Syntehtic namespace imports that need to be passed along to the callback.
Parameter locals
Local symbols from the source location that have to be exposed to the callback.
Parameter importMeta
import.meta
from the call site of the replacement function. Optional since it isn't used internally.Parameter id
ID to the class being replaced. **Not** the same as the component definition ID. Optional since the ID might not be available internally.
function ɵɵresetView
ɵɵresetView: <T>(value?: T) => T | undefined;
Clears the view set in
ɵɵrestoreView
from memory. Returns the passed in value so that it can be used as a return value of an instruction.
function ɵɵresolveBody
ɵɵresolveBody: (element: RElement & { ownerDocument: Document }) => HTMLElement;
function ɵɵresolveDocument
ɵɵresolveDocument: (element: RElement & { ownerDocument: Document }) => Document;
function ɵɵresolveWindow
ɵɵresolveWindow: ( element: RElement & { ownerDocument: Document }) => (Window & typeof globalThis) | null;
function ɵɵrestoreView
ɵɵrestoreView: <T = any>(viewToRestore: OpaqueViewState) => T;
Restores
contextViewData
to the given OpaqueViewState instance.Used in conjunction with the getCurrentView() instruction to save a snapshot of the current view and restore it when listeners are invoked. This allows walking the declaration view tree in listeners to get vars from parent views.
Parameter viewToRestore
The OpaqueViewState instance to restore.
Returns
Context of the restored OpaqueViewState instance.
function ɵɵsanitizeHtml
ɵɵsanitizeHtml: (unsafeHtml: any) => TrustedHTML | string;
An
html
sanitizer which converts untrustedhtml
**string** into trusted string by removing dangerous content.This method parses the
html
and locates potentially dangerous content (such as urls and javascript) and removes it.It is possible to mark a string as trusted by calling bypassSanitizationTrustHtml.
Parameter unsafeHtml
untrusted
html
, typically from the user.Returns
html
string which is safe to display to user, because all of the dangerous javascript and urls have been removed.
function ɵɵsanitizeResourceUrl
ɵɵsanitizeResourceUrl: (unsafeResourceUrl: any) => TrustedScriptURL | string;
A
url
sanitizer which only lets trustedurl
s through.This passes only
url
s marked trusted by calling bypassSanitizationTrustResourceUrl.Parameter unsafeResourceUrl
untrusted
url
, typically from the user.Returns
url
string which is safe to bind to thesrc
properties such as<img src>
, because only trustedurl
s have been allowed to pass.
function ɵɵsanitizeScript
ɵɵsanitizeScript: (unsafeScript: any) => TrustedScript | string;
A
script
sanitizer which only lets trusted javascript through.This passes only
script
s marked trusted by calling bypassSanitizationTrustScript.Parameter unsafeScript
untrusted
script
, typically from the user.Returns
url
string which is safe to bind to the<script>
element such as<img src>
, because only trustedscripts
have been allowed to pass.
function ɵɵsanitizeStyle
ɵɵsanitizeStyle: (unsafeStyle: any) => string;
A
style
sanitizer which converts untrustedstyle
**string** into trusted string by removing dangerous content.It is possible to mark a string as trusted by calling bypassSanitizationTrustStyle.
Parameter unsafeStyle
untrusted
style
, typically from the user.Returns
style
string which is safe to bind to thestyle
properties.
function ɵɵsanitizeUrl
ɵɵsanitizeUrl: (unsafeUrl: any) => string;
A
url
sanitizer which converts untrustedurl
**string** into trusted string by removing dangerous content.This method parses the
url
and locates potentially dangerous content (such as javascript) and removes it.It is possible to mark a string as trusted by calling bypassSanitizationTrustUrl.
Parameter unsafeUrl
untrusted
url
, typically from the user.Returns
url
string which is safe to bind to thesrc
properties such as<img src>
, because all of the dangerous javascript has been removed.
function ɵɵsanitizeUrlOrResourceUrl
ɵɵsanitizeUrlOrResourceUrl: (unsafeUrl: any, tag: string, prop: string) => any;
Sanitizes URL, selecting sanitizer function based on tag and property names.
This function is used in case we can't define security context at compile time, when only prop name is available. This happens when we generate host bindings for Directives/Components. The host element is unknown at compile time, so we defer calculation of specific sanitizer to runtime.
Parameter unsafeUrl
untrusted
url
, typically from the user.Parameter tag
target element tag name.
Parameter prop
name of the property that contains the value.
Returns
url
string which is safe to bind.
function ɵɵsetComponentScope
ɵɵsetComponentScope: ( type: ComponentType<any>, directives: Type$1<any>[] | (() => Type$1<any>[]), pipes: Type$1<any>[] | (() => Type$1<any>[])) => void;
Generated next to NgModules to monkey-patch directive and pipe references onto a component's definition, when generating a direct reference in the component file would otherwise create an import cycle.
See [this explanation](https://hackmd.io/Odw80D0pR6yfsOjg_7XCJg?view) for more details.
function ɵɵsetNgModuleScope
ɵɵsetNgModuleScope: ( type: any, scope: NgModuleScopeInfoFromDecorator) => unknown;
Adds the module metadata that is necessary to compute the module's transitive scope to an existing module definition.
Scope metadata of modules is not used in production builds, so calls to this function can be marked pure to tree-shake it from the bundle, allowing for all referenced declarations to become eligible for tree-shaking as well.
function ɵɵstoreLet
ɵɵstoreLet: <T>(value: T) => T;
Instruction that stores the value of a
@let
declaration on the current view. Returns the value to allow usage inside variable initializers.
function ɵɵstyleMap
ɵɵstyleMap: (styles: string | { [styleName: string]: any }) => void;
Update style bindings using an object literal on an element.
This instruction is meant to apply styling via the
[style]="exp"
template bindings. When styles are applied to the element they will then be updated with respect to any styles/classes set viastyleProp
. If any styles are set to falsy then they will be removed from the element.Note that the styling instruction will not be applied until
stylingApply
is called.Parameter styles
A key/value style map of the styles that will be applied to the given element. Any missing styles (that have already been applied to the element beforehand) will be removed (unset) from the element's styling.
Note that this will apply the provided styleMap value to the host element if this function is called within a host binding.
function ɵɵstyleMapInterpolate1
ɵɵstyleMapInterpolate1: (prefix: string, v0: any, suffix: string) => void;
Update an interpolated style on an element with single bound value surrounded by text.
Used when the value passed to a property has 1 interpolated value in it:
<div style="key: {{v0}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate1('key: ', v0, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate2
ɵɵstyleMapInterpolate2: ( prefix: string, v0: any, i0: string, v1: any, suffix: string) => void;
Update an interpolated style on an element with 2 bound values surrounded by text.
Used when the value passed to a property has 2 interpolated values in it:
<div style="key: {{v0}}; key1: {{v1}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate2('key: ', v0, '; key1: ', v1, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate3
ɵɵstyleMapInterpolate3: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string) => void;
Update an interpolated style on an element with 3 bound values surrounded by text.
Used when the value passed to a property has 3 interpolated values in it:
<div style="key: {{v0}}; key2: {{v1}}; key2: {{v2}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate3('key: ', v0, '; key1: ', v1, '; key2: ', v2, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate4
ɵɵstyleMapInterpolate4: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, suffix: string) => void;
Update an interpolated style on an element with 4 bound values surrounded by text.
Used when the value passed to a property has 4 interpolated values in it:
<div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate4('key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate5
ɵɵstyleMapInterpolate5: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, suffix: string) => void;
Update an interpolated style on an element with 5 bound values surrounded by text.
Used when the value passed to a property has 5 interpolated values in it:
<div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate5('key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate6
ɵɵstyleMapInterpolate6: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string) => void;
Update an interpolated style on an element with 6 bound values surrounded by text.
Used when the value passed to a property has 6 interpolated values in it:
<div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}};key5: {{v5}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate6('key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate7
ɵɵstyleMapInterpolate7: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string) => void;
Update an interpolated style on an element with 7 bound values surrounded by text.
Used when the value passed to a property has 7 interpolated values in it:
<div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}; key5: {{v5}};key6: {{v6}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate7('key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,'; key6: ', v6, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolate8
ɵɵstyleMapInterpolate8: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any, suffix: string) => void;
Update an interpolated style on an element with 8 bound values surrounded by text.
Used when the value passed to a property has 8 interpolated values in it:
<div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}; key5: {{v5}};key6: {{v6}}; key7: {{v7}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolate8('key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,'; key6: ', v6, '; key7: ', v7, 'suffix');Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter i6
Static value used for concatenation only.
Parameter v7
Value checked for change.
Parameter suffix
Static value used for concatenation only.
function ɵɵstyleMapInterpolateV
ɵɵstyleMapInterpolateV: (values: any[]) => void;
Update an interpolated style on an element with 9 or more bound values surrounded by text.
Used when the number of interpolated values exceeds 8.
<divclass="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}; key5: {{v5}};key6: {{v6}}; key7: {{v7}}; key8: {{v8}}; key9: {{v9}}suffix"></div>Its compiled representation is:
ɵɵstyleMapInterpolateV(['key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,'; key6: ', v6, '; key7: ', v7, '; key8: ', v8, '; key9: ', v9, 'suffix']);.
Parameter values
The collection of values and the strings in-between those values, beginning with a string prefix and ending with a string suffix. (e.g.
['prefix', value0, '; key2: ', value1, '; key2: ', value2, ..., value99, 'suffix']
)
function ɵɵstyleProp
ɵɵstyleProp: ( prop: string, value: string | number | SafeValue | undefined | null, suffix?: string | null) => typeof ɵɵstyleProp;
Update a style binding on an element with the provided value.
If the style value is falsy then it will be removed from the element (or assigned a different value depending if there are any styles placed on the element with
styleMap
or any static styles that are present from when the element was created withstyling
).Note that the styling element is updated as part of
stylingApply
.Parameter prop
A valid CSS property.
Parameter value
New value to write (
null
or an empty string to remove).Parameter suffix
Optional suffix. Used with scalar values to add unit such as
px
.Note that this will apply the provided style value to the host element if this function is called within a host binding function.
function ɵɵstylePropInterpolate1
ɵɵstylePropInterpolate1: ( prop: string, prefix: string, v0: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate1;
Update an interpolated style property on an element with single bound value surrounded by text.
Used when the value passed to a property has 1 interpolated value in it:
<div style.color="prefix{{v0}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate1(0, 'prefix', v0, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate2
ɵɵstylePropInterpolate2: ( prop: string, prefix: string, v0: any, i0: string, v1: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate2;
Update an interpolated style property on an element with 2 bound values surrounded by text.
Used when the value passed to a property has 2 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate2(0, 'prefix', v0, '-', v1, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate3
ɵɵstylePropInterpolate3: ( prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate3;
Update an interpolated style property on an element with 3 bound values surrounded by text.
Used when the value passed to a property has 3 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate3(0, 'prefix', v0, '-', v1, '-', v2, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate4
ɵɵstylePropInterpolate4: ( prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate4;
Update an interpolated style property on an element with 4 bound values surrounded by text.
Used when the value passed to a property has 4 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate4(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate5
ɵɵstylePropInterpolate5: ( prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate5;
Update an interpolated style property on an element with 5 bound values surrounded by text.
Used when the value passed to a property has 5 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate5(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate6
ɵɵstylePropInterpolate6: ( prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate6;
Update an interpolated style property on an element with 6 bound values surrounded by text.
Used when the value passed to a property has 6 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate6(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate7
ɵɵstylePropInterpolate7: ( prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate7;
Update an interpolated style property on an element with 7 bound values surrounded by text.
Used when the value passed to a property has 7 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate7(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolate8
ɵɵstylePropInterpolate8: ( prop: string, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any, suffix: string, valueSuffix?: string | null) => typeof ɵɵstylePropInterpolate8;
Update an interpolated style property on an element with 8 bound values surrounded by text.
Used when the value passed to a property has 8 interpolated values in it:
<div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolate8(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6,'-', v7, 'suffix');Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
.Parameter prefix
Static value used for concatenation only.
Parameter v0
Value checked for change.
Parameter i0
Static value used for concatenation only.
Parameter v1
Value checked for change.
Parameter i1
Static value used for concatenation only.
Parameter v2
Value checked for change.
Parameter i2
Static value used for concatenation only.
Parameter v3
Value checked for change.
Parameter i3
Static value used for concatenation only.
Parameter v4
Value checked for change.
Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Parameter i5
Static value used for concatenation only.
Parameter v6
Value checked for change.
Parameter i6
Static value used for concatenation only.
Parameter v7
Value checked for change.
Parameter suffix
Static value used for concatenation only.
Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵstylePropInterpolateV
ɵɵstylePropInterpolateV: ( prop: string, values: any[], valueSuffix?: string | null) => typeof ɵɵstylePropInterpolateV;
Update an interpolated style property on an element with 9 or more bound values surrounded by text.
Used when the number of interpolated values exceeds 8.
<divstyle.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix"></div>Its compiled representation is:
ɵɵstylePropInterpolateV(0, ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,'suffix']);Parameter styleIndex
Index of style to update. This index value refers to the index of the style in the style bindings array that was passed into
styling
..Parameter values
The collection of values and the strings in-between those values, beginning with a string prefix and ending with a string suffix. (e.g.
['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']
)Parameter valueSuffix
Optional suffix. Used with scalar values to add unit such as
px
.Returns
itself, so that it may be chained.
function ɵɵsyntheticHostListener
ɵɵsyntheticHostListener: ( eventName: string, listenerFn: (e?: any) => any) => typeof ɵɵsyntheticHostListener;
Registers a synthetic host listener (e.g.
(@foo.start)
) on a component or directive.This instruction is for compatibility purposes and is designed to ensure that a synthetic host listener (e.g.
@HostListener('@foo.start')
) properly gets rendered in the component's renderer. Normally all host listeners are evaluated with the parent component's renderer, but, in the case of animation @triggers, they need to be evaluated with the sub component's renderer (because that's where the animation triggers are defined).Do not use this instruction as a replacement for
listener
. This instruction only exists to ensure compatibility with the ViewEngine's host binding behavior.Parameter eventName
Name of the event
Parameter listenerFn
The function to be called when event emits
Parameter useCapture
Whether or not to use capture in event listener
Parameter eventTargetResolver
Function that returns global target information in case this listener should be attached to a global object like window, document or body
function ɵɵsyntheticHostProperty
ɵɵsyntheticHostProperty: <T>( propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null) => typeof ɵɵsyntheticHostProperty;
Updates a synthetic host binding (e.g.
[@foo]
) on a component or directive.This instruction is for compatibility purposes and is designed to ensure that a synthetic host binding (e.g.
@HostBinding('@foo')
) properly gets rendered in the component's renderer. Normally all host bindings are evaluated with the parent component's renderer, but, in the case of animation @triggers, they need to be evaluated with the sub component's renderer (because that's where the animation triggers are defined).Do not use this instruction as a replacement for
elementProperty
. This instruction only exists to ensure compatibility with the ViewEngine's host binding behavior.Parameter index
The index of the element to update in the data array
Parameter propName
Name of property. Because it is going to DOM, this is not subject to renaming as part of minification.
Parameter value
New value to write.
Parameter sanitizer
An optional function used to sanitize the value.
function ɵɵtemplate
ɵɵtemplate: ( index: number, templateFn: ComponentTemplate<any> | null, decls: number, vars: number, tagName?: string | null, attrsIndex?: number | null, localRefsIndex?: number | null, localRefExtractor?: LocalRefExtractor) => typeof ɵɵtemplate;
Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
<ng-template #foo>
Parameter index
The index of the container in the data array
Parameter templateFn
Inline template
Parameter decls
The number of nodes, local refs, and pipes for this template
Parameter vars
The number of bindings for this template
Parameter tagName
The name of the container element, if applicable
Parameter attrsIndex
Index of template attributes in the
consts
array.Parameter localRefs
Index of the local references in the
consts
array.Parameter localRefExtractor
A function which extracts local-refs values from the template. Defaults to the current element associated with the local-ref.
function ɵɵtemplateRefExtractor
ɵɵtemplateRefExtractor: (tNode: TNode, lView: LView) => TemplateRef<any> | null;
Retrieves
TemplateRef
instance fromInjector
when a local reference is placed on the<ng-template>
element.
function ɵɵtext
ɵɵtext: (index: number, value?: string) => void;
Create static text node
Parameter index
Index of the node in the data array
Parameter value
Static string value to write.
function ɵɵtextInterpolate
ɵɵtextInterpolate: (v0: any) => typeof ɵɵtextInterpolate;
Update text content with a lone bound value
Used when a text node has 1 interpolated value in it, an no additional text surrounds that interpolated value:
<div>{{v0}}</div>Its compiled representation is:
ɵɵtextInterpolate(v0);Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate1
ɵɵtextInterpolate1: ( prefix: string, v0: any, suffix: string) => typeof ɵɵtextInterpolate1;
Update text content with single bound value surrounded by other text.
Used when a text node has 1 interpolated value in it:
<div>prefix{{v0}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate1('prefix', v0, 'suffix');Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate2
ɵɵtextInterpolate2: ( prefix: string, v0: any, i0: string, v1: any, suffix: string) => typeof ɵɵtextInterpolate2;
Update text content with 2 bound values surrounded by other text.
Used when a text node has 2 interpolated values in it:
<div>prefix{{v0}}-{{v1}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate2('prefix', v0, '-', v1, 'suffix');Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate3
ɵɵtextInterpolate3: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string) => typeof ɵɵtextInterpolate3;
Update text content with 3 bound values surrounded by other text.
Used when a text node has 3 interpolated values in it:
<div>prefix{{v0}}-{{v1}}-{{v2}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate3('prefix', v0, '-', v1, '-', v2, 'suffix');Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate4
ɵɵtextInterpolate4: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, suffix: string) => typeof ɵɵtextInterpolate4;
Update text content with 4 bound values surrounded by other text.
Used when a text node has 4 interpolated values in it:
<div>prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate4('prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');Returns
itself, so that it may be chained.
See Also
ɵɵtextInterpolateV
function ɵɵtextInterpolate5
ɵɵtextInterpolate5: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, suffix: string) => typeof ɵɵtextInterpolate5;
Update text content with 5 bound values surrounded by other text.
Used when a text node has 5 interpolated values in it:
<div>prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate5('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate6
ɵɵtextInterpolate6: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string) => typeof ɵɵtextInterpolate6;
Update text content with 6 bound values surrounded by other text.
Used when a text node has 6 interpolated values in it:
<div>prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate6('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');Parameter i4
Static value used for concatenation only.
Parameter v5
Value checked for change.
Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate7
ɵɵtextInterpolate7: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string) => typeof ɵɵtextInterpolate7;
Update text content with 7 bound values surrounded by other text.
Used when a text node has 7 interpolated values in it:
<div>prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate7('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolate8
ɵɵtextInterpolate8: ( prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any, suffix: string) => typeof ɵɵtextInterpolate8;
Update text content with 8 bound values surrounded by other text.
Used when a text node has 8 interpolated values in it:
<div>prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix</div>Its compiled representation is:
ɵɵtextInterpolate8('prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix');Returns
itself, so that it may be chained.
See Also
textInterpolateV
function ɵɵtextInterpolateV
ɵɵtextInterpolateV: (values: any[]) => typeof ɵɵtextInterpolateV;
Update text content with 9 or more bound values other surrounded by text.
Used when the number of interpolated values exceeds 8.
<div>prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix</div>Its compiled representation is:
ɵɵtextInterpolateV(['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,'suffix']);.
Parameter values
The collection of values and the strings in between those values, beginning with a string prefix and ending with a string suffix. (e.g.
['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']
)Returns
itself, so that it may be chained.
function ɵɵtrustConstantHtml
ɵɵtrustConstantHtml: (html: TemplateStringsArray) => TrustedHTML | string;
A template tag function for promoting the associated constant literal to a TrustedHTML. Interpolation is explicitly not allowed.
Parameter html
constant template literal containing trusted HTML.
Returns
TrustedHTML wrapping
html
.This is a security-sensitive function and should only be used to convert constant values of attributes and properties found in application-provided Angular templates to TrustedHTML.
function ɵɵtrustConstantResourceUrl
ɵɵtrustConstantResourceUrl: ( url: TemplateStringsArray) => TrustedScriptURL | string;
A template tag function for promoting the associated constant literal to a TrustedScriptURL. Interpolation is explicitly not allowed.
Parameter url
constant template literal containing a trusted script URL.
Returns
TrustedScriptURL wrapping
url
.This is a security-sensitive function and should only be used to convert constant values of attributes and properties found in application-provided Angular templates to TrustedScriptURL.
function ɵɵtwoWayBindingSet
ɵɵtwoWayBindingSet: <T>(target: unknown, value: T) => boolean;
Function used inside two-way listeners to conditionally set the value of the bound expression.
Parameter target
Field on which to set the value.
Parameter value
Value to be set to the field.
function ɵɵtwoWayListener
ɵɵtwoWayListener: ( eventName: string, listenerFn: (e?: any) => any) => typeof ɵɵtwoWayListener;
Adds an event listener that updates a two-way binding to the current node.
Parameter eventName
Name of the event.
Parameter listenerFn
The function to be called when event emits.
function ɵɵtwoWayProperty
ɵɵtwoWayProperty: <T>( propName: string, value: T | WritableSignal<T>, sanitizer?: SanitizerFn | null) => typeof ɵɵtwoWayProperty;
Update a two-way bound property on a selected element.
Operates on the element selected by index via the select instruction.
Parameter propName
Name of property.
Parameter value
New value to write.
Parameter sanitizer
An optional function used to sanitize the value.
Returns
This function returns itself so that it may be chained (e.g.
twoWayProperty('name', ctx.name)('title', ctx.title)
)
function ɵɵvalidateIframeAttribute
ɵɵvalidateIframeAttribute: ( attrValue: any, tagName: string, attrName: string) => any;
Validation function invoked at runtime for each binding that might potentially represent a security-sensitive attribute of an . See
IFRAME_SECURITY_SENSITIVE_ATTRS
in thepackages/compiler/src/schema/dom_security_schema.ts
script for the full list of such attributes.
function ɵɵviewQuery
ɵɵviewQuery: <T>( predicate: ProviderToken<unknown> | string | string[], flags: QueryFlags, read?: any) => void;
Creates a new view query by initializing internal data structures.
Parameter predicate
The type for which the query will search
Parameter flags
Flags associated with the query
Parameter read
What to save in the query
function ɵɵviewQuerySignal
ɵɵviewQuerySignal: ( target: Signal<unknown>, predicate: ProviderToken<unknown> | string[], flags: QueryFlags, read?: ProviderToken<unknown>) => void;
Creates a new view query by initializing internal data structures and binding a new query to the target signal.
Parameter target
The target signal to assign the query results to.
Parameter predicate
The type or label that should match a given query
Parameter flags
Flags associated with the query
Parameter read
What to save in the query
function ɵpatchComponentDefWithScope
ɵpatchComponentDefWithScope: <C>( componentDef: ComponentDef<C>, transitiveScopes: NgModuleTransitiveScopes) => void;
Patch the definition of a component with directives and pipes from the compilation scope of a given module.
function ɵperformanceMarkFeature
ɵperformanceMarkFeature: (feature: string) => void;
A guarded
performance.mark
for feature marking.This method exists because while all supported browser and node.js version supported by Angular support performance.mark API. This is not the case for other environments such as JSDOM and Cloudflare workers.
function ɵpublishExternalGlobalUtil
ɵpublishExternalGlobalUtil: <K extends 'ɵgetLoadedRoutes'>( name: K, fn: NgGlobalPublishUtils[K]) => void;
Publishes the given function to
window.ng
from package other than @angular/core So that it can be used from the browser console when an application is not in production.
function ɵreadHydrationInfo
ɵreadHydrationInfo: (node: RNode) => HydrationInfo | null;
function ɵregisterLocaleData
ɵregisterLocaleData: ( data: any, localeId?: string | any, extraData?: any) => void;
Register locale data to be used internally by Angular. See the ["I18n guide"](guide/i18n/format-data-locale) to know how to import additional locale data.
The signature
registerLocaleData(data: any, extraData?: any)
is deprecated since v5.1
function ɵrenderDeferBlockState
ɵrenderDeferBlockState: ( newState: DeferBlockState, tNode: TNode, lContainer: LContainer, skipTimerScheduling?: boolean) => void;
Transitions a defer block to the new state. Updates the necessary data structures and renders corresponding block.
Parameter newState
New state that should be applied to the defer block.
Parameter tNode
TNode that represents a defer block.
Parameter lContainer
Represents an instance of a defer block.
Parameter skipTimerScheduling
Indicates that
@loading
and@placeholder
block should be rendered immediately, even if they haveafter
orminimum
config options setup. This flag to needed for testing APIs to transition defer block between states viaDeferFixture.render
method.
function ɵresetCompiledComponents
ɵresetCompiledComponents: () => void;
function ɵresetJitOptions
ɵresetJitOptions: () => void;
function ɵresolveComponentResources
ɵresolveComponentResources: ( resourceResolver: (url: string) => Promise<string | { text(): Promise<string> }>) => Promise<void>;
Used to resolve resource URLs on
@Component
when used with JIT compilation.Example:
@Component({selector: 'my-comp',templateUrl: 'my-comp.html', // This requires asynchronous resolution})class MyComponent{}// Calling `renderComponent` will fail because `renderComponent` is a synchronous process// and `MyComponent`'s `@Component.templateUrl` needs to be resolved asynchronously.// Calling `resolveComponentResources()` will resolve `@Component.templateUrl` into// `@Component.template`, which allows `renderComponent` to proceed in a synchronous manner.// Use browser's `fetch()` function as the default resource resolution strategy.resolveComponentResources(fetch).then(() => {// After resolution all URLs have been converted into `template` strings.renderComponent(MyComponent);});NOTE: In AOT the resolution happens during compilation, and so there should be no need to call this method outside JIT mode.
Parameter resourceResolver
a function which is responsible for returning a
Promise
to the contents of the resolved URL. Browser'sfetch()
method is a good default implementation.
function ɵrestoreComponentResolutionQueue
ɵrestoreComponentResolutionQueue: (queue: Map<Type$1<any>, Component>) => void;
function ɵsetAllowDuplicateNgModuleIdsForTest
ɵsetAllowDuplicateNgModuleIdsForTest: (allowDuplicates: boolean) => void;
Control whether the NgModule registration system enforces that each NgModule type registered has a unique id.
This is useful for testing as the NgModule registry cannot be properly reset between tests with Angular's current API.
function ɵsetAlternateWeakRefImpl
ɵsetAlternateWeakRefImpl: (impl: unknown) => void;
function ɵsetClassDebugInfo
ɵsetClassDebugInfo: (type: Type$1<any>, debugInfo: ClassDebugInfo) => void;
Sets the debug info for an Angular class.
This runtime is guarded by ngDevMode flag.
function ɵsetClassMetadata
ɵsetClassMetadata: ( type: Type$1<any>, decorators: any[] | null, ctorParameters: (() => any[]) | null, propDecorators: { [field: string]: any }) => void;
Adds decorator, constructor, and property metadata to a given type via static metadata fields on the type.
These metadata fields can later be read with Angular's
ReflectionCapabilities
API.Calls to
setClassMetadata
can be guarded by ngDevMode, resulting in the metadata assignments being tree-shaken away during production builds.
function ɵsetClassMetadataAsync
ɵsetClassMetadataAsync: ( type: Type$1<any>, dependencyLoaderFn: () => Array<Promise<Type$1<unknown>>>, metadataSetterFn: (...types: Type$1<unknown>[]) => void) => () => Promise<Array<Type$1<unknown>>>;
Handles the process of applying metadata info to a component class in case component template has defer blocks (thus some dependencies became deferrable).
Parameter type
Component class where metadata should be added
Parameter dependencyLoaderFn
Function that loads dependencies
Parameter metadataSetterFn
Function that forms a scope in which the
setClassMetadata
is invoked
function ɵsetCurrentInjector
ɵsetCurrentInjector: ( injector: Injector | null | undefined) => Injector | undefined | null;
function ɵsetDocument
ɵsetDocument: (document: Document | undefined) => void;
Tell ivy what the
document
is for this platform.It is only necessary to call this if the current platform is not a browser.
Parameter document
The object representing the global
document
in this environment.
function ɵsetInjectorProfilerContext
ɵsetInjectorProfilerContext: ( context: InjectorProfilerContext) => InjectorProfilerContext;
function ɵsetLocaleId
ɵsetLocaleId: (localeId: string) => void;
Sets the locale id that will be used for translations and ICU expressions. This is the ivy version of
LOCALE_ID
that was defined as an injection token for the view engine but is now defined as a global value.Parameter localeId
function ɵsetUnknownElementStrictMode
ɵsetUnknownElementStrictMode: (shouldThrow: boolean) => void;
Sets a strict mode for JIT-compiled components to throw an error on unknown elements, instead of just logging the error. (for AOT-compiled ones this check happens at build time).
function ɵsetUnknownPropertyStrictMode
ɵsetUnknownPropertyStrictMode: (shouldThrow: boolean) => void;
Sets a strict mode for JIT-compiled components to throw an error on unknown properties, instead of just logging the error. (for AOT-compiled ones this check happens at build time).
function ɵstartMeasuring
ɵstartMeasuring: <T>(label: string) => void;
Function that will start measuring against the performance API Should be used in pair with stopMeasuring
function ɵstopMeasuring
ɵstopMeasuring: (label: string) => void;
Function that will stop measuring against the performance API Should be used in pair with stopMeasuring
function ɵstore
ɵstore: <T>(tView: TView, lView: LView, index: number, value: T) => void;
Store a value in the
data
at a givenindex
.
function ɵstringify
ɵstringify: (token: any) => string;
function ɵtransitiveScopesFor
ɵtransitiveScopesFor: <T>(type: Type$1<T>) => NgModuleTransitiveScopes;
Compute the pair of transitive scopes (compilation scope and exported scope) for a given type (either a NgModule or a standalone component / directive / pipe).
function ɵtriggerResourceLoading
ɵtriggerResourceLoading: ( tDetails: TDeferBlockDetails, lView: LView, tNode: TNode) => Promise<unknown>;
Trigger loading of defer block dependencies if the process hasn't started yet.
Parameter tDetails
Static information about this defer block.
Parameter lView
LView of a host view.
function ɵtruncateMiddle
ɵtruncateMiddle: (str: string, maxLength?: number) => string;
Ellipses the string in the middle when longer than the max length
Parameter string
Parameter maxLength
of the output string
Returns
ellipsed string with ... in the middle
function ɵunregisterLocaleData
ɵunregisterLocaleData: () => void;
Helper function to remove all the locale data from
LOCALE_DATA
.
function ɵunwrapSafeValue
ɵunwrapSafeValue: { (value: SafeValue): string; <T>(value: T): T };
function ɵunwrapWritableSignal
ɵunwrapWritableSignal: <T>(value: T | { [ɵWRITABLE_SIGNAL]: T }) => T;
Utility function used during template type checking to extract the value from a
WritableSignal
.
function ɵwithDomHydration
ɵwithDomHydration: () => EnvironmentProviders;
Returns a set of providers required to setup hydration support for an application that is server side rendered. This function is included into the
provideClientHydration
public API function from theplatform-browser
package.The function sets up an internal flag that would be recognized during the server side rendering time as well, so there is no need to configure or change anything in NgUniversal to enable the feature.
function ɵwithEventReplay
ɵwithEventReplay: () => Provider[];
Returns a set of providers required to setup support for event replay. Requires hydration to be enabled separately.
function ɵwithI18nSupport
ɵwithI18nSupport: () => Provider[];
Returns a set of providers required to setup support for i18n hydration. Requires hydration to be enabled separately.
function ɵwithIncrementalHydration
ɵwithIncrementalHydration: () => Provider[];
Returns a set of providers required to setup support for incremental hydration. Requires hydration to be enabled separately. Enabling incremental hydration also enables event replay for the entire app.
function platformCore
platformCore: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
This platform has to be included in any other platform
function provideAppInitializer
provideAppInitializer: ( initializerFn: () => Observable<unknown> | Promise<unknown> | void) => EnvironmentProviders;
The provided function is injected at application startup and executed during app initialization. If the function returns a Promise or an Observable, initialization does not complete until the Promise is resolved or the Observable is completed.
You can, for example, create a function that loads language data or an external configuration, and provide that function using
provideAppInitializer()
. The function is executed during the application bootstrap process, and the needed data is available on startup.Note that the provided initializer is run in the injection context.
Previously, this was achieved using the
APP_INITIALIZER
token which is now deprecated.See Also
The following example illustrates how to configure an initialization function using
provideAppInitializer()
bootstrapApplication(App, {providers: [provideAppInitializer(() => {const http = inject(HttpClient);return firstValueFrom(http.get("https://someUrl.com/api/user").pipe(tap(user => { ... })));}),provideHttpClient(),],});
function provideEnvironmentInitializer
provideEnvironmentInitializer: ( initializerFn: () => void) => EnvironmentProviders;
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 Also
The following example illustrates how to configure an initialization function using
provideEnvironmentInitializer()
createEnvironmentInjector([provideEnvironmentInitializer(() => {console.log('environment initialized');}),],parentInjector);
function provideExperimentalCheckNoChangesForDebug
provideExperimentalCheckNoChangesForDebug: (options: { interval?: number; useNgZoneOnStable?: boolean; exhaustive?: boolean;}) => _angular_core.EnvironmentProviders;
Used to periodically verify no expressions have changed after they were checked.
Parameter options
Used to configure when the check will execute. -
interval
will periodically run exhaustivecheckNoChanges
on application views -useNgZoneOnStable
will use ZoneJS to determine when change detection might have run in an application using ZoneJS to drive change detection. When theNgZone.onStable
would have emitted, all views attached to theApplicationRef
are checked for changes. - 'exhaustive' means that all views attached toApplicationRef
and all the descendants of those views will be checked for changes (excluding those subtrees which are detached viaChangeDetectorRef.detach()
). This is useful because the check that runs after regular change detection does not work for components usingChangeDetectionStrategy.OnPush
. This check is will surface any existing errors hidden byOnPush
components. By default, this check is exhaustive and will always check all views, regardless of their "dirty" state andChangeDetectionStrategy
.When the
useNgZoneOnStable
option istrue
, this function will provide its ownNgZone
implementation and needs to come after any otherNgZone
provider, includingprovideZoneChangeDetection()
andprovideExperimentalZonelessChangeDetection()
.Modifiers
@experimental
function provideExperimentalZonelessChangeDetection
provideExperimentalZonelessChangeDetection: () => EnvironmentProviders;
Provides change detection without ZoneJS for the application bootstrapped using
bootstrapApplication
.This function allows you to configure the application to not use the state/state changes of ZoneJS to schedule change detection in the application. This will work when ZoneJS is not present on the page at all or if it exists because something else is using it (either another Angular application which uses ZoneJS for scheduling or some other library that relies on ZoneJS).
This can also be added to the
TestBed
providers to configure the test environment to more closely match production behavior. This will help give higher confidence that components are compatible with zoneless change detection.ZoneJS uses browser events to trigger change detection. When using this provider, Angular will instead use Angular APIs to schedule change detection. These APIs include:
-
ChangeDetectorRef.markForCheck
-ComponentRef.setInput
- updating a signal that is read in a template - when bound host or template listeners are triggered - attaching a view that was marked dirty by one of the above - removing a view - registering a render hook (templates are only refreshed if render hooks do one of the above)bootstrapApplication(MyApp, {providers: [provideExperimentalZonelessChangeDetection(),]});This API is experimental. Neither the shape, nor the underlying behavior is stable and can change in patch versions. There are known feature gaps and API ergonomic considerations. We will iterate on the exact API based on the feedback and our understanding of the problem and solution space.
See Also
Modifiers
@experimental
function providePlatformInitializer
providePlatformInitializer: (initializerFn: () => void) => EnvironmentProviders;
This function is used to provide initialization functions that will be executed upon initialization of the platform injector.
Note that the provided initializer is run in the injection context.
Previously, this was achieved using the
PLATFORM_INITIALIZER
token which is now deprecated.See Also
function provideZoneChangeDetection
provideZoneChangeDetection: (options?: NgZoneOptions) => EnvironmentProviders;
Provides
NgZone
-based change detection for the application bootstrapped usingbootstrapApplication
.NgZone
is already provided in applications by default. This provider allows you to configure options likeeventCoalescing
in theNgZone
. This provider is not available forplatformBrowser().bootstrapModule
, which usesBootstrapOptions
instead.bootstrapApplication(MyApp, {providers: [provideZoneChangeDetection({eventCoalescing: true}),]});See Also
function reflectComponentType
reflectComponentType: <C>(component: Type$1<C>) => ComponentMirror<C> | null;
Creates an object that allows to retrieve component metadata.
The example below demonstrates how to use the function and how the fields of the returned object map to the component metadata.
@Component({standalone: true,selector: 'foo-component',template: `<ng-content></ng-content><ng-content select="content-selector-a"></ng-content>`,})class FooComponent {@Input('inputName') inputPropName: string;@Output('outputName') outputPropName = new EventEmitter<void>();}const mirror = reflectComponentType(FooComponent);expect(mirror.type).toBe(FooComponent);expect(mirror.selector).toBe('foo-component');expect(mirror.isStandalone).toBe(true);expect(mirror.inputs).toEqual([{propName: 'inputName', templateName: 'inputPropName'}]);expect(mirror.outputs).toEqual([{propName: 'outputName', templateName: 'outputPropName'}]);expect(mirror.ngContentSelectors).toEqual(['*', // first `<ng-content>` in a template, the selector defaults to `*`'content-selector-a' // second `<ng-content>` in a template]);Parameter component
Component class reference.
Returns
An object that allows to retrieve component metadata.
function resolveForwardRef
resolveForwardRef: <T>(type: T) => T;
Lazily retrieves the reference value from a forwardRef.
Acts as the identity function when given a non-forward-ref value.
### Example
See Also
function resource
resource: { <T, R>( options: ResourceOptions<T, R> & { defaultValue: NoInfer<T> } ): ResourceRef<T>; <T, R>(options: ResourceOptions<T, R>): ResourceRef<T>;};
Constructs a
Resource
that projects a reactive request to an asynchronous operation defined by a loader function, which exposes the result of the loading operation via signals.Note that
resource
is intended for _read_ operations, not operations which perform mutations.resource
will cancel in-progress loads via theAbortSignal
when destroyed or when a new request object becomes available, which could prematurely abort mutations.Modifiers
@experimental
function runInInjectionContext
runInInjectionContext: <ReturnT>( injector: Injector, fn: () => ReturnT) => ReturnT;
Runs the given function in the [context](guide/di/dependency-injection-context) of the given
Injector
.Within the function's stack frame, [
inject
](api/core/inject) can be used to inject dependencies from the givenInjector
. Note thatinject
is only usable synchronously, and cannot be used in any asynchronous callbacks or after anyawait
points.Parameter injector
the injector which will satisfy calls to [
inject
](api/core/inject) whilefn
is executingParameter fn
the closure to be run in the context of
injector
Returns
the return value of the function, if any
function setTestabilityGetter
setTestabilityGetter: (getter: GetTestability) => void;
Set the GetTestability implementation used by the Angular testing framework.
function signal
signal: <T>( initialValue: T, options?: CreateSignalOptions<T>) => WritableSignal<T>;
Create a
Signal
that can be set or updated directly.
function untracked
untracked: <T>(nonReactiveReadsFn: () => T) => T;
Execute an arbitrary function in a non-reactive (non-tracking) context. The executed function can, optionally, return a value.
function viewChildren
viewChildren: { <LocatorT>( locator: ProviderToken<LocatorT> | string, opts?: { debugName?: string } ): Signal<ReadonlyArray<LocatorT>>; <LocatorT, ReadT>( locator: string | ProviderToken<LocatorT>, opts: { read: ProviderToken<ReadT>; debugName?: string } ): Signal<readonly ReadT[]>;};
Classes
class ApplicationInitStatus
class ApplicationInitStatus {}
A class that reflects the state of running APP_INITIALIZER functions.
constructor
constructor();
property done
readonly done: boolean;
property donePromise
readonly donePromise: Promise<any>;
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<ApplicationInitStatus>;
class ApplicationModule
class ApplicationModule {}
Re-exported by
BrowserModule
, which is included automatically in the rootAppModule
when you create a new app with the CLInew
command. Eagerly injectsApplicationRef
to instantiate it.
constructor
constructor(appRef: ApplicationRef);
property ɵfac
static ɵfac: {};
property ɵinj
static ɵinj: {};
property ɵmod
static ɵmod: {};
class ApplicationRef
class ApplicationRef {}
A reference to an Angular application running on a page.
### isStable examples and caveats
Note two important points about
isStable
, demonstrated in the examples below: - the application will never be stable if you start any kind of recurrent asynchronous task when the application starts (for example for a polling process, started with asetInterval
, asetTimeout
or using RxJS operators likeinterval
); - theisStable
Observable runs outside of the Angular zone.Let's imagine that you start a recurrent task (here incrementing a counter, using RxJS
interval
), and at the same time subscribe toisStable
.constructor(appRef: ApplicationRef) {appRef.isStable.pipe(filter(stable => stable)).subscribe(() => console.log('App is stable now');interval(1000).subscribe(counter => console.log(counter));}In this example,
isStable
will never emittrue
, and the trace "App is stable now" will never get logged.If you want to execute something when the app is stable, you have to wait for the application to be stable before starting your polling process.
constructor(appRef: ApplicationRef) {appRef.isStable.pipe(first(stable => stable),tap(stable => console.log('App is stable now')),switchMap(() => interval(1000))).subscribe(counter => console.log(counter));}In this example, the trace "App is stable now" will be logged and then the counter starts incrementing every second.
Note also that this Observable runs outside of the Angular zone, which means that the code in the subscription to this Observable will not trigger the change detection.
Let's imagine that instead of logging the counter value, you update a field of your component and display it in its template.
constructor(appRef: ApplicationRef) {appRef.isStable.pipe(first(stable => stable),switchMap(() => interval(1000))).subscribe(counter => this.value = counter);}As the
isStable
Observable runs outside the zone, thevalue
field will be updated properly, but the template will not be refreshed!You'll have to manually trigger the change detection to update the template.
constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) {appRef.isStable.pipe(first(stable => stable),switchMap(() => interval(1000))).subscribe(counter => {this.value = counter;cd.detectChanges();});}Or make the subscription callback run inside the zone.
constructor(appRef: ApplicationRef, zone: NgZone) {appRef.isStable.pipe(first(stable => stable),switchMap(() => interval(1000))).subscribe(counter => zone.run(() => this.value = counter));}
constructor
constructor();
property components
readonly components: ComponentRef$1<any>[];
Get a list of components registered to this application.
property componentTypes
readonly componentTypes: Type$1<any>[];
Get a list of component types registered to this application. This list is populated even before the component is created.
property destroyed
readonly destroyed: boolean;
Indicates whether this instance was destroyed.
property injector
readonly injector: EnvironmentInjector;
The
EnvironmentInjector
used to create this application.
property isStable
readonly isStable: Observable<boolean>;
Returns an Observable that indicates when the application is stable or unstable.
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<ApplicationRef>;
property viewCount
readonly viewCount: number;
Returns the number of attached views.
method attachView
attachView: (viewRef: ViewRef$1) => void;
Attaches a view so that it will be dirty checked. The view will be automatically detached when it is destroyed. This will throw if the view is already attached to a ViewContainer.
method bootstrap
bootstrap: { <C>( component: Type$1<C>, rootSelectorOrNode?: string | any ): ComponentRef$1<C>; <C>( componentFactory: ComponentFactory$1<C>, rootSelectorOrNode?: any ): ComponentRef$1<C>;};
Bootstrap a component onto the element identified by its selector or, optionally, to a specified element.
### Bootstrap process
When bootstrapping a component, Angular mounts it onto a target DOM element and kicks off automatic change detection. The target DOM element can be provided using the
rootSelectorOrNode
argument.If the target DOM element is not provided, Angular tries to find one on a page using the
selector
of the component that is being bootstrapped (first matched element is used).### Example
Generally, we define the component to bootstrap in the
bootstrap
array ofNgModule
, but it requires us to know the component while writing the application code.Imagine a situation where we have to wait for an API call to decide about the component to bootstrap. We can use the
ngDoBootstrap
hook of theNgModule
and call this method to dynamically bootstrap a component.Optionally, a component can be mounted onto a DOM element that does not match the selector of the bootstrapped component.
In the following example, we are providing a CSS selector to match the target element.
While in this example, we are providing reference to a DOM node.
Bootstrap a component onto the element identified by its selector or, optionally, to a specified element.
### Bootstrap process
When bootstrapping a component, Angular mounts it onto a target DOM element and kicks off automatic change detection. The target DOM element can be provided using the
rootSelectorOrNode
argument.If the target DOM element is not provided, Angular tries to find one on a page using the
selector
of the component that is being bootstrapped (first matched element is used).### Example
Generally, we define the component to bootstrap in the
bootstrap
array ofNgModule
, but it requires us to know the component while writing the application code.Imagine a situation where we have to wait for an API call to decide about the component to bootstrap. We can use the
ngDoBootstrap
hook of theNgModule
and call this method to dynamically bootstrap a component.Optionally, a component can be mounted onto a DOM element that does not match the selector of the bootstrapped component.
In the following example, we are providing a CSS selector to match the target element.
While in this example, we are providing reference to a DOM node.
Deprecated
Passing Component factories as the
Application.bootstrap
function argument is deprecated. Pass Component Types instead.
method destroy
destroy: () => void;
Destroys an Angular application represented by this
ApplicationRef
. Calling this function will destroy the associated environment injectors as well as all the bootstrapped components with their views.
method detachView
detachView: (viewRef: ViewRef$1) => void;
Detaches a view from dirty checking again.
method onDestroy
onDestroy: (callback: () => void) => VoidFunction;
Registers a listener to be called when an instance is destroyed.
Parameter callback
A callback function to add as a listener.
Returns
A function which unregisters a listener.
method tick
tick: () => void;
Invoke this method to explicitly process change detection and its side-effects.
In development mode,
tick()
also performs a second change detection cycle to ensure that no further changes are detected. If additional changes are picked up during this second cycle, bindings in the app have side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error, since an Angular application can only have one change detection pass during which all change detection must complete.
method whenStable
whenStable: () => Promise<void>;
Returns
A promise that resolves when the application becomes stable
class ChangeDetectorRef
abstract class ChangeDetectorRef {}
Base class that provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods to add and remove views from the tree, initiate change-detection, and explicitly mark views as _dirty_, meaning that they have changed and need to be re-rendered.
See Also
[Using change detection hooks](guide/components/lifecycle#using-change-detection-hooks)
[Defining custom change detection](guide/components/lifecycle#defining-custom-change-detection)
The following examples demonstrate how to modify default change-detection behavior to perform explicit detection when needed.
### Use
markForCheck()
withCheckOnce
strategyThe following example sets the
OnPush
change-detection strategy for a component (CheckOnce
, rather than the defaultCheckAlways
), then forces a second check after an interval.### Detach change detector to limit how often check occurs
The following example defines a component with a large list of read-only data that is expected to change constantly, many times per second. To improve performance, we want to check and update the list less often than the changes actually occur. To do that, we detach the component's change detector and perform an explicit local check every five seconds.
### Reattaching a detached component
The following example creates a component displaying live data. The component detaches its change detector from the main change detector tree when the
live
property is set to false, and reattaches it when the property becomes true.
method checkNoChanges
abstract checkNoChanges: () => void;
Checks the change detector and its children, and throws if any changes are detected.
Use in development mode to verify that running change detection doesn't introduce other changes. Calling it in production mode is a noop.
Deprecated
This is a test-only API that does not have a place in production interface.
checkNoChanges
is already part of anApplicationRef
tick when the app is running in dev mode. For more granularcheckNoChanges
validation, useComponentFixture
.
method detach
abstract detach: () => void;
Detaches this view from the change-detection tree. A detached view is not checked until it is reattached. Use in combination with
detectChanges()
to implement local change detection checks.Detached views are not checked during change detection runs until they are re-attached, even if they are marked as dirty.
<!-- TODO: Add a link to a chapter on detach/reattach/local digest --> <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
method detectChanges
abstract detectChanges: () => void;
Checks this view and its children. Use in combination with ChangeDetectorRef#detach to implement local change detection checks.
<!-- TODO: Add a link to a chapter on detach/reattach/local digest --> <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
method markForCheck
abstract markForCheck: () => void;
When a view uses the ChangeDetectionStrategy#OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.
Components are normally marked as dirty (in need of rerendering) when inputs have changed or events have fired in the view. Call this method to ensure that a component is checked even if these triggers have not occurred.
<!-- TODO: Add a link to a chapter on OnPush components -->
method reattach
abstract reattach: () => void;
Re-attaches the previously detached view to the change detection tree. Views are attached to the tree by default.
<!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
class Compiler
class Compiler {}
Low-level service for running the angular compiler during runtime to create ComponentFactorys, which can later be used to create and render a Component instance.
Each
@NgModule
provides an ownCompiler
to its injector, that will use the directives/pipes of the ng module for compilation of components.Deprecated
Ivy JIT mode doesn't require accessing this symbol.
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<Compiler>;
method clearCache
clearCache: () => void;
Clears all caches.
method clearCacheFor
clearCacheFor: (type: Type$1<any>) => void;
Clears the cache for the given component/ngModule.
method compileModuleAndAllComponentsAsync
compileModuleAndAllComponentsAsync: <T>( moduleType: Type$1<T>) => Promise<ModuleWithComponentFactories<T>>;
Same as but also creates ComponentFactories for all components.
method compileModuleAndAllComponentsSync
compileModuleAndAllComponentsSync: <T>( moduleType: Type$1<T>) => ModuleWithComponentFactories<T>;
Same as but also creates ComponentFactories for all components.
method compileModuleAsync
compileModuleAsync: <T>(moduleType: Type$1<T>) => Promise<NgModuleFactory$1<T>>;
Compiles the given NgModule and all of its components
method compileModuleSync
compileModuleSync: <T>(moduleType: Type$1<T>) => NgModuleFactory$1<T>;
Compiles the given NgModule and all of its components. All templates of the components have to be inlined.
method getModuleId
getModuleId: (moduleType: Type$1<any>) => string | undefined;
Returns the id for a given NgModule, if one is defined and known to the compiler.
class CompilerFactory
abstract class CompilerFactory {}
A factory for creating a Compiler
Deprecated
Ivy JIT mode doesn't require accessing this symbol.
method createCompiler
abstract createCompiler: (options?: CompilerOptions[]) => Compiler;
class ComponentFactory
abstract class ComponentFactory$1<C> {}
Base class for a factory that can create a component dynamically. Instantiate a factory for a given type of component with
resolveComponentFactory()
. Use the resultingComponentFactory.create()
method to create a component of that type.Deprecated
Angular no longer requires Component factories. Please use other APIs where Component class can be used directly.
property componentType
readonly componentType: Type$1<any>;
The type of component the factory will create.
property inputs
readonly inputs: { propName: string; templateName: string; transform?: (value: any) => any; isSignal: boolean;}[];
The inputs of the component.
property ngContentSelectors
readonly ngContentSelectors: string[];
Selector for all elements in the component.
property outputs
readonly outputs: { propName: string; templateName: string }[];
The outputs of the component.
property selector
readonly selector: string;
The component's HTML selector.
method create
abstract create: ( injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, environmentInjector?: EnvironmentInjector | NgModuleRef$1<any>) => ComponentRef$1<C>;
Creates a new component.
class ComponentFactoryResolver
abstract class ComponentFactoryResolver$1 {}
A simple registry that maps
Components
to generatedComponentFactory
classes that can be used to create instances of components. Use to obtain the factory for a given component type, then use the factory'screate()
method to create a component of that type.Note: since v13, dynamic component creation via [
ViewContainerRef.createComponent
](api/core/ViewContainerRef#createComponent) does **not** require resolving component factory: component class can be used directly.Deprecated
Angular no longer requires Component factories. Please use other APIs where Component class can be used directly.
property NULL
static NULL: ComponentFactoryResolver$1;
method resolveComponentFactory
abstract resolveComponentFactory: <T>( component: Type$1<T>) => ComponentFactory$1<T>;
Retrieves the factory object that creates a component of the given type.
Parameter component
The component type.
class ComponentRef
abstract class ComponentRef$1<C> {}
Represents a component created by a
ComponentFactory
. Provides access to the component instance and related objects, and provides the means of destroying the instance.
property changeDetectorRef
readonly changeDetectorRef: ChangeDetectorRef;
The change detector for this component instance.
property componentType
readonly componentType: Type$1<any>;
The type of this component (as created by a
ComponentFactory
class).
property hostView
readonly hostView: ViewRef$1;
The host view defined by the template for this component instance.
property injector
readonly injector: Injector;
The dependency injector for this component instance.
property instance
readonly instance: {};
This component instance.
property location
readonly location: ElementRef<any>;
The host or anchor element for this component instance.
method destroy
abstract destroy: () => void;
Destroys the component instance and all of the data structures associated with it.
method onDestroy
abstract onDestroy: (callback: Function) => void;
A lifecycle hook that provides additional developer-defined cleanup functionality for the component.
Parameter callback
A handler function that cleans up developer-defined data associated with this component. Called when the
destroy()
method is invoked.
method setInput
abstract setInput: (name: string, value: unknown) => void;
Updates a specified input name to a new value. Using this method will properly mark for check component using the
OnPush
change detection strategy. It will also assure that theOnChanges
lifecycle hook runs when a dynamically created component is change-detected.Parameter name
The name of an input.
Parameter value
The new value of an input.
class DebugElement
class DebugElement extends DebugNode {}
See Also
[Component testing scenarios](guide/testing/components-scenarios)
[Basics of testing components](guide/testing/components-basics)
[Testing utility APIs](guide/testing/utility-apis)
constructor
constructor(nativeNode: Element);
property attributes
readonly attributes: { [key: string]: string };
A map of attribute names to attribute values for an element.
property childNodes
readonly childNodes: DebugNode[];
The
childNodes
of the DOM element as aDebugNode
array.See Also
[Node.childNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
property children
readonly children: DebugElement[];
The immediate
DebugElement
children. Walk the tree by descending throughchildren
.
property classes
readonly classes: { [key: string]: boolean };
A map containing the class names on the element as keys.
This map is derived from the
className
property of the DOM element.Note: The values of this object will always be
true
. The class key will not appear in the KV object if it does not exist on the element.See Also
[Element.className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
property name
readonly name: string;
The element tag name, if it is an element.
property nativeElement
readonly nativeElement: any;
The underlying DOM element at the root of the component.
property properties
readonly properties: { [key: string]: any };
Gets a map of property names to property values for an element.
This map includes: - Regular property bindings (e.g.
[id]="id"
) - Host property bindings (e.g.host: { '[id]': "id" }
) - Interpolated property bindings (e.g. `id="{{ value }}")It does not include: - input property bindings (e.g.
[myCustomInput]="value"
) - attribute bindings (e.g.[attr.role]="menu"
)
property styles
readonly styles: { [key: string]: string };
The inline styles of the DOM element.
method query
query: (predicate: Predicate<DebugElement>) => DebugElement;
Returns
the first
DebugElement
that matches the predicate at any depth in the subtree.
method queryAll
queryAll: (predicate: Predicate<DebugElement>) => DebugElement[];
Returns
All
DebugElement
matches for the predicate at any depth in the subtree.
method queryAllNodes
queryAllNodes: (predicate: Predicate<DebugNode>) => DebugNode[];
Returns
All
DebugNode
matches for the predicate at any depth in the subtree.
method triggerEventHandler
triggerEventHandler: (eventName: string, eventObj?: any) => void;
Triggers the event by its name if there is a corresponding listener in the element's
listeners
collection.If the event lacks a listener or there's some other problem, consider calling
nativeElement.dispatchEvent(eventObject)
.Parameter eventName
The name of the event to trigger
Parameter eventObj
The _event object_ expected by the handler
See Also
[Testing components scenarios](guide/testing/components-scenarios#trigger-event-handler)
class DebugEventListener
class DebugEventListener {}
constructor
constructor(name: string, callback: Function);
property callback
callback: Function;
property name
name: string;
class DebugNode
class DebugNode {}
constructor
constructor(nativeNode: Node);
property componentInstance
readonly componentInstance: any;
The element's own component instance, if it has one.
property context
readonly context: any;
An object that provides parent context for this element. Often an ancestor component instance that governs this element.
When an element is repeated within *ngFor, the context is an
NgForOf
whose$implicit
property is the value of the row instance value. For example, thehero
in `*ngFor="let hero of heroes"`.
property injector
readonly injector: Injector;
The host dependency injector. For example, the root element's component instance injector.
property listeners
readonly listeners: DebugEventListener[];
The callbacks attached to the component's properties and/or the element's event properties.
property nativeNode
readonly nativeNode: any;
The underlying DOM node.
property parent
readonly parent: DebugElement;
The
DebugElement
parent. Will benull
if this is the root element.
property providerTokens
readonly providerTokens: any[];
This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its providers metadata.
property references
readonly references: { [key: string]: any };
Dictionary of objects associated with template local variables (e.g. #foo), keyed by the local variable name.
class DefaultIterableDiffer
class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChanges<V> {}
Deprecated
v4.0.0 - Should not be part of public API.
constructor
constructor(trackByFn?: TrackByFunction<V>);
property collection
readonly collection: V[] | Iterable<V>;
property isDirty
readonly isDirty: boolean;
property length
readonly length: number;
method check
check: (collection: NgIterable<V>) => boolean;
method diff
diff: ( collection: NgIterable<V> | null | undefined) => DefaultIterableDiffer<V> | null;
method forEachAddedItem
forEachAddedItem: (fn: (record: IterableChangeRecord_<V>) => void) => void;
method forEachIdentityChange
forEachIdentityChange: (fn: (record: IterableChangeRecord_<V>) => void) => void;
method forEachItem
forEachItem: (fn: (record: IterableChangeRecord_<V>) => void) => void;
method forEachMovedItem
forEachMovedItem: (fn: (record: IterableChangeRecord_<V>) => void) => void;
method forEachOperation
forEachOperation: ( fn: ( item: IterableChangeRecord<V>, previousIndex: number | null, currentIndex: number | null ) => void) => void;
method forEachPreviousItem
forEachPreviousItem: (fn: (record: IterableChangeRecord_<V>) => void) => void;
method forEachRemovedItem
forEachRemovedItem: (fn: (record: IterableChangeRecord_<V>) => void) => void;
method onDestroy
onDestroy: () => void;
class DestroyRef
abstract class DestroyRef {}
DestroyRef
lets you set callbacks to run for any cleanup or destruction behavior. The scope of this destruction depends on whereDestroyRef
is injected. IfDestroyRef
is injected in a component or directive, the callbacks run when that component or directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.
method onDestroy
abstract onDestroy: (callback: () => void) => () => void;
Registers a destroy callback in a given lifecycle scope. Returns a cleanup function that can be invoked to unregister the callback.
### Example
const destroyRef = inject(DestroyRef);// register a destroy callbackconst unregisterFn = destroyRef.onDestroy(() => doSomethingOnDestroy());// stop the destroy callback from executing if neededunregisterFn();
class ElementRef
class ElementRef<T = any> {}
A wrapper around a native element inside of a View.
An
ElementRef
is backed by a render-specific element. In the browser, this is usually a DOM element.Permitting direct access to the DOM can make your application more vulnerable to XSS attacks. Carefully review any use of
ElementRef
in your code. For more detail, see the [Security Guide](https://g.co/ng/security).
constructor
constructor(nativeElement: {});
property nativeElement
nativeElement: {};
Use with caution Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you can take a look at Renderer2 which provides an API that can be safely used.
class EmbeddedViewRef
abstract class EmbeddedViewRef<C> extends ViewRef$1 {}
Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a
TemplateRef
.Properties of elements in a view can change, but the structure (number and order) of elements in a view cannot. Change the structure of elements by inserting, moving, or removing nested views in a view container.
See Also
The following template breaks down into two separate
TemplateRef
instances, an outer one and an inner one.Count: {{items.length}}<ul><li *ngFor="let item of items">{{item}}</li></ul>This is the outer
TemplateRef
:Count: {{items.length}}<ul><ng-template ngFor let-item [ngForOf]="items"></ng-template></ul>This is the inner
TemplateRef
:<li>{{item}}</li>The outer and inner
TemplateRef
instances are assembled into views as follows:<!-- ViewRef: outer-0 -->Count: 2<ul><ng-template view-container-ref></ng-template><!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 --><!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 --></ul><!-- /ViewRef: outer-0 -->
class EnvironmentInjector
abstract class EnvironmentInjector implements Injector {}
An
Injector
that's part of the environment injector hierarchy, which exists outside of the component tree.
method destroy
abstract destroy: () => void;
method get
abstract get: { <T>( token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions & { optional?: false } ): T; <T>(token: ProviderToken<T>, notFoundValue: null, options: InjectOptions): T; <T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions): T; <T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T; (token: any, notFoundValue?: any): any;};
Retrieves an instance from the injector based on the provided token.
Returns
The instance from the injector if defined, otherwise the
notFoundValue
.Throws
When the
notFoundValue
isundefined
orInjector.THROW_IF_NOT_FOUND
.Retrieves an instance from the injector based on the provided token.
Returns
The instance from the injector if defined, otherwise the
notFoundValue
.Throws
When the
notFoundValue
isundefined
orInjector.THROW_IF_NOT_FOUND
.Deprecated
use object-based flags (
InjectOptions
) instead.Deprecated
from v4.0.0 use ProviderToken {duplicate}
method runInContext
abstract runInContext: <ReturnT>(fn: () => ReturnT) => ReturnT;
Runs the given function in the context of this
EnvironmentInjector
.Within the function's stack frame, [
inject
](api/core/inject) can be used to inject dependencies from this injector. Note thatinject
is only usable synchronously, and cannot be used in any asynchronous callbacks or after anyawait
points.Parameter fn
the closure to be run in the context of this injector
Returns
the return value of the function, if any
Deprecated
use the standalone function
runInInjectionContext
instead
class ErrorHandler
class ErrorHandler {}
Provides a hook for centralized exception handling.
The default implementation of
ErrorHandler
prints error messages to theconsole
. To intercept error handling, write a custom exception handler that replaces this default as appropriate for your app.### Example
class MyErrorHandler implements ErrorHandler {handleError(error) {// do something with the exception}}// Provide in standalone appsbootstrapApplication(AppComponent, {providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]})// Provide in module-based apps@NgModule({providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]})class MyModule {}
method handleError
handleError: (error: any) => void;
class HostAttributeToken
class HostAttributeToken {}
Creates a token that can be used to inject static attributes of the host node.
### Injecting an attribute that is known to exist
@Directive()class MyDir {attr: string = inject(new HostAttributeToken('some-attr'));}### Optionally injecting an attribute
@Directive()class MyDir {attr: string | null = inject(new HostAttributeToken('some-attr'), {optional: true});}
constructor
constructor(attributeName: string);
method toString
toString: () => string;
class InjectionToken
class InjectionToken<T> {}
Creates a token that can be used in a DI Provider.
Use an
InjectionToken
whenever the type you are injecting is not reified (does not have a runtime representation) such as when injecting an interface, callable type, array or parameterized type.InjectionToken
is parameterized onT
which is the type of object which will be returned by theInjector
. This provides an additional level of type safety.**Important Note**: Ensure that you use the same instance of the
InjectionToken
in both the provider and the injection call. Creating a new instance ofInjectionToken
in different places, even with the same description, will be treated as different tokens by Angular's DI system, leading to aNullInjectorError
.When creating an
InjectionToken
, you can optionally specify a factory function which returns (possibly by creating) a default value of the parameterized typeT
. This sets up theInjectionToken
using this factory as a provider as if it was defined explicitly in the application's root injector. If the factory function, which takes zero arguments, needs to inject dependencies, it can do so using the [inject
](api/core/inject) function. As you can see in the Tree-shakable InjectionToken example below.Additionally, if a
factory
is specified you can also specify theprovidedIn
option, which overrides the above behavior and marks the token as belonging to a particular@NgModule
(note: this option is now deprecated). As mentioned above,'root'
is the default value forprovidedIn
.The
providedIn: NgModule
andprovidedIn: 'any'
options are deprecated.### Basic Examples
### Plain InjectionToken
### Tree-shakable InjectionToken
constructor
constructor( _desc: string, options?: { providedIn?: Type$1<any> | 'root' | 'platform' | 'any' | null; factory: () => T; });
Parameter _desc
Description for the token, used only for debugging purposes, it should but does not need to be unique
Parameter options
Options for the token's usage, as described above
property ɵprov
readonly ɵprov: {};
method toString
toString: () => string;
class Injector
abstract class Injector {}
Concrete injectors implement this interface. Injectors are configured with [providers](guide/di/dependency-injection-providers) that associate dependencies of various types with [injection tokens](guide/di/dependency-injection-providers).
See Also
[DI Providers](guide/di/dependency-injection-providers).
The following example creates a service injector instance.
### Usage example
Injector
returns itself when givenInjector
as a token:
property NULL
static NULL: Injector;
property ɵprov
static ɵprov: {};
property THROW_IF_NOT_FOUND
static THROW_IF_NOT_FOUND: {};
method create
static create: { (providers: StaticProvider[], parent?: Injector): Injector; (options: { providers: ( | any[] | TypeProvider | ValueProvider | ClassProvider | ConstructorProvider | ExistingProvider | FactoryProvider | StaticClassProvider )[]; parent?: Injector; name?: string; }): Injector;};
Deprecated
from v5 use the new signature Injector.create(options)
Creates a new injector instance that provides one or more dependencies, according to a given type or types of
StaticProvider
.Parameter options
An object with the following properties: *
providers
: An array of providers of the [StaticProvider type](api/core/StaticProvider). *parent
: (optional) A parent injector. *name
: (optional) A developer-defined identifying name for the new injector.Returns
The new injector instance.
method get
abstract get: { <T>( token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions & { optional?: false } ): T; <T>(token: ProviderToken<T>, notFoundValue: null, options: InjectOptions): T; <T>( token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions | InjectFlags ): T; <T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T; (token: any, notFoundValue?: any): any;};
Retrieves an instance from the injector based on the provided token.
Returns
The instance from the injector if defined, otherwise the
notFoundValue
.Throws
When the
notFoundValue
isundefined
orInjector.THROW_IF_NOT_FOUND
.Retrieves an instance from the injector based on the provided token.
Returns
The instance from the injector if defined, otherwise the
notFoundValue
.Throws
When the
notFoundValue
isundefined
orInjector.THROW_IF_NOT_FOUND
.Deprecated
use object-based flags (
InjectOptions
) instead.Deprecated
from v4.0.0 use ProviderToken {duplicate}
class IterableDiffers
class IterableDiffers {}
A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
constructor
constructor(factories: IterableDifferFactory[]);
property ɵprov
static ɵprov: {};
method create
static create: ( factories: IterableDifferFactory[], parent?: IterableDiffers) => IterableDiffers;
method extend
static extend: (factories: IterableDifferFactory[]) => StaticProvider;
Takes an array of IterableDifferFactory and returns a provider used to extend the inherited IterableDiffers instance with the provided factories and return a new IterableDiffers instance.
### Example
The following example shows how to extend an existing list of factories, which will only be applied to the injector for this component and its children. This step is all that's required to make a new IterableDiffer available.
@Component({viewProviders: [IterableDiffers.extend([new ImmutableListDiffer()])]})
method find
find: (iterable: any) => IterableDifferFactory;
class KeyValueDiffers
class KeyValueDiffers {}
A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
constructor
constructor(factories: KeyValueDifferFactory[]);
property ɵprov
static ɵprov: {};
method create
static create: <S>( factories: KeyValueDifferFactory[], parent?: KeyValueDiffers) => KeyValueDiffers;
method extend
static extend: <S>(factories: KeyValueDifferFactory[]) => StaticProvider;
Takes an array of KeyValueDifferFactory and returns a provider used to extend the inherited KeyValueDiffers instance with the provided factories and return a new KeyValueDiffers instance.
### Example
The following example shows how to extend an existing list of factories, which will only be applied to the injector for this component and its children. This step is all that's required to make a new KeyValueDiffer available.
@Component({viewProviders: [KeyValueDiffers.extend([new ImmutableMapDiffer()])]})
method find
find: (kv: any) => KeyValueDifferFactory;
class ModuleWithComponentFactories
class ModuleWithComponentFactories<T> {}
Combination of NgModuleFactory and ComponentFactories.
Deprecated
Ivy JIT mode doesn't require accessing this symbol.
constructor
constructor( ngModuleFactory: NgModuleFactory$1<T>, componentFactories: ComponentFactory$1<any>[]);
property componentFactories
componentFactories: ComponentFactory$1<any>[];
property ngModuleFactory
ngModuleFactory: NgModuleFactory$1<T>;
class NgModuleFactory
abstract class NgModuleFactory$1<T> {}
Deprecated
This class was mostly used as a part of ViewEngine-based JIT API and is no longer needed in Ivy JIT mode. Angular provides APIs that accept NgModule classes directly (such as [PlatformRef.bootstrapModule](api/core/PlatformRef#bootstrapModule) and [createNgModule](api/core/createNgModule)), consider switching to those APIs instead of using factory-based ones.
property moduleType
readonly moduleType: Type$1<T>;
method create
abstract create: (parentInjector: Injector | null) => NgModuleRef$1<T>;
class NgModuleRef
abstract class NgModuleRef$1<T> {}
Represents an instance of an
NgModule
created by anNgModuleFactory
. Provides access to theNgModule
instance and related objects.
property componentFactoryResolver
readonly componentFactoryResolver: ComponentFactoryResolver$1;
The resolver that can retrieve component factories in a context of this module.
Note: since v13, dynamic component creation via [
ViewContainerRef.createComponent
](api/core/ViewContainerRef#createComponent) does **not** require resolving component factory: component class can be used directly.Deprecated
Angular no longer requires Component factories. Please use other APIs where Component class can be used directly.
property injector
readonly injector: EnvironmentInjector;
The injector that contains all of the providers of the
NgModule
.
property instance
readonly instance: {};
The
NgModule
instance.
method destroy
abstract destroy: () => void;
Destroys the module instance and all of the data structures associated with it.
method onDestroy
abstract onDestroy: (callback: () => void) => void;
Registers a callback to be executed when the module is destroyed.
class NgProbeToken
class NgProbeToken {}
A token for third-party components that can register themselves with NgProbe.
Deprecated
constructor
constructor(name: string, token: any);
property name
name: string;
property token
token: any;
class NgZone
class NgZone {}
An injectable service for executing work inside or outside of the Angular zone.
The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that don't require UI updates or error handling to be handled by Angular. Such tasks can be kicked off via and if needed, these tasks can reenter the Angular zone via .
<!-- TODO: add/fix links to: - docs explaining zones and the use of zones in Angular and change-detection - link to runOutsideAngular/run (throughout this file!) -->
### Example
import {Component, NgZone} from '@angular/core';import {NgIf} from '@angular/common';@Component({selector: 'ng-zone-demo',template: `<h2>Demo: NgZone</h2><p>Progress: {{progress}}%</p><p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p><button (click)="processWithinAngularZone()">Process within Angular zone</button><button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>`,})export class NgZoneDemo {progress: number = 0;label: string;constructor(private _ngZone: NgZone) {}// Loop inside the Angular zone// so the UI DOES refresh after each setTimeout cycleprocessWithinAngularZone() {this.label = 'inside';this.progress = 0;this._increaseProgress(() => console.log('Inside Done!'));}// Loop outside of the Angular zone// so the UI DOES NOT refresh after each setTimeout cycleprocessOutsideOfAngularZone() {this.label = 'outside';this.progress = 0;this._ngZone.runOutsideAngular(() => {this._increaseProgress(() => {// reenter the Angular zone and display donethis._ngZone.run(() => { console.log('Outside Done!'); });});});}_increaseProgress(doneCallback: () => void) {this.progress += 1;console.log(`Current progress: ${this.progress}%`);if (this.progress < 100) {window.setTimeout(() => this._increaseProgress(doneCallback), 10);} else {doneCallback();}}}
constructor
constructor(options: { enableLongStackTrace?: boolean; shouldCoalesceEventChangeDetection?: boolean; shouldCoalesceRunChangeDetection?: boolean;});
property hasPendingMacrotasks
readonly hasPendingMacrotasks: boolean;
property hasPendingMicrotasks
readonly hasPendingMicrotasks: boolean;
property isStable
readonly isStable: boolean;
Whether there are no outstanding microtasks or macrotasks.
property onError
readonly onError: EventEmitter<any>;
Notifies that an error has been delivered.
property onMicrotaskEmpty
readonly onMicrotaskEmpty: EventEmitter<any>;
Notifies when there is no more microtasks enqueued in the current VM Turn. This is a hint for Angular to do change detection, which may enqueue more microtasks. For this reason this event can fire multiple times per VM Turn.
property onStable
readonly onStable: EventEmitter<any>;
Notifies when the last
onMicrotaskEmpty
has run and there are no more microtasks, which implies we are about to relinquish VM turn. This event gets called just once.
property onUnstable
readonly onUnstable: EventEmitter<any>;
Notifies when code enters Angular Zone. This gets fired first on VM Turn.
method assertInAngularZone
static assertInAngularZone: () => void;
Assures that the method is called within the Angular Zone, otherwise throws an error.
method assertNotInAngularZone
static assertNotInAngularZone: () => void;
Assures that the method is called outside of the Angular Zone, otherwise throws an error.
method isInAngularZone
static isInAngularZone: () => boolean;
This method checks whether the method call happens within an Angular Zone instance.
method run
run: <T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]) => T;
Executes the
fn
function synchronously within the Angular zone and returns value returned by the function.Running functions via
run
allows you to reenter Angular zone from a task that was executed outside of the Angular zone (typically started via ).Any future tasks or microtasks scheduled from within this function will continue executing from within the Angular zone.
If a synchronous error happens it will be rethrown and not reported via
onError
.
method runGuarded
runGuarded: <T>( fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]) => T;
Same as
run
, except that synchronous errors are caught and forwarded viaonError
and not rethrown.
method runOutsideAngular
runOutsideAngular: <T>(fn: (...args: any[]) => T) => T;
Executes the
fn
function synchronously in Angular's parent zone and returns value returned by the function.Running functions via allows you to escape Angular's zone and do work that doesn't trigger Angular change-detection or is subject to Angular's error handling.
Any future tasks or microtasks scheduled from within this function will continue executing from outside of the Angular zone.
Use to reenter the Angular zone and do work that updates the application model.
method runTask
runTask: <T>( fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string) => T;
Executes the
fn
function synchronously within the Angular zone as a task and returns value returned by the function.Running functions via
runTask
allows you to reenter Angular zone from a task that was executed outside of the Angular zone (typically started via ).Any future tasks or microtasks scheduled from within this function will continue executing from within the Angular zone.
If a synchronous error happens it will be rethrown and not reported via
onError
.
class OutputEmitterRef
class OutputEmitterRef<T> implements OutputRef<T> {}
An
OutputEmitterRef
is created by theoutput()
function and can be used to emit values to consumers of your directive or component.Consumers of your directive/component can bind to the output and subscribe to changes via the bound event syntax. For example:
<my-comp (valueChange)="processNewValue($event)" />
constructor
constructor();
method emit
emit: (value: T) => void;
Emits a new value to the output.
method subscribe
subscribe: (callback: (value: T) => void) => OutputRefSubscription;
class ɵAfterRenderManager
class AfterRenderManager {}
class ɵChangeDetectionScheduler
abstract class ChangeDetectionScheduler {}
Injectable that is notified when an
LView
is made aware of changes to application state.
property runningTick
abstract runningTick: boolean;
method notify
abstract notify: (source: NotificationSource) => void;
class ɵChangeDetectionSchedulerImpl
class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {}
constructor
constructor();
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<ChangeDetectionSchedulerImpl>;
property pendingRenderTaskId
pendingRenderTaskId: number;
property runningTick
runningTick: boolean;
method ngOnDestroy
ngOnDestroy: () => void;
method notify
notify: (source: NotificationSource) => void;
class ɵComponentFactory
abstract class ComponentFactory$1<C> {}
Base class for a factory that can create a component dynamically. Instantiate a factory for a given type of component with
resolveComponentFactory()
. Use the resultingComponentFactory.create()
method to create a component of that type.Deprecated
Angular no longer requires Component factories. Please use other APIs where Component class can be used directly.
property componentType
readonly componentType: Type$1<any>;
The type of component the factory will create.
property inputs
readonly inputs: { propName: string; templateName: string; transform?: (value: any) => any; isSignal: boolean;}[];
The inputs of the component.
property ngContentSelectors
readonly ngContentSelectors: string[];
Selector for all elements in the component.
property outputs
readonly outputs: { propName: string; templateName: string }[];
The outputs of the component.
property selector
readonly selector: string;
The component's HTML selector.
method create
abstract create: ( injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, environmentInjector?: EnvironmentInjector | NgModuleRef$1<any>) => ComponentRef$1<C>;
Creates a new component.
class ɵConsole
class Console {}
class ɵEffectScheduler
abstract class EffectScheduler {}
A scheduler which manages the execution of effects.
property ɵprov
static ɵprov: {};
method flush
abstract flush: () => void;
Run any scheduled effects.
method remove
abstract remove: (e: SchedulableEffect) => void;
Remove a scheduled effect
method schedule
abstract schedule: (e: SchedulableEffect) => void;
Schedule the given effect to be executed at a later time.
It is an error to attempt to execute any effects synchronously during a scheduling operation.
class ɵLContext
class LContext {}
The internal view context which is specific to a given DOM element, directive or component instance. Each value in here (besides the LView and element node details) can be present, null or undefined. If undefined then it implies the value has not been looked up yet, otherwise, if null, then a lookup was executed and nothing was found.
Each value will get filled when the respective value is examined within the getContext function. The component, element and each directive instance will share the same instance of the context.
constructor
constructor(lViewId: number, nodeIndex: number, native: RNode);
property component
component: {};
The instance of the Component node.
property directives
directives: any[];
The list of active directives that exist on this element.
property localRefs
localRefs: { [key: string]: any };
The map of local references (local reference name => element or directive instance) that exist on this element.
property lView
readonly lView: LView<unknown>;
Component's parent view data.
property native
native: RNode;
The instance of the DOM node that is attached to the lNode.
property nodeIndex
nodeIndex: number;
The index instance of the node.
class ɵMicrotaskEffectScheduler
class MicrotaskEffectScheduler extends ZoneAwareEffectScheduler {}
class ɵNavigateEvent
class NavigateEvent extends Event {}
constructor
constructor(type: string, eventInit?: NavigateEventInit);
property canIntercept
readonly canIntercept: boolean;
property destination
readonly destination: NavigationDestination;
property downloadRequest
readonly downloadRequest: string;
property formData
readonly formData: FormData;
property hashChange
readonly hashChange: boolean;
property info
readonly info?: {};
property navigationType
readonly navigationType: NavigationTypeString;
property signal
readonly signal: AbortSignal;
property userInitiated
readonly userInitiated: boolean;
method intercept
intercept: (options?: NavigationInterceptOptions) => void;
method scroll
scroll: () => void;
class ɵNavigation
class Navigation extends EventTarget {}
property canGoBack
readonly canGoBack: boolean;
property canGoForward
readonly canGoForward: boolean;
property currentEntry
readonly currentEntry: NavigationHistoryEntry;
property oncurrententrychange
oncurrententrychange: ( this: Navigation, ev: NavigationCurrentEntryChangeEvent) => any;
property onnavigate
onnavigate: (this: Navigation, ev: NavigateEvent) => any;
property onnavigateerror
onnavigateerror: (this: Navigation, ev: ErrorEvent) => any;
property onnavigatesuccess
onnavigatesuccess: (this: Navigation, ev: Event) => any;
property transition
readonly transition: NavigationTransition;
method addEventListener
addEventListener: { <K extends keyof NavigationEventMap>( type: K, listener: (this: Navigation, ev: NavigationEventMap[K]) => any, options?: boolean | AddEventListenerOptions ): void; ( type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ): void;};
method back
back: (options?: NavigationOptions) => NavigationResult;
method entries
entries: () => NavigationHistoryEntry[];
method forward
forward: (options?: NavigationOptions) => NavigationResult;
method navigate
navigate: (url: string, options?: NavigationNavigateOptions) => NavigationResult;
method reload
reload: (options?: NavigationReloadOptions) => NavigationResult;
method removeEventListener
removeEventListener: { <K extends keyof NavigationEventMap>( type: K, listener: (this: Navigation, ev: NavigationEventMap[K]) => any, options?: boolean | EventListenerOptions ): void; ( type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions ): void;};
method traverseTo
traverseTo: (key: string, options?: NavigationOptions) => NavigationResult;
method updateCurrentEntry
updateCurrentEntry: (options: NavigationUpdateCurrentEntryOptions) => void;
class ɵNavigationCurrentEntryChangeEvent
class NavigationCurrentEntryChangeEvent extends Event {}
constructor
constructor(type: string, eventInit?: NavigationCurrentEntryChangeEventInit);
property from
readonly from: NavigationHistoryEntry;
property navigationType
readonly navigationType: NavigationTypeString;
class ɵNavigationDestination
class NavigationDestination {}
class ɵNavigationHistoryEntry
class NavigationHistoryEntry extends EventTarget {}
property id
readonly id: string;
property index
readonly index: number;
property key
readonly key: string;
property ondispose
ondispose: (this: NavigationHistoryEntry, ev: Event) => any;
property sameDocument
readonly sameDocument: boolean;
property url
readonly url: string;
method addEventListener
addEventListener: { <K extends 'dispose'>( type: K, listener: ( this: NavigationHistoryEntry, ev: NavigationHistoryEntryEventMap[K] ) => any, options?: boolean | AddEventListenerOptions ): void; ( type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ): void;};
method getState
getState: () => unknown;
method removeEventListener
removeEventListener: { <K extends 'dispose'>( type: K, listener: ( this: NavigationHistoryEntry, ev: NavigationHistoryEntryEventMap[K] ) => any, options?: boolean | EventListenerOptions ): void; ( type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions ): void;};
class ɵNavigationTransition
class NavigationTransition {}
property finished
readonly finished: Promise<void>;
property from
readonly from: NavigationHistoryEntry;
property navigationType
readonly navigationType: NavigationTypeString;
class ɵNgModuleFactory
class NgModuleFactory<T> extends NgModuleFactory$1<T> {}
constructor
constructor(moduleType: Type$1<T>);
property moduleType
moduleType: Type$1<T>;
method create
create: (parentInjector: Injector | null) => NgModuleRef$1<T>;
class ɵNoopNgZone
class NoopNgZone implements NgZone {}
Provides a noop implementation of
NgZone
which does nothing. This zone requires explicit calls to framework to perform rendering.
property hasPendingMacrotasks
readonly hasPendingMacrotasks: boolean;
property hasPendingMicrotasks
readonly hasPendingMicrotasks: boolean;
property isStable
readonly isStable: boolean;
property onError
readonly onError: EventEmitter<any>;
property onMicrotaskEmpty
readonly onMicrotaskEmpty: EventEmitter<any>;
property onStable
readonly onStable: EventEmitter<any>;
property onUnstable
readonly onUnstable: EventEmitter<any>;
method run
run: <T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any) => T;
method runGuarded
runGuarded: <T>( fn: (...args: any[]) => any, applyThis?: any, applyArgs?: any) => T;
method runOutsideAngular
runOutsideAngular: <T>(fn: (...args: any[]) => T) => T;
method runTask
runTask: <T>( fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any, name?: string) => T;
class ɵPendingTasksInternal
class PendingTasksInternal implements OnDestroy {}
Internal implementation of the pending tasks service.
property hasPendingTasks
hasPendingTasks: BehaviorSubject<boolean>;
property ɵprov
static ɵprov: {};
method add
add: () => number;
method has
has: (taskId: number) => boolean;
method ngOnDestroy
ngOnDestroy: () => void;
method remove
remove: (taskId: number) => void;
class ɵReflectionCapabilities
class ReflectionCapabilities implements PlatformReflectionCapabilities {}
constructor
constructor(reflect?: any);
method annotations
annotations: (typeOrFunc: Type$1<any>) => any[];
method factory
factory: <T>(t: Type$1<T>) => (args: any[]) => T;
method hasLifecycleHook
hasLifecycleHook: (type: any, lcProperty: string) => boolean;
method ownPropMetadata
ownPropMetadata: (typeOrFunc: any) => { [key: string]: any[] };
method parameters
parameters: (type: Type$1<any>) => any[][];
method propMetadata
propMetadata: (typeOrFunc: any) => { [key: string]: any[] };
class ɵRender3ComponentFactory
class ComponentFactory<T> extends ComponentFactory$1<T> {}
ComponentFactory interface implementation.
constructor
constructor(componentDef: ComponentDef<any>, ngModule?: NgModuleRef$1<any>);
Parameter componentDef
The component definition.
Parameter ngModule
The NgModuleRef to which the factory is bound.
property componentType
componentType: Type$1<any>;
property inputs
readonly inputs: { propName: string; templateName: string; isSignal: boolean; transform?: (value: any) => any;}[];
property isBoundToModule
isBoundToModule: boolean;
property ngContentSelectors
ngContentSelectors: string[];
property outputs
readonly outputs: { propName: string; templateName: string }[];
property selector
selector: string;
method create
create: ( injector: Injector, projectableNodes?: any[][] | undefined, rootSelectorOrNode?: any, environmentInjector?: NgModuleRef$1<any> | EnvironmentInjector | undefined) => ComponentRef$1<T>;
class ɵRender3ComponentRef
class ComponentRef<T> extends ComponentRef$1<T> {}
Represents an instance of a Component created via a ComponentFactory.
ComponentRef
provides access to the Component Instance as well other objects related to this Component Instance and allows you to destroy the Component Instance via the method.
constructor
constructor(componentType: Type$1<T>, _rootLView: LView<unknown>);
property changeDetectorRef
changeDetectorRef: ChangeDetectorRef;
property componentType
componentType: Type$1<T>;
property hostView
hostView: ViewRef<T>;
property injector
readonly injector: Injector;
property instance
instance: {};
property location
location: ElementRef<any>;
method destroy
destroy: () => void;
method onDestroy
onDestroy: (callback: () => void) => void;
method setInput
setInput: (name: string, value: unknown) => void;
class ɵRender3NgModuleRef
class NgModuleRef<T> extends NgModuleRef$1<T> implements InternalNgModuleRef<T> {}
constructor
constructor( ngModuleType: Type$1<T>, _parent: Injector, additionalProviders: StaticProvider[], runInjectorInitializers?: boolean);
property componentFactoryResolver
readonly componentFactoryResolver: ComponentFactoryResolver;
property destroyCbs
destroyCbs: (() => void)[];
property injector
readonly injector: EnvironmentInjector;
property instance
instance: {};
method destroy
destroy: () => void;
method onDestroy
onDestroy: (callback: () => void) => void;
method resolveInjectorInitializers
resolveInjectorInitializers: () => void;
class ɵResourceImpl
class ResourceImpl<T, R> extends BaseWritableResource<T> implements ResourceRef<T> {}
Implementation for
resource()
which uses alinkedSignal
to manage the resource's state.
constructor
constructor( request: () => R, loaderFn: ResourceStreamingLoader<T, R>, defaultValue: {}, equal: ValueEqualityFn$1<T>, injector: Injector);
property error
readonly error: Signal<unknown>;
property extRequest
protected readonly extRequest: WritableSignal<WrappedRequest>;
Combines the current request with a reload counter which allows the resource to be reloaded on imperative command.
property status
readonly status: Signal<ResourceStatus>;
method destroy
destroy: () => void;
method reload
reload: () => boolean;
method set
set: (value: T) => void;
Called either directly via
WritableResource.set
or via.value.set()
.
class ɵRuntimeError
class RuntimeError<T extends number = RuntimeErrorCode> extends Error {}
Class that represents a runtime error. Formats and outputs the error message in a consistent way.
Example:
throw new RuntimeError(RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,ngDevMode && 'Injector has already been destroyed.');Note: the
message
argument contains a descriptive error message as a string in development mode (when thengDevMode
is defined). In production mode (after tree-shaking pass), themessage
argument becomesfalse
, thus we account for it in the typings and the runtime logic.
constructor
constructor(code: number, message: string | false);
property code
code: number;
class ɵViewRef
class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterface {}
constructor
constructor( _lView: LView<unknown>, _cdRefInjectingView?: LView<unknown>, notifyErrorHandler?: boolean);
property context
context: {};
property destroyed
readonly destroyed: boolean;
property notifyErrorHandler
readonly notifyErrorHandler: boolean;
property rootNodes
readonly rootNodes: any[];
method attachToAppRef
attachToAppRef: (appRef: ApplicationRef) => void;
method attachToViewContainerRef
attachToViewContainerRef: () => void;
method checkNoChanges
checkNoChanges: () => void;
Checks the change detector and its children, and throws if any changes are detected.
This is used in development mode to verify that running change detection doesn't introduce other changes.
method destroy
destroy: () => void;
method detach
detach: () => void;
Detaches the view from the change detection tree.
Detached views will not be checked during change detection runs until they are re-attached, even if they are dirty.
detach
can be used in combination with ChangeDetectorRef#detectChanges to implement local change detection checks.<!-- TODO: Add a link to a chapter on detach/reattach/local digest --> <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
### Example
The following example defines a component with a large list of readonly data. Imagine the data changes constantly, many times per second. For performance reasons, we want to check and update the list every five seconds. We can do that by detaching the component's change detector and doing a local check every five seconds.
class DataProvider {// in a real application the returned data will be different every timeget data() {return [1,2,3,4,5];}}@Component({selector: 'giant-list',template: `<li *ngFor="let d of dataProvider.data">Data {{d}}</li>`,})class GiantList {constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {ref.detach();setInterval(() => {this.ref.detectChanges();}, 5000);}}@Component({selector: 'app',providers: [DataProvider],template: `<giant-list><giant-list>`,})class App {}
method detachFromAppRef
detachFromAppRef: () => void;
method detectChanges
detectChanges: () => void;
Checks the view and its children.
This can also be used in combination with ChangeDetectorRef#detach to implement local change detection checks.
<!-- TODO: Add a link to a chapter on detach/reattach/local digest --> <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
### Example
The following example defines a component with a large list of readonly data. Imagine, the data changes constantly, many times per second. For performance reasons, we want to check and update the list every five seconds.
We can do that by detaching the component's change detector and doing a local change detection check every five seconds.
See ChangeDetectorRef#detach for more information.
method markForCheck
markForCheck: () => void;
Marks a view and all of its ancestors dirty.
This can be used to ensure an ChangeDetectionStrategy#OnPush component is checked when it needs to be re-rendered but the two normal triggers haven't marked it dirty (i.e. inputs haven't changed and events haven't fired in the view).
<!-- TODO: Add a link to a chapter on OnPush components -->
### Example
@Component({selector: 'app-root',template: `Number of ticks: {{numberOfTicks}}`changeDetection: ChangeDetectionStrategy.OnPush,})class AppComponent {numberOfTicks = 0;constructor(private ref: ChangeDetectorRef) {setInterval(() => {this.numberOfTicks++;// the following is required, otherwise the view will not be updatedthis.ref.markForCheck();}, 1000);}}
method onDestroy
onDestroy: (callback: Function) => void;
method reattach
reattach: () => void;
Re-attaches a view to the change detection tree.
This can be used to re-attach views that were previously detached from the tree using ChangeDetectorRef#detach. Views are attached to the tree by default.
<!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
### Example
The following example creates a component displaying
live
data. The component will detach its change detector from the main change detector tree when the component's live property is set to false.class DataProvider {data = 1;constructor() {setInterval(() => {this.data = this.data * 2;}, 500);}}@Component({selector: 'live-data',inputs: ['live'],template: 'Data: {{dataProvider.data}}'})class LiveData {constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}set live(value) {if (value) {this.ref.reattach();} else {this.ref.detach();}}}@Component({selector: 'app-root',providers: [DataProvider],template: `Live Update: <input type="checkbox" [(ngModel)]="live"><live-data [live]="live"><live-data>`,})class AppComponent {live = true;}
class PendingTasks
class PendingTasks {}
Service that keeps track of pending tasks contributing to the stableness of Angular application. While several existing Angular services (ex.:
HttpClient
) will internally manage tasks influencing stability, this API gives control over stability to library and application developers for specific cases not covered by Angular internals.The concept of stability comes into play in several important scenarios: - SSR process needs to wait for the application stability before serializing and sending rendered HTML; - tests might want to delay assertions until the application becomes stable;
const pendingTasks = inject(PendingTasks);const taskCleanup = pendingTasks.add();// do work that should block application's stability and then:taskCleanup();
property ɵprov
static ɵprov: {};
method add
add: () => () => void;
Adds a new task that should block application's stability.
Returns
A cleanup function that removes a task when called.
method run
run: <T>(fn: () => Promise<T>) => Promise<T>;
Runs an asynchronous function and blocks the application's stability until the function completes.
pendingTasks.run(async () => {const userData = await fetch('/api/user');this.userData.set(userData);});Application stability is at least delayed until the next tick after the
run
method resolves so it is safe to make additional updates to application state that would require UI synchronization:const userData = await pendingTasks.run(() => fetch('/api/user'));this.userData.set(userData);Parameter fn
The asynchronous function to execute
class PlatformRef
class PlatformRef {}
The Angular platform is the entry point for Angular on a web page. Each page has exactly one platform. Services (such as reflection) which are common to every Angular application running on the page are bound in its scope. A page's platform is initialized implicitly when a platform is created using a platform factory such as
PlatformBrowser
, or explicitly by calling thecreatePlatform()
function.
property destroyed
readonly destroyed: boolean;
Indicates whether this instance was destroyed.
property injector
readonly injector: Injector;
Retrieves the platform Injector, which is the parent injector for every Angular application on the page and provides singleton providers.
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<PlatformRef>;
method bootstrapModule
bootstrapModule: <M>( moduleType: Type$1<M>, compilerOptions?: | (CompilerOptions & BootstrapOptions) | Array<CompilerOptions & BootstrapOptions>) => Promise<NgModuleRef$1<M>>;
Creates an instance of an
@NgModule
for a given platform.### Simple Example
@NgModule({imports: [BrowserModule]})class MyModule {}let moduleRef = platformBrowser().bootstrapModule(MyModule);
method bootstrapModuleFactory
bootstrapModuleFactory: <M>( moduleFactory: NgModuleFactory$1<M>, options?: BootstrapOptions) => Promise<NgModuleRef$1<M>>;
Creates an instance of an
@NgModule
for the given platform.Deprecated
Passing NgModule factories as the
PlatformRef.bootstrapModuleFactory
function argument is deprecated. Use thePlatformRef.bootstrapModule
API instead.
method destroy
destroy: () => void;
Destroys the current Angular platform and all Angular applications on the page. Destroys all modules and listeners registered with the platform.
method onDestroy
onDestroy: (callback: () => void) => void;
Registers a listener to be called when the platform is destroyed.
class Query
abstract class Query {}
Base class for query metadata.
See Also
class QueryList
class QueryList<T> implements Iterable<T> {}
An unmodifiable list of items that Angular keeps up to date when the state of the application changes.
The type of object that ViewChildren, ContentChildren, and QueryList provide.
Implements an iterable interface, therefore it can be used in both ES6 javascript
for (var i of items)
loops as well as in Angular templates with*ngFor="let i of myList"
.Changes can be observed by subscribing to the changes
Observable
.NOTE: In the future this class will implement an
Observable
interface.### Example
@Component({...})class Container {@ViewChildren(Item) items:QueryList<Item>;}
constructor
constructor(_emitDistinctChangesOnly?: boolean);
Parameter emitDistinctChangesOnly
Whether
QueryList.changes
should fire only when actual change has occurred. Or if it should fire when query is recomputed. (recomputing could resolve in the same result)
property [Symbol.iterator]
[Symbol.iterator]: () => Iterator<T>;
property changes
readonly changes: Observable<any>;
Returns
Observable
ofQueryList
notifying the subscriber of changes.
property dirty
readonly dirty: boolean;
property first
readonly first: {};
property last
readonly last: {};
property length
readonly length: number;
method destroy
destroy: () => void;
internal
method filter
filter: { <S extends T>( predicate: (value: T, index: number, array: readonly T[]) => value is S ): S[]; (predicate: (value: T, index: number, array: readonly T[]) => unknown): T[];};
See [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
method find
find: (fn: (item: T, index: number, array: T[]) => boolean) => T | undefined;
See [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
method forEach
forEach: (fn: (item: T, index: number, array: T[]) => void) => void;
See [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
method get
get: (index: number) => T | undefined;
Returns the QueryList entry at
index
.
method map
map: <U>(fn: (item: T, index: number, array: T[]) => U) => U[];
See [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
method notifyOnChanges
notifyOnChanges: () => void;
Triggers a change event by emitting on the
changes
EventEmitter.
method reduce
reduce: <U>( fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U) => U;
See [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
method reset
reset: ( resultsTree: Array<T | any[]>, identityAccessor?: (value: T) => unknown) => void;
Updates the stored data of the query list, and resets the
dirty
flag tofalse
, so that on change detection, it will not notify of changes to the queries, unless a new change occurs.Parameter resultsTree
The query results to store
Parameter identityAccessor
Optional function for extracting stable object identity from a value in the array. This function is executed for each element of the query result list while comparing current query list with the new one (provided as a first argument of the
reset
function) to detect if the lists are different. If the function is not provided, elements are compared as is (without any pre-processing).
method setDirty
setDirty: () => void;
internal
method some
some: (fn: (value: T, index: number, array: T[]) => boolean) => boolean;
See [Array.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
method toArray
toArray: () => T[];
Returns a copy of the internal results list as an Array.
method toString
toString: () => string;
class Renderer2
abstract class Renderer2 {}
Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.
Create your custom renderer using
RendererFactory2
.Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be expressed declaratively. For example if you need to set a property or an attribute whose name is not statically known, use the
setProperty()
orsetAttribute()
method.
property data
readonly data: { [key: string]: any };
Use to store arbitrary developer-defined data on a renderer instance, as an object containing key-value pairs. This is useful for renderers that delegate to other renderers.
property destroyNode
destroyNode: (node: any) => void;
If null or undefined, the view engine won't call it. This is used as a performance optimization for production mode.
method addClass
abstract addClass: (el: any, name: string) => void;
Implement this callback to add a class to an element in the DOM.
Parameter el
The element.
Parameter name
The class name.
method appendChild
abstract appendChild: (parent: any, newChild: any) => void;
Appends a child to a given parent node in the host element DOM.
Parameter parent
The parent node.
Parameter newChild
The new child node.
method createComment
abstract createComment: (value: string) => any;
Implement this callback to add a comment to the DOM of the host element.
Parameter value
The comment text.
Returns
The modified element.
method createElement
abstract createElement: (name: string, namespace?: string | null) => any;
Implement this callback to create an instance of the host element.
Parameter name
An identifying name for the new element, unique within the namespace.
Parameter namespace
The namespace for the new element.
Returns
The new element.
method createText
abstract createText: (value: string) => any;
Implement this callback to add text to the DOM of the host element.
Parameter value
The text string.
Returns
The modified element.
method destroy
abstract destroy: () => void;
Implement this callback to destroy the renderer or the host element.
method insertBefore
abstract insertBefore: ( parent: any, newChild: any, refChild: any, isMove?: boolean) => void;
Implement this callback to insert a child node at a given position in a parent node in the host element DOM.
Parameter parent
The parent node.
Parameter newChild
The new child nodes.
Parameter refChild
The existing child node before which
newChild
is inserted.Parameter isMove
Optional argument which signifies if the current
insertBefore
is a result of a move. Animation uses this information to trigger move animations. In the past the Animation would always assume that anyinsertBefore
is a move. This is not strictly true because with runtime i18n it is possible to invokeinsertBefore
as a result of i18n and it should not trigger an animation move.
method listen
abstract listen: ( target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void, options?: ListenerOptions) => () => void;
Implement this callback to start an event listener.
Parameter target
The context in which to listen for events. Can be the entire window or document, the body of the document, or a specific DOM element.
Parameter eventName
The event to listen for.
Parameter callback
A handler function to invoke when the event occurs.
Parameter options
Options that configure how the event listener is bound.
Returns
An "unlisten" function for disposing of this handler.
method nextSibling
abstract nextSibling: (node: any) => any;
Implement this callback to get the next sibling node of a given node in the host element's DOM.
Returns
The sibling node, or null if there is no sibling. This is because the check is synchronous, and the caller can't rely on checking for null.
method parentNode
abstract parentNode: (node: any) => any;
Implement this callback to get the parent of a given node in the host element's DOM.
Parameter node
The child node to query.
Returns
The parent node, or null if there is no parent. This is because the check is synchronous, and the caller can't rely on checking for null.
method removeAttribute
abstract removeAttribute: ( el: any, name: string, namespace?: string | null) => void;
Implement this callback to remove an attribute from an element in the DOM.
Parameter el
The element.
Parameter name
The attribute name.
Parameter namespace
The namespace.
method removeChild
abstract removeChild: ( parent: any, oldChild: any, isHostElement?: boolean) => void;
Implement this callback to remove a child node from the host element's DOM.
Parameter parent
The parent node.
Parameter oldChild
The child node to remove.
Parameter isHostElement
Optionally signal to the renderer whether this element is a host element or not
method removeClass
abstract removeClass: (el: any, name: string) => void;
Implement this callback to remove a class from an element in the DOM.
Parameter el
The element.
Parameter name
The class name.
method removeStyle
abstract removeStyle: ( el: any, style: string, flags?: RendererStyleFlags2) => void;
Implement this callback to remove the value from a CSS style for an element in the DOM.
Parameter el
The element.
Parameter style
The name of the style.
Parameter flags
Flags for style variations to remove, if set. ???
method selectRootElement
abstract selectRootElement: ( selectorOrNode: string | any, preserveContent?: boolean) => any;
Implement this callback to prepare an element to be bootstrapped as a root element, and return the element instance.
Parameter selectorOrNode
The DOM element.
Parameter preserveContent
Whether the contents of the root element should be preserved, or cleared upon bootstrap (default behavior). Use with
ViewEncapsulation.ShadowDom
to allow simple native content projection via<slot>
elements.Returns
The root element.
method setAttribute
abstract setAttribute: ( el: any, name: string, value: string, namespace?: string | null) => void;
Implement this callback to set an attribute value for an element in the DOM.
Parameter el
The element.
Parameter name
The attribute name.
Parameter value
The new value.
Parameter namespace
The namespace.
method setProperty
abstract setProperty: (el: any, name: string, value: any) => void;
Implement this callback to set the value of a property of an element in the DOM.
Parameter el
The element.
Parameter name
The property name.
Parameter value
The new value.
method setStyle
abstract setStyle: ( el: any, style: string, value: any, flags?: RendererStyleFlags2) => void;
Implement this callback to set a CSS style for an element in the DOM.
Parameter el
The element.
Parameter style
The name of the style.
Parameter value
The new value.
Parameter flags
Flags for style variations. No flags are set by default.
method setValue
abstract setValue: (node: any, value: string) => void;
Implement this callback to set the value of a node in the host element.
Parameter node
The node.
Parameter value
The new value.
class RendererFactory2
abstract class RendererFactory2 {}
Creates and initializes a custom renderer that implements the
Renderer2
base class.
method begin
abstract begin: () => void;
A callback invoked when rendering has begun.
method createRenderer
abstract createRenderer: ( hostElement: any, type: RendererType2 | null) => Renderer2;
Creates and initializes a custom renderer for a host DOM element.
Parameter hostElement
The element to render.
Parameter type
The base class to implement.
Returns
The new custom renderer instance.
method end
abstract end: () => void;
A callback invoked when rendering has completed.
method whenRenderingDone
abstract whenRenderingDone: () => Promise<any>;
Use with animations test-only mode. Notifies the test when rendering has completed.
Returns
The asynchronous result of the developer-defined function.
class Sanitizer
abstract class Sanitizer {}
Sanitizer is used by the views to sanitize potentially dangerous values.
class SimpleChange
class SimpleChange {}
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 SimpleChanges object to the
ngOnChanges
hook.See Also
constructor
constructor(previousValue: any, currentValue: any, firstChange: boolean);
property currentValue
currentValue: any;
property firstChange
firstChange: boolean;
property previousValue
previousValue: any;
method isFirstChange
isFirstChange: () => boolean;
Check whether the new value is the first value assigned.
class TemplateRef
abstract class TemplateRef<C> {}
Represents an embedded template that can be used to instantiate embedded views. To instantiate embedded views based on a template, use the
ViewContainerRef
methodcreateEmbeddedView()
.Access a
TemplateRef
instance by placing a directive on an<ng-template>
element (or directive prefixed with*
). TheTemplateRef
for the embedded view is injected into the constructor of the directive, using theTemplateRef
token.You can also use a
Query
to find aTemplateRef
associated with a component or a directive.See Also
property elementRef
abstract readonly elementRef: ElementRef<any>;
The anchor element in the parent view for this embedded view.
The data-binding and [injection contexts](guide/di/dependency-injection-context) of embedded views created from this
TemplateRef
inherit from the contexts of this location.Typically new embedded views are attached to the view container of this location, but in advanced use-cases, the view can be attached to a different container while keeping the data-binding and injection context from the original location.
method createEmbeddedView
abstract createEmbeddedView: ( context: C, injector?: Injector) => EmbeddedViewRef<C>;
Instantiates an unattached embedded view based on this template.
Parameter context
The data-binding context of the embedded view, as declared in the
<ng-template>
usage.Parameter injector
Injector to be used within the embedded view.
Returns
The new embedded view object.
class Testability
class Testability implements PublicTestability {}
The Testability service provides testing hooks that can be accessed from the browser.
Angular applications bootstrapped using an NgModule (via
@NgModule.bootstrap
field) will also instantiate Testability by default (in both development and production modes).For applications bootstrapped using the
bootstrapApplication
function, Testability is not included by default. You can include it into your applications by getting the list of necessary providers using theprovideProtractorTestingSupport()
function and adding them into theoptions.providers
array. Example:import {provideProtractorTestingSupport} from '@angular/platform-browser';await bootstrapApplication(RootComponent, providers: [provideProtractorTestingSupport()]);
constructor
constructor( _ngZone: NgZone, registry: TestabilityRegistry, testabilityGetter: GetTestability);
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<Testability>;
method findProviders
findProviders: (using: any, provider: string, exactMatch: boolean) => any[];
Find providers by name
Parameter using
The root element to search from
Parameter provider
The name of binding variable
Parameter exactMatch
Whether using exactMatch
method isStable
isStable: () => boolean;
Whether an associated application is stable
method whenStable
whenStable: (doneCb: Function, timeout?: number, updateCb?: Function) => void;
Wait for the application to be stable with a timeout. If the timeout is reached before that happens, the callback receives a list of the macro tasks that were pending, otherwise null.
Parameter doneCb
The callback to invoke when Angular is stable or the timeout expires whichever comes first.
Parameter timeout
Optional. The maximum time to wait for Angular to become stable. If not specified, whenStable() will wait forever.
Parameter updateCb
Optional. If specified, this callback will be invoked whenever the set of pending macrotasks changes. If this callback returns true doneCb will not be invoked and no further updates will be issued.
class TestabilityRegistry
class TestabilityRegistry {}
A global registry of Testability instances for specific elements.
property ɵfac
static ɵfac: {};
property ɵprov
static ɵprov: ɵɵInjectableDeclaration<TestabilityRegistry>;
method findTestabilityInTree
findTestabilityInTree: ( elem: Node, findInAncestors?: boolean) => Testability | null;
Find testability of a node in the Tree
Parameter elem
node
Parameter findInAncestors
whether finding testability in ancestors if testability was not found in current node
method getAllRootElements
getAllRootElements: () => any[];
Get all registered applications(root elements)
method getAllTestabilities
getAllTestabilities: () => Testability[];
Get all registered testabilities
method getTestability
getTestability: (elem: any) => Testability | null;
Get a testability hook associated with the application
Parameter elem
root element
method registerApplication
registerApplication: (token: any, testability: Testability) => void;
Registers an application with a testability hook so that it can be tracked
Parameter token
token of application, root element
Parameter testability
Testability hook
method unregisterAllApplications
unregisterAllApplications: () => void;
Unregisters all applications
method unregisterApplication
unregisterApplication: (token: any) => void;
Unregisters an application.
Parameter token
token of application, root element
class TransferState
class TransferState {}
A key value store that is transferred from the application on the server side to the application on the client side.
The
TransferState
is available as an injectable token. On the client, just inject this token using DI and use it, it will be lazily initialized. On the server it's already included ifrenderApplication
function is used. Otherwise, import theServerTransferStateModule
module to make theTransferState
available.The values in the store are serialized/deserialized using JSON.stringify/JSON.parse. So only boolean, number, string, null and non-class objects will be serialized and deserialized in a non-lossy manner.
property isEmpty
readonly isEmpty: boolean;
Indicates whether the state is empty.
property ɵprov
static ɵprov: {};
method get
get: <T>(key: StateKey<T>, defaultValue: T) => T;
Get the value corresponding to a key. Return
defaultValue
if key is not found.
method hasKey
hasKey: <T>(key: StateKey<T>) => boolean;
Test whether a key exists in the store.
method onSerialize
onSerialize: <T>(key: StateKey<T>, callback: () => T) => void;
Register a callback to provide the value for a key when
toJson
is called.
method remove
remove: <T>(key: StateKey<T>) => void;
Remove a key from the store.
method set
set: <T>(key: StateKey<T>, value: T) => void;
Set the value corresponding to a key.
method toJson
toJson: () => string;
Serialize the current state of the store to JSON.
class Version
class Version {}
Represents the version of Angular
constructor
constructor(full: string);
property full
full: string;
property major
readonly major: string;
property minor
readonly minor: string;
property patch
readonly patch: string;
class ViewContainerRef
abstract class ViewContainerRef {}
Represents a container where one or more views can be attached to a component.
Can contain *host views* (created by instantiating a component with the
createComponent()
method), and *embedded views* (created by instantiating aTemplateRef
with thecreateEmbeddedView()
method).A view container instance can contain other view containers, creating a view hierarchy.
The example below demonstrates how the
createComponent
function can be used to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef, so that it gets included into change detection cycles.Note: the example uses standalone components, but the function can also be used for non-standalone components (declared in an NgModule) as well.
@Component({standalone: true,selector: 'dynamic',template: `<span>This is a content of a dynamic component.</span>`,})class DynamicComponent {vcr = inject(ViewContainerRef);}@Component({standalone: true,selector: 'app',template: `<main>Hi! This is the main content.</main>`,})class AppComponent {vcr = inject(ViewContainerRef);ngAfterViewInit() {const compRef = this.vcr.createComponent(DynamicComponent);compRef.changeDetectorRef.detectChanges();}}See Also
property element
readonly element: ElementRef<any>;
Anchor element that specifies the location of this container in the containing view. Each view container can have only one anchor element, and each anchor element can have only a single view container.
Root elements of views attached to this container become siblings of the anchor element in the rendered view.
Access the
ViewContainerRef
of an element by placing aDirective
injected withViewContainerRef
on the element, or use aViewChild
query.<!-- TODO: rename to anchorElement -->
property injector
readonly injector: Injector;
The dependency injector for this view container.
property length
readonly length: number;
Reports how many views are currently attached to this container.
Returns
The number of views.
property parentInjector
readonly parentInjector: Injector;
Deprecated
No replacement
method clear
abstract clear: () => void;
Destroys all views in this container.
method createComponent
abstract createComponent: { <C>( componentType: Type$1<C>, options?: { index?: number; injector?: Injector; ngModuleRef?: NgModuleRef$1<unknown>; environmentInjector?: EnvironmentInjector | NgModuleRef$1<unknown>; projectableNodes?: Node[][]; } ): ComponentRef$1<C>; <C>( componentFactory: ComponentFactory$1<C>, index?: number, injector?: Injector, projectableNodes?: any[][], environmentInjector?: EnvironmentInjector | NgModuleRef$1<any> ): ComponentRef$1<C>;};
Instantiates a single component and inserts its host view into this container.
Parameter componentType
Component Type to use.
Parameter options
An object that contains extra parameters: * index: the index at which to insert the new component's host view into this container. If not specified, appends the new view as the last entry. * injector: the injector to use as the parent for the new component. * ngModuleRef: an NgModuleRef of the component's NgModule, you should almost always provide this to ensure that all expected providers are available for the component instantiation. * environmentInjector: an EnvironmentInjector which will provide the component's environment. you should almost always provide this to ensure that all expected providers are available for the component instantiation. This option is intended to replace the
ngModuleRef
parameter. * projectableNodes: list of DOM nodes that should be projected through [<ng-content>
](api/core/ng-content) of the new component instance.Returns
The new
ComponentRef
which contains the component instance and the host view.Instantiates a single component and inserts its host view into this container.
Parameter componentFactory
Component factory to use.
Parameter index
The index at which to insert the new component's host view into this container. If not specified, appends the new view as the last entry.
Parameter injector
The injector to use as the parent for the new component.
Parameter projectableNodes
List of DOM nodes that should be projected through [
<ng-content>
](api/core/ng-content) of the new component instance.Parameter ngModuleRef
An instance of the NgModuleRef that represent an NgModule. This information is used to retrieve corresponding NgModule injector.
Returns
The new
ComponentRef
which contains the component instance and the host view.Deprecated
Angular no longer requires component factories to dynamically create components. Use different signature of the
createComponent
method, which allows passing Component class directly.
method createEmbeddedView
abstract createEmbeddedView: { <C>( templateRef: TemplateRef<C>, context?: C, options?: { index?: number; injector?: Injector } ): EmbeddedViewRef<C>; <C>( templateRef: TemplateRef<C>, context?: C, index?: number ): EmbeddedViewRef<C>;};
Instantiates an embedded view and inserts it into this container.
Parameter templateRef
The HTML template that defines the view.
Parameter context
The data-binding context of the embedded view, as declared in the
<ng-template>
usage.Parameter options
Extra configuration for the created view. Includes: * index: The 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry. * injector: Injector to be used within the embedded view.
Returns
The
ViewRef
instance for the newly created view.Instantiates an embedded view and inserts it into this container.
Parameter templateRef
The HTML template that defines the view.
Parameter context
The data-binding context of the embedded view, as declared in the
<ng-template>
usage.Parameter index
The 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.
Returns
The
ViewRef
instance for the newly created view.
method detach
abstract detach: (index?: number) => ViewRef$1 | null;
Detaches a view from this container without destroying it. Use along with
insert()
to move a view within the current container.Parameter index
The 0-based index of the view to detach. If not specified, the last view in the container is detached.
method get
abstract get: (index: number) => ViewRef$1 | null;
Retrieves a view from this container.
Parameter index
The 0-based index of the view to retrieve.
Returns
The
ViewRef
instance, or null if the index is out of range.
method indexOf
abstract indexOf: (viewRef: ViewRef$1) => number;
Returns the index of a view within the current container.
Parameter viewRef
The view to query.
Returns
The 0-based index of the view's position in this container, or
-1
if this container doesn't contain the view.
method insert
abstract insert: (viewRef: ViewRef$1, index?: number) => ViewRef$1;
Inserts a view into this container.
Parameter viewRef
The view to insert.
Parameter index
The 0-based index at which to insert the view. If not specified, appends the new view as the last entry.
Returns
The inserted
ViewRef
instance.
method move
abstract move: (viewRef: ViewRef$1, currentIndex: number) => ViewRef$1;
Moves a view to a new location in this container.
Parameter viewRef
The view to move.
Parameter index
The 0-based index of the new location.
Returns
The moved
ViewRef
instance.
method remove
abstract remove: (index?: number) => void;
Destroys a view attached to this container
Parameter index
The 0-based index of the view to destroy. If not specified, the last view in the container is removed.
class ViewRef
abstract class ViewRef$1 extends ChangeDetectorRef {}
Represents an Angular view.
See Also
property destroyed
readonly destroyed: boolean;
Reports whether this view has been destroyed.
Returns
True after the
destroy()
method has been called, false otherwise.
method destroy
abstract destroy: () => void;
Destroys this view and all of the data structures associated with it.
method onDestroy
abstract onDestroy: (callback: Function) => void;
A lifecycle hook that provides additional developer-defined cleanup functionality for views.
Parameter callback
A handler function that cleans up developer-defined data associated with a view. Called when the
destroy()
method is invoked.
Interfaces
interface AbstractType
interface AbstractType<T> extends Function {}
Represents an abstract class
T
, if applied to a concrete class it would stop being instantiable.
property prototype
prototype: T;
interface AfterContentChecked
interface AfterContentChecked {}
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 Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to define its own after-check functionality.
method ngAfterContentChecked
ngAfterContentChecked: () => void;
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
interface AfterContentInit
interface AfterContentInit {}
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 Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to define its own content initialization method.
method ngAfterContentInit
ngAfterContentInit: () => void;
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.
interface AfterRenderOptions
interface AfterRenderOptions {}
Options passed to
afterRender
andafterNextRender
.
property injector
injector?: Injector;
The
Injector
to use during creation.If this is not provided, the current injection context will be used instead (via
inject
).
property manualCleanup
manualCleanup?: boolean;
Whether the hook should require manual cleanup.
If this is
false
(the default) the hook will automatically register itself to be cleaned up with the currentDestroyRef
.
property phase
phase?: AfterRenderPhase;
The phase the callback should be invoked in.
Defaults to
AfterRenderPhase.MixedReadWrite
. You should choose a more specific phase instead. SeeAfterRenderPhase
for more information.Deprecated
Specify the phase for your callback to run in by passing a spec-object as the first parameter to
afterRender
orafterNextRender
instead of a function.
interface AfterRenderRef
interface AfterRenderRef {}
A callback that runs after render.
method destroy
destroy: () => void;
Shut down the callback, preventing it from being called again.
interface AfterViewChecked
interface AfterViewChecked {}
A lifecycle hook that is called after the default change detector has completed checking a component's view for changes.
See Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to define its own after-check functionality.
method ngAfterViewChecked
ngAfterViewChecked: () => void;
A callback method that is invoked immediately after the default change detector has completed one change-check cycle for a component's view.
interface AfterViewInit
interface AfterViewInit {}
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 Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to define its own view initialization method.
method ngAfterViewInit
ngAfterViewInit: () => void;
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.
interface ApplicationConfig
interface ApplicationConfig {}
Set of config options available during the application bootstrap operation.
property providers
providers: Array<Provider | EnvironmentProviders>;
List of providers that should be available to the root component and all its children.
interface Attribute
interface Attribute {}
Type of the Attribute metadata.
property attributeName
attributeName: string;
The name of the attribute whose value can be injected.
interface AttributeDecorator
interface AttributeDecorator {}
Type of the Attribute decorator / constructor function.
construct signature
new (name: string): Attribute;
call signature
(name: string): any;
Parameter decorator for a directive constructor that designates a host-element attribute whose value is injected as a constant string literal.
Suppose we have an
<input>
element and want to know itstype
.<input type="text">The following example uses the decorator to inject the string literal
text
in a directive.The following example uses the decorator in a component constructor.
interface BaseResourceOptions
interface BaseResourceOptions<T, R> {}
Options to the
resource
function, for creating a resource.Modifiers
@experimental
property defaultValue
defaultValue?: NoInfer<T>;
The value which will be returned from the resource when a server value is unavailable, such as when the resource is still loading, or in an error state.
property equal
equal?: ValueEqualityFn<T>;
Equality function used to compare the return value of the loader.
property injector
injector?: Injector;
Overrides the
Injector
used byresource
.
property request
request?: () => R;
A reactive function which determines the request to be made. Whenever the request changes, the loader will be triggered to fetch a new value for the resource.
If a request function isn't provided, the loader won't rerun unless the resource is reloaded.
interface BootstrapOptions
interface BootstrapOptions {}
Provides additional options to the bootstrapping process.
property ignoreChangesOutsideZone
ignoreChangesOutsideZone?: boolean;
When false, change detection is scheduled when Angular receives a clear indication that templates need to be refreshed. This includes:
- calling
ChangeDetectorRef.markForCheck
- callingComponentRef.setInput
- updating a signal that is read in a template - attaching a view that is marked dirty - removing a view - registering a render hook (templates are only refreshed if render hooks do one of the above)Deprecated
This option was introduced out of caution as a way for developers to opt out of the new behavior in v18 which schedule change detection for the above events when they occur outside the Zone. After monitoring the results post-release, we have determined that this feature is working as desired and do not believe it should ever be disabled by setting this option to
true
.
property ngZone
ngZone?: NgZone | 'zone.js' | 'noop';
Optionally specify which
NgZone
should be used when not configured in the providers.- Provide your own
NgZone
instance. -zone.js
- Use defaultNgZone
which requiresZone.js
. -noop
- UseNoopNgZone
which does nothing.
property ngZoneEventCoalescing
ngZoneEventCoalescing?: boolean;
Optionally specify coalescing event change detections or not. Consider the following case.
<div (click)="doSomething()"><button (click)="doSomethingElse()"></button></div>When button is clicked, because of the event bubbling, both event handlers will be called and 2 change detections will be triggered. We can coalesce such kind of events to only trigger change detection only once.
By default, this option will be false. So the events will not be coalesced and the change detection will be triggered multiple times. And if this option be set to true, the change detection will be triggered async by scheduling a animation frame. So in the case above, the change detection will only be triggered once.
property ngZoneRunCoalescing
ngZoneRunCoalescing?: boolean;
Optionally specify if
NgZone#run()
method invocations should be coalesced into a single change detection.Consider the following case.
for (let i = 0; i < 10; i ++) {ngZone.run(() => {// do something});}This case triggers the change detection multiple times. With ngZoneRunCoalescing options, all change detections in an event loop trigger only once. In addition, the change detection executes in requestAnimation.
interface ClassProvider
interface ClassProvider extends ClassSansProvider {}
Configures the
Injector
to return an instance ofuseClass
for a token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
Note that following two providers are not equal:
### Multi-value example
property multi
multi?: boolean;
When true, injector returns an array of instances. This is useful to allow multiple providers spread across many files to provide configuration information to a common token.
property provide
provide: any;
An injection token. (Typically an instance of
Type
orInjectionToken
, but can beany
).
interface ClassSansProvider
interface ClassSansProvider {}
Configures the
Injector
to return a value by invoking auseClass
function. Base forClassProvider
decorator.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
property useClass
useClass: Type$1<any>;
Class to instantiate for the
token
.
interface Component
interface Component extends Directive {}
Supplies configuration metadata for an Angular component.
property animations
animations?: any[];
One or more animation
trigger()
calls, containing [state()
](api/animations/state) andtransition()
definitions. See the [Animations guide](guide/animations) and animations API documentation.
property changeDetection
changeDetection?: ChangeDetectionStrategy$1;
The change-detection strategy to use for this component.
When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of: -
ChangeDetectionStrategy#OnPush
sets the strategy toCheckOnce
(on demand). -ChangeDetectionStrategy#Default
sets the strategy toCheckAlways
.
property encapsulation
encapsulation?: ViewEncapsulation$1;
An encapsulation policy for the component's styling. Possible values: -
ViewEncapsulation.Emulated
: Apply modified component styles in order to emulate a native Shadow DOM CSS encapsulation behavior. -ViewEncapsulation.None
: Apply component styles globally without any sort of encapsulation. -ViewEncapsulation.ShadowDom
: Use the browser's native Shadow DOM API to encapsulate styles.If not supplied, the value is taken from the
CompilerOptions
which defaults toViewEncapsulation.Emulated
.If the policy is
ViewEncapsulation.Emulated
and the component has no nor , the policy is automatically switched toViewEncapsulation.None
.
property imports
imports?: (Type$1<any> | ReadonlyArray<any>)[];
The imports property specifies the standalone component's template dependencies — those directives, components, and pipes that can be used within its template. Standalone components can import other standalone components, directives, and pipes as well as existing NgModules.
This property is only available for standalone components - specifying it for components declared in an NgModule generates a compilation error.
More information about standalone components, directives, and pipes can be found in [this guide](guide/components/importing).
property interpolation
interpolation?: [string, string];
Overrides the default interpolation start and end delimiters (
{{
and}}
).Deprecated
use Angular's default interpolation delimiters instead.
property moduleId
moduleId?: string;
The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the
__moduleName
variable within each module. In CommonJS, this can be set tomodule.id
.Deprecated
This option does not have any effect. Will be removed in Angular v17.
property preserveWhitespaces
preserveWhitespaces?: boolean;
True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the
\s
character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.
property schemas
schemas?: SchemaMetadata[];
The set of schemas that declare elements to be allowed in a standalone component. Elements and properties that are neither Angular components nor directives must be declared in a schema.
This property is only available for standalone components - specifying it for components declared in an NgModule generates a compilation error.
More information about standalone components, directives, and pipes can be found in [this guide](guide/components/importing).
property standalone
standalone?: boolean;
Angular components marked as
standalone
do not need to be declared in an NgModule. Such components directly manage their own template dependencies (components, directives, and pipes used in a template) via the imports property.More information about standalone components, directives, and pipes can be found in [this guide](guide/components/importing).
property styles
styles?: string | string[];
One or more inline CSS stylesheets to use in this component.
property styleUrl
styleUrl?: string;
One relative path or an absolute URL for file containing a CSS stylesheet to use in this component.
property styleUrls
styleUrls?: string[];
Relative paths or absolute URLs for files containing CSS stylesheets to use in this component.
property template
template?: string;
An inline template for an Angular component. If provided, do not supply a template file using
templateUrl
.
property templateUrl
templateUrl?: string;
The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using
template
.
property viewProviders
viewProviders?: Provider[];
Defines the set of injectable objects that are visible to its view DOM children. See [example](#injecting-a-class-with-a-view-provider).
interface ComponentDecorator
interface ComponentDecorator {}
Component decorator interface
construct signature
new (obj: Component): Component;
See the
Component
decorator.
call signature
(obj: Component): TypeDecorator;
Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated for a given element in a template.
Standalone components can be directly imported in any other standalone component or NgModule. NgModule based apps on the other hand require components to belong to an NgModule in order for them to be available to another component or application. To make a component a member of an NgModule, list it in the
declarations
field of theNgModule
metadata.Note that, in addition to these options for configuring a directive, you can control a component's runtime behavior by implementing life-cycle hooks. For more information, see the [Lifecycle Hooks](guide/components/lifecycle) guide.
### Setting component inputs
The following example creates a component with two data-bound properties, specified by the
inputs
value.### Setting component outputs
The following example shows two output function that emit on an interval. One emits an output every second, while the other emits every five seconds.
### Injecting a class with a view provider
The following simple example injects a class into a component using the view provider specified in component metadata:
class Greeter {greet(name:string) {return 'Hello ' + name + '!';}}@Directive({selector: 'needs-greeter'})class NeedsGreeter {greeter:Greeter;constructor(greeter:Greeter) {this.greeter = greeter;}}@Component({selector: 'greet',viewProviders: [Greeter],template: `<needs-greeter></needs-greeter>`})class HelloWorld {}### Preserving whitespace
Removing whitespace can greatly reduce AOT-generated code size and speed up view creation. As of Angular 6, the default for
preserveWhitespaces
is false (whitespace is removed). To change the default setting for all components in your application, set thepreserveWhitespaces
option of the AOT compiler.By default, the AOT compiler removes whitespace characters as follows: * Trims all whitespaces at the beginning and the end of a template. * Removes whitespace-only text nodes. For example,
<button>Action 1</button> <button>Action 2</button>becomes:
<button>Action 1</button><button>Action 2</button>* Replaces a series of whitespace characters in text nodes with a single space. For example,
<span>\n some text\n</span>
becomes<span> some text </span>
. * Does NOT alter text nodes inside HTML tags such as<pre>
or<textarea>
, where whitespace characters are significant.Note that these transformations can influence DOM nodes layout, although impact should be minimal.
You can override the default behavior to preserve whitespace characters in certain fragments of a template. For example, you can exclude an entire DOM sub-tree by using the
ngPreserveWhitespaces
attribute:<div ngPreserveWhitespaces>whitespaces are preserved here<span> and here </span></div>You can force a single space to be preserved in a text node by using
&ngsp;
, which is replaced with a space character by Angular's template compiler:<a>Spaces</a>&ngsp;<a>between</a>&ngsp;<a>links.</a><!-- compiled to be equivalent to:<a>Spaces</a> <a>between</a> <a>links.</a> -->Note that sequences of
&ngsp;
are still collapsed to just one space character when thepreserveWhitespaces
option is set tofalse
.<a>before</a>&ngsp;&ngsp;&ngsp;<a>after</a><!-- compiled to be equivalent to:<a>before</a> <a>after</a> -->To preserve sequences of whitespace characters, use the
ngPreserveWhitespaces
attribute.
interface ComponentMirror
interface ComponentMirror<C> {}
An interface that describes the subset of component metadata that can be retrieved using the
reflectComponentType
function.
index signature
get selector(): string;
The component's HTML selector.
index signature
get type(): Type$1<C>;
The type of component the factory will create.
index signature
get inputs(): ReadonlyArray<{ readonly propName: string; readonly templateName: string; readonly transform?: (value: any) => any; readonly isSignal: boolean;}>;
The inputs of the component.
index signature
get outputs(): ReadonlyArray<{ readonly propName: string; readonly templateName: string;}>;
The outputs of the component.
index signature
get ngContentSelectors(): ReadonlyArray<string>;
Selector for all elements in the component.
index signature
get isStandalone(): boolean;
Whether this component is marked as standalone. Note: an extra flag, not present in
ComponentFactory
.
interface ConstructorProvider
interface ConstructorProvider extends ConstructorSansProvider {}
Configures the
Injector
to return an instance of a token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
### Multi-value example
property multi
multi?: boolean;
When true, injector returns an array of instances. This is useful to allow multiple providers spread across many files to provide configuration information to a common token.
property provide
provide: Type$1<any>;
An injection token. Typically an instance of
Type
orInjectionToken
, but can beany
.
interface ConstructorSansProvider
interface ConstructorSansProvider {}
Configures the
Injector
to return an instance of a token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
@Injectable(SomeModule, {deps: []})class MyService {}
property deps
deps?: any[];
A list of
token
s to be resolved by the injector.
interface ContentChildDecorator
interface ContentChildDecorator {}
Type of the ContentChild decorator / constructor function.
construct signature
new ( selector: ProviderToken<unknown> | Function | string, opts?: { descendants?: boolean; read?: any; static?: boolean; }): ContentChild;
call signature
( selector: ProviderToken<unknown> | Function | string, opts?: { descendants?: boolean; read?: any; static?: boolean; }): any;
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. Iffalse
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`) * ATemplateRef
(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 theselector
of this query * Any provider defined through a string token (e.g.{provide: 'token', useValue: 'val'}
) *TemplateRef
,ElementRef
, andViewContainerRef
Difference between dynamic and static queries:
| Queries | Details | |:--- |:--- | | Dynamic queries (
static: false
) | The query resolves before thengAfterContentInit()
callback is called. The result will be updated for changes to your view, such as changes tongIf
andngFor
blocks. | | Static queries (static: true
) | The query resolves once the view has been created, but before change detection runs (before thengOnInit()
callback is called). The result, though, will never be updated to reflect changes to your view, such as changes tongIf
andngFor
blocks. |### Example
interface ContentChildFunction
interface ContentChildFunction {}
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.Ignored because
contentChild
is the canonical API entry.
property required
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 that is always expected to match.
call signature
<LocatorT>( locator: ProviderToken<LocatorT> | string, opts?: { descendants?: boolean; read?: undefined; debugName?: string; }): Signal<LocatorT | undefined>;
Initializes a content child query.
Consider using
contentChild.required
for queries that should always match.
call signature
<LocatorT, ReadT>( locator: ProviderToken<LocatorT> | string, opts: { descendants?: boolean; read: ProviderToken<ReadT>; debugName?: string; }): Signal<ReadT | undefined>;
interface ContentChildrenDecorator
interface ContentChildrenDecorator {}
Type of the ContentChildren decorator / constructor function.
See Also
construct signature
new ( selector: ProviderToken<unknown> | Function | string, opts?: { descendants?: boolean; emitDistinctChangesOnly?: boolean; read?: any; }): Query;
call signature
( selector: ProviderToken<unknown> | Function | string, opts?: { descendants?: boolean; emitDistinctChangesOnly?: boolean; read?: any; }): any;
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. Iffalse
then only query direct children of the element. * **emitDistinctChangesOnly** - TheQueryList#changes
observable will emit new values only if the QueryList result has changed. Whenfalse
thechanges
observable might emit even if the QueryList has not changed. ** Note: *** This config option is **deprecated**, it will be permanently set totrue
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`) * ATemplateRef
(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 theselector
of this query * Any provider defined through a string token (e.g.{provide: 'token', useValue: 'val'}
) *TemplateRef
,ElementRef
, andViewContainerRef
Here is a simple demonstration of how the
ContentChildren
decorator can be used.### Tab-pane example
Here is a slightly more realistic example that shows how
ContentChildren
decorators can be used to implement a tab pane component.
interface CreateComputedOptions
interface CreateComputedOptions<T> {}
Options passed to the
computed
creation function.
interface CreateEffectOptions
interface CreateEffectOptions {}
Options passed to the
effect
function.
property allowSignalWrites
allowSignalWrites?: boolean;
Deprecated
no longer required, signal writes are allowed by default.
property debugName
debugName?: string;
A debug name for the effect. Used in Angular DevTools to identify the effect.
property forceRoot
forceRoot?: true;
Always create a root effect (which is scheduled as a microtask) regardless of whether
effect
is called within a component.
property injector
injector?: Injector;
The
Injector
in which to create the effect.If this is not provided, the current [injection context](guide/di/dependency-injection-context) will be used instead (via
inject
).
property manualCleanup
manualCleanup?: boolean;
Whether the
effect
should require manual cleanup.If this is
false
(the default) the effect will automatically register itself to be cleaned up with the currentDestroyRef
.
interface CreateSignalOptions
interface CreateSignalOptions<T> {}
Options passed to the
signal
creation function.
interface Directive
interface Directive {}
Directive decorator and metadata.
property exportAs
exportAs?: string;
Defines the name that can be used in the template to assign this directive to a variable.
@Directive({selector: 'child-dir',exportAs: 'child'})class ChildDir {}@Component({selector: 'main',template: `<child-dir #c="child"></child-dir>`})class MainComponent {}
property host
host?: { [key: string]: string;};
Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.
Angular automatically checks host property bindings during change detection. If a binding changes, Angular updates the directive's host element.
When the key is a property of the host element, the property value is propagated to the specified DOM property.
When the key is a static attribute in the DOM, the attribute value is propagated to the specified property in the host element.
For event handling: - The key is the DOM event that the directive listens to. To listen to global events, add the target to the event name. The target can be
window
,document
orbody
. - The value is the statement to execute when the event occurs. If the statement evaluates tofalse
, thenpreventDefault
is applied on the DOM event. A handler method can refer to the$event
local variable.
property hostDirectives
hostDirectives?: ( | Type$1<unknown> | { directive: Type$1<unknown>; inputs?: string[]; outputs?: string[]; })[];
Standalone directives that should be applied to the host whenever the directive is matched. By default, none of the inputs or outputs of the host directives will be available on the host, unless they are specified in the
inputs
oroutputs
properties.You can additionally alias inputs and outputs by putting a colon and the alias after the original input or output name. For example, if a directive applied via
hostDirectives
defines an input namedmenuDisabled
, you can alias this todisabled
by adding'menuDisabled: disabled'
as an entry toinputs
.
property inputs
inputs?: ( | { name: string; alias?: string; required?: boolean; transform?: (value: any) => any; } | string)[];
Enumerates the set of data-bound input properties for a directive
Angular automatically updates input properties during change detection. The
inputs
property accepts either strings or object literals that configure the directive properties that should be exposed as inputs.When an object literal is passed in, the
name
property indicates which property on the class the input should write to, while thealias
determines the name under which the input will be available in template bindings. Therequired
property indicates that the input is required which will trigger a compile-time error if it isn't passed in when the directive is used.When a string is passed into the
inputs
array, it can have a format of'name'
or'name: alias'
wherename
is the property on the class that the directive should write to, while thealias
determines the name under which the input will be available in template bindings. String-based input definitions are assumed to be optional.The following example creates a component with two data-bound properties.
@Component({selector: 'bank-account',inputs: ['bankName', {name: 'id', alias: 'account-id'}],template: `Bank Name: {{bankName}}Account Id: {{id}}`})class BankAccount {bankName: string;id: string;}
property jit
jit?: true;
When present, this directive/component is ignored by the AOT compiler. It remains in distributed code, and the JIT compiler attempts to compile it at run time, in the browser. To ensure the correct behavior, the app must import
@angular/compiler
.
property outputs
outputs?: string[];
Enumerates the set of event-bound output properties.
When an output property emits an event, an event handler attached to that event in the template is invoked.
The
outputs
property defines a set ofdirectiveProperty
toalias
configuration:-
directiveProperty
specifies the component property that emits events. -alias
specifies the DOM property the event handler is attached to.@Component({selector: 'child-dir',outputs: [ 'bankNameChange' ],template: `<input (input)="bankNameChange.emit($event.target.value)" />`})class ChildDir {bankNameChange: EventEmitter<string> = new EventEmitter<string>();}@Component({selector: 'main',template: `{{ bankName }} <child-dir (bankNameChange)="onBankNameChange($event)"></child-dir>`})class MainComponent {bankName: string;onBankNameChange(bankName: string) {this.bankName = bankName;}}
property providers
providers?: Provider[];
Configures the injector of this directive or component with a token that maps to a provider of a dependency.
property queries
queries?: { [key: string]: any;};
Configures the queries that will be injected into the directive.
Content queries are set before the
ngAfterContentInit
callback is called. View queries are set before thengAfterViewInit
callback is called.The following example shows how queries are defined and when their results are available in lifecycle hooks:
@Component({selector: 'someDir',queries: {contentChildren: new ContentChildren(ChildDirective),viewChildren: new ViewChildren(ChildDirective)},template: '<child-directive></child-directive>'})class SomeDir {contentChildren: QueryList<ChildDirective>,viewChildren: QueryList<ChildDirective>ngAfterContentInit() {// contentChildren is set}ngAfterViewInit() {// viewChildren is set}}
property selector
selector?: string;
The CSS selector that identifies this directive in a template and triggers instantiation of the directive.
Declare as one of the following:
-
element-name
: Select by element name. -.class
: Select by class name. -[attribute]
: Select by attribute name. -[attribute=value]
: Select by attribute name and value. -:not(sub_selector)
: Select only if the element does not match thesub_selector
. -selector1, selector2
: Select if eitherselector1
orselector2
matches.Angular only allows directives to apply on CSS selectors that do not cross element boundaries.
For the following template HTML, a directive with an
input[type=text]
selector, would be instantiated only on the<input type="text">
element.<form><input type="text"><input type="radio"><form>
property standalone
standalone?: boolean;
Angular directives marked as
standalone
do not need to be declared in an NgModule. Such directives don't depend on any "intermediate context" of an NgModule (ex. configured providers).More information about standalone components, directives, and pipes can be found in [this guide](guide/components/importing).
interface DirectiveDecorator
interface DirectiveDecorator {}
Type of the Directive decorator / constructor function.
construct signature
new (obj?: Directive): Directive;
See the
Directive
decorator.
call signature
(obj?: Directive): TypeDecorator;
Decorator that marks a class as an Angular directive. You can define your own directives to attach custom behavior to elements in the DOM.
The options provide configuration metadata that determines how the directive should be processed, instantiated and used at runtime.
Directive classes, like component classes, can implement [life-cycle hooks](guide/components/lifecycle) to influence their configuration and behavior.
To define a directive, mark the class with the decorator and provide metadata.
import {Directive} from '@angular/core';@Directive({selector: 'my-directive',})export class MyDirective {...}### Declaring directives
In order to make a directive available to other components in your application, you should do one of the following: - either mark the directive as [standalone](guide/components/importing), - or declare it in an NgModule by adding it to the
declarations
andexports
fields.** Marking a directive as standalone **
You can add the
standalone: true
flag to the Directive decorator metadata to declare it as [standalone](guide/components/importing):@Directive({standalone: true,selector: 'my-directive',})class MyDirective {}When marking a directive as standalone, please make sure that the directive is not already declared in an NgModule.
** Declaring a directive in an NgModule **
Another approach is to declare a directive in an NgModule:
@Directive({selector: 'my-directive',})class MyDirective {}@NgModule({declarations: [MyDirective, SomeComponent],exports: [MyDirective], // making it available outside of this module})class SomeNgModule {}When declaring a directive in an NgModule, please make sure that: - the directive is declared in exactly one NgModule. - the directive is not standalone. - you do not re-declare a directive imported from another module. - the directive is included into the
exports
field as well if you want this directive to be accessible for components outside of the NgModule.
interface DoBootstrap
interface DoBootstrap {}
Hook for manual bootstrapping of the application instead of using
bootstrap
array in annotation. This hook is invoked only when thebootstrap
array is empty or not provided.Reference to the current application is provided as a parameter.
See ["Bootstrapping"](guide/ngmodules/bootstrapping).
The example below uses
ApplicationRef.bootstrap()
to render theAppComponent
on the page.class AppModule implements DoBootstrap {ngDoBootstrap(appRef: ApplicationRef) {appRef.bootstrap(AppComponent); // Or some other component}}
method ngDoBootstrap
ngDoBootstrap: (appRef: ApplicationRef) => void;
interface DoCheck
interface DoCheck {}
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 bothDoCheck
andOnChanges
to respond to changes on the same input.See Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to invoke it own change-detection cycle.
For a more complete example and discussion, see [Defining custom change detection](guide/components/lifecycle#defining-custom-change-detection).
method ngDoCheck
ngDoCheck: () => void;
A callback method that performs change-detection, invoked after the default change-detector runs. See
KeyValueDiffers
andIterableDiffers
for implementing custom change checking for collections.
interface EffectRef
interface EffectRef {}
A global reactive effect, which can be manually destroyed.
method destroy
destroy: () => void;
Shut down the effect, removing it from any upcoming scheduled executions.
interface EventEmitter
interface EventEmitter<T> extends Subject<T>, OutputRef<T> {}
Use in components with the
@Output
directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.Extends [RxJS
Subject
](https://rxjs.dev/api/index/class/Subject) for Angular by adding theemit()
method.In the following example, a component defines two output properties that create event emitters. When the title is clicked, the emitter emits an open or close event to toggle the current visibility state.
@Component({selector: 'zippy',template: `<div class="zippy"><div (click)="toggle()">Toggle</div><div [hidden]="!visible"><ng-content></ng-content></div></div>`})export class Zippy {visible: boolean = true;@Output() open: EventEmitter<any> = new EventEmitter();@Output() close: EventEmitter<any> = new EventEmitter();toggle() {this.visible = !this.visible;if (this.visible) {this.open.emit(null);} else {this.close.emit(null);}}}Access the event object with the
$event
argument passed to the output event handler:<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>
method emit
emit: (value?: T) => void;
Emits an event containing a given value.
Parameter value
The value to emit.
method subscribe
subscribe: { ( next?: (value: T) => void, error?: (error: any) => void, complete?: () => void ): Subscription; (observerOrNext?: any, error?: any, complete?: any): Subscription;};
Registers handlers for events emitted by this instance.
Parameter next
When supplied, a custom handler for emitted events.
Parameter error
When supplied, a custom handler for an error notification from this emitter.
Parameter complete
When supplied, a custom handler for a completion notification from this emitter.
Registers handlers for events emitted by this instance.
Parameter observerOrNext
When supplied, a custom handler for emitted events, or an observer object.
Parameter error
When supplied, a custom handler for an error notification from this emitter.
Parameter complete
When supplied, a custom handler for a completion notification from this emitter.
construct signature
new (isAsync?: boolean): EventEmitter<T>;
Creates an instance of this class that can deliver events synchronously or asynchronously.
Parameter isAsync
When true, deliver events asynchronously.
interface ExistingProvider
interface ExistingProvider extends ExistingSansProvider {}
Configures the
Injector
to return a value of anotheruseExisting
token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
### Multi-value example
property multi
multi?: boolean;
When true, injector returns an array of instances. This is useful to allow multiple providers spread across many files to provide configuration information to a common token.
property provide
provide: any;
An injection token. Typically an instance of
Type
orInjectionToken
, but can beany
.
interface ExistingSansProvider
interface ExistingSansProvider {}
Configures the
Injector
to return a value of anotheruseExisting
token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
property useExisting
useExisting: any;
Existing
token
to return. (Equivalent toinjector.get(useExisting)
)
interface FactoryProvider
interface FactoryProvider extends FactorySansProvider {}
Configures the
Injector
to return a value by invoking auseFactory
function.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
Dependencies can also be marked as optional:
### Multi-value example
property multi
multi?: boolean;
When true, injector returns an array of instances. This is useful to allow multiple providers spread across many files to provide configuration information to a common token.
property provide
provide: any;
An injection token. (Typically an instance of
Type
orInjectionToken
, but can beany
).
interface FactorySansProvider
interface FactorySansProvider {}
Configures the
Injector
to return a value by invoking auseFactory
function.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
property deps
deps?: any[];
A list of
token
s to be resolved by the injector. The list of values is then used as arguments to theuseFactory
function.
property useFactory
useFactory: Function;
A function to invoke to create a value for this
token
. The function is invoked with resolved values oftoken
s in thedeps
field.
interface ForwardRefFn
interface ForwardRefFn {}
An interface that a function passed into
forwardRef
has to implement.### Example
call signature
(): any;
interface GetTestability
interface GetTestability {}
Adapter interface for retrieving the
Testability
service associated for a particular context.
method addToWindow
addToWindow: (registry: TestabilityRegistry) => void;
method findTestabilityInTree
findTestabilityInTree: ( registry: TestabilityRegistry, elem: any, findInAncestors: boolean) => Testability | null;
interface Host
interface Host {}
Type of the Host metadata.
interface HostBinding
interface HostBinding {}
Type of the HostBinding metadata.
property hostPropertyName
hostPropertyName?: string;
The DOM property that is bound to a data property. This field also accepts: * classes, prefixed by
class.
* styles, prefixed bystyle.
* attributes, prefixed byattr.
interface HostBindingDecorator
interface HostBindingDecorator {}
Type of the HostBinding decorator / constructor function.
construct signature
new (hostPropertyName?: string): any;
call signature
(hostPropertyName?: string): any;
Decorator that marks a DOM property or an element class, style or attribute as a host-binding property and supplies configuration metadata. Angular automatically checks host bindings during change detection, and if a binding changes it updates the host element of the directive.
The following example creates a directive that sets the
valid
andinvalid
class, a style color, and an id on the DOM element that has anngModel
directive on it.@Directive({selector: '[ngModel]'})class NgModelStatus {constructor(public control: NgModel) {}// class bindings@HostBinding('class.valid') get valid() { return this.control.valid; }@HostBinding('class.invalid') get invalid() { return this.control.invalid; }// style binding@HostBinding('style.color') get color() { return this.control.valid ? 'green': 'red'; }// style binding also supports a style unit extension@HostBinding('style.width.px') @Input() width: number = 500;// attribute binding@HostBinding('attr.aria-required')@Input() required: boolean = false;// property binding@HostBinding('id') get id() { return this.control.value?.length ? 'odd': 'even'; }@Component({selector: 'app',template: `<input [(ngModel)]="prop">`,})class App {prop;}
interface HostDecorator
interface HostDecorator {}
Type of the
Host
decorator / constructor function.
construct signature
new (): Host;
call signature
(): any;
Parameter decorator on a view-provider parameter of a class constructor that tells the DI framework to resolve the view by checking injectors of child elements, and stop when reaching the host element of the current component.
The following shows use with the
@Optional
decorator, and allows for anull
result.For an extended example, see ["Dependency Injection Guide"](guide/di/di-in-action#optional).
interface HostListener
interface HostListener {}
Type of the HostListener metadata.
interface HostListenerDecorator
interface HostListenerDecorator {}
Type of the HostListener decorator / constructor function.
construct signature
new (eventName: string, args?: string[]): any;
call signature
(eventName: string, args?: string[]): any;
Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.
Angular invokes the supplied handler method when the host element emits the specified event, and updates the bound element with the result.
If the handler method returns false, applies
preventDefault
on the bound element.The following example declares a directive that attaches a click listener to a button and counts clicks.
@Directive({selector: 'button[counting]'})class CountClicks {numberOfClicks = 0;@HostListener('click', ['$event.target'])onClick(btn) {console.log('button', btn, 'number of clicks:', this.numberOfClicks++);}}@Component({selector: 'app',template: '<button counting>Increment</button>',})class App {}The following example registers another DOM event handler that listens for
Enter
key-press events on the globalwindow
.import { HostListener, Component } from "@angular/core";@Component({selector: 'app',template: `<h1>Hello, you have pressed enter {{counter}} number of times!</h1> Press enterkey to increment the counter. <button (click)="resetCounter()">Reset Counter</button>`})class AppComponent {counter = 0;@HostListener('window:keydown.enter', ['$event'])handleKeyDown(event: KeyboardEvent) {this.counter++;}resetCounter() {this.counter = 0;}}The list of valid key names for
keydown
andkeyup
events can be found here: https://www.w3.org/TR/DOM-Level-3-Events-key/#named-key-attribute-valuesNote that keys can also be combined, e.g.
@HostListener('keydown.shift.a')
.The global target names that can be used to prefix an event name are
document:
,window:
andbody:
.
interface Inject
interface Inject {}
Type of the Inject metadata.
property token
token: any;
A DI token that maps to the dependency to be injected.
interface Injectable
interface Injectable {}
Type of the Injectable metadata.
property providedIn
providedIn?: Type$1<any> | 'root' | 'platform' | 'any' | null;
Determines which injectors will provide the injectable.
-
Type<any>
- associates the injectable with an@NgModule
or otherInjectorType
. This option is DEPRECATED. - 'null' : Equivalent toundefined
. The injectable is not provided in any scope automatically and must be added to aproviders
array of an [@NgModule](api/core/NgModule#providers), [@Component](api/core/Directive#providers) or [@Directive](api/core/Directive#providers).The following options specify that this injectable should be provided in one of the following injectors: - 'root' : The application-level injector in most apps. - 'platform' : A special singleton platform injector shared by all applications on the page. - 'any' : Provides a unique instance in each lazy loaded module while all eagerly loaded modules share one instance. This option is DEPRECATED.
interface InjectableDecorator
interface InjectableDecorator {}
Type of the Injectable decorator / constructor function.
construct signature
new (): Injectable;
construct signature
new ( options?: { providedIn: Type$1<any> | 'root' | 'platform' | 'any' | null; } & InjectableProvider): Injectable;
call signature
(): TypeDecorator;
Decorator that marks a class as available to be provided and injected as a dependency.
See Also
[Introduction to Services and DI](guide/di)
[Dependency Injection Guide](guide/di/dependency-injection
Marking a class with
@Injectable
ensures that the compiler will generate the necessary metadata to create the class's dependencies when the class is injected.The following example shows how a service class is properly marked so that a supporting service can be injected upon creation.
call signature
( options?: { providedIn: Type$1<any> | 'root' | 'platform' | 'any' | null; } & InjectableProvider): TypeDecorator;
interface InjectableType
interface InjectableType<T> extends Type$1<T> {}
A
Type
which has aɵprov: ɵɵInjectableDeclaration
static field.InjectableType
s contain their own Dependency Injection metadata and are usable in anInjectorDef
-basedStaticInjector
.
property ɵprov
ɵprov: unknown;
Opaque type whose structure is highly version dependent. Do not rely on any properties.
interface InjectDecorator
interface InjectDecorator {}
Type of the Inject decorator / constructor function.
construct signature
new (token: any): Inject;
call signature
(token: any): any;
Parameter decorator on a dependency parameter of a class constructor that specifies a custom provider of the dependency.
The following example shows a class constructor that specifies a custom provider of a dependency using the parameter decorator.
When
@Inject()
is not present, the injector uses the type annotation of the parameter as the provider.See Also
[Dependency Injection Guide](guide/di/dependency-injection
interface InjectOptions
interface InjectOptions {}
Type of the options argument to [
inject
](api/core/inject).
property host
host?: boolean;
Stop injection at the host component's injector. Only relevant when injecting from an element injector, and a no-op for environment injectors.
property optional
optional?: boolean;
Use optional injection, and return
null
if the requested token is not found.
property self
self?: boolean;
Only query the current injector for the token, and don't fall back to the parent injector if it's not found.
property skipSelf
skipSelf?: boolean;
Start injection at the parent of the current injector.
interface InjectorType
interface InjectorType<T> extends Type$1<T> {}
A type which has an
InjectorDef
static field.InjectorTypes
can be used to configure aStaticInjector
.This is an opaque type whose structure is highly version dependent. Do not rely on any properties.
interface Input
interface Input {}
Type of metadata for an
Input
property.
property alias
alias?: string;
The name of the DOM property to which the input property is bound.
property required
required?: boolean;
Whether the input is required for the directive to function.
property transform
transform?: (value: any) => any;
Function with which to transform the input value before assigning it to the directive instance.
interface InputDecorator
interface InputDecorator {}
construct signature
new (arg?: string | Input): any;
call signature
(arg?: string | Input): any;
Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property's value.
You can supply an optional name to use in templates when the component is instantiated, that maps to the name of the bound property. By default, the original name of the bound property is used for input binding.
The following example creates a component with two input properties, one of which is given a special binding name.
import { Component, Input, numberAttribute, booleanAttribute } from '@angular/core';@Component({selector: 'bank-account',template: `Bank Name: {{bankName}}Account Id: {{id}}Account Status: {{status ? 'Active' : 'InActive'}}`})class BankAccount {// This property is bound using its original name.// Defining argument required as true inside the Input Decorator// makes this property deceleration as mandatory@Input({ required: true }) bankName!: string;// Argument alias makes this property value is bound to a different property name// when this component is instantiated in a template.// Argument transform convert the input value from string to number@Input({ alias:'account-id', transform: numberAttribute }) id: number;// Argument transform the input value from string to boolean@Input({ transform: booleanAttribute }) status: boolean;// this property is not bound, and is not automatically updated by AngularnormalizedBankName: string;}@Component({selector: 'app',template: `<bank-account bankName="RBC" account-id="4747" status="true"></bank-account>`})class App {}See Also
[Input properties](guide/components/inputs)
[Output properties](guide/components/outputs)
interface InputFunction
interface InputFunction {}
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.Ignored because
input
is the canonical API entry.
property required
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>;};
Initializes a required input.
Consumers of your directive/component need to bind to this input. If unset, a compile time error will be reported.
call signature
<T>(): InputSignal<T | undefined>;
Initializes an input of type
T
with an initial value ofundefined
. Angular will implicitly useundefined
as initial value.
call signature
<T>(initialValue: T, opts?: InputOptionsWithoutTransform<T>): InputSignal<T>;
Declares an input of type
T
with an explicit initial value.
call signature
<T>(initialValue: undefined, opts: InputOptionsWithoutTransform<T>): InputSignal< T | undefined>;
Declares an input of type
T|undefined
without an initial value, but with input options
call signature
<T, TransformT>( initialValue: T, opts: InputOptionsWithTransform<T, TransformT>): InputSignalWithTransform<T, TransformT>;
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 typeT
.
call signature
<T, TransformT>( initialValue: undefined, opts: InputOptionsWithTransform<T | undefined, TransformT>): InputSignalWithTransform<T | undefined, 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 typeT|undefined
.
interface InputOptions
interface InputOptions<T, TransformT> {}
Options for signal inputs.
property alias
alias?: string;
Optional public name for the input. By default, the class field name is used.
property debugName
debugName?: string;
A debug name for the input signal. Used in Angular DevTools to identify the signal.
property transform
transform?: (v: TransformT) => T;
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 toboolean
. See: booleanAttribute.
interface InputSignal
interface InputSignal<T> extends InputSignalWithTransform<T, T> {}
InputSignal
represents a specialSignal
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 Also
InputOptionsWithTransform for inputs with transforms.
interface InputSignalWithTransform
interface InputSignalWithTransform<T, TransformT> extends Signal<T> {}
InputSignalWithTransform
represents a specialSignal
for a directive/component input with atransform
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.
class MyDir {disabled = input(false, {transform: (v: string|boolean) => convertToBoolean(v),}); // InputSignalWithTransform<boolean, string|boolean>click() {this.disabled() // always returns a `boolean`.}}See Also
InputSignal for additional information.
property [ɵINPUT_SIGNAL_BRAND_READ_TYPE]
[ɵINPUT_SIGNAL_BRAND_READ_TYPE]: T;
property [ɵINPUT_SIGNAL_BRAND_WRITE_TYPE]
[ɵINPUT_SIGNAL_BRAND_WRITE_TYPE]: TransformT;
property [SIGNAL]
[SIGNAL]: InputSignalNode<T, TransformT>;
interface IterableChangeRecord
interface IterableChangeRecord<V> {}
Record representing the item change information.
property currentIndex
readonly currentIndex: number | null;
Current index of the item in
Iterable
or null if removed.
property item
readonly item: V;
The item.
property previousIndex
readonly previousIndex: number | null;
Previous index of the item in
Iterable
or null if added.
property trackById
readonly trackById: any;
Track by identity as computed by the
TrackByFunction
.
interface IterableChanges
interface IterableChanges<V> {}
An object describing the changes in the
Iterable
collection since last timeIterableDiffer#diff()
was invoked.
method forEachAddedItem
forEachAddedItem: (fn: (record: IterableChangeRecord<V>) => void) => void;
Iterate over all added items.
method forEachIdentityChange
forEachIdentityChange: (fn: (record: IterableChangeRecord<V>) => void) => void;
Iterate over all items which had their identity (as computed by the
TrackByFunction
) changed.
method forEachItem
forEachItem: (fn: (record: IterableChangeRecord<V>) => void) => void;
Iterate over all changes.
IterableChangeRecord
will contain information about changes to each item.
method forEachMovedItem
forEachMovedItem: (fn: (record: IterableChangeRecord<V>) => void) => void;
Iterate over all moved items.
method forEachOperation
forEachOperation: ( fn: ( record: IterableChangeRecord<V>, previousIndex: number | null, currentIndex: number | null ) => void) => void;
Iterate over a set of operations which when applied to the original
Iterable
will produce the newIterable
.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.Parameter record
A change which needs to be applied
Parameter previousIndex
The
IterableChangeRecord#previousIndex
of therecord
refers to the originalIterable
location, where aspreviousIndex
refers to the transient location of the item, after applying the operations up to this point.Parameter currentIndex
The
IterableChangeRecord#currentIndex
of therecord
refers to the originalIterable
location, where ascurrentIndex
refers to the transient location of the item, after applying the operations up to this point.
method forEachPreviousItem
forEachPreviousItem: (fn: (record: IterableChangeRecord<V>) => void) => void;
Iterate over changes in the order of original
Iterable
showing where the original items have moved.
method forEachRemovedItem
forEachRemovedItem: (fn: (record: IterableChangeRecord<V>) => void) => void;
Iterate over all removed items.
interface IterableDiffer
interface IterableDiffer<V> {}
A strategy for tracking changes over time to an iterable. Used by to respond to changes in an iterable by effecting equivalent changes in the DOM.
method diff
diff: (object: NgIterable<V> | undefined | null) => IterableChanges<V> | null;
Compute a difference between the previous state and the new
object
state.Parameter object
containing the new value.
Returns
an object describing the difference. The return value is only valid until the next
diff()
invocation.
interface IterableDifferFactory
interface IterableDifferFactory {}
Provides a factory for IterableDiffer.
interface KeyValueChangeRecord
interface KeyValueChangeRecord<K, V> {}
Record representing the item change information.
property currentValue
readonly currentValue: V | null;
Current value for the key or
null
if removed.
property key
readonly key: K;
Current key in the Map.
property previousValue
readonly previousValue: V | null;
Previous value for the key or
null
if added.
interface KeyValueChanges
interface KeyValueChanges<K, V> {}
An object describing the changes in the
Map
or{[k:string]: string}
since last timeKeyValueDiffer#diff()
was invoked.
method forEachAddedItem
forEachAddedItem: (fn: (r: KeyValueChangeRecord<K, V>) => void) => void;
Iterate over all added items.
method forEachChangedItem
forEachChangedItem: (fn: (r: KeyValueChangeRecord<K, V>) => void) => void;
Iterate over all keys for which values have changed.
method forEachItem
forEachItem: (fn: (r: KeyValueChangeRecord<K, V>) => void) => void;
Iterate over all changes.
KeyValueChangeRecord
will contain information about changes to each item.
method forEachPreviousItem
forEachPreviousItem: (fn: (r: KeyValueChangeRecord<K, V>) => void) => void;
Iterate over changes in the order of original Map showing where the original items have moved.
method forEachRemovedItem
forEachRemovedItem: (fn: (r: KeyValueChangeRecord<K, V>) => void) => void;
Iterate over all removed items.
interface KeyValueDiffer
interface KeyValueDiffer<K, V> {}
A differ that tracks changes made to an object over time.
method diff
diff: { (object: Map<K, V>): KeyValueChanges<K, V> | null; (object: { [key: string]: V }): KeyValueChanges<string, V>;};
Compute a difference between the previous state and the new
object
state.Parameter object
containing the new value.
Returns
an object describing the difference. The return value is only valid until the next
diff()
invocation.
interface KeyValueDifferFactory
interface KeyValueDifferFactory {}
Provides a factory for KeyValueDiffer.
interface ListenerOptions
interface ListenerOptions {}
Options that can be used to configure an event listener.
interface ModelFunction
interface ModelFunction {}
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 thealias
option. The output name is generated by taking the input name and appendingChange
.The function exposes an API for also declaring required models via the
model.required
function.Ignored because
model
is the canonical API entry.
property required
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>;};
call signature
<T>(): ModelSignal<T | undefined>;
Initializes a model of type
T
with an initial value ofundefined
. Angular will implicitly useundefined
as initial value.
call signature
<T>(initialValue: T, opts?: ModelOptions): ModelSignal<T>;
Initializes a model of type
T
with the given initial value.
interface ModelOptions
interface ModelOptions {}
Options for model signals.
property alias
alias?: string;
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.
property debugName
debugName?: string;
A debug name for the model signal. Used in Angular DevTools to identify the signal.
interface ModelSignal
interface ModelSignal<T> extends WritableSignal<T>, InputSignal<T>, OutputRef<T> {}
ModelSignal
represents a specialSignal
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.
property [SIGNAL]
[SIGNAL]: InputSignalNode<T, T>;
interface ModuleWithProviders
interface ModuleWithProviders<T> {}
A wrapper around an NgModule that associates it with providers Usage without a generic type is deprecated.
interface NgModule
interface NgModule {}
Type of the NgModule metadata.
property bootstrap
bootstrap?: Array<Type$1<any> | any[]>;
The set of components that are bootstrapped when this module is bootstrapped.
property declarations
declarations?: Array<Type$1<any> | any[]>;
The set of components, directives, and pipes (declarables that belong to this module.
The set of selectors that are available to a template include those declared here, and those that are exported from imported NgModules.
Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to declare a class that is imported from another module.
### Example
The following example allows the CommonModule to use the
NgFor
directive.@NgModule({declarations: [NgFor]})class CommonModule {}
property exports
exports?: Array<Type$1<any> | any[]>;
The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API.
A declarable belongs to one and only one NgModule. A module can list another module among its exports, in which case all of that module's public declaration are exported.
Declarations are private by default. If this ModuleA does not export UserComponent, then only the components within this ModuleA can use UserComponent.
ModuleA can import ModuleB and also export it, making exports from ModuleB available to an NgModule that imports ModuleA.
### Example
The following example exports the
NgFor
directive from CommonModule.@NgModule({exports: [NgFor]})class CommonModule {}
property id
id?: string;
A name or path that uniquely identifies this NgModule in
getNgModuleById
. If leftundefined
, the NgModule is not registered withgetNgModuleById
.
property imports
imports?: Array<Type$1<any> | ModuleWithProviders<{}> | any[]>;
The set of NgModules whose exported declarables are available to templates in this module.
A template can use exported declarables from any imported module, including those from modules that are imported indirectly and re-exported. For example,
ModuleA
importsModuleB
, and also exports it, which makes the declarables fromModuleB
available whereverModuleA
is imported.### Example
The following example allows MainModule to use anything exported by
CommonModule
:@NgModule({imports: [CommonModule]})class MainModule {}
property jit
jit?: true;
When present, this module is ignored by the AOT compiler. It remains in distributed code, and the JIT compiler attempts to compile it at run time, in the browser. To ensure the correct behavior, the app must import
@angular/compiler
.
property providers
providers?: Array<Provider | EnvironmentProviders>;
The set of injectable objects that are available in the injector of this module.
See Also
[Dependency Injection guide](guide/di/dependency-injection
[NgModule guide](guide/ngmodules/providers)
Dependencies whose providers are listed here become available for injection into any component, directive, pipe or service that is a child of this injector. The NgModule used for bootstrapping uses the root injector, and can provide dependencies to any part of the app.
A lazy-loaded module has its own injector, typically a child of the app root injector. Lazy-loaded services are scoped to the lazy-loaded module's injector. If a lazy-loaded module also provides the
UserService
, any component created within that module's context (such as by router navigation) gets the local instance of the service, not the instance in the root injector. Components in external modules continue to receive the instance provided by their injectors.### Example
The following example defines a class that is injected in the HelloWorld NgModule:
class Greeter {greet(name:string) {return 'Hello ' + name + '!';}}@NgModule({providers: [Greeter]})class HelloWorld {greeter:Greeter;constructor(greeter:Greeter) {this.greeter = greeter;}}
property schemas
schemas?: Array<SchemaMetadata | any[]>;
The set of schemas that declare elements to be allowed in the NgModule. Elements and properties that are neither Angular components nor directives must be declared in a schema.
Allowed value are
NO_ERRORS_SCHEMA
andCUSTOM_ELEMENTS_SCHEMA
.When using one of
NO_ERRORS_SCHEMA
orCUSTOM_ELEMENTS_SCHEMA
you must ensure that allowed elements and properties securely escape inputs.
interface NgModuleDecorator
interface NgModuleDecorator {}
Type of the NgModule decorator / constructor function.
construct signature
new (obj?: NgModule): NgModule;
call signature
(obj?: NgModule): TypeDecorator;
Decorator that marks a class as an NgModule and supplies configuration metadata.
interface NgZoneOptions
interface NgZoneOptions {}
Used to configure event and run coalescing with
provideZoneChangeDetection
.See Also
property eventCoalescing
eventCoalescing?: boolean;
Optionally specify coalescing event change detections or not. Consider the following case.
<div (click)="doSomething()"><button (click)="doSomethingElse()"></button></div>When button is clicked, because of the event bubbling, both event handlers will be called and 2 change detections will be triggered. We can coalesce such kind of events to trigger change detection only once.
By default, this option is set to false, meaning events will not be coalesced, and change detection will be triggered multiple times. If this option is set to true, change detection will be triggered once in the scenario described above.
property ignoreChangesOutsideZone
ignoreChangesOutsideZone?: boolean;
When false, change detection is scheduled when Angular receives a clear indication that templates need to be refreshed. This includes:
- calling
ChangeDetectorRef.markForCheck
- callingComponentRef.setInput
- updating a signal that is read in a template - attaching a view that is marked dirty - removing a view - registering a render hook (templates are only refreshed if render hooks do one of the above)Deprecated
This option was introduced out of caution as a way for developers to opt out of the new behavior in v18 which schedule change detection for the above events when they occur outside the Zone. After monitoring the results post-release, we have determined that this feature is working as desired and do not believe it should ever be disabled by setting this option to
true
.
property runCoalescing
runCoalescing?: boolean;
Optionally specify if
NgZone#run()
method invocations should be coalesced into a single change detection.Consider the following case.
for (let i = 0; i < 10; i ++) {ngZone.run(() => {// do something});}This case triggers the change detection multiple times. With ngZoneRunCoalescing options, all change detections in an event loop trigger only once. In addition, the change detection executes in requestAnimation.
interface OnChanges
interface OnChanges {}
A lifecycle hook that is called when any data-bound property of a directive changes. Define an
ngOnChanges()
method to handle the changes.See Also
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
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.
Parameter changes
The changed properties.
interface OnDestroy
interface OnDestroy {}
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 Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to define its own custom clean-up method.
method ngOnDestroy
ngOnDestroy: () => void;
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
interface OnInit
interface OnInit {}
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 Also
[Lifecycle hooks guide](guide/components/lifecycle)
The following snippet shows how a component can implement this interface to define its own initialization method.
method ngOnInit
ngOnInit: () => void;
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.
interface Optional
interface Optional {}
Type of the Optional metadata.
interface OptionalDecorator
interface OptionalDecorator {}
Type of the Optional decorator / constructor function.
construct signature
new (): Optional;
call signature
(): any;
Parameter decorator to be used on constructor parameters, which marks the parameter as being an optional dependency. The DI framework provides
null
if the dependency is not found.Can be used together with other parameter decorators that modify how dependency injection operates.
The following code allows the possibility of a
null
result:See Also
[Dependency Injection Guide](guide/di/dependency-injection.
interface Output
interface Output {}
Type of the Output metadata.
property alias
alias?: string;
The name of the DOM property to which the output property is bound.
interface OutputDecorator
interface OutputDecorator {}
Type of the Output decorator / constructor function.
construct signature
new (alias?: string): any;
call signature
(alias?: string): any;
Decorator that marks a class field as an output property and supplies configuration metadata. The DOM property bound to the output property is automatically updated during change detection.
You can supply an optional name to use in templates when the component is instantiated, that maps to the name of the bound property. By default, the original name of the bound property is used for output binding.
See
Input
decorator for an example of providing a binding name.See Also
[Input properties](guide/components/inputs)
[Output properties](guide/components/outputs)
interface OutputOptions
interface OutputOptions {}
Options for declaring an output.
property alias
alias?: string;
interface OutputRef
interface OutputRef<T> {}
A reference to an Angular output.
method subscribe
subscribe: (callback: (value: T) => void) => OutputRefSubscription;
Registers a callback that is invoked whenever the output emits a new value of type
T
.Angular will automatically clean up the subscription when the directive/component of the output is destroyed.
interface OutputRefSubscription
interface OutputRefSubscription {}
Function that can be used to manually clean up a programmatic OutputRef#subscribe subscription.
Note: Angular will automatically clean up subscriptions when the directive/component of the output is destroyed.
method unsubscribe
unsubscribe: () => void;
interface ɵComponentDebugMetadata
interface ComponentDebugMetadata extends DirectiveDebugMetadata {}
Partial metadata for a given component instance. This information might be useful for debugging purposes or tooling. Currently the following fields are available: - inputs - outputs - encapsulation - changeDetection
property changeDetection
changeDetection: ChangeDetectionStrategy$1;
property encapsulation
encapsulation: ViewEncapsulation$1;
interface ɵComponentDef
interface ComponentDef<T> extends DirectiveDef<T> {}
Runtime link information for Components.
This is an internal data structure used by the render to link components into templates.
NOTE: Always use
defineComponent
function to create this object, never create the object directly since the shape of this object can change between versions.See: defineComponent
property consts
readonly consts: TConstantsOrFactory | null;
Constants associated with the component's view.
property data
readonly data: { [kind: string]: any; animation?: any[];};
Defines arbitrary developer-defined data to be stored on a renderer instance. This is useful for renderers that delegate to other renderers.
property decls
readonly decls: number;
The number of nodes, local refs, and pipes in this component template.
Used to calculate the length of the component's LView array, so we can pre-fill the array and set the binding start index.
property dependencies
dependencies: TypeOrFactory<DependencyTypeList> | null;
Unfiltered list of all dependencies of a component, or
null
if none.
property directiveDefs
directiveDefs: DirectiveDefListOrFactory | null;
Registry of directives and components that may be found in this view.
The property is either an array of
DirectiveDef
s or a function which returns the array ofDirectiveDef
s. The function is necessary to be able to support forward declarations.
property encapsulation
readonly encapsulation: ViewEncapsulation$1;
The view encapsulation type, which determines how styles are applied to DOM elements. One of -
Emulated
(default): Emulate native scoping of styles. -Native
: Use the native encapsulation mechanism of the renderer. -ShadowDom
: Use modern [ShadowDOM](https://w3c.github.io/webcomponents/spec/shadow/) and create a ShadowRoot for component's host element. -None
: Do not provide any template or style encapsulation.
property getExternalStyles
getExternalStyles: ((encapsulationId?: string) => string[]) | null;
A function used by the framework to create the list of external runtime style URLs.
property getStandaloneInjector
getStandaloneInjector: | ((parentInjector: EnvironmentInjector) => EnvironmentInjector | null) | null;
A function used by the framework to create standalone injectors.
property id
readonly id: string;
Unique ID for the component. Used in view encapsulation and to keep track of the injector in standalone components.
property ngContentSelectors
readonly ngContentSelectors?: string[];
An array of
ngContent[selector]
values that were found in the template.
property onPush
readonly onPush: boolean;
Whether or not this component's ChangeDetectionStrategy is OnPush
property pipeDefs
pipeDefs: PipeDefListOrFactory | null;
Registry of pipes that may be found in this view.
The property is either an array of
PipeDefs
s or a function which returns the array ofPipeDefs
s. The function is necessary to be able to support forward declarations.
property schemas
schemas: SchemaMetadata[] | null;
The set of schemas that declare elements to be allowed in the component's template.
property signals
readonly signals: boolean;
Whether or not this component is signal-based.
property styles
readonly styles: string[];
A set of styles that the component needs to be present for component to render correctly.
property template
readonly template: ComponentTemplate<T>;
The View template of the component.
property tView
tView: TView | null;
Ivy runtime uses this place to store the computed tView for the component. This gets filled on the first run of component.
property vars
readonly vars: number;
The number of bindings in this component template (including pure fn bindings).
Used to calculate the length of the component's LView array, so we can pre-fill the array and set the host binding start index.
property viewQuery
viewQuery: ViewQueriesFunction<T> | null;
Query-related instructions for a component.
interface ɵComponentType
interface ComponentType<T> extends Type$1<T> {}
A subclass of
Type
which has a staticɵcmp
:ComponentDef
field making it consumable for rendering.
property ɵcmp
ɵcmp: unknown;
interface ɵDeferBlockConfig
interface DeferBlockConfig {}
Internal structure used for configuration of defer block behavior.
property behavior
behavior: DeferBlockBehavior;
interface ɵDeferBlockDependencyInterceptor
interface DeferBlockDependencyInterceptor {}
**INTERNAL**, avoid referencing it in application code.
Describes a helper class that allows to intercept a call to retrieve current dependency loading function and replace it with a different implementation. This interceptor class is needed to allow testing blocks in different states by simulating loading response.
method intercept
intercept: ( dependencyFn: DependencyResolverFn | null) => DependencyResolverFn | null;
Invoked for each defer block when dependency loading function is accessed.
method setInterceptor
setInterceptor: ( interceptorFn: (current: DependencyResolverFn) => DependencyResolverFn) => void;
Allows to configure an interceptor function.
interface ɵDeferBlockDetails
interface DeferBlockDetails extends DehydratedDeferBlock {}
Defer block instance for testing.
property tDetails
tDetails: TDeferBlockDetails;
interface ɵDirectiveDef
interface DirectiveDef<T> {}
Runtime link information for Directives.
This is an internal data structure used by the render to link directives into templates.
NOTE: Always use
defineDirective
function to create this object, never create the object directly since the shape of this object can change between versions.Parameter Selector
type metadata specifying the selector of the directive or component
See: defineDirective
property contentQueries
contentQueries: ContentQueriesFunction<T> | null;
Function to create and refresh content queries associated with a given directive.
property debugInfo
debugInfo: ClassDebugInfo | null;
Info related to debugging/troubleshooting for this component. This info is only available in dev mode.
property declaredInputs
readonly declaredInputs: Record<string, string>;
Deprecated
This is only here because
NgOnChanges
incorrectly uses declared name instead of public or minified name.
property exportAs
readonly exportAs: string[] | null;
Name under which the directive is exported (for use with local references in template)
property factory
readonly factory: FactoryFn<T> | null;
Factory function used to create a new directive instance. Will be null initially. Populated when the factory is first requested by directive instantiation logic.
property features
readonly features: DirectiveDefFeature[] | null;
The features applied to this directive
property findHostDirectiveDefs
findHostDirectiveDefs: | (( currentDef: DirectiveDef<unknown>, matchedDefs: DirectiveDef<unknown>[], hostDirectiveDefs: HostDirectiveDefs ) => void) | null;
Function that will add the host directives to the list of matches during directive matching. Patched onto the definition by the
HostDirectivesFeature
.Parameter currentDef
Definition that has been matched.
Parameter matchedDefs
List of all matches for a specified node. Will be mutated to include the host directives.
Parameter hostDirectiveDefs
Mapping of directive definitions to their host directive configuration. Host directives will be added to the map as they're being matched to the node.
property hostAttrs
readonly hostAttrs: TAttributes | null;
Assign static attribute values to a host element.
This property will assign static attribute values as well as class and style values to a host element. Since attribute values can consist of different types of values, the
hostAttrs
array must include the values in the following format:attrs = [ // static attributes (like
title
,name
,id
...) attr1, value1, attr2, value,// a single namespace value (like
x:id
) NAMESPACE_MARKER, namespaceUri1, name1, value1,// another single namespace value (like
x:name
) NAMESPACE_MARKER, namespaceUri2, name2, value2,// a series of CSS classes that will be applied to the element (no spaces) CLASSES_MARKER, class1, class2, class3,
// a series of CSS styles (property + value) that will be applied to the element STYLES_MARKER, prop1, value1, prop2, value2 ]
All non-class and non-style attributes must be defined at the start of the list first before all class and style values are set. When there is a change in value type (like when classes and styles are introduced) a marker must be used to separate the entries. The marker values themselves are set via entries found in the [AttributeMarker] enum.
property hostBindings
readonly hostBindings: HostBindingsFunction<T> | null;
Refreshes host bindings on the associated directive.
property hostDirectives
hostDirectives: (HostDirectiveDef | (() => HostDirectiveConfig[]))[] | null;
Additional directives to be applied whenever the directive has been matched.
HostDirectiveConfig
objects represent a host directive that can be resolved eagerly and were already pre-processed when the definition was created. A function needs to be resolved lazily during directive matching, because it's a forward reference.**Note:** we can't
HostDirectiveConfig
in the array, because there's no way to distinguish if a function in the array is aType
or a() => HostDirectiveConfig[]
.
property hostVars
readonly hostVars: number;
The number of bindings in this directive
hostBindings
(including pure fn bindings).Used to calculate the length of the component's LView array, so we can pre-fill the array and set the host binding start index.
property inputConfig
readonly inputConfig: { [P in keyof T]?: | string | [InputFlags, string, string?, InputTransformFunction?];};
Contains the raw input information produced by the compiler. Can be used to do further processing after the
inputs
have been inverted.
property inputs
readonly inputs: Record< string, [ minifiedName: string, flags: InputFlags, transform: InputTransformFunction | null ]>;
A dictionary mapping the inputs' public name to their minified property names (along with flags if there are any).
property outputs
readonly outputs: Record<string, string>;
A dictionary mapping the outputs' minified property names to their public API names, which are their aliases if any, or their original unminified property names (as in
@Output('alias') propertyName: any;
).
property providersResolver
providersResolver: | (<U extends T>( def: DirectiveDef<U>, processProvidersFn?: ProcessProvidersFunction ) => void) | null;
Function that resolves providers and publishes them into the DI system.
property selectors
readonly selectors: CssSelectorList;
The selectors that will be used to match nodes to this directive.
property setInput
setInput: | (<U extends T>( this: DirectiveDef<U>, instance: U, inputSignalNode: null | InputSignalNode<unknown, unknown>, value: any, publicName: string, privateName: string ) => void) | null;
property signals
readonly signals: boolean;
Whether this directive (or component) uses the signals authoring experience.
property standalone
readonly standalone: boolean;
Whether this directive (or component) is standalone.
property type
readonly type: Type$1<T>;
Token representing the directive. Used by DI.
property viewQuery
viewQuery: ViewQueriesFunction<T> | null;
Query-related instructions for a directive. Note that while directives don't have a view and as such view queries won't necessarily do anything, there might be components that extend the directive.
interface ɵDirectiveType
interface DirectiveType<T> extends Type$1<T> {}
A subclass of
Type
which has a staticɵdir
:DirectiveDef
field making it consumable for rendering.
interface ɵInjectorProfilerContext
interface InjectorProfilerContext {}
An object that defines an injection context for the injector profiler.
property injector
injector: Injector;
The Injector that service is being injected into. - Example: if ModuleA --provides--> ServiceA --injects--> ServiceB then inject(ServiceB) in ServiceA has ModuleA as an injector context
property token
token: Type$1<unknown> | null;
The class where the constructor that is calling
inject
is located - Example: if ModuleA --provides--> ServiceA --injects--> ServiceB then inject(ServiceB) in ServiceA has ServiceA as a construction context
interface ɵInputSignalNode
interface InputSignalNode<T, TransformT> extends SignalNode<T> {}
Reactive node type for an input signal. An input signal extends a signal. There are special properties to enable transforms and required inputs.
property debugName
debugName?: string;
A debug name for the input signal. Used in Angular DevTools to identify the signal.
property transformFn
transformFn: ((value: TransformT) => T) | undefined;
User-configured transform that will run whenever a new value is applied to the input signal node.
method applyValueToInputSignal
applyValueToInputSignal: <T, TransformT>( node: InputSignalNode<T, TransformT>, value: T) => void;
Applies a new value to the input signal. Expects transforms to be run manually before.
This function is called by the framework runtime code whenever a binding changes. The value can in practice be anything at runtime, but for typing purposes we assume it's a valid
T
value. Type-checking will enforce that.
interface ɵInternalEnvironmentProviders
interface InternalEnvironmentProviders extends EnvironmentProviders {}
property ɵfromNgModule
ɵfromNgModule?: true;
If present, indicates that the
EnvironmentProviders
were derived from NgModule providers.This is used to produce clearer error messages.
property ɵproviders
ɵproviders: (Provider | EnvironmentProviders)[];
interface ɵNavigationInterceptOptions
interface NavigationInterceptOptions {}
property focusReset
focusReset?: 'after-transition' | 'manual';
property handler
handler?: () => Promise<void>;
property scroll
scroll?: 'after-transition' | 'manual';
interface ɵNavigationNavigateOptions
interface NavigationNavigateOptions extends NavigationOptions {}
interface ɵNavigationOptions
interface NavigationOptions {}
property info
info?: unknown;
interface ɵNavigationReloadOptions
interface NavigationReloadOptions extends NavigationOptions {}
property state
state?: unknown;
interface ɵNavigationResult
interface NavigationResult {}
interface ɵNavigationUpdateCurrentEntryOptions
interface NavigationUpdateCurrentEntryOptions {}
property state
state: unknown;
interface ɵNgModuleDef
interface NgModuleDef<T> {}
Runtime link information for NgModules.
This is the internal data structure used by the runtime to assemble components, directives, pipes, and injectors.
NOTE: Always use
ɵɵdefineNgModule
function to create this object, never create the object directly since the shape of this object can change between versions.
property bootstrap
bootstrap: Type$1<any>[] | (() => Type$1<any>[]);
List of components to bootstrap.
See Also
{NgModuleScopeInfoFromDecorator} This field is only used in global compilation mode. In local compilation mode the bootstrap info is computed and added in runtime.
property declarations
declarations: Type$1<any>[] | (() => Type$1<any>[]);
List of components, directives, and pipes declared by this module.
property exports
exports: Type$1<any>[] | (() => Type$1<any>[]);
List of modules,
ModuleWithProviders
, components, directives, or pipes exported by this module.
property id
id: string | null;
Unique ID for the module with which it should be registered.
property imports
imports: Type$1<any>[] | (() => Type$1<any>[]);
List of modules or
ModuleWithProviders
imported by this module.
property schemas
schemas: SchemaMetadata[] | null;
The set of schemas that declare elements to be allowed in the NgModule.
property transitiveCompileScopes
transitiveCompileScopes: NgModuleTransitiveScopes | null;
Cached value of computed
transitiveCompileScopes
for this module.This should never be read directly, but accessed via
transitiveScopesFor
.
property type
type: T;
Token representing the module. Used by DI.
interface ɵNgModuleTransitiveScopes
interface NgModuleTransitiveScopes {}
Represents the expansion of an
NgModule
into its scopes.A scope is a set of directives and pipes that are visible in a particular context. Each
NgModule
has two scopes. Thecompilation
scope is the set of directives and pipes that will be recognized in the templates of components declared by the module. Theexported
scope is the set of directives and pipes exported by a module (that is, module B's exported scope gets added to module A's compilation scope when module A imports B).
property compilation
compilation: { directives: Set<any>; pipes: Set<any>;};
property exported
exported: { directives: Set<any>; pipes: Set<any>;};
property schemas
schemas: SchemaMetadata[] | null;
interface ɵNgModuleType
interface NgModuleType<T = any> extends Type$1<T> {}
property ɵmod
ɵmod: NgModuleDef<T>;
interface ɵNO_CHANGE
interface NO_CHANGE {}
interface ɵɵInjectableDeclaration
interface ɵɵInjectableDeclaration<T> {}
Information about how a type or
InjectionToken
interfaces with the DI system.At a minimum, this includes a
factory
which defines how to create the given typeT
, possibly requesting injection of other types if necessary.Optionally, a
providedIn
parameter specifies that the given type belongs to a particularInjector
,NgModule
, or a special scope (e.g.'root'
). A value ofnull
indicates that the injectable does not belong to any scope.The ViewEngine compiler emits code with this type for injectables. This code is deployed to npm, and should be treated as public api.
property factory
factory: (t?: Type$1<any>) => T;
Factory method to execute to create an instance of the injectable.
property providedIn
providedIn: | InjectorType<any> | 'root' | 'platform' | 'any' | 'environment' | null;
Specifies that the given type belongs to a particular injector: -
InjectorType
such asNgModule
, -'root'
the root injector -'any'
all injectors. -null
, does not belong to any injector. Must be explicitly listed in the injectorproviders
.
property token
token: unknown;
The token to which this definition belongs.
Note that this may not be the same as the type that the
factory
will create.
property value
value: T | undefined;
In a case of no explicit injector, a location where the instance of the injectable is stored.
interface ɵɵInjectorDef
interface ɵɵInjectorDef<T> {}
Information about the providers to be included in an
Injector
as well as how the given type which carries the information should be created by the DI system.An
InjectorDef
can import other types which haveInjectorDefs
, forming a deep nested structure of providers with a defined priority (identically to howNgModule
s also have an import/dependency structure).NOTE: This is a private type and should not be exported
interface ɵPipeDef
interface PipeDef<T> {}
Runtime link information for Pipes.
This is an internal data structure used by the renderer to link pipes into templates.
NOTE: Always use
definePipe
function to create this object, never create the object directly since the shape of this object can change between versions.See: definePipe
property factory
factory: FactoryFn<T> | null;
Factory function used to create a new pipe instance. Will be null initially. Populated when the factory is first requested by pipe instantiation logic.
property name
readonly name: string;
Pipe name.
Used to resolve pipe in templates.
property onDestroy
onDestroy: (() => void) | null;
property pure
readonly pure: boolean;
Whether or not the pipe is pure.
Pure pipes result only depends on the pipe input and not on internal state of the pipe.
property standalone
readonly standalone: boolean;
Whether this pipe is standalone.
property type
type: Type$1<T>;
Token representing the pipe.
interface ɵProfiler
interface Profiler {}
Profiler function which the runtime will invoke before and after user code.
call signature
( event: ProfilerEvent, instance?: {} | null, hookOrListener?: (e?: any) => any): void;
interface ɵProviderRecord
interface ProviderRecord {}
An object that contains information about a provider that has been configured
TODO: rename to indicate that it is a debug structure eg. ProviderDebugInfo.
property importPath
importPath?: Type$1<unknown>[];
The path of DI containers that were followed to import this provider
property isViewProvider
isViewProvider: boolean;
Determines if provider is configured as view provider.
property provider
provider: SingleProvider;
The raw provider associated with this ProviderRecord.
property token
token: Type$1<unknown> | InjectionToken<unknown>;
DI token that this provider is configuring
interface ɵSafeHtml
interface SafeHtml extends SafeValue {}
Marker interface for a value that's safe to use as HTML.
interface ɵSafeResourceUrl
interface SafeResourceUrl extends SafeValue {}
Marker interface for a value that's safe to use as a URL to load executable code from.
interface ɵSafeScript
interface SafeScript extends SafeValue {}
Marker interface for a value that's safe to use as JavaScript.
interface ɵSafeStyle
interface SafeStyle extends SafeValue {}
Marker interface for a value that's safe to use as style (CSS).
interface ɵSafeUrl
interface SafeUrl extends SafeValue {}
Marker interface for a value that's safe to use as a URL linking to a document.
interface ɵSafeValue
interface SafeValue {}
Marker interface for a value that's safe to use in a particular context.
interface ɵTracingService
interface TracingService<T extends TracingSnapshot> {}
Tracing mechanism which can associate causes (snapshots) with runs of subsequent operations.
Not defined by Angular directly, but defined in contexts where tracing is desired.
method snapshot
snapshot: (linkedSnapshot: T | null) => T;
Take a snapshot of the current context which will be stored by Angular and used when additional work is performed that was scheduled in this context.
Parameter linkedSnapshot
Optional snapshot to use link to the current context. The caller is no longer responsible for calling dispose on the linkedSnapshot.
The tracing snapshot. The caller is responsible for diposing of the snapshot.
method wrapEventListener
wrapEventListener: <T extends Function>( element: HTMLElement, eventName: string, handler: T) => T;
Wrap an event listener bound by the framework for tracing.
Parameter element
Element on which the event is bound.
Parameter eventName
Name of the event.
Parameter handler
Event handler. A new event handler to be bound instead of the original one.
interface ɵTracingSnapshot
interface TracingSnapshot {}
A single tracing snapshot.
interface Pipe
interface Pipe {}
Type of the Pipe metadata.
property name
name: string;
The pipe name to use in template bindings. Typically uses lowerCamelCase because the name cannot contain hyphens.
property pure
pure?: boolean;
When true, the pipe is pure, meaning that the
transform()
method is invoked only when its input arguments change. Pipes are pure by default.If the pipe has internal state (that is, the result depends on state other than its arguments), set
pure
to false. In this case, the pipe is invoked on each change-detection cycle, even if the arguments have not changed.
property standalone
standalone?: boolean;
Angular pipes marked as
standalone
do not need to be declared in an NgModule. Such pipes don't depend on any "intermediate context" of an NgModule (ex. configured providers).More information about standalone components, directives, and pipes can be found in [this guide](guide/components/importing).
interface PipeDecorator
interface PipeDecorator {}
Type of the Pipe decorator / constructor function.
construct signature
new (obj: Pipe): Pipe;
See the
Pipe
decorator.
call signature
(obj: Pipe): TypeDecorator;
Decorator that marks a class as pipe and supplies configuration metadata.
A pipe class must implement the
PipeTransform
interface. For example, if the name is "myPipe", use a template binding expression such as the following:{{ exp | myPipe }}The result of the expression is passed to the pipe's
transform()
method.A pipe must belong to an NgModule in order for it to be available to a template. To make it a member of an NgModule, list it in the
declarations
field of theNgModule
metadata.See Also
[Style Guide: Pipe Names](style-guide#02-09)
interface PipeTransform
interface PipeTransform {}
An interface that is implemented by pipes in order to perform a transformation. Angular invokes the
transform
method with the value of a binding as the first argument, and any parameters as the second argument in list form.In the following example,
TruncatePipe
returns the shortened value with an added ellipses.Invoking
{{ 'It was the best of times' | truncate }}
in a template will produceIt was...
.In the following example,
TruncatePipe
takes parameters that sets the truncated length and the string to append with.Invoking
{{ 'It was the best of times' | truncate:4:'....' }}
in a template will produce `It was the best....`.
method transform
transform: (value: any, ...args: any[]) => any;
interface PromiseResourceOptions
interface PromiseResourceOptions<T, R> extends BaseResourceOptions<T, R> {}
Options to the
resource
function, for creating a resource.Modifiers
@experimental
interface Query
interface Query {}
Type of the Query metadata.
property descendants
descendants: boolean;
property emitDistinctChangesOnly
emitDistinctChangesOnly: boolean;
property first
first: boolean;
property isViewQuery
isViewQuery: boolean;
property read
read: any;
property selector
selector: any;
property static
static?: boolean;
interface RendererType2
interface RendererType2 {}
Used by
RendererFactory2
to associate custom rendering data and styles with a rendering implementation.
property data
data: { [kind: string]: any;};
Defines arbitrary developer-defined data to be stored on a renderer instance. This is useful for renderers that delegate to other renderers.
property encapsulation
encapsulation: ViewEncapsulation$1;
The view encapsulation type, which determines how styles are applied to DOM elements. One of -
Emulated
(default): Emulate native scoping of styles. -Native
: Use the native encapsulation mechanism of the renderer. -ShadowDom
: Use modern [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and create a ShadowRoot for component's host element. -None
: Do not provide any template or style encapsulation.
property getExternalStyles
getExternalStyles?: ((encapsulationId?: string) => string[]) | null;
A function used by the framework to create the list of external runtime style URLs.
property id
id: string;
A unique identifying string for the new renderer, used when creating unique styles for encapsulation.
property styles
styles: string[];
Defines CSS styles to be stored on a renderer instance.
interface Resource
interface Resource<T> {}
A Resource is an asynchronous dependency (for example, the results of an API call) that is managed and delivered through signals.
The usual way of creating a
Resource
is through theresource
function, but various other APIs may presentResource
instances to describe their own concepts.Modifiers
@experimental
property error
readonly error: Signal<unknown>;
When in the
error
state, this returns the last known error from theResource
.
property isLoading
readonly isLoading: Signal<boolean>;
Whether this resource is loading a new value (or reloading the existing one).
property status
readonly status: Signal<ResourceStatus>;
The current status of the
Resource
, which describes what the resource is currently doing and what can be expected of itsvalue
.
property value
readonly value: Signal<T>;
The current value of the
Resource
, orundefined
if there is no current value.
method hasValue
hasValue: () => this is Resource<Exclude<T, undefined>>;
Whether this resource has a valid current value.
This function is reactive.
method reload
reload: () => boolean;
Instructs the resource to re-load any asynchronous dependency it may have.
Note that the resource will not enter its reloading state until the actual backend request is made.
Returns
true if a reload was initiated, false if a reload was unnecessary or unsupported
interface ResourceLoaderParams
interface ResourceLoaderParams<R> {}
Parameter to a
ResourceLoader
which gives the request and other options for the current loading operation.Modifiers
@experimental
property abortSignal
abortSignal: AbortSignal;
property previous
previous: { status: ResourceStatus;};
property request
request: Exclude<NoInfer<R>, undefined>;
interface ResourceRef
interface ResourceRef<T> extends WritableResource<T> {}
A
WritableResource
created through theresource
function.Modifiers
@experimental
interface SchemaMetadata
interface SchemaMetadata {}
A schema definition associated with a component or an NgModule.
Parameter name
The name of a defined schema.
See Also
property name
name: string;
interface Self
interface Self {}
Type of the Self metadata.
interface SelfDecorator
interface SelfDecorator {}
Type of the Self decorator / constructor function.
construct signature
new (): Self;
call signature
(): any;
Parameter decorator to be used on constructor parameters, which tells the DI framework to start dependency resolution from the local injector.
Resolution works upward through the injector hierarchy, so the children of this class must configure their own providers or be prepared for a
null
result.In the following example, the dependency can be resolved by the local injector when instantiating the class itself, but not when instantiating a child.
See Also
interface SimpleChanges
interface SimpleChanges {}
A hashtable of changes represented by 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 Also
index signature
[propName: string]: SimpleChange;
interface SkipSelf
interface SkipSelf {}
Type of the
SkipSelf
metadata.
interface SkipSelfDecorator
interface SkipSelfDecorator {}
Type of the
SkipSelf
decorator / constructor function.
construct signature
new (): SkipSelf;
call signature
(): any;
Parameter decorator to be used on constructor parameters, which tells the DI framework to start dependency resolution from the parent injector. Resolution works upward through the injector hierarchy, so the local injector is not checked for a provider.
In the following example, the dependency can be resolved when instantiating a child, but not when instantiating the class itself.
See Also
interface StaticClassProvider
interface StaticClassProvider extends StaticClassSansProvider {}
Configures the
Injector
to return an instance ofuseClass
for a token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
Note that following two providers are not equal:
### Multi-value example
property multi
multi?: boolean;
When true, injector returns an array of instances. This is useful to allow multiple providers spread across many files to provide configuration information to a common token.
property provide
provide: any;
An injection token. Typically an instance of
Type
orInjectionToken
, but can beany
.
interface StaticClassSansProvider
interface StaticClassSansProvider {}
Configures the
Injector
to return an instance ofuseClass
for a token. Base forStaticClassProvider
decorator.
interface StreamingResourceOptions
interface StreamingResourceOptions<T, R> extends BaseResourceOptions<T, R> {}
Options to the
resource
function, for creating a resource.Modifiers
@experimental
interface TrackByFunction
interface TrackByFunction<T> {}
A function optionally passed into the
NgForOf
directive to customize howNgForOf
uniquely identifies items in an iterable.NgForOf
needs to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed.In all of these scenarios it is usually desirable to only update the DOM elements associated with the items affected by the change. This behavior is important to:
- preserve any DOM-specific UI state (like cursor position, focus, text selection) when the iterable is modified - enable animation of item addition, removal, and iterable reordering - preserve the value of the
<select>
element when nested<option>
elements are dynamically populated usingNgForOf
and the bound iterable is updatedA common use for custom
trackBy
functions is when the model thatNgForOf
iterates over contains a property with a unique identifier. For example, given a model:class User {id: number;name: string;...}a custom
trackBy
function could look like the following:function userTrackBy(index, user) {return user.id;}A custom
trackBy
function must have several properties:- be [idempotent](https://en.wikipedia.org/wiki/Idempotence) (be without side effects, and always return the same value for a given input) - return unique value for all unique inputs - be fast
See Also
[
NgForOf#ngForTrackBy
](api/common/NgForOf#ngForTrackBy)
call signature
<U extends T>(index: number, item: T & U): any;
Parameter index
The index of the item within the iterable.
Parameter item
The item in the iterable.
interface Type
interface Type$1<T> extends Function {}
construct signature
new (...args: any[]): T;
interface TypeDecorator
interface TypeDecorator {}
An interface implemented by all Angular type decorators, which allows them to be used as decorators as well as Angular syntax.
@ng.Component({...})class MyClass {...}
call signature
<T extends Type$1<any>>(type: T): T;
Invoke as decorator.
call signature
(target: Object, propertyKey?: string | symbol, parameterIndex?: number): void;
call signature
(target: unknown, context: unknown): void;
interface TypeProvider
interface TypeProvider extends Type$1<any> {}
Configures the
Injector
to return an instance ofType
when `Type' is used as the token.Create an instance by invoking the
new
operator and supplying additional arguments. This form is a short form ofTypeProvider
;For more details, see the ["Dependency Injection Guide"](guide/di/dependency-injection.
interface ValueProvider
interface ValueProvider extends ValueSansProvider {}
Configures the
Injector
to return a value for a token.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
### Example
### Multi-value example
property multi
multi?: boolean;
When true, injector returns an array of instances. This is useful to allow multiple providers spread across many files to provide configuration information to a common token.
property provide
provide: any;
An injection token. Typically an instance of
Type
orInjectionToken
, but can beany
.
interface ValueSansProvider
interface ValueSansProvider {}
Configures the
Injector
to return a value for a token. Base forValueProvider
decorator.
property useValue
useValue: any;
The value to inject.
interface ViewChildDecorator
interface ViewChildDecorator {}
Type of the ViewChild decorator / constructor function.
See Also
construct signature
new ( selector: ProviderToken<unknown> | Function | string, opts?: { read?: any; static?: boolean; }): ViewChild;
call signature
( selector: ProviderToken<unknown> | Function | string, opts?: { read?: any; static?: boolean; }): any;
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 tofalse
.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`) * ATemplateRef
(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 theselector
of this query * Any provider defined through a string token (e.g.{provide: 'token', useValue: 'val'}
) *TemplateRef
,ElementRef
, andViewContainerRef
Difference between dynamic and static queries: * Dynamic queries (
static: false
) - The query resolves before thengAfterViewInit()
callback is called. The result will be updated for changes to your view, such as changes tongIf
andngFor
blocks. * Static queries (static: true
) - The query resolves once the view has been created, but before change detection runs (before thengOnInit()
callback is called). The result, though, will never be updated to reflect changes to your view, such as changes tongIf
andngFor
blocks.### Example 1
### Example 2
interface ViewChildFunction
interface ViewChildFunction {}
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.Ignored because
viewChild
is the canonical API entry.
property required
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 that is expected to always match an element.
call signature
<LocatorT, ReadT>( locator: ProviderToken<LocatorT> | string, opts: { read: ProviderToken<ReadT>; debugName?: string; }): Signal<ReadT | undefined>;
Initializes a view child query. Consider using
viewChild.required
for queries that should always match.
call signature
<LocatorT>( locator: ProviderToken<LocatorT> | string, opts?: { debugName?: string; }): Signal<LocatorT | undefined>;
interface ViewChildrenDecorator
interface ViewChildrenDecorator {}
Type of the ViewChildren decorator / constructor function.
See Also
construct signature
new ( selector: ProviderToken<unknown> | Function | string, opts?: { read?: any; emitDistinctChangesOnly?: boolean; }): ViewChildren;
call signature
( selector: ProviderToken<unknown> | Function | string, opts?: { read?: any; emitDistinctChangesOnly?: boolean; }): any;
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. Whenfalse
thechanges
observable might emit even if the QueryList has not changed. ** Note: *** This config option is **deprecated**, it will be permanently set totrue
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`) * ATemplateRef
(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 theselector
of this query * Any provider defined through a string token (e.g.{provide: 'token', useValue: 'val'}
) *TemplateRef
,ElementRef
, andViewContainerRef
### Another example
interface WritableResource
interface WritableResource<T> extends Resource<T> {}
A
Resource
with a mutable value.Overwriting the value of a resource sets it to the 'local' state.
Modifiers
@experimental
property value
readonly value: WritableSignal<T>;
method asReadonly
asReadonly: () => Resource<T>;
method hasValue
hasValue: () => this is WritableResource<Exclude<T, undefined>>;
method set
set: (value: T) => void;
Convenience wrapper for
value.set
.
method update
update: (updater: (value: T) => T) => void;
Convenience wrapper for
value.update
.
interface WritableSignal
interface WritableSignal<T> extends Signal<T> {}
A
Signal
with a value that can be mutated via a setter interface.
property [ɵWRITABLE_SIGNAL]
[ɵWRITABLE_SIGNAL]: T;
method asReadonly
asReadonly: () => Signal<T>;
Returns a readonly version of this signal. Readonly signals can be accessed to read their value but can't be changed using set or update methods. The readonly signals do _not_ have any built-in mechanism that would prevent deep-mutation of their value.
method set
set: (value: T) => void;
Directly set the signal to a new value, and notify any dependents.
method update
update: (updateFn: (value: T) => T) => void;
Update the value of the signal based on its current value, and notify any dependents.
Enums
enum AfterRenderPhase
enum AfterRenderPhase { EarlyRead = 0, Write = 1, MixedReadWrite = 2, Read = 3,}
The phase to run an
afterRender
orafterNextRender
callback in.Callbacks in the same phase run in the order they are registered. Phases run in the following order after each render:
1.
AfterRenderPhase.EarlyRead
2.AfterRenderPhase.Write
3.AfterRenderPhase.MixedReadWrite
4.AfterRenderPhase.Read
Angular is unable to verify or enforce that phases are used correctly, and instead relies on each developer to follow the guidelines documented for each value and carefully choose the appropriate one, refactoring their code if necessary. By doing so, Angular is better able to minimize the performance degradation associated with manual DOM access, ensuring the best experience for the end users of your application or library.
Deprecated
Specify the phase for your callback to run in by passing a spec-object as the first parameter to
afterRender
orafterNextRender
instead of a function.
member EarlyRead
EarlyRead = 0
Use
AfterRenderPhase.EarlyRead
for callbacks that only need to **read** from the DOM before a subsequentAfterRenderPhase.Write
callback, for example to perform custom layout that the browser doesn't natively support. Prefer theAfterRenderPhase.Read
phase if reading can wait until after the write phase. **Never** write to the DOM in this phase.Using this value can degrade performance. Instead, prefer using built-in browser functionality when possible.
member MixedReadWrite
MixedReadWrite = 2
Use
AfterRenderPhase.MixedReadWrite
for callbacks that read from or write to the DOM, that haven't been refactored to use a different phase. **Never** use this phase if it is possible to divide the work among the other phases instead.Using this value can **significantly** degrade performance. Instead, prefer dividing work into the appropriate phase callbacks.
member Read
Read = 3
Use
AfterRenderPhase.Read
for callbacks that only **read** from the DOM. **Never** write to the DOM in this phase.
member Write
Write = 1
Use
AfterRenderPhase.Write
for callbacks that only **write** to the DOM. **Never** read from the DOM in this phase.
enum ChangeDetectionStrategy
enum ChangeDetectionStrategy { OnPush = 0, Default = 1,}
The strategy that the default change detector uses to detect changes. When set, takes effect the next time change detection is triggered.
See Also
member Default
Default = 1
Use the default
CheckAlways
strategy, in which change detection is automatic until explicitly deactivated.
member OnPush
OnPush = 0
Use the
CheckOnce
strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy toDefault
(CheckAlways
). Change detection can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.
enum InjectFlags
enum InjectFlags { Default = 0, Host = 1, Self = 2, SkipSelf = 4, Optional = 8,}
Injection flags for DI.
Deprecated
use an options object for [
inject
](api/core/inject) instead.
member Default
Default = 0
Check self and check parent injector if needed
member Host
Host = 1
Specifies that an injector should retrieve a dependency from any injector until reaching the host element of the current component. (Only used with Element Injector)
member Optional
Optional = 8
Inject
defaultValue
instead if token not found.
member Self
Self = 2
Don't ascend to ancestors of the node requesting injection.
member SkipSelf
SkipSelf = 4
Skip the node that is requesting injection.
enum MissingTranslationStrategy
enum MissingTranslationStrategy { Error = 0, Warning = 1, Ignore = 2,}
Use this enum at bootstrap as an option of
bootstrapModule
to define the strategy that the compiler should use in case of missing translations: - Error: throw if you have missing translations. - Warning (default): show a warning in the console and/or shell. - Ignore: do nothing.See the [i18n guide](guide/i18n/merge#report-missing-translations) for more information.
### Example
import { MissingTranslationStrategy } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule, {missingTranslation: MissingTranslationStrategy.Error});
enum ɵAnimationRendererType
const enum ɵAnimationRendererType { Regular = 0, Delegated = 1,}
This enum is meant to be used by
ɵtype
properties of the different renderers implemented by the frameworkWe choose to not add
ɵtype
toRenderer2
to no expose it to the public API.
enum ɵAttributeMarker
const enum ɵAttributeMarker { ImplicitAttributes = -1, NamespaceURI = 0, Classes = 1, Styles = 2, Bindings = 3, Template = 4, ProjectAs = 5, I18n = 6,}
A set of marker values to be used in the attributes arrays. These markers indicate that some items are not regular attributes and the processing should be adapted accordingly.
member Bindings
Bindings = 3
Signals that the following attribute names were extracted from input or output bindings.
For example, given the following HTML:
<div moo="car" [foo]="exp" (bar)="doSth()">the generated code is:
var _c1 = ['moo', 'car', AttributeMarker.Bindings, 'foo', 'bar'];
member Classes
Classes = 1
Signals class declaration.
Each value following
Classes
designates a class name to include on the element. ## Example:Given:
<div class="foo bar baz">...</div>the generated code is:
var _c1 = [AttributeMarker.Classes, 'foo', 'bar', 'baz'];
member I18n
I18n = 6
Signals that the following attribute will be translated by runtime i18n
For example, given the following HTML:
<div moo="car" foo="value" i18n-foo [bar]="binding" i18n-bar>the generated code is:
var _c1 = ['moo', 'car', AttributeMarker.I18n, 'foo', 'bar'];
member ImplicitAttributes
ImplicitAttributes = -1
An implicit marker which indicates that the value in the array are of
attributeKey
,attributeValue
format.NOTE: This is implicit as it is the type when no marker is present in array. We indicate that it should not be present at runtime by the negative number.
member NamespaceURI
NamespaceURI = 0
Marker indicates that the following 3 values in the attributes array are: namespaceUri, attributeName, attributeValue in that order.
member ProjectAs
ProjectAs = 5
Signals that the following attribute is
ngProjectAs
and its value is a parsedCssSelector
.For example, given the following HTML:
<h1 attr="value" ngProjectAs="[title]">the generated code for the
element()
instruction would include:['attr', 'value', AttributeMarker.ProjectAs, ['', 'title', '']]
member Styles
Styles = 2
Signals style declaration.
Each pair of values following
Styles
designates a style name and value to include on the element. ## Example:Given:
<div style="width:100px; height:200px; color:red">...</div>the generated code is:
var _c1 = [AttributeMarker.Styles, 'width', '100px', 'height'. '200px', 'color', 'red'];
member Template
Template = 4
Signals that the following attribute names were hoisted from an inline-template declaration.
For example, given the following HTML:
<div *ngFor="let value of values; trackBy:trackBy" dirA [dirB]="value">the generated code for the
template()
instruction would include:['dirA', '', AttributeMarker.Bindings, 'dirB', AttributeMarker.Template, 'ngFor', 'ngForOf','ngForTrackBy', 'let-value']while the generated code for the
element()
instruction inside the template function would include:['dirA', '', AttributeMarker.Bindings, 'dirB']
enum ɵBypassType
const enum ɵBypassType { Url = 'URL', Html = 'HTML', ResourceUrl = 'ResourceURL', Script = 'Script', Style = 'Style',}
member Html
Html = 'HTML'
member ResourceUrl
ResourceUrl = 'ResourceURL'
member Script
Script = 'Script'
member Style
Style = 'Style'
member Url
Url = 'URL'
enum ɵCurrencyIndex
const enum ɵCurrencyIndex { Symbol = 0, SymbolNarrow = 1, NbOfDigits = 2,}
Index of each value in currency data (used to describe CURRENCIES_EN in currencies.ts)
enum ɵDeferBlockBehavior
enum ɵDeferBlockBehavior { Manual = 0, Playthrough = 1,}
Options for configuring defer blocks behavior.
member Manual
Manual = 0
Manual triggering mode for defer blocks. Provides control over when defer blocks render and which state they render.
member Playthrough
Playthrough = 1
Playthrough mode for defer blocks. This mode behaves like defer blocks would in a browser. This is the default behavior in test environments.
enum ɵDeferBlockState
enum ɵDeferBlockState { Placeholder = 0, Loading = 1, Complete = 2, Error = 3,}
Describes the current state of this defer block instance.
member Complete
Complete = 2
The main content block content is rendered
member Error
Error = 3
The error block content is rendered
member Loading
Loading = 1
The loading block content is rendered
member Placeholder
Placeholder = 0
The placeholder block content is rendered
enum ɵExtraLocaleDataIndex
const enum ɵExtraLocaleDataIndex { ExtraDayPeriodFormats = 0, ExtraDayPeriodStandalone = 1, ExtraDayPeriodsRules = 2,}
Index of each type of locale data from the extra locale data array
member ExtraDayPeriodFormats
ExtraDayPeriodFormats = 0
member ExtraDayPeriodsRules
ExtraDayPeriodsRules = 2
member ExtraDayPeriodStandalone
ExtraDayPeriodStandalone = 1
enum ɵLocaleDataIndex
enum ɵLocaleDataIndex { LocaleId = 0, DayPeriodsFormat = 1, DayPeriodsStandalone = 2, DaysFormat = 3, DaysStandalone = 4, MonthsFormat = 5, MonthsStandalone = 6, Eras = 7, FirstDayOfWeek = 8, WeekendRange = 9, DateFormat = 10, TimeFormat = 11, DateTimeFormat = 12, NumberSymbols = 13, NumberFormats = 14, CurrencyCode = 15, CurrencySymbol = 16, CurrencyName = 17, Currencies = 18, Directionality = 19, PluralCase = 20, ExtraData = 21,}
Index of each type of locale data from the locale data array
member Currencies
Currencies = 18
member CurrencyCode
CurrencyCode = 15
member CurrencyName
CurrencyName = 17
member CurrencySymbol
CurrencySymbol = 16
member DateFormat
DateFormat = 10
member DateTimeFormat
DateTimeFormat = 12
member DayPeriodsFormat
DayPeriodsFormat = 1
member DayPeriodsStandalone
DayPeriodsStandalone = 2
member DaysFormat
DaysFormat = 3
member DaysStandalone
DaysStandalone = 4
member Directionality
Directionality = 19
member Eras
Eras = 7
member ExtraData
ExtraData = 21
member FirstDayOfWeek
FirstDayOfWeek = 8
member LocaleId
LocaleId = 0
member MonthsFormat
MonthsFormat = 5
member MonthsStandalone
MonthsStandalone = 6
member NumberFormats
NumberFormats = 14
member NumberSymbols
NumberSymbols = 13
member PluralCase
PluralCase = 20
member TimeFormat
TimeFormat = 11
member WeekendRange
WeekendRange = 9
enum ɵNotificationSource
const enum ɵNotificationSource { MarkAncestorsForTraversal = 0, SetInput = 1, DeferBlockStateUpdate = 2, DebugApplyChanges = 3, MarkForCheck = 4, Listener = 5, CustomElement = 6, RenderHook = 7, ViewAttached = 8, ViewDetachedFromDOM = 9, AsyncAnimationsLoaded = 10, PendingTaskRemoved = 11, RootEffect = 12, ViewEffect = 13,}
member AsyncAnimationsLoaded
AsyncAnimationsLoaded = 10
member CustomElement
CustomElement = 6
member DebugApplyChanges
DebugApplyChanges = 3
member DeferBlockStateUpdate
DeferBlockStateUpdate = 2
member Listener
Listener = 5
member MarkAncestorsForTraversal
MarkAncestorsForTraversal = 0
member MarkForCheck
MarkForCheck = 4
member PendingTaskRemoved
PendingTaskRemoved = 11
member RenderHook
RenderHook = 7
member RootEffect
RootEffect = 12
member SetInput
SetInput = 1
member ViewAttached
ViewAttached = 8
member ViewDetachedFromDOM
ViewDetachedFromDOM = 9
member ViewEffect
ViewEffect = 13
enum ɵɵFactoryTarget
enum ɵɵFactoryTarget { Directive = 0, Component = 1, Injectable = 2, Pipe = 3, NgModule = 4,}
member Component
Component = 1
member Directive
Directive = 0
member Injectable
Injectable = 2
member NgModule
NgModule = 4
member Pipe
Pipe = 3
enum ɵProfilerEvent
const enum ɵProfilerEvent { TemplateCreateStart = 0, TemplateCreateEnd = 1, TemplateUpdateStart = 2, TemplateUpdateEnd = 3, LifecycleHookStart = 4, LifecycleHookEnd = 5, OutputStart = 6, OutputEnd = 7, BootstrapApplicationStart = 8, BootstrapApplicationEnd = 9, BootstrapComponentStart = 10, BootstrapComponentEnd = 11, ChangeDetectionStart = 12, ChangeDetectionEnd = 13, ChangeDetectionSyncStart = 14, ChangeDetectionSyncEnd = 15, AfterRenderHooksStart = 16, AfterRenderHooksEnd = 17, ComponentStart = 18, ComponentEnd = 19, DeferBlockStateStart = 20, DeferBlockStateEnd = 21, DynamicComponentStart = 22, DynamicComponentEnd = 23, HostBindingsUpdateStart = 24, HostBindingsUpdateEnd = 25,}
Profiler events is an enum used by the profiler to distinguish between different calls of user code invoked throughout the application lifecycle.
member AfterRenderHooksEnd
AfterRenderHooksEnd = 17
Corresponds to the point in time after Angular executed after render hooks.
member AfterRenderHooksStart
AfterRenderHooksStart = 16
Corresponds to the point in time just before Angular executes after render hooks.
member BootstrapApplicationEnd
BootstrapApplicationEnd = 9
Corresponds to the point in time after application bootstrap.
member BootstrapApplicationStart
BootstrapApplicationStart = 8
Corresponds to the point in time just before application bootstrap.
member BootstrapComponentEnd
BootstrapComponentEnd = 11
Corresponds to the point in time after root component bootstrap.
member BootstrapComponentStart
BootstrapComponentStart = 10
Corresponds to the point in time just before root component bootstrap.
member ChangeDetectionEnd
ChangeDetectionEnd = 13
Corresponds to the point in time after Angular ended a change detection tick.
member ChangeDetectionStart
ChangeDetectionStart = 12
Corresponds to the point in time just before Angular starts a change detection tick.
member ChangeDetectionSyncEnd
ChangeDetectionSyncEnd = 15
Corresponds to the point in time after Angular ended a synchronization pass.
member ChangeDetectionSyncStart
ChangeDetectionSyncStart = 14
Corresponds to the point in time just before Angular starts a new synchronization pass of change detection tick.
member ComponentEnd
ComponentEnd = 19
Corresponds to the point in time after Angular finished processing a component.
member ComponentStart
ComponentStart = 18
Corresponds to the point in time just before Angular starts processing a component (create or update).
member DeferBlockStateEnd
DeferBlockStateEnd = 21
Corresponds to the point in time after a defer block transitioned between states.
member DeferBlockStateStart
DeferBlockStateStart = 20
Corresponds to the point in time just before a defer block transitions between states.
member DynamicComponentEnd
DynamicComponentEnd = 23
Corresponds to the point in time after a a component instance is created dynamically.
member DynamicComponentStart
DynamicComponentStart = 22
Corresponds to the point in time just before a component instance is created dynamically.
member HostBindingsUpdateEnd
HostBindingsUpdateEnd = 25
Corresponds to the point in time after the runtime has called the host bindings function of a directive.
member HostBindingsUpdateStart
HostBindingsUpdateStart = 24
Corresponds to the point in time before the runtime has called the host bindings function of a directive.
member LifecycleHookEnd
LifecycleHookEnd = 5
Corresponds to the point in time after the runtime has called a lifecycle hook of a component or directive.
member LifecycleHookStart
LifecycleHookStart = 4
Corresponds to the point in time before the runtime has called a lifecycle hook of a component or directive.
member OutputEnd
OutputEnd = 7
Corresponds to the point in time after the runtime has evaluated an expression associated with an event or an output.
member OutputStart
OutputStart = 6
Corresponds to the point in time before the runtime has evaluated an expression associated with an event or an output.
member TemplateCreateEnd
TemplateCreateEnd = 1
Corresponds to the point in time after the runtime has called the template function of a component with
RenderFlags.Create
.
member TemplateCreateStart
TemplateCreateStart = 0
Corresponds to the point in time before the runtime has called the template function of a component with
RenderFlags.Create
.
member TemplateUpdateEnd
TemplateUpdateEnd = 3
Corresponds to the point in time after the runtime has called the template function of a component with
RenderFlags.Update
.
member TemplateUpdateStart
TemplateUpdateStart = 2
Corresponds to the point in time before the runtime has called the template function of a component with
RenderFlags.Update
.
enum ɵRenderFlags
const enum ɵRenderFlags { Create = 1, Update = 2,}
Flags passed into template functions to determine which blocks (i.e. creation, update) should be executed.
Typically, a template runs both the creation block and the update block on initialization and subsequent runs only execute the update block. However, dynamically created views require that the creation block be executed separately from the update block (for backwards compat).
enum ɵRuntimeErrorCode
const enum ɵRuntimeErrorCode { EXPRESSION_CHANGED_AFTER_CHECKED = -100, RECURSIVE_APPLICATION_REF_TICK = 101, INFINITE_CHANGE_DETECTION = 103, CYCLIC_DI_DEPENDENCY = -200, PROVIDER_NOT_FOUND = -201, INVALID_FACTORY_DEPENDENCY = 202, MISSING_INJECTION_CONTEXT = -203, INVALID_INJECTION_TOKEN = 204, INJECTOR_ALREADY_DESTROYED = 205, PROVIDER_IN_WRONG_CONTEXT = 207, MISSING_INJECTION_TOKEN = 208, INVALID_MULTI_PROVIDER = -209, MISSING_DOCUMENT = 210, MULTIPLE_COMPONENTS_MATCH = -300, EXPORT_NOT_FOUND = -301, PIPE_NOT_FOUND = -302, UNKNOWN_BINDING = 303, UNKNOWN_ELEMENT = 304, TEMPLATE_STRUCTURE_ERROR = 305, INVALID_EVENT_BINDING = 306, HOST_DIRECTIVE_UNRESOLVABLE = 307, HOST_DIRECTIVE_NOT_STANDALONE = 308, DUPLICATE_DIRECTIVE = 309, HOST_DIRECTIVE_COMPONENT = 310, HOST_DIRECTIVE_UNDEFINED_BINDING = 311, HOST_DIRECTIVE_CONFLICTING_ALIAS = 312, MULTIPLE_MATCHING_PIPES = 313, UNINITIALIZED_LET_ACCESS = 314, MULTIPLE_PLATFORMS = 400, PLATFORM_NOT_FOUND = 401, MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP = 402, BOOTSTRAP_COMPONENTS_NOT_FOUND = -403, PLATFORM_ALREADY_DESTROYED = 404, ASYNC_INITIALIZERS_STILL_RUNNING = 405, APPLICATION_REF_ALREADY_DESTROYED = 406, RENDERER_NOT_FOUND = 407, PROVIDED_BOTH_ZONE_AND_ZONELESS = 408, HYDRATION_NODE_MISMATCH = -500, HYDRATION_MISSING_SIBLINGS = -501, HYDRATION_MISSING_NODE = -502, UNSUPPORTED_PROJECTION_DOM_NODES = -503, INVALID_SKIP_HYDRATION_HOST = -504, MISSING_HYDRATION_ANNOTATIONS = -505, HYDRATION_STABLE_TIMEDOUT = -506, MISSING_SSR_CONTENT_INTEGRITY_MARKER = -507, MISCONFIGURED_INCREMENTAL_HYDRATION = 508, SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT = 600, REQUIRE_SYNC_WITHOUT_SYNC_EMIT = 601, ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT = -602, INVALID_I18N_STRUCTURE = 700, MISSING_LOCALE_DATA = 701, DEFER_LOADING_FAILED = -750, DEFER_IN_HMR_MODE = -751, IMPORT_PROVIDERS_FROM_STANDALONE = 800, INVALID_DIFFER_INPUT = 900, NO_SUPPORTING_DIFFER_FACTORY = 901, VIEW_ALREADY_ATTACHED = 902, INVALID_INHERITANCE = 903, UNSAFE_VALUE_IN_RESOURCE_URL = 904, UNSAFE_VALUE_IN_SCRIPT = 905, MISSING_GENERATED_DEF = 906, TYPE_IS_NOT_STANDALONE = 907, MISSING_ZONEJS = 908, UNEXPECTED_ZONE_STATE = 909, UNSAFE_IFRAME_ATTRS = -910, VIEW_ALREADY_DESTROYED = 911, COMPONENT_ID_COLLISION = -912, IMAGE_PERFORMANCE_WARNING = -913, UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE = 914, REQUIRED_INPUT_NO_VALUE = -950, REQUIRED_QUERY_NO_VALUE = -951, REQUIRED_MODEL_NO_VALUE = 952, OUTPUT_REF_DESTROYED = 953, LOOP_TRACK_DUPLICATE_KEYS = -955, LOOP_TRACK_RECREATE = -956, RUNTIME_DEPS_INVALID_IMPORTED_TYPE = 980, RUNTIME_DEPS_ORPHAN_COMPONENT = 981,}
The list of error codes used in runtime code of the
core
package. Reserved error code range: 100-999.Note: the minus sign denotes the fact that a particular code has a detailed guide on angular.io. This extra annotation is needed to avoid introducing a separate set to store error codes which have guides, which might leak into runtime code.
Full list of available error guides can be found at https://angular.dev/errors.
Error code ranges per package: - core (this package): 100-999 - forms: 1000-1999 - common: 2000-2999 - animations: 3000-3999 - router: 4000-4999 - platform-browser: 5000-5500
member APPLICATION_REF_ALREADY_DESTROYED
APPLICATION_REF_ALREADY_DESTROYED = 406
member ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT
ASSERTION_NOT_INSIDE_REACTIVE_CONTEXT = -602
member ASYNC_INITIALIZERS_STILL_RUNNING
ASYNC_INITIALIZERS_STILL_RUNNING = 405
member BOOTSTRAP_COMPONENTS_NOT_FOUND
BOOTSTRAP_COMPONENTS_NOT_FOUND = -403
member COMPONENT_ID_COLLISION
COMPONENT_ID_COLLISION = -912
member CYCLIC_DI_DEPENDENCY
CYCLIC_DI_DEPENDENCY = -200
member DEFER_IN_HMR_MODE
DEFER_IN_HMR_MODE = -751
member DEFER_LOADING_FAILED
DEFER_LOADING_FAILED = -750
member DUPLICATE_DIRECTIVE
DUPLICATE_DIRECTIVE = 309
member EXPORT_NOT_FOUND
EXPORT_NOT_FOUND = -301
member EXPRESSION_CHANGED_AFTER_CHECKED
EXPRESSION_CHANGED_AFTER_CHECKED = -100
member HOST_DIRECTIVE_COMPONENT
HOST_DIRECTIVE_COMPONENT = 310
member HOST_DIRECTIVE_CONFLICTING_ALIAS
HOST_DIRECTIVE_CONFLICTING_ALIAS = 312
member HOST_DIRECTIVE_NOT_STANDALONE
HOST_DIRECTIVE_NOT_STANDALONE = 308
member HOST_DIRECTIVE_UNDEFINED_BINDING
HOST_DIRECTIVE_UNDEFINED_BINDING = 311
member HOST_DIRECTIVE_UNRESOLVABLE
HOST_DIRECTIVE_UNRESOLVABLE = 307
member HYDRATION_MISSING_NODE
HYDRATION_MISSING_NODE = -502
member HYDRATION_MISSING_SIBLINGS
HYDRATION_MISSING_SIBLINGS = -501
member HYDRATION_NODE_MISMATCH
HYDRATION_NODE_MISMATCH = -500
member HYDRATION_STABLE_TIMEDOUT
HYDRATION_STABLE_TIMEDOUT = -506
member IMAGE_PERFORMANCE_WARNING
IMAGE_PERFORMANCE_WARNING = -913
member IMPORT_PROVIDERS_FROM_STANDALONE
IMPORT_PROVIDERS_FROM_STANDALONE = 800
member INFINITE_CHANGE_DETECTION
INFINITE_CHANGE_DETECTION = 103
member INJECTOR_ALREADY_DESTROYED
INJECTOR_ALREADY_DESTROYED = 205
member INVALID_DIFFER_INPUT
INVALID_DIFFER_INPUT = 900
member INVALID_EVENT_BINDING
INVALID_EVENT_BINDING = 306
member INVALID_FACTORY_DEPENDENCY
INVALID_FACTORY_DEPENDENCY = 202
member INVALID_I18N_STRUCTURE
INVALID_I18N_STRUCTURE = 700
member INVALID_INHERITANCE
INVALID_INHERITANCE = 903
member INVALID_INJECTION_TOKEN
INVALID_INJECTION_TOKEN = 204
member INVALID_MULTI_PROVIDER
INVALID_MULTI_PROVIDER = -209
member INVALID_SKIP_HYDRATION_HOST
INVALID_SKIP_HYDRATION_HOST = -504
member LOOP_TRACK_DUPLICATE_KEYS
LOOP_TRACK_DUPLICATE_KEYS = -955
member LOOP_TRACK_RECREATE
LOOP_TRACK_RECREATE = -956
member MISCONFIGURED_INCREMENTAL_HYDRATION
MISCONFIGURED_INCREMENTAL_HYDRATION = 508
member MISSING_DOCUMENT
MISSING_DOCUMENT = 210
member MISSING_GENERATED_DEF
MISSING_GENERATED_DEF = 906
member MISSING_HYDRATION_ANNOTATIONS
MISSING_HYDRATION_ANNOTATIONS = -505
member MISSING_INJECTION_CONTEXT
MISSING_INJECTION_CONTEXT = -203
member MISSING_INJECTION_TOKEN
MISSING_INJECTION_TOKEN = 208
member MISSING_LOCALE_DATA
MISSING_LOCALE_DATA = 701
member MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP
MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP = 402
member MISSING_SSR_CONTENT_INTEGRITY_MARKER
MISSING_SSR_CONTENT_INTEGRITY_MARKER = -507
member MISSING_ZONEJS
MISSING_ZONEJS = 908
member MULTIPLE_COMPONENTS_MATCH
MULTIPLE_COMPONENTS_MATCH = -300
member MULTIPLE_MATCHING_PIPES
MULTIPLE_MATCHING_PIPES = 313
member MULTIPLE_PLATFORMS
MULTIPLE_PLATFORMS = 400
member NO_SUPPORTING_DIFFER_FACTORY
NO_SUPPORTING_DIFFER_FACTORY = 901
member OUTPUT_REF_DESTROYED
OUTPUT_REF_DESTROYED = 953
member PIPE_NOT_FOUND
PIPE_NOT_FOUND = -302
member PLATFORM_ALREADY_DESTROYED
PLATFORM_ALREADY_DESTROYED = 404
member PLATFORM_NOT_FOUND
PLATFORM_NOT_FOUND = 401
member PROVIDED_BOTH_ZONE_AND_ZONELESS
PROVIDED_BOTH_ZONE_AND_ZONELESS = 408
member PROVIDER_IN_WRONG_CONTEXT
PROVIDER_IN_WRONG_CONTEXT = 207
member PROVIDER_NOT_FOUND
PROVIDER_NOT_FOUND = -201
member RECURSIVE_APPLICATION_REF_TICK
RECURSIVE_APPLICATION_REF_TICK = 101
member RENDERER_NOT_FOUND
RENDERER_NOT_FOUND = 407
member REQUIRE_SYNC_WITHOUT_SYNC_EMIT
REQUIRE_SYNC_WITHOUT_SYNC_EMIT = 601
member REQUIRED_INPUT_NO_VALUE
REQUIRED_INPUT_NO_VALUE = -950
member REQUIRED_MODEL_NO_VALUE
REQUIRED_MODEL_NO_VALUE = 952
member REQUIRED_QUERY_NO_VALUE
REQUIRED_QUERY_NO_VALUE = -951
member RUNTIME_DEPS_INVALID_IMPORTED_TYPE
RUNTIME_DEPS_INVALID_IMPORTED_TYPE = 980
member RUNTIME_DEPS_ORPHAN_COMPONENT
RUNTIME_DEPS_ORPHAN_COMPONENT = 981
member SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT
SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT = 600
member TEMPLATE_STRUCTURE_ERROR
TEMPLATE_STRUCTURE_ERROR = 305
member TYPE_IS_NOT_STANDALONE
TYPE_IS_NOT_STANDALONE = 907
member UNEXPECTED_ZONE_STATE
UNEXPECTED_ZONE_STATE = 909
member UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE
UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE = 914
member UNINITIALIZED_LET_ACCESS
UNINITIALIZED_LET_ACCESS = 314
member UNKNOWN_BINDING
UNKNOWN_BINDING = 303
member UNKNOWN_ELEMENT
UNKNOWN_ELEMENT = 304
member UNSAFE_IFRAME_ATTRS
UNSAFE_IFRAME_ATTRS = -910
member UNSAFE_VALUE_IN_RESOURCE_URL
UNSAFE_VALUE_IN_RESOURCE_URL = 904
member UNSAFE_VALUE_IN_SCRIPT
UNSAFE_VALUE_IN_SCRIPT = 905
member UNSUPPORTED_PROJECTION_DOM_NODES
UNSUPPORTED_PROJECTION_DOM_NODES = -503
member VIEW_ALREADY_ATTACHED
VIEW_ALREADY_ATTACHED = 902
member VIEW_ALREADY_DESTROYED
VIEW_ALREADY_DESTROYED = 911
enum ɵTracingAction
enum ɵTracingAction { CHANGE_DETECTION = 0, AFTER_NEXT_RENDER = 1,}
Actions that are supported by the tracing framework.
member AFTER_NEXT_RENDER
AFTER_NEXT_RENDER = 1
member CHANGE_DETECTION
CHANGE_DETECTION = 0
enum RendererStyleFlags2
enum RendererStyleFlags2 { Important = 1, DashCase = 2,}
Flags for renderer-specific style modifiers.
enum ResourceStatus
enum ResourceStatus { Idle = 0, Error = 1, Loading = 2, Reloading = 3, Resolved = 4, Local = 5,}
Status of a
Resource
.Modifiers
@experimental
member Error
Error = 1
Loading failed with an error.
value()
will beundefined
.
member Idle
Idle = 0
The resource has no valid request and will not perform any loading.
value()
will beundefined
.
member Loading
Loading = 2
The resource is currently loading a new value as a result of a change in its
request
.value()
will beundefined
.
member Local
Local = 5
The resource's value was set locally via
.set()
or.update()
.
member Reloading
Reloading = 3
The resource is currently reloading a fresh value for the same request.
value()
will continue to return the previously fetched value during the reloading operation.
member Resolved
Resolved = 4
Loading has completed and the resource has the value returned from the loader.
enum SecurityContext
enum SecurityContext { NONE = 0, HTML = 1, STYLE = 2, SCRIPT = 3, URL = 4, RESOURCE_URL = 5,}
A SecurityContext marks a location that has dangerous security implications, e.g. a DOM property like
innerHTML
that could cause Cross Site Scripting (XSS) security bugs when improperly handled.See DomSanitizer for more details on security in Angular applications.
enum ViewEncapsulation
enum ViewEncapsulation { Emulated = 0, None = 2, ShadowDom = 3,}
Defines the CSS styles encapsulation policies for the decorator's
encapsulation
option.See .
### Example
member Emulated
Emulated = 0
Emulates a native Shadow DOM encapsulation behavior by adding a specific attribute to the component's host element and applying the same attribute to all the CSS selectors provided via or .
This is the default option.
member None
None = 2
Doesn't provide any sort of CSS style encapsulation, meaning that all the styles provided via or are applicable to any HTML element of the application regardless of their host Component.
member ShadowDom
ShadowDom = 3
Uses the browser's native Shadow DOM API to encapsulate CSS styles, meaning that it creates a ShadowRoot for the component's host element which is then used to encapsulate all the Component's styling.
Type Aliases
type CompilerOptions
type CompilerOptions = { defaultEncapsulation?: ViewEncapsulation$1; providers?: StaticProvider[]; preserveWhitespaces?: boolean;};
Options for creating a compiler.
type ContentChild
type ContentChild = Query;
Type of the ContentChild metadata.
type ContentChildren
type ContentChildren = Query;
Type of the ContentChildren metadata.
type EffectCleanupFn
type EffectCleanupFn = () => void;
An effect can, optionally, register a cleanup function. If registered, the cleanup is executed before the next effect run. The cleanup function makes it possible to "cancel" any work that the previous effect run might have started.
type EffectCleanupRegisterFn
type EffectCleanupRegisterFn = (cleanupFn: EffectCleanupFn) => void;
A callback passed to the effect function that makes it possible to register cleanup logic.
type EnvironmentProviders
type EnvironmentProviders = { ɵbrand: 'EnvironmentProviders';};
Encapsulated
Provider
s that are only accepted during creation of anEnvironmentInjector
(e.g. in anNgModule
).Using this wrapper type prevents providers which are only designed to work in application/environment injectors from being accidentally included in
@Component.providers
and ending up in a component injector.This wrapper type prevents access to the
Provider
s inside.See Also
type ImportedNgModuleProviders
type ImportedNgModuleProviders = EnvironmentProviders;
Providers that were imported from NgModules via the
importProvidersFrom
function.These providers are meant for use in an application injector (or other environment injectors) and should not be used in component injectors.
This type cannot be directly implemented. It's returned from the
importProvidersFrom
function and serves to prevent the extracted NgModule providers from being used in the wrong contexts.See Also
Deprecated
replaced by
EnvironmentProviders
type ImportProvidersSource
type ImportProvidersSource = | Type$1<unknown> | ModuleWithProviders<unknown> | Array<ImportProvidersSource>;
A source of providers for the
importProvidersFrom
function.
type InjectableProvider
type InjectableProvider = | ValueSansProvider | ExistingSansProvider | StaticClassSansProvider | ConstructorSansProvider | FactorySansProvider | ClassSansProvider;
Injectable providers used in
@Injectable
decorator.
type InputOptionsWithoutTransform
type InputOptionsWithoutTransform<T> = Omit<InputOptions<T, T>, 'transform'> & { transform?: undefined;};
Signal input options without the transform option.
type InputOptionsWithTransform
type InputOptionsWithTransform<T, TransformT> = Required< Pick<InputOptions<T, TransformT>, 'transform'>> & InputOptions<T, TransformT>;
Signal input options with the transform option required.
type NgIterable
type NgIterable<T> = Array<T> | Iterable<T>;
A type describing supported iterable types.
type ɵCssSelectorList
type CssSelectorList = CssSelector[];
A list of CssSelectors.
A directive or component can have multiple selectors. This type is used for directive defs so any of the selectors in the list will match that directive.
Original: 'form, [ngForm]' Parsed: [['form'], ['', 'ngForm', '']]
type ɵFirstAvailable
type ɵFirstAvailable<T extends unknown[]> = T extends [infer H, ...infer R] ? [H] extends [never] ? ɵFirstAvailable<R> : [H] : [];
An argument list containing the first non-never type in the given type array, or an empty argument list if there are no non-never types in the type array.
type ɵFirstAvailableSignal
type ɵFirstAvailableSignal<T extends unknown[]> = T extends [infer H, ...infer R] ? [H] extends [never] ? ɵFirstAvailableSignal<R> : [Signal<H>] : [];
An argument list containing the first non-never type in the given type array, or an empty argument list if there are no non-never types in the type array.
type ɵGlobalDevModeUtils
type GlobalDevModeUtils = { [GLOBAL_PUBLISH_EXPANDO_KEY]: typeof globalUtilsFunctions;};
Default debug tools available under
window.ng
.
type ɵHydratedNode
type HydratedNode = { [HYDRATION_INFO_KEY]?: HydrationInfo;};
type ɵHydrationInfo
type HydrationInfo = | { status: HydrationStatus.Hydrated | HydrationStatus.Skipped; } | { status: HydrationStatus.Mismatched; actualNodeDetails: string | null; expectedNodeDetails: string | null; };
type ɵImageConfig
type ImageConfig = { breakpoints?: number[]; placeholderResolution?: number; disableImageSizeWarning?: boolean; disableImageLazyLoadWarning?: boolean;};
A configuration object for the image-related options. Contains: - breakpoints: An array of integer breakpoints used to generate srcsets for responsive images. - disableImageSizeWarning: A boolean value. Setting this to true will disable console warnings about oversized images. - disableImageLazyLoadWarning: A boolean value. Setting this to true will disable console warnings about LCP images configured with
loading="lazy"
. Learn more about the responsive image configuration in [the NgOptimizedImage guide](guide/image-optimization). Learn more about image warning options in [the related error page](errors/NG0913).
type ɵNavigationTypeString
type NavigationTypeString = 'reload' | 'push' | 'replace' | 'traverse';
type ɵɵComponentDeclaration
type ɵɵComponentDeclaration< T, Selector extends String, ExportAs extends string[], InputMap extends { [key: string]: | string | { alias: string | null; required: boolean; }; }, OutputMap extends { [key: string]: string; }, QueryFields extends string[], NgContentSelectors extends string[], IsStandalone extends boolean = false, HostDirectives = never, IsSignal extends boolean = false> = unknown;
type ɵɵDirectiveDeclaration
type ɵɵDirectiveDeclaration< T, Selector extends string, ExportAs extends string[], InputMap extends { [key: string]: | string | { alias: string | null; required: boolean; isSignal?: boolean; }; }, OutputMap extends { [key: string]: string; }, QueryFields extends string[], NgContentSelectors extends never = never, IsStandalone extends boolean = false, HostDirectives = never, IsSignal extends boolean = false> = unknown;
type ɵɵFactoryDeclaration
type ɵɵFactoryDeclaration<T, CtorDependencies extends CtorDependency[]> = unknown;
type ɵɵInjectorDeclaration
type ɵɵInjectorDeclaration<T> = unknown;
type ɵɵNgModuleDeclaration
type ɵɵNgModuleDeclaration<T, Declarations, Imports, Exports> = unknown;
type ɵɵPipeDeclaration
type ɵɵPipeDeclaration< T, Name extends string, IsStandalone extends boolean = false> = unknown;
type ɵUnwrapDirectiveSignalInputs
type ɵUnwrapDirectiveSignalInputs<Dir, Fields extends keyof Dir> = { [P in Fields]: ɵUnwrapInputSignalWriteType<Dir[P]>;};
Unwraps all
InputSignal
/InputSignalWithTransform
class fields of the given directive.
type ɵWritable
type Writable<T> = { -readonly [K in keyof T]: T[K];};
Returns a writable type version of type.
USAGE: Given:
interface Person {readonly name: string}We would like to get a read/write version of
Person
.const WritablePerson = Writable<Person>;The result is that you can do:
const readonlyPerson: Person = {name: 'Marry'};readonlyPerson.name = 'John'; // TypeError(readonlyPerson as WritablePerson).name = 'John'; // OK// Error: Correctly detects that `Person` did not have `age` property.(readonlyPerson as WritablePerson).age = 30;
type Predicate
type Predicate<T> = (value: T) => boolean;
A boolean-valued function over a value, possibly including context information regarding that value's position in an array.
type Provider
type Provider = | TypeProvider | ValueProvider | ClassProvider | ConstructorProvider | ExistingProvider | FactoryProvider | any[];
Describes how the
Injector
should be configured.See Also
[Dependency Injection Guide](guide/di/dependency-injection.
type ProviderToken
type ProviderToken<T> = Type$1<T> | AbstractType<T> | InjectionToken<T>;
Token that can be used to retrieve an instance from an injector or through a query.
type ResourceLoader
type ResourceLoader<T, R> = (param: ResourceLoaderParams<R>) => PromiseLike<T>;
Loading function for a
Resource
.Modifiers
@experimental
type ResourceOptions
type ResourceOptions<T, R> = | PromiseResourceOptions<T, R> | StreamingResourceOptions<T, R>;
Modifiers
@experimental
type ResourceStreamingLoader
type ResourceStreamingLoader<T, R> = ( param: ResourceLoaderParams<R>) => PromiseLike<Signal<ResourceStreamItem<T>>>;
Streaming loader for a
Resource
.Modifiers
@experimental
type ResourceStreamItem
type ResourceStreamItem<T> = | { value: T; } | { error: unknown; };
Modifiers
@experimental
type Signal
type Signal<T> = (() => T) & { [SIGNAL]: unknown;};
A reactive value which notifies consumers of any changes.
Signals are functions which returns their current value. To access the current value of a signal, call it.
Ordinary values can be turned into
Signal
s with thesignal
function.
type StateKey
type StateKey<T> = string & { __not_a_string: never; __value_type?: T;};
A type-safe key to use with
TransferState
.Example:
const COUNTER_KEY = makeStateKey<number>('counter');let value = 10;transferState.set(COUNTER_KEY, value);
type StaticProvider
type StaticProvider = | ValueProvider | ExistingProvider | StaticClassProvider | ConstructorProvider | FactoryProvider | any[];
Describes how an
Injector
should be configured as static (that is, without reflection). A static provider provides tokens to an injector for various types of dependencies.See Also
[Dependency Injection Guide](guide/di/dependency-injection-providers).
type ValueEqualityFn
type ValueEqualityFn<T> = (a: T, b: T) => boolean;
A comparison function which can determine if two values are equal.
type ViewChild
type ViewChild = Query;
Type of the ViewChild metadata.
type ViewChildren
type ViewChildren = Query;
Type of the ViewChildren metadata.
Namespaces
namespace global
namespace global {}
variable ngDevMode
const ngDevMode: NgDevModePerfCounters;
Values of ngDevMode Depending on the current state of the application, ngDevMode may have one of several values.
For convenience, the “truthy” value which enables dev mode is also an object which contains Angular’s performance counters. This is not necessary, but cuts down on boilerplate for the perf counters.
ngDevMode may also be set to false. This can happen in one of a few ways: - The user explicitly sets
window.ngDevMode = false
somewhere in their app. - The user callsenableProdMode()
. - The URL contains angDevMode=false
text. Finally, ngDevMode may not have been defined at all.
variable ngHmrMode
var ngHmrMode: boolean;
Indicates whether HMR is enabled for the application.
ngHmrMode
is a global flag set by Angular's CLI.Remarks
- **Internal Angular Flag**: This is an *internal* Angular flag (not a public API), avoid relying on it in application code. - **Avoid Direct Use**: This variable is intended for runtime configuration; it should not be accessed directly in application code.
variable ngI18nClosureMode
const ngI18nClosureMode: boolean;
variable ngJitMode
const ngJitMode: boolean;
variable ngServerMode
var ngServerMode: boolean;
Indicates whether the application is operating in server-rendering mode.
ngServerMode
is a global flag set by Angular's server-side rendering mechanisms, typically configured byprovideServerRendering
andplatformServer
during runtime.Remarks
- **Internal Angular Flag**: This is an *internal* Angular flag (not a public API), avoid relying on it in application code. - **Avoid Direct Use**: This variable is intended for runtime configuration; it should not be accessed directly in application code.
interface Element
interface Element {}
interface NgDevModePerfCounters
interface NgDevModePerfCounters {}
property componentsSkippedHydration
componentsSkippedHydration: number;
property deferBlocksWithIncrementalHydration
deferBlocksWithIncrementalHydration: number;
property dehydratedViewsCleanupRuns
dehydratedViewsCleanupRuns: number;
property dehydratedViewsRemoved
dehydratedViewsRemoved: number;
property firstCreatePass
firstCreatePass: number;
property hydratedComponents
hydratedComponents: number;
property hydratedNodes
hydratedNodes: number;
property namedConstructors
namedConstructors: boolean;
property rendererAddClass
rendererAddClass: number;
property rendererAddEventListener
rendererAddEventListener: number;
property rendererAppendChild
rendererAppendChild: number;
property rendererCreateComment
rendererCreateComment: number;
property rendererCreateElement
rendererCreateElement: number;
property rendererCreateTextNode
rendererCreateTextNode: number;
property rendererDestroy
rendererDestroy: number;
property rendererDestroyNode
rendererDestroyNode: number;
property rendererInsertBefore
rendererInsertBefore: number;
property rendererMoveNode
rendererMoveNode: number;
property rendererRemoveAttribute
rendererRemoveAttribute: number;
property rendererRemoveClass
rendererRemoveClass: number;
property rendererRemoveNode
rendererRemoveNode: number;
property rendererRemoveStyle
rendererRemoveStyle: number;
property rendererSetAttribute
rendererSetAttribute: number;
property rendererSetClassName
rendererSetClassName: number;
property rendererSetProperty
rendererSetProperty: number;
property rendererSetStyle
rendererSetStyle: number;
property rendererSetText
rendererSetText: number;
property tNode
tNode: number;
property tView
tView: number;
Package Files (4)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular/core
.
- Markdown[](https://www.jsdocs.io/package/@angular/core)
- HTML<a href="https://www.jsdocs.io/package/@angular/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 26541 ms. - Missing or incorrect documentation? Open an issue for this package.