From a9b537ca46ecd84a7b151d42b1563ae36cc839b0 Mon Sep 17 00:00:00 2001 From: Virginia Dooley Date: Thu, 5 May 2022 22:15:16 +0000 Subject: [PATCH] docs: update links and TOC (#45897) Update links and TOC for updated content. PR Close #45897 --- .../event-binding/src/app/app.component.html | 3 - .../item-detail/item-detail.component.html | 2 - .../app/item-detail/item-detail.component.ts | 2 - .../interpolation/src/app/app.component.html | 4 - .../src/app/app.component.html | 6 -- .../property-binding/src/app/app.component.ts | 4 - .../src/app/app.component.html | 2 - aio/content/guide/ajs-quick-reference.md | 2 +- aio/content/guide/attribute-binding.md | 2 +- aio/content/guide/built-in-directives.md | 2 +- aio/content/guide/glossary.md | 13 ++-- aio/content/guide/interpolation.md | 23 +++--- aio/content/guide/observables-in-angular.md | 3 +- aio/content/guide/property-binding.md | 26 +++---- aio/content/guide/router-tutorial-toh.md | 2 +- aio/content/navigation.json | 76 +++++++++++++------ aio/content/tutorial/toh-pt2.md | 2 +- 17 files changed, 90 insertions(+), 84 deletions(-) diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html index dea7f717206..ed3e816db2c 100644 --- a/aio/content/examples/event-binding/src/app/app.component.html +++ b/aio/content/examples/event-binding/src/app/app.component.html @@ -28,10 +28,7 @@

Binding to a nested component

Custom events with EventEmitter

- - -

Click to see event target class:

diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html index 67c31d78d5e..036bffb46f3 100644 --- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html +++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html @@ -1,9 +1,7 @@

This is the ItemDetailComponent

- {{item.name}} {{ item.name }} -
diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts index 1c1092bc547..f0a3b1696f6 100644 --- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts +++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts @@ -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(); @@ -24,6 +23,5 @@ export class ItemDetailComponent { this.displayNone = this.displayNone ? '' : 'none'; this.lineThrough = this.lineThrough ? '' : 'line-through'; } - // #enddocregion deleteRequest } diff --git a/aio/content/examples/interpolation/src/app/app.component.html b/aio/content/examples/interpolation/src/app/app.component.html index f9540c31d2a..4a765651470 100644 --- a/aio/content/examples/interpolation/src/app/app.component.html +++ b/aio/content/examples/interpolation/src/app/app.component.html @@ -16,16 +16,12 @@

Evaluating template expressions

Simple evaluation (to a string):

-

The sum of 1 + 1 is {{1 + 1}}.

-

Evaluates using a method (also evaluates to a string):

-

The sum of 1 + 1 is not {{1 + 1 + getVal()}}.

-
diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html index 1737640384e..0c50825400e 100644 --- a/aio/content/examples/property-binding/src/app/app.component.html +++ b/aio/content/examples/property-binding/src/app/app.component.html @@ -46,27 +46,21 @@

Property binding and interpolation

-

Interpolated item is the interpolated image.

Property Bound item is the property bound image.

"{{interpolationTitle}}" is the interpolated title.

"" is the property bound title.

-

Malicious content

-

"{{evilTitle}}" is the interpolated evil title.

- -

"" is the property bound evil title.

- diff --git a/aio/content/examples/property-binding/src/app/app.component.ts b/aio/content/examples/property-binding/src/app/app.component.ts index 5b58a8c6b3e..1d377de7a7f 100644 --- a/aio/content/examples/property-binding/src/app/app.component.ts +++ b/aio/content/examples/property-binding/src/app/app.component.ts @@ -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 Syntax'; - // #enddocregion malicious-content } diff --git a/aio/content/examples/template-reference-variables/src/app/app.component.html b/aio/content/examples/template-reference-variables/src/app/app.component.html index ce46ff170c5..de6de41ec25 100644 --- a/aio/content/examples/template-reference-variables/src/app/app.component.html +++ b/aio/content/examples/template-reference-variables/src/app/app.component.html @@ -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 ng-template, the variable refers to a TemplateRef instance, which represents the template. - - diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 226e5e2f912..be902739d2e 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -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" diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md index 32608a0bf15..da7c722ed8d 100644 --- a/aio/content/guide/attribute-binding.md +++ b/aio/content/guide/attribute-binding.md @@ -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 diff --git a/aio/content/guide/built-in-directives.md b/aio/content/guide/built-in-directives.md index 29d646fe460..ddb83fd0d79 100644 --- a/aio/content/guide/built-in-directives.md +++ b/aio/content/guide/built-in-directives.md @@ -50,7 +50,7 @@ Add or remove multiple CSS classes simultaneously with `ngClass`.
-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`.
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index e355de47095..c3c75f2a629 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -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. + + ## 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" + [AioGuideNgmodules]: guide/ngmodules "NgModules | Angular" diff --git a/aio/content/guide/interpolation.md b/aio/content/guide/interpolation.md index b7b5fa3f578..183eae51c16 100644 --- a/aio/content/guide/interpolation.md +++ b/aio/content/guide/interpolation.md @@ -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. + + +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'; + + Use interpolation to display the value of this variable in the corresponding component template: -src/app/app.component.html -content_copy -

Current customer: {{ currentCustomer }}

-Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is Maria. + -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 -

{{title}}

-
item
+In the following example, Angular evaluates the `title` and `itemImageUrl` properties to display some title text and an image. + + ## What's Next diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md index 427a00da8a2..1f9c1636b37 100644 --- a/aio/content/guide/observables-in-angular.md +++ b/aio/content/guide/observables-in-angular.md @@ -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 + + * 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 diff --git a/aio/content/guide/property-binding.md b/aio/content/guide/property-binding.md index 36c23448079..91e1a4f6058 100644 --- a/aio/content/guide/property-binding.md +++ b/aio/content/guide/property-binding.md @@ -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: 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 '' element property. +In this example, `src` is the name of the `` 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: -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 '' 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 `` 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: -Declare the 'itemImageUrl' property in the class, in this case 'AppComponent'. +Declare the `itemImageUrl` property in the class, in this case `AppComponent`. {@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: -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: @@ -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`. -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. diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md index 187abd20f7d..2155b070e1f 100644 --- a/aio/content/guide/router-tutorial-toh.md +++ b/aio/content/guide/router-tutorial-toh.md @@ -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 `
  • ` tag as shown here: diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 3c7699123b2..152b170ff7f 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -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", diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index b3658dfc671..ada6e8ce0a5 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -168,7 +168,7 @@ To apply the `.selected` class to the `
  • ` when the user clicks it, use class -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 `