docs: update links and TOC (#45897)

Update links and TOC for updated content. PR Close #45897
2026-09-14 13:54:52 +08:00 · 2022-05-05 22:15:16 +00:00
parent 6276bed4ab
commit a9b537ca46
17 changed files with 90 additions and 84 deletions
@@ -28,10 +28,7 @@
 <div class="group">
  <h3>Binding to a nested component</h3>
  <h4>Custom events with EventEmitter</h4>
-  <!-- #docregion event-binding-to-component -->
  <app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
-    <!-- #enddocregion event-binding-to-component -->
-

  <h4>Click to see event target class:</h4>

@@ -1,9 +1,7 @@
 <div class="detail">
  <p>This is the ItemDetailComponent</p>
-  <!-- #docregion line-through -->
  <img src="{{itemImageUrl}}" alt="{{item.name}}" [style.display]="displayNone">
  <span [style.text-decoration]="lineThrough">{{ item.name }}
  </span>
  <button type="button" (click)="delete()">Delete</button>
-  <!-- #enddocregion line-through -->
 </div>
@@ -15,7 +15,6 @@ export class ItemDetailComponent {
  displayNone = '';
  @Input() prefix = '';

-  // #docregion deleteRequest
  // This component makes a request but it can't actually delete a hero.
  @Output() deleteRequest = new EventEmitter<Item>();

@@ -24,6 +23,5 @@ export class ItemDetailComponent {
    this.displayNone = this.displayNone ? '' : 'none';
    this.lineThrough = this.lineThrough ? '' : 'line-through';
  }
-  // #enddocregion deleteRequest

 }
@@ -16,16 +16,12 @@

    <h3>Evaluating template expressions </h3>
    <h4>Simple evaluation (to a string):</h4>
-    <!-- #docregion convert-string -->
    <!-- "The sum of 1 + 1 is 2" -->
    <p>The sum of 1 + 1 is {{1 + 1}}.</p>
-    <!-- #enddocregion convert-string -->

    <h4>Evaluates using a method (also evaluates to a string):</h4>
-    <!-- #docregion invoke-method -->
    <!-- "The sum of 1 + 1 is not 4" -->
    <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
-    <!-- #enddocregion invoke-method -->
  </div>

  <hr />
@@ -46,27 +46,21 @@
  <hr />

  <h2>Property binding and interpolation</h2>
-  <!-- #docregion property-binding-interpolation -->
  <p><img alt="Interpolated item" src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <i>property bound</i> image.</p>

  <p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>
-  <!-- #enddocregion property-binding-interpolation -->

  <hr />

  <h2>Malicious content</h2>

-<!-- #docregion malicious-interpolated -->
  <p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
-<!-- #enddocregion malicious-interpolated -->

-<!-- #docregion malicious-content -->
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
-<!-- #enddocregion malicious-content -->
 </div>
@@ -13,9 +13,7 @@ export class AppComponent {
  // #docregion boolean
  isUnchanged = true;
  // #enddocregion boolean
-  // #docregion directive-property
  classes = 'special';
-  // #enddocregion directive-property
  // #docregion parent-data-type
  parentItem = 'lamp';
  // #enddocregion parent-data-type
@@ -30,7 +28,5 @@ export class AppComponent {
  interpolationTitle = 'Interpolation';
  propertyTitle = 'Property binding';

-  // #docregion malicious-content
  evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';
-  // #enddocregion malicious-content
 }
@@ -97,7 +97,5 @@ value of the input will have no effect. -->

 See the console output to see that when you declare the variable on an <code>ng-template</code>, the variable refers to a <code>TemplateRef</code> instance, which represents the template.

-<!-- #docregion template-ref -->
 <ng-template #ref3></ng-template>
 <button type="button" (click)="log(ref3)">Log type of #ref</button>
-<!-- #enddocregion template-ref -->
@@ -238,7 +238,7 @@ But now you can also encapsulate a style sheet within a specific component.
 [AioGuideArchitectureServicesAndDependencyInjection]: guide/architecture#services-and-dependency-injection "Services and dependency injection - Introduction to Angular concepts | Angular"

 [AioGuideAttributeBinding]: guide/attribute-binding "Attribute, class, and style bindings | Angular"
-[AioGuideAttributeBindingBindingToTheStyleAttribute]: guide/attribute-binding#binding-to-the-style-attribute "Binding to the style attribute - Attribute, class, and style bindings | Angular"
+[AioGuideAttributeBindingBindingToTheStyleAttribute]: guide/class-binding "Class and style binding | Angular"

 [AioGuideBuiltInDirectives]: guide/built-in-directives "Built-in directives | Angular"
 [AioGuideBuiltInDirectivesDisplayingAndUpdatingPropertiesWithNgmodel]: guide/built-in-directives#displaying-and-updating-properties-with-ngmodel "Displaying and updating properties with ngModel - Built-in directives | Angular"
@@ -67,6 +67,6 @@ For more information on how to bind to the `colSpan` property, see the [`colspan

 ## What’s next

-* [Class & Style Binding](class-binding.md)
+* [Class & Style Binding](guide/class-binding)

@reviewed 2022-05-02
@@ -50,7 +50,7 @@ Add or remove multiple CSS classes simultaneously with `ngClass`.

 <div class="alert is-helpful">

-To add or remove a *single* class, use [class binding](guide/attribute-binding#class-binding) rather than `NgClass`.
+To add or remove a *single* class, use [class binding](guide/class-binding) rather than `NgClass`.

 </div>

@@ -239,8 +239,7 @@ Read about the following forms of binding of the [Template Syntax][AioGuideTempl
 *   [Property binding][AioGuidePropertyBinding]
 *   [Event binding][AioGuideEventBinding]
 *   [Attribute binding][AioGuideAttributeBinding]
-*   [Class binding][AioGuideAttributeBindingBindingToTheClassAttribute]
-*   [Style binding][AioGuideAttributeBindingBindingToTheStyleAttribute]
+*   [Class and style binding][AioGuideAttributeBindingBindingToTheClassAttribute]
 *   [Two-way data binding with ngModel][AioGuideBuiltInDirectivesDisplayingAndUpdatingPropertiesWithNgmodel]

 ## declarable
@@ -807,7 +806,8 @@ For an introduction and comparison of both forms approaches, see [Introduction t

 A TypeScript-like syntax that Angular evaluates within a [data binding][AioGuideGlossaryDataBinding].

-Read about how to write template expressions in the [template expressions][AioGuideInterpolationTemplateExpressions] section of the [Interpolation][AioGuideInterpolation] guide.
+<!--todo: have Alex review this -->
+<!-- Read about how to write template expressions in the [template expressions][AioGuideInterpolationTemplateExpressions] section of the [Interpolation][AioGuideInterpolation] guide. -->

 ## template reference variable

@@ -991,9 +991,8 @@ Learn more about zones in this [Brian Ford video][YoutubeWatchV3iqtmusceU].

 [AioGuideArchitectureServices]: guide/architecture-services "Introduction to services and dependency injection | Angular"

-[AioGuideAttributeBinding]: guide/attribute-binding "Attribute, class, and style bindings | Angular"
-[AioGuideAttributeBindingBindingToTheClassAttribute]: guide/attribute-binding#binding-to-the-class-attribute "Binding to the class attribute - Attribute, class, and style bindings | Angular"
-[AioGuideAttributeBindingBindingToTheStyleAttribute]: guide/attribute-binding#binding-to-the-style-attribute "Binding to the style attribute - Attribute, class, and style bindings | Angular"
+[AioGuideAttributeBinding]: guide/attribute-binding "Attribute binding | Angular"
+[AioGuideAttributeBindingBindingToTheClassAttribute]: guide/class-binding "Class and style binding | Angular"

 [AioGuideAttributeDirectives]: guide/attribute-directives "Attribute directives | Angular"

@@ -1120,7 +1119,7 @@ Learn more about zones in this [Brian Ford video][YoutubeWatchV3iqtmusceU].
 [AioGuideHierarchicalDependencyInjection]: guide/hierarchical-dependency-injection "Hierarchical injectors | Angular"

 [AioGuideInterpolation]: guide/interpolation "Text interpolation | Angular"
-[AioGuideInterpolationTemplateExpressions]: guide/interpolation#template-expressions "Template expressions - Text interpolation | Angular"
+<!-- [AioGuideInterpolationTemplateExpressions]: guide/interpolation#template-expressions "Template expressions - Text interpolation | Angular" -->

 [AioGuideNgmodules]: guide/ngmodules "NgModules | Angular"

@@ -6,26 +6,23 @@
 * [Basics of templates](guide/glossary#template)
 * [Binding syntax](guide/binding-syntax)

-Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters.
+<!--todo: needs a level 2 heading for info below -->
+
+Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces `{{` and `}}` as delimiters.

 To illustrate how interpolation works, consider an Angular component that contains a currentCustomer variable:

-src/app/app.component.ts
-content_copy
-currentCustomer = 'Maria';
+<code-example path="interpolation/src/app/app.component.ts" region="customer"></code-example>
+
 Use interpolation to display the value of this variable in the corresponding component template:

-src/app/app.component.html
-content_copy
-<h3>Current customer: {{ currentCustomer }}</h3>
-Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is Maria.
+<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1"></code-example>

-In the following example, Angular evaluates the title and itemImageUrl properties to display some title text and an image.
+Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is `Maria`.

-src/app/app.component.html
-content_copy
-<p>{{title}}</p>
-<div><img alt="item" src="{{itemImageUrl}}"></div>
+In the following example, Angular evaluates the `title` and `itemImageUrl` properties to display some title text and an image.
+
+<code-example path="interpolation/src/app/app.component.html" region="component-property"></code-example>

 ## What's Next

@@ -3,7 +3,8 @@
 Angular makes use of observables as an interface to handle a variety of common asynchronous operations.
 For example:

-*   You can define [custom events](guide/event-binding#custom-events-with-eventemitter) that send observable output data from a child to a parent component
+<!--todo: Have Alex review this -->
+<!-- *   You can define [custom events](guide/event-binding#custom-events-with-eventemitter) that send observable output data from a child to a parent component -->
 *   The HTTP module uses observables to handle AJAX requests and responses
 *   The Router and Forms modules use observables to listen for and respond to user-input events

@@ -28,19 +28,19 @@ To read a target element property or call one of its methods, see the API refere

 ## Binding to a property

-To bind to an element's property, enclose it in square brackets, '[]', which identifies the property as a target property.
+To bind to an element's property, enclose it in square brackets, `[]`, which identifies the property as a target property.

 A target property is the DOM property to which you want to assign a value.

-To assign a value to a target property for the image element's 'src' property, type the following code:
+To assign a value to a target property for the image element's `src` property, type the following code:

 <code-example path="property-binding/src/app/app.component.html" region="property-binding" header="src/app/app.component.html"></code-example>

 In most cases, the target name is the name of a property, even when it appears to be the name of an attribute.

-In this example, 'src' is the name of the '<img>' element property.
+In this example, `src` is the name of the `<img>` element property.

-The brackets, '[]', cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.
+The brackets, `[]`, cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.

 Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

@@ -48,31 +48,31 @@ To assign a string to a property, type the following code:

 <code-example path="property-binding/src/app/app.component.html" region="no-evaluation" header="src/app.component.html"></code-example>

-Omitting the brackets renders the string 'parentItem', not the value of 'parentItem'.
+Omitting the brackets renders the string `parentItem`, not the value of `parentItem`.

 ## Setting an element property to a component property value

-To bind the ‘src’ property of an '<img>' element to a component's property, place the target, ‘src', in square brackets followed by an equal sign and then the property.
+To bind the `src` property of an `<img>` element to a component's property, place the target, `src`, in square brackets followed by an equal sign and then the property.

-Using the property 'itemImageUrl', type the following code:
+Using the property `itemImageUrl`, type the following code:

 <code-example path="property-binding/src/app/app.component.html" region="property-binding" header="src/app/app.component.html"></code-example>

-Declare the 'itemImageUrl' property in the class, in this case 'AppComponent'.
+Declare the `itemImageUrl` property in the class, in this case `AppComponent`.

 <code-example path="property-binding/src/app/app.component.ts" region="item-image" header="src/app/app.component.ts"></code-example>

 {@a colspan}

-#### 'colspan' and 'colSpan'
+#### `colspan` and `colSpan`

-A common point of confusion is between the attribute, 'colspan', and the property, 'colSpan'.  Notice that these two names differ by only a single letter.
+A common point of confusion is between the attribute, `colspan`, and the property, `colSpan`.  Notice that these two names differ by only a single letter.

 To use property binding using colSpan, type the following:

 <code-example path="attribute-binding/src/app/app.component.html" region="colSpan" header="src/app/app.component.html"></code-example>

-To disable a button when the component says that it 'isUnchanged', type the following:
+To disable a button when the component says that it `isUnchanged`, type the following:

 <code-example path="property-binding/src/app/app.component.html" region="disabled-button" header="src/app/app.component.html"></code-example>

@@ -87,11 +87,11 @@ To set the model property of a custom component for parent and child components

 ## Toggling button functionality

-To disable a button's functionality depending on a Boolean value, bind the DOM 'disabled' property to a property in the class that is 'true' or 'false'.
+To disable a button's functionality depending on a Boolean value, bind the DOM `disabled` property to a property in the class that is `true` or `false`.

 <code-example path="property-binding/src/app/app.component.html" region="disabled-button" header="src/app/app.component.html"></code-example>

-Because the value of the property 'isUnchanged' is 'true' in the 'AppComponent', Angular disables the button.
+Because the value of the property `isUnchanged` is `true` in the `AppComponent`, Angular disables the button.

 <code-example path="property-binding/src/app/app.component.ts" region="boolean" header="src/app/app.component.ts"></code-example>

@@ -1018,7 +1018,7 @@ The `ActivatedRoute.paramMap` property is an `Observable` map of route parameter
 The `paramMap` emits a new map of values that includes `id` when the user navigates to the component.
 In `ngOnInit()` you subscribe to those values, set the `selectedId`, and get the heroes.

-Update the template with a [class binding](guide/attribute-binding#class-binding).
+Update the template with a [class binding](guide/class-binding).
 The binding adds the `selected` CSS class when the comparison returns `true` and removes it when `false`.
 Look for it within the repeated `<li>` tag as shown here:

@@ -178,29 +178,61 @@
              "tooltip": "Introductory guide to statements in templates that respond to events that components, directives, or elements raise."
            },
            {
-              "url": "guide/pipes",
+              "title": "Binding",
+              "tooltip": "A binding connects a template and a component.",
+              "children": [
+                {
+                  "url": "guide/binding-overview",
+                  "title": "Understanding binding",
+                  "tooltip": "Introductory guide to binding."
+                },
+                {
+                  "url": "guide/attribute-binding",
+                  "title": "Attribute binding",
+                  "tooltip": "Learn how to use attribute binding."
+                },
+                {
+                  "url": "guide/class-binding",
+                  "title": "Class and style binding",
+                  "tooltip": "Learn how to use class and style binding."
+                },
+                {
+                  "url": "guide/event-binding",
+                  "title": "Event binding",
+                  "tooltip": "Learn how to use to event binding."
+                },
+                {
+                  "url": "guide/property-binding",
+                  "title": "Property binding",
+                  "tooltip": "Learn how to use property binding."
+                },             
+                {
+                  "url": "guide/two-way-binding",
+                  "title": "Two-way binding",
+                  "tooltip": "Learn how to share data between a class and a template."
+                }
+              ]
+            },
+            {
              "title": "Pipes",
-              "tooltip": "Pipes transform displayed values within a template."
-            },
-            {
-              "url": "guide/property-binding",
-              "title": "Property binding",
-              "tooltip": "Introductory guide to setting element or input properties."
-            },
-            {
-              "url": "guide/attribute-binding",
-              "title": "Attribute, class, and style bindings",
-              "tooltip": "Introductory guide to setting the value of HTML attributes."
-            },
-            {
-              "url": "guide/event-binding",
-              "title": "Event binding",
-              "tooltip": "Introductory guide to listening for user interaction."
-            },
-            {
-              "url": "guide/two-way-binding",
-              "title": "Two-way binding",
-              "tooltip": "Introductory guide to sharing data between a class and a template."
+              "tooltip": "Pipes transform displayed values within a template.",
+              "children": [
+                {
+                  "url": "guide/pipes-overview",
+                  "title": "Understanding pipes",
+                  "tooltip": "Introductory guide to pipes."
+                },
+                {
+                  "url": "guide/pipe-template",
+                  "title": "Using a pipe in a template",
+                  "tooltip": "Learn how to use a pipe in a template."
+                },
+                {
+                  "url": "guide/pipes-transform-data",
+                  "title": "Transforming data with parameters and chained pipes",
+                  "tooltip": "Learn how to use a pipe transform data."
+                }
+             ]
            },
            {
              "url": "guide/template-reference-variables",
@@ -168,7 +168,7 @@ To apply the `.selected` class to the `<li>` when the user clicks it, use class

 </div>

-Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally.
+Angular's [class binding](guide/class-binding) can add and remove a CSS class conditionally.
 Add `[class.some-css-class]="some-condition"` to the element you want to style.

 Add the following `[class.selected]` binding to the `<button>` in the `HeroesComponent` template: