@angular/core 17.3.1 → 17.3.3

package/fesm2022/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.3.1
+ * @license Angular v17.3.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -6664,25 +6664,47 @@ function getOutputDestroyRef(ref) {
 }
 
 /**
- * The `output` function allows declaration of outputs in directives and
- * components.
+ * The `output` function allows declaration of Angular outputs in
+ * directives and components.
  *
- * Initializes an output that can emit values to consumers of your
- * directive/component.
+ * 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 using `OutputRef#subscribe`.
  *
  * @usageNotes
- * Initialize an output in your directive by declaring a
- * class field and initializing it with the `output()` function.
+ *
+ * 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`.
  *
  * ```ts
- * @Directive({..})
+ * @Directive({
+ *   ...
+ * })
  * export class MyDir {
- *   nameChange = output<string>();     // OutputEmitterRef<string>
- *   onClick = output();                // OutputEmitterRef<void>
+ *   nameChange = output<string>();    // OutputEmitterRef<string>
+ *   onClick    = output();            // OutputEmitterRef<void>
+ * }
+ * ```
+ *
+ * You can emit values to consumers of your directive, by using
+ * the `emit` method from `OutputEmitterRef`.
+ *
+ * ```ts
+ * updateName(newName: string): void {
+ *   this.nameChange.emit(newName);
  * }
  * ```
  *
  * @developerPreview
+ * @initializerApiFunction {"showTypesInSignaturePreview": true}
  */
 function output(opts) {
     ngDevMode && assertInInjectionContext(output);
@@ -6698,29 +6720,52 @@ function inputRequiredFunction(opts) {
     return createInputSignal(REQUIRED_UNSET_VALUE, opts);
 }
 /**
- * The `input` function allows declaration of inputs in directives and
- * components.
+ * The `input` function allows declaration of Angular inputs in directives
+ * and components.
  *
- * Initializes an input with an initial value. If no explicit value
- * is specified, Angular will use `undefined`.
+ * There are two variants of inputs that can be declared:
  *
- * Consider using `input.required` for inputs that don't need an
- * initial value.
+ *   1. **Optional inputs** with an initial value.
+ *   2. **Required inputs** that consumers need to set.
+ *
+ * By default, the `input` function will declare optional inputs that
+ * always have an initial value. Required inputs can be declared
+ * using the `input.required()` function.
+ *
+ * Inputs are signals. The values of an input are exposed as a `Signal`.
+ * The signal always holds the latest value of the input that is bound
+ * from the parent.
  *
  * @usageNotes
- * Initialize an input in your directive or component by declaring a
- * class field and initializing it with the `input()` function.
+ * 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` or `input.required`.
  *
  * ```ts
- * @Directive({..})
- * export class MyDir {
- *   firstName = input<string>();            // string|undefined
- *   lastName = input.required<string>();    // string
- *   age = input(0);                         // number
+ * @Component({
+ *   ...
+ * })
+ * export class UserProfileComponent {
+ *   firstName = input<string>();             // Signal<string|undefined>
+ *   lastName  = input.required<string>();    // Signal<string>
+ *   age       = input(0)                     // Signal<number>
  * }
  * ```
  *
+ * Inside your component template, you can display values of the inputs
+ * by calling the signal.
+ *
+ * ```html
+ * <span>{{firstName()}}</span>
+ * ```
+ *
  * @developerPreview
+ * @initializerApiFunction
  */
 const input = (() => {
     // Note: This may be considered a side-effect, but nothing will depend on
@@ -15977,7 +16022,7 @@ function createRootComponent(componentView, rootComponentDef, rootDirectives, ho
 function setRootNodeAttributes(hostRenderer, componentDef, hostRNode, rootSelectorOrNode) {
     if (rootSelectorOrNode) {
         // The placeholder will be replaced with the actual version at build time.
-        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '17.3.1']);
+        setUpAttributes(hostRenderer, hostRNode, ['ng-version', '17.3.3']);
     }
     else {
         // If host element is created as a part of this function call (i.e. `rootSelectorOrNode`
@@ -17030,6 +17075,7 @@ function viewChildRequiredFn(locator, opts) {
  * ```
  *
  * @developerPreview
+ * @initializerApiFunction
  */
 const viewChild = (() => {
     // Note: This may be considered a side-effect, but nothing will depend on
@@ -17054,6 +17100,9 @@ const viewChild = (() => {
  *   divEls = viewChildren<ElementRef>('el');   // Signal<ReadonlyArray<ElementRef>>
  * }
  * ```
+ *
+ * @initializerApiFunction
+ * @developerPreview
  */
 function viewChildren(locator, opts) {
     ngDevMode && assertInInjectionContext(viewChildren);
@@ -17084,6 +17133,9 @@ function contentChildRequiredFn(locator, opts) {
  *   headerRequired = contentChild.required(MyHeader);            // Signal<MyHeader>
  * }
  * ```
+ *
+ * @initializerApiFunction
+ * @developerPreview
  */
 const contentChild = (() => {
     // Note: This may be considered a side-effect, but nothing will depend on
@@ -17108,6 +17160,9 @@ const contentChild = (() => {
  *   headerEl = contentChildren<ElementRef>('h');   // Signal<ReadonlyArray<ElementRef>>
  * }
  * ```
+ *
+ * @initializerApiFunction
+ * @developerPreview
  */
 function contentChildren(locator, opts) {
     return createMultiResultQuerySignalFn();
@@ -17165,31 +17220,51 @@ function modelRequiredFunction() {
     return createModelSignal(REQUIRED_UNSET_VALUE);
 }
 /**
- * `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.
+ * `model` declares a writeable signal that is exposed as an input/output
+ * pair on the containing directive.
+ *
+ * The input name is taken either from the class member or from the `alias` option.
  * The output name is generated by taking the input name and appending `Change`.
  *
- * Initializes a model with an initial value. If no explicit value
- * is specified, Angular will use `undefined`.
+ * @usageNotes
  *
- * Consider using `model.required` for models that don't need an
- * initial value.
+ * To use `model()`, import the function from `@angular/core`.
  *
- * @usageNotes
- * Initialize a model in your directive or component by declaring a
- * class field and initializing it with the `model()` or `model.required()`
- * function.
+ * ```
+ * import {model} from '@angular/core`;
+ * ```
+ *
+ * Inside your component, introduce a new class member and initialize
+ * it with a call to `model` or `model.required`.
  *
  * ```ts
- * @Directive({..})
+ * @Directive({
+ *   ...
+ * })
  * export class MyDir {
- *   firstName = model<string>();            // string|undefined
- *   lastName = model.required<string>();    // string
- *   age = model(0);                         // number
+ *   firstName = model<string>();            // ModelSignal<string|undefined>
+ *   lastName  = model.required<string>();   // ModelSignal<string>
+ *   age       = model(0);                   // ModelSignal<number>
+ * }
+ * ```
+ *
+ * Inside your component template, you can display the value of a `model`
+ * by calling the signal.
+ *
+ * ```html
+ * <span>{{firstName()}}</span>
+ * ```
+ *
+ * Updating the `model` is equivalent to updating a writable signal.
+ *
+ * ```ts
+ * updateName(newFirstName: string): void {
+ *   this.firstName.set(newFirstName);
  * }
  * ```
  *
  * @developerPreview
+ * @initializerApiFunction
  */
 const model = (() => {
     // Note: This may be considered a side-effect, but nothing will depend on
@@ -19609,6 +19684,14 @@ function renderDeferBlockState(newState, tNode, lContainer, skipTimerScheduling
         }
     }
 }
+/**
+ * Detects whether an injector is an instance of a `ChainedInjector`,
+ * created based on the `OutletInjector`.
+ */
+function isRouterOutletInjector(currentInjector) {
+    return (currentInjector instanceof ChainedInjector) &&
+        (currentInjector.injector.__ngOutletInjector);
+}
 /**
  * Applies changes to the DOM to reflect a given state.
  */
@@ -19635,14 +19718,20 @@ function applyDeferBlockState(newState, lDetails, lContainer, tNode, hostLView)
             const providers = tDetails.providers;
             if (providers && providers.length > 0) {
                 const parentInjector = hostLView[INJECTOR];
-                const parentEnvInjector = parentInjector.get(EnvironmentInjector);
-                injector =
-                    parentEnvInjector.get(CachedInjectorService)
-                        .getOrCreateInjector(tDetails, parentEnvInjector, providers, ngDevMode ? 'DeferBlock Injector' : '');
+                // Note: we have a special case for Router's `OutletInjector`,
+                // since it's not an instance of the `EnvironmentInjector`, so
+                // we can't inject it. Once the `OutletInjector` is replaced
+                // with the `EnvironmentInjector` in Router's code, this special
+                // handling can be removed.
+                const parentEnvInjector = isRouterOutletInjector(parentInjector) ?
+                    parentInjector :
+                    parentInjector.get(EnvironmentInjector);
+                injector = parentEnvInjector.get(CachedInjectorService)
+                    .getOrCreateInjector(tDetails, parentEnvInjector, providers, ngDevMode ? 'DeferBlock Injector' : '');
             }
         }
         const dehydratedView = findMatchingDehydratedView(lContainer, activeBlockTNode.tView.ssrId);
-        const embeddedLView = createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, { dehydratedView, embeddedViewInjector: injector });
+        const embeddedLView = createAndRenderEmbeddedLView(hostLView, activeBlockTNode, null, { dehydratedView, injector });
         addLViewToLContainer(lContainer, embeddedLView, viewIndex, shouldAddViewToDom(activeBlockTNode, dehydratedView));
         markViewDirty(embeddedLView);
     }
@@ -29741,7 +29830,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('17.3.1');
+const VERSION = new Version('17.3.3');
 
 class Console {
     log(message) {
@@ -30503,8 +30592,11 @@ function getInjectorParent(injector) {
     else if (injector instanceof NullInjector) {
         return null;
     }
+    else if (injector instanceof ChainedInjector) {
+        return injector.parentInjector;
+    }
     else {
-        throwError('getInjectorParent only support injectors of type R3Injector, NodeInjector, NullInjector');
+        throwError('getInjectorParent only support injectors of type R3Injector, NodeInjector, NullInjector, ChainedInjector');
     }
     const parentLocation = getParentInjectorLocation(tNode, lView);
     if (hasParentInjector(parentLocation)) {
@@ -30543,8 +30635,8 @@ function getModuleInjectorOfNodeInjector(injector) {
     else {
         throwError('getModuleInjectorOfNodeInjector must be called with a NodeInjector');
     }
-    const chainedInjector = lView[INJECTOR];
-    const moduleInjector = chainedInjector.parentInjector;
+    const inj = lView[INJECTOR];
+    const moduleInjector = (inj instanceof ChainedInjector) ? inj.parentInjector : inj.parent;
     if (!moduleInjector) {
         throwError('NodeInjector must have some connection to the module injector tree');
     }