Merge pull request #147 from angular/main

Create a new pull request by comparing changes across two branches
angular-indonesia · Nov 13, 2023 · 2f27b58 · 2f27b58
2 parents 49167d1 + 3cf18bb
commit 2f27b58
Show file tree

Hide file tree

Showing 116 changed files with 4,770 additions and 389 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+<a name="17.0.2"></a>
+# 17.0.2 (2023-11-09)
+### compiler-cli
+| Commit | Type | Description |
+| -- | -- | -- |
+| [7a95cccf50](https://github.com/angular/angular/commit/7a95cccf50c01a3733c6015551f8864e246d9239) | fix | add interpolatedSignalNotInvoked to diagnostics ([#52687](https://github.com/angular/angular/pull/52687)) |
+| [a548c0333e](https://github.com/angular/angular/commit/a548c0333ecc993073ee7df054119a6fdde1d27b) | fix | incorrect inferred type of for loop implicit variables ([#52732](https://github.com/angular/angular/pull/52732)) |
+### core
+| Commit | Type | Description |
+| -- | -- | -- |
+| [2cea80c6e2](https://github.com/angular/angular/commit/2cea80c6e21c113d12c38c4b3219c5f3f5944bd8) | fix | error code in image performance warning ([#52727](https://github.com/angular/angular/pull/52727)) |
+| [b16fc2610a](https://github.com/angular/angular/commit/b16fc2610a37b7407713e1e0018d92372f1349e9) | fix | limit rate of markers invocations ([#52742](https://github.com/angular/angular/pull/52742)) |
+| [44c48a4835](https://github.com/angular/angular/commit/44c48a48358c92c32301b578966a8e1ee9a867d8) | fix | properly update collection with repeated keys in `@for` ([#52697](https://github.com/angular/angular/pull/52697)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="17.0.1"></a>
 # 17.0.1 (2023-11-08)
 ### http
@@ -10,7 +26,7 @@
 | [70d30c28e0](https://github.com/angular/angular/commit/70d30c28e04f4ead51145e4e47df342492bfb336) | fix | Add support for ng-templates with i18n attributes ([#52597](https://github.com/angular/angular/pull/52597)) |
 | [4f125c5f9a](https://github.com/angular/angular/commit/4f125c5f9ae572a8216ec1fbb88f52e47b875e1e) | fix | Switches to multiple passes to fix several reported bugs ([#52592](https://github.com/angular/angular/pull/52592)) |
 
-Web Frameworks: the internet frontier.<br/>  
+Web Frameworks: the internet frontier.<br/>
 These are the voyages of the framework Angular.<br/>
 Its continuing mission:<br/>
 To explore strange, new technologies.<br/>

diff --git a/adev/src/app/sub-navigation-data.ts b/adev/src/app/sub-navigation-data.ts
@@ -1269,6 +1269,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'extended-diagnostics/NG8108',
         contentPath: 'reference/extended-diagnostics/NG8108',
       },
+      {
+        label: 'NG8109: Signals must be invoked in template interpolations',
+        path: 'extended-diagnostics/NG8109',
+        contentPath: 'reference/extended-diagnostics/NG8109',
+      },
     ],
   },
   {

diff --git a/adev/src/content/guide/components/anatomy-of-components.md b/adev/src/content/guide/components/anatomy-of-components.md
@@ -8,9 +8,7 @@ Every component must have:
 * A TypeScript class with _behaviors_ such as handling user input and fetching data from a server
 * An HTML template that controls what renders into the DOM
 * A [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
-* A [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
 
-You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
 You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
 
 <docs-code language="ts" highlight="[1, 2, 3, 4]">

diff --git a/adev/src/content/guide/components/outputs.md b/adev/src/content/guide/components/outputs.md
@@ -57,7 +57,7 @@ The `@Output` decorator accepts a parameter that lets you specify a different na
 <docs-code language="ts" highlight="">
 @Component({...})
 export class CustomSlider {
-  @Input('valueChanged') changed = new EventEmitter<number>();
+  @Output('valueChanged') changed = new EventEmitter<number>();
 }
 </docs-code>
 

diff --git a/adev/src/content/guide/components/programmatic-rendering.md b/adev/src/content/guide/components/programmatic-rendering.md
@@ -28,7 +28,7 @@ export class CustomDialog {
   @Input() user: User;
 
   getBioComponent() {
-    return this.user.isAdmin ? AdminBio : StardardBio;
+    return this.user.isAdmin ? AdminBio : StandardBio;
   }
 }
 ```

diff --git a/adev/src/content/guide/defer.md b/adev/src/content/guide/defer.md
@@ -4,7 +4,7 @@
 
 Deferrable views can be used in component template to defer the loading of select dependencies within that template. Those dependencies include components, directives, and pipes, and any associated CSS. To use this feature, you can declaratively wrap a section of your template in a `@defer` block which specifies the loading conditions.
 
-Deferrable views support a series of [triggers](guide/defer#triggers), [prefeching](guide/defer#prefetching), and several sub blocks used for [placeholder](guide/defer#placeholder), [loading](guide/defer#loading), and [error](guide/defer#error) state management. You can also create custom conditions with [`when`](guide/defer#when) and [`prefetch when`](guide/defer#prefetching).
+Deferrable views support a series of [triggers](guide/defer#triggers), [prefetching](guide/defer#prefetching), and several sub blocks used for [placeholder](guide/defer#placeholder), [loading](guide/defer#loading), and [error](guide/defer#error) state management. You can also create custom conditions with [`when`](guide/defer#when) and [`prefetch when`](guide/defer#prefetching).
 
 ```html
 @defer {
@@ -138,7 +138,7 @@ By default, the placeholder will act as the element watched for entering viewpor
 }
 ```
 
-Alternatively, you can specify a [template reference variable](guide/glossary#template-reference-variable) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+Alternatively, you can specify a template reference variable in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
 
 ```html
 <div #greeting>Hello!</div>
@@ -162,7 +162,7 @@ By default, the placeholder will act as the interaction element as long as it is
 }
 ```
 
-Alternatively, you can specify a [template reference variable](guide/glossary#template-reference-variable) as the element that triggers interaction. This variable is passed in as a parameter on the interaction trigger.
+Alternatively, you can specify a template reference variable as the element that triggers interaction. This variable is passed in as a parameter on the interaction trigger.
 
 ```html
 <button type="button" #greeting>Hello!</button>
@@ -188,7 +188,7 @@ By default, the placeholder will act as the hover element as long as it is a sin
 }
 ```
 
-Alternatively, you can specify a [template reference variable](guide/glossary#template-reference-variable) as the hover element. This variable is passed in as a parameter on the hover trigger.
+Alternatively, you can specify a template reference variable as the hover element. This variable is passed in as a parameter on the hover trigger.
 
 ```html
 <div #greeting>Hello!</div>

diff --git a/adev/src/content/guide/forms/reactive-forms.md b/adev/src/content/guide/forms/reactive-forms.md
@@ -356,7 +356,7 @@ Use the `FormBuilder.array()` method to define the array, and the `FormBuilder.c
 The aliases control in the form group instance is now populated with a single control until more controls are added dynamically.
 </docs-step>
 
-<docs-step title="Acesss the `FormArray` control">
+<docs-step title="Access the `FormArray` control">
 A getter provides access to the aliases in the form array instance compared to repeating the `profileForm.get()` method to get each instance. The form array instance represents an undefined number of controls in an array. It's convenient to access a control through a getter, and this approach is straightforward to repeat for additional controls. <br />
 
 Use the getter syntax to create an `aliases` class property to retrieve the alias's form array control from the parent form group.

diff --git a/adev/src/content/guide/http/overview.md b/adev/src/content/guide/http/overview.md
@@ -15,5 +15,5 @@ The HTTP client service offers the following major features:
 
 <docs-pill-row>
   <docs-pill href="guide/http/setup" title="Setting up HttpClient"/>
-  <docs-pill href="guide/http/making-requets" title="Making HTTP requests"/>
+  <docs-pill href="guide/http/making-requests" title="Making HTTP requests"/>
 </docs-pill-row>
diff --git a/adev/src/content/guide/routing/common-router-tasks.md b/adev/src/content/guide/routing/common-router-tasks.md
@@ -144,7 +144,7 @@ To get information from a route:
 
 <docs-workflow>
 
-<docs-step title="Add `withComponentInputBinding">
+<docs-step title="Add `withComponentInputBinding`">
 
 Add the `withComponentInputBinding` feature to the `provideRouter` method.
 

diff --git a/adev/src/content/guide/templates/class-binding.md b/adev/src/content/guide/templates/class-binding.md
@@ -88,6 +88,6 @@ A single HTML element can have its CSS class list and style values bound to mult
 ## What’s next
 
 <docs-pill-row>
-  <docs-pill href="/guide/components/component-styles" title="Component styles"/>
+  <docs-pill href="/guide/components/styling" title="Component Styling"/>
   <docs-pill href="/guide/animations" title="Introduction to Angular animations"/>
 </docs-pill-row>
diff --git a/adev/src/content/guide/templates/control-flow.md b/adev/src/content/guide/templates/control-flow.md
@@ -2,7 +2,7 @@
 
 Angular templates support *control flow blocks* that let you conditionally show, hide, and repeat elements.
 
-IMPORTANT: Angular built-in control flow is in [developer preview](/guide/releases#developer-preview). It is ready to try, but may change before becoming stable.
+IMPORTANT: Angular built-in control flow is in [developer preview](reference/releases#developer-preview). It is ready to try, but may change before becoming stable.
 
 ## `@if` block conditionals
 

diff --git a/adev/src/content/guide/testing/overview.md b/adev/src/content/guide/testing/overview.md
@@ -18,7 +18,7 @@ ng test
 The `ng test` command builds the application in *watch mode*,
 and launches the [Karma test runner](https://karma-runner.github.io).
 
-The console output looks the below:
+The console output looks like below:
 
 <docs-code language="shell">
 

diff --git a/adev/src/content/introduction/essentials/conditionals-and-loops.md b/adev/src/content/introduction/essentials/conditionals-and-loops.md
@@ -32,7 +32,7 @@ export class UserControls {
 }
 ```
 
-In this example, Angular only renders the `<section>` element if the `isAdmin` property is true. Otherwise, it does not appear page.
+In this example, Angular only renders the `<button>` element if the `isAdmin` property is true. Otherwise, it does not appear page.
 
 ### `@else` block
 

diff --git a/adev/src/content/reference/extended-diagnostics/NG8109.md b/adev/src/content/reference/extended-diagnostics/NG8109.md
@@ -0,0 +1,61 @@
+# Signals must be invoked in template interpolations. 
+
+This diagnostic detects uninvoked signals in template interpolations.
+
+<docs-code language="typescript">
+
+import {Component, signal, Signal} from '@angular/core';
+
+@Component({
+  template: `<div>{{ mySignal }}/div>`,
+})
+class MyComponent {
+    mySignal: Signal<number> = signal(0);
+}
+
+</docs-code>
+
+## What's wrong with that?
+
+Angular Signals are zero-argument functions (`() => T`). When executed, they return the current value of the signal.
+This means they are meant to be invoked when used in template interpolations to render their value.
+
+## What should I do instead?
+
+Ensure to invoke the signal when you use it within a template interpolation to render its value.
+
+<docs-code language="typescript">
+
+import {Component, signal, Signal} from '@angular/core';
+
+@Component({
+  template: `<div>{{ mySignal() }}/div>`,
+})
+class MyComponent {
+  mySignal: Signal<number> = signal(0)
+}
+
+</docs-code>
+
+## Configuration requirements
+
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
+`interpolatedSignalNotInvoked` has no additional requirements beyond `strictTemplates`.
+
+## What if I can't avoid this?
+
+This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+
+<docs-code language="json">
+{
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "interpolatedSignalNotInvoked": "suppress"
+      }
+    }
+  }
+}
+</docs-code>
+
+See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev/src/content/reference/extended-diagnostics/overview.md b/adev/src/content/reference/extended-diagnostics/overview.md
@@ -18,6 +18,7 @@ Currently, Angular supports the following extended diagnostics:
 | `NG8106` | [`suffixNotSupported`](extended-diagnostics/NG8106)           |
 | `NG8107` | [`optionalChainNotNullable`](extended-diagnostics/NG8107)     |
 | `NG8108` | [`skipHydrationNotStatic`](extended-diagnostics/NG8108)       |
+| `NG8109` | [`interpolatedSignalNotInvoked`](extended-diagnostics/NG8109) |
 
 ## Configuration
 

diff --git a/adev/src/content/reference/roadmap.md b/adev/src/content/reference/roadmap.md
@@ -22,7 +22,7 @@ Start developing with the latest Angular features from our roadmap. This list re
 | [Explore Angular Signals](guide/signals)                                      | [Migrate your Angular Material to MDC](https://material.angular.io/guide/mdc-migration) |
 | [Learn about Hydration](guide/hydration)                                      | [Migrate to Standalone APIs](reference/migrations/standalone)                           |
 | [Deferrable views](https://github.com/angular/angular/discussions/50716)      | [Improve image performance with NgOptimizedImage](guide/image-optimization)             |
-| [Built-in control flow](https://github.com/angular/angular/discussions/50719) | [Try out Inject](di)                                                                    |
+| [Built-in control flow](https://github.com/angular/angular/discussions/50719) | [Try out Inject](tutorials/learn-angular/inject-based-di)                               |
 |                                                                               | [New CDK directives](https://material.angular.io/cdk/categories)                        |
 
 ## Improving the Angular developer experience

diff --git a/adev/src/content/tools/cli/overview.md b/adev/src/content/tools/cli/overview.md
@@ -16,7 +16,7 @@ You don't need to set up your local environment until you're ready.
   <docs-card title="Getting Started" link="Get Started" href="tools/cli/setup-local">
     Install Angular CLI to create and build your first app.
   </docs-card>
-  <docs-card title="Command Reference" link="Learn More" href="cli/commands">
+  <docs-card title="Command Reference" link="Learn More" href="cli">
     Discover CLI commands to make you more productive with Angular.
   </docs-card>
   <docs-card title="Schematics" link="Learn More" href="tools/cli/schematics">

diff --git a/adev/src/content/tools/cli/setup-local.md b/adev/src/content/tools/cli/setup-local.md
@@ -31,7 +31,7 @@ Angular CLI uses Node and its associated package manager, npm, to install and ru
 
 [Download and install Node.js](https://nodejs.org/en/download), which will include the `npm` CLI as well.
 Angular requires an [active LTS or maintenance LTS](https://nodejs.org/about/releases) version of Node.js.
-See [Angular's version compatibility](versions) guide for more information.
+See [Angular's version compatibility](reference/versions) guide for more information.
 
 ## Install the Angular CLI
 

diff --git a/adev/src/content/tutorials/homepage/src/main.ts b/adev/src/content/tutorials/homepage/src/main.ts
@@ -6,8 +6,8 @@ import {bootstrapApplication} from '@angular/platform-browser';
   selector: 'app-root',
   standalone: true,
   template: `
-    <label>Name:</label>
-    <input type="text" [(ngModel)]="name" placeholder="Enter a name here" />
+    <label for="name">Name:</label>
+    <input type="text" id="name" [(ngModel)]="name" placeholder="Enter a name here" />
     <hr />
     <h1>Hello {{ name }}!</h1>
   `,

diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
@@ -69,7 +69,7 @@ Note: For the `fill` image to render properly, its parent element must be styled
 
 <docs-step title="Prioritize important images">
 
-One of the most important optimizations for loading performance is to prioritize any image which might be the ["LCP element"(https://web.dev/articles/optimize-lcp)], which is the largest on-screen graphical element when the page loads. To optimize your loading times, make sure to add the `priority` attribute to your "hero image" or any other images that you think could be an LCP element.
+One of the most important optimizations for loading performance is to prioritize any image which might be the ["LCP element"](https://web.dev/articles/optimize-lcp), which is the largest on-screen graphical element when the page loads. To optimize your loading times, make sure to add the `priority` attribute to your "hero image" or any other images that you think could be an LCP element.
 
 ```ts
 <img ngSrc="www.example.com/image.png" height="600" width="800" priority />

diff --git a/.../content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md b/.../content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md
@@ -17,7 +17,7 @@ export class AppComponent {
 }
 ```
 
-The `city` property is of type `string` but you can omit the type because of [type inference in TypeScript](typescript.org/type-inference). The `city` property can be used in the `AppComponent` class and can be referenced in the component template.
+The `city` property is of type `string` but you can omit the type because of [type inference in TypeScript](https://www.typescriptlang.org/docs/handbook/type-inference.html). The `city` property can be used in the `AppComponent` class and can be referenced in the component template.
 
 <br>
 

diff --git a/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md b/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
@@ -2,7 +2,7 @@
 
 In previous activities you used the `inject()` function to make resources available, "providing" them to your components. The `inject()` function is one pattern and it is useful to know that there is another pattern for injecting resources called constructor-based dependency injection.
 
-You specify the resources as parameters to the `constructor` function of a component. Angular will make those resources available to your compoonent.
+You specify the resources as parameters to the `constructor` function of a component. Angular will make those resources available to your component.
 <br><br>
 In this activity you will learn to use constructor-based dependency injection.
 

diff --git a/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
@@ -12,7 +12,7 @@ A pipe is a TypeScript class with a `@Pipe` decorator. Here's an example:
 import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
-  standaone: true,
+  standalone: true,
   name: 'star',
 })
 export class StarPipe implements PipeTransform {
@@ -31,13 +31,13 @@ Alright, it's your turn to give this a try — you'll create the `ReversePipe`:
 
 <docs-workflow>
 
-<docs-step title="Create the `ReversePipe">
+<docs-step title="Create the `ReversePipe`">
 
 In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and provide the following configuration:
 
 ```ts
 @Pipe({
-    standaone: true,
+    standalone: true,
     name: 'reverse'
 })
 ```

diff --git a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
@@ -13,7 +13,7 @@ In this example, there are two components `UserComponent` and `AppComponent`.
 <docs-workflow>
 
 <docs-step title="Add a reference to `UserComponent`">
-Update the `AppComponent` template to include a reference to the `UserComponent` which uses the selector `app-user`. Be sure to add `AppComponent` to the imports array of `AppComponent`, this makes it available for use in the `AppComponent` template.
+Update the `AppComponent` template to include a reference to the `UserComponent` which uses the selector `app-user`. Be sure to add `UserComponent` to the imports array of `AppComponent`, this makes it available for use in the `AppComponent` template.
 
 ```ts
 template: `<app-user>`,

diff --git a/aio/tools/transforms/templates/api/decorator.template.html b/aio/tools/transforms/templates/api/decorator.template.html
@@ -17,6 +17,8 @@ <h2>Options</h2>
         <th>
           <div class="with-github-links">
             <h3>{$ option.name $}</h3>
+            {%- if option.deprecated !== undefined %}
+            <label class="api-status-label deprecated">deprecated</label>{% endif %}
             {%- if option.developerPreview %}
             <label class="api-status-label dev-preview" title="This API is in Developer Preview">
               <a href="guide/releases#developer-preview">developer

diff --git a/aio/tools/transforms/templates/api/includes/decorator-overview.html b/aio/tools/transforms/templates/api/includes/decorator-overview.html
@@ -9,11 +9,13 @@
     {%- for option in doc.members %}
     <tr class="option">
       <td>
-        <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
+        <a class="code-anchor{% if option.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
           <code>{$ option.name $}{%- if option.isOptional  %}?{% endif -%}</code>
         </a>
       </td>
       <td>
+        {%- if option.deprecated !== undefined %}
+        <label class="api-status-label deprecated">deprecated</label>{% endif %}
         {%- if option.developerPreview %}
         <label class="api-status-label dev-preview" title="This API is in Developer Preview">
           <a href="guide/releases#developer-preview">developer preview</a>
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ export class UserControls { @@
     }
     ```
-    In this example, Angular only renders the `<section>` element if the `isAdmin` property is true. Otherwise, it does not appear page.
+    In this example, Angular only renders the `<button>` element if the `isAdmin` property is true. Otherwise, it does not appear page.
     ### `@else` block
@@ Expand Down @@