From b5f177939f5a8bac34cc89b010cb600653ac5f08 Mon Sep 17 00:00:00 2001 From: Teri Glover Date: Wed, 21 Jul 2021 05:01:39 +0000 Subject: [PATCH] docs: Edits to remove jargon (#42907) PR Close #42907 --- aio/content/guide/attribute-binding.md | 18 +++++------ aio/content/guide/event-binding.md | 4 +-- aio/content/guide/inputs-outputs.md | 16 +++++----- aio/content/guide/interpolation.md | 10 +++--- aio/content/guide/pipes.md | 32 +++++++++---------- aio/content/guide/property-binding.md | 6 ++-- aio/content/guide/svg-in-templates.md | 2 +- .../guide/template-reference-variables.md | 16 +++++----- aio/content/guide/template-statements.md | 4 +-- aio/content/guide/template-syntax.md | 13 ++++---- aio/content/guide/two-way-binding.md | 4 +-- 11 files changed, 62 insertions(+), 63 deletions(-) diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md index b56c104ce2..42e7c416e8 100644 --- a/aio/content/guide/attribute-binding.md +++ b/aio/content/guide/attribute-binding.md @@ -13,7 +13,7 @@ See the for a working example containing the code It is recommended that you set an element property with a [property binding](guide/property-binding) whenever possible. However, sometimes you don't have an element property to bind. -In those situations, you can use attribute binding. +In those situations, use attribute binding. For example, [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) are purely attributes. @@ -58,7 +58,7 @@ To use attribute binding with the `` attribute `colspan`: 1. Specify the `colspan` attribute by using the following syntax: `[attr.colspan]`. 1. Set `[attr.colspan]` equal to an expression. -In the following example, we bind the `colspan` attribute to the expression `1 + 1`. +In the following example, you bind the `colspan` attribute to the expression `1 + 1`. @@ -78,7 +78,7 @@ For more information on how to bind to the `colSpan` property, see the [`colspan {@a class-binding} ## Binding to the `class` attribute -You can use class binding to add and remove CSS class names from an element's `class` attribute. +Use class binding to add and remove CSS class names from an element's `class` attribute. ### Binding to a single CSS `class` @@ -161,7 +161,7 @@ The following table summarizes class binding syntax. {@a style-binding} ## Binding to the style attribute -You can use style binding to set styles dynamically. +Use style binding to set styles dynamically. ### Binding to a single style @@ -263,7 +263,7 @@ The following table summarizes style binding syntax.
The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings. -However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future. +However, using the preceding style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
@@ -294,7 +294,7 @@ When there are multiple bindings to the same class name or style property, Angul The more specific a class or style binding is, the higher its precedence. -A binding to a specific class (for example, `[class.foo]`) will take precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) will take precedence over a generic `[style]` binding. +A binding to a specific class (for example, `[class.foo]`) takes precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) takes precedence over a generic `[style]` binding. @@ -311,7 +311,7 @@ Directives often augment component behavior, so host bindings from components ha In addition, bindings take precedence over static attributes. -In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding will take precedence because it is dynamic. +In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding takes precedence because it is dynamic. @@ -319,14 +319,14 @@ In the following case, `class` and `[class]` have similar specificity, but the ` ### Delegating to styles with lower precedence It is possible for higher precedence styles to "delegate" to lower precedence styles using `undefined` values. -Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` will cause Angular to fall back to the next-highest precedence binding to that style. +Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` causes Angular to fall back to the next-highest precedence binding to that style. For example, consider the following template: Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding. -In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property will fall back to the value of the `comp-with-host-binding` host binding. +In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property falls back to the value of the `comp-with-host-binding` host binding. However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely. diff --git a/aio/content/guide/event-binding.md b/aio/content/guide/event-binding.md index b292d904bf..fafe1080a5 100644 --- a/aio/content/guide/event-binding.md +++ b/aio/content/guide/event-binding.md @@ -1,6 +1,6 @@ # Event binding -Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches. +Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
@@ -26,7 +26,7 @@ The event binding listens for the button's click events and calls the component' ## Binding to passive events -Angular also supports passive event listeners. For example, you can use the following steps to make a scroll event passive. +Angular also supports passive event listeners. For example, use the following steps to make a scroll event passive. 1. Create a file `zone-flags.ts` under `src` directory. 2. Add the following line into this file. diff --git a/aio/content/guide/inputs-outputs.md b/aio/content/guide/inputs-outputs.md index b10223e650..c6177497af 100644 --- a/aio/content/guide/inputs-outputs.md +++ b/aio/content/guide/inputs-outputs.md @@ -1,7 +1,7 @@ # Sharing data between child and parent directives and components A common pattern in Angular is sharing data between a parent component and one or more child components. -You can implement this pattern by using the `@Input()` and `@Output()` directives. +To implement this pattern use the `@Input()` and `@Output()` directives.
@@ -21,8 +21,8 @@ Consider the following hierarchy: The `` serves as the context for the ``. `@Input()` and `@Output()` give a child component a way to communicate with its parent component. -`@Input()` allows a parent component to update data in the child component. -Conversely, `@Output()` allows the child to send data to a parent component. +`@Input()` lets a parent component update data in the child component. +Conversely, `@Output()` lets the child send data to a parent component. {@a input} @@ -80,14 +80,14 @@ The binding source, the part to the right of the equal sign, is the data that th ### Watching for `@Input()` changes -To watch for changes on an `@Input()` property, you can use `OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks). +To watch for changes on an `@Input()` property, use `OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks). See the [`OnChanges`](guide/lifecycle-hooks#onchanges) section of the [Lifecycle Hooks](guide/lifecycle-hooks) guide for more details and examples. {@a output} ## Sending data to a parent component -The `@Output()` decorator in a child component or directive allows data to flow from the child to the parent. +The `@Output()` decorator in a child component or directive lets data flow from the child to the parent.
Output diagram of the data flow going from child to parent @@ -118,7 +118,7 @@ The following example features an `` where a user can enter a value and c - The different parts of the above declaration are as follows: + The different parts of the preceding declaration are as follows: * `@Output()`—a decorator function marking the property as a way for data to go from the child to the parent * `newItemEvent`—the name of the `@Output()` @@ -166,7 +166,7 @@ The `addItem()` method takes an argument in the form of a string and then adds t The `$event` contains the data that the user types into the `` in the child template UI. - To see the `@Output()` working, you can add the following to the parent's template: + To see the `@Output()` working, add the following to the parent's template: ```html
    @@ -180,7 +180,7 @@ The `addItem()` method takes an argument in the form of a string and then adds t ## Using `@Input()` and `@Output()` together -You can use `@Input()` and `@Output()` on the same child component as follows: +Use `@Input()` and `@Output()` on the same child component as follows: diff --git a/aio/content/guide/interpolation.md b/aio/content/guide/interpolation.md index 7e5098655b..69ad6d4bab 100644 --- a/aio/content/guide/interpolation.md +++ b/aio/content/guide/interpolation.md @@ -1,7 +1,7 @@ # Text interpolation -Text interpolation allows you to incorporate dynamic string values into your HTML templates. -With interpolation, you can dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name. +Text interpolation lets you incorporate dynamic string values into your HTML templates. +Use interpolation to dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name.
    @@ -18,7 +18,7 @@ To illustrate how interpolation works, consider an Angular component that contai -You can use interpolation to display the value of this variable in the corresponding component template: +Use interpolation to display the value of this variable in the corresponding component template: @@ -55,7 +55,7 @@ With interpolation, Angular performs the following tasks:
    -You can configure the interpolation delimiter with the [interpolation](api/core/Component#interpolation) option in the `@Component()` metadata. +Configure the interpolation delimiter with the [interpolation](api/core/Component#interpolation) option in the `@Component()` metadata.
    @@ -131,7 +131,7 @@ When using template expressions, follow these best practices: * **Use short expressions** Use property names or method calls whenever possible. - Keep application and business logic in the component, where it is easier to develop and test. + Keep application and business logic in the component, where it is accessible to develop and test. * **Quick execution** diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index 30332a3786..6414baf01a 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -1,7 +1,7 @@ # Transforming Data Using Pipes Use [pipes](guide/glossary#pipe "Definition of a pipe") to transform strings, currency amounts, dates, and other data for display. -Pipes are simple functions you can use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once. +Pipes are simple functions to use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once. For example, you would use a pipe to show a date as **April 15, 1988** rather than the raw string format.
    @@ -27,7 +27,7 @@ The following are commonly used built-in pipes for data formatting:
    -You can also create pipes to encapsulate custom transformations and use your custom pipes in template expressions. +Create pipes to encapsulate custom transformations and use your custom pipes in template expressions. ## Prerequisites @@ -64,12 +64,12 @@ The component's `birthday` value flows through the pipe operator, `|` to the [`d ## Transforming data with parameters and chained pipes Use optional parameters to fine-tune a pipe's output. -For example, you can use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter. +For example, use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter. The template expression `{{ amount | currency:'EUR' }}` transforms the `amount` to currency in euros. Follow the pipe name (`currency`) with a colon (`:`) and the parameter value (`'EUR'`). If the pipe accepts multiple parameters, separate the values with colons. -For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string. You can use any valid template expression as a parameter, such as a string literal or a component property. +For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string. Use any valid template expression as a parameter, such as a string literal or a component property. Some pipes require at least one parameter and allow more optional parameters, such as [`SlicePipe`](/api/common/SlicePipe "API reference for SlicePipe"). For example, `{{ slice:1:5 }}` creates a new array or string containing a subset of the elements starting with element `1` and ending with element `5`. @@ -110,7 +110,7 @@ For `date` pipe format options, see [DatePipe](api/common/DatePipe "DatePipe API ### Example: Applying two formats by chaining pipes -You can chain pipes so that the output of one pipe becomes the input to the next. +Chain pipes so that the output of one pipe becomes the input to the next. In the following example, chained pipes first apply a format to a date value, then convert the formatted date to uppercase characters. The first tab for the `src/app/app.component.html` template chains `DatePipe` and `UpperCasePipe` to display the birthday as **APR 15, 1988**. @@ -134,7 +134,7 @@ The second tab for the `src/app/app.component.html` template passes the `fullDat ## Creating pipes for custom data transformations Create custom pipes to encapsulate transformations that are not provided with the built-in pipes. -You can then use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display. +Then, use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display. ### Marking a class as a pipe @@ -160,9 +160,9 @@ Angular invokes the `transform` method with the value of a binding as the first ### Example: Transforming a value exponentially -In a game, you may want to implement a transformation that raises a value exponentially to increase a hero's power. +In a game, you might want to implement a transformation that raises a value exponentially to increase a hero's power. For example, if the hero's score is 2, boosting the hero's power exponentially by 10 produces a score of 1024. -You can use a custom pipe for this transformation. +Use a custom pipe for this transformation. The following code example shows two component definitions: @@ -261,7 +261,7 @@ In other words, given the same input, a pure function should always return the s With a pure pipe, Angular ignores changes within composite objects, such as a newly added element of an existing array, because checking a primitive value or object reference is much faster than performing a deep check for differences within objects. Angular can quickly determine if it can skip executing the pipe and updating the view. -However, a pure pipe with an array as input may not work the way you want. +However, a pure pipe with an array as input might not work the way you want. To demonstrate this issue, change the previous example to filter the list of heroes to just those heroes who can fly. Use the `FlyingHeroesPipe` in the `*ngFor` repeater as shown in the following code. The tabs for the example show the following: @@ -290,16 +290,16 @@ This happens because the code that adds a hero does so by pushing it onto the `h The change detector ignores changes to elements of an array, so the pipe doesn't run. The reason Angular ignores the changed array element is that the *reference* to the array hasn't changed. -Since the array is the same, Angular does not update the display. +Because the array is the same, Angular does not update the display. One way to get the behavior you want is to change the object reference itself. -You can replace the array with a new array containing the newly changed elements, and then input the new array to the pipe. -In the above example, you can create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe. +Replace the array with a new array containing the newly changed elements, and then input the new array to the pipe. +In the preceding example, create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe. To summarize, if you mutate the input array, the pure pipe doesn't execute. If you *replace* the input array, the pipe executes and the display is updated. -The above example demonstrates changing a component's code to accommodate a pipe. +The preceding example demonstrates changing a component's code to accommodate a pipe. To keep your component independent of HTML templates that use pipes, you can, as an alternative, use an *impure* pipe to detect changes within composite objects such as arrays, as described in the next section. @@ -341,7 +341,7 @@ The example shows that you don't have to change anything else—the only differe You can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`. -As shown in the code below, only the pipe in the template changes. +As shown in the following code, only the pipe in the template changes. @@ -382,7 +382,7 @@ The following code example binds an observable of message strings To [communicate with backend services using HTTP](/guide/http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server. The asynchronous method sends an HTTP request, and returns an observable that emits the requested data for the response. -As shown in the previous section, you can use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically. +As shown in the previous section, use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically. You can also create an impure pipe to make and cache an HTTP request. Impure pipes are called whenever change detection runs for a component, which could be as often as every few milliseconds. @@ -403,7 +403,7 @@ The tabs show the following: -In the above example, a breakpoint on the pipe's request for data shows the following: +In the preceding example, a breakpoint on the pipe's request for data shows the following: * Each binding gets its own pipe instance. * Each pipe instance caches its own URL and data and calls the server only once. diff --git a/aio/content/guide/property-binding.md b/aio/content/guide/property-binding.md index 5e63c64834..b92a24598e 100644 --- a/aio/content/guide/property-binding.md +++ b/aio/content/guide/property-binding.md @@ -2,7 +2,7 @@ # Property binding Property binding in Angular helps you set values for properties of HTML elements or directives. -With property binding, you can do things such as toggle button functionality, set paths programmatically, and share values between components. +Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.
    @@ -77,7 +77,7 @@ You'd get this error: Template parse errors: - Can't bind to 'colspan' since it isn't a known native property + Can't bind to 'colspan' because it isn't a known built-in property As the message says, the `` element does not have a `colspan` property. This is true @@ -191,7 +191,7 @@ The following binding pairs do the same thing. -You can use either form when rendering data values as strings, though interpolation is preferable for readability. +Use either form when rendering data values as strings, though interpolation is preferable for readability. However, when setting an element property to a non-string data value, you must use property binding. ## What's next diff --git a/aio/content/guide/svg-in-templates.md b/aio/content/guide/svg-in-templates.md index ddeba5309e..4f588f70bd 100644 --- a/aio/content/guide/svg-in-templates.md +++ b/aio/content/guide/svg-in-templates.md @@ -1,6 +1,6 @@ # SVG as templates -You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. With these features, you can dynamically generate interactive graphics. +You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. Use these features to dynamically generate interactive graphics.
    diff --git a/aio/content/guide/template-reference-variables.md b/aio/content/guide/template-reference-variables.md index fc0d91d8ee..ac2ca5855e 100644 --- a/aio/content/guide/template-reference-variables.md +++ b/aio/content/guide/template-reference-variables.md @@ -1,7 +1,7 @@ # Template variables Template variables help you use data from one part of a template in another part of the template. -With template variables, you can perform tasks such as respond to user input or finely tune your application's forms. +Use template variables to perform tasks such as respond to user input or finely tune your application's forms. A template variable can refer to the following: @@ -24,7 +24,7 @@ The following template variable, `#phone`, declares a `phone` variable on an ` -You can refer to a template variable anywhere in the component's template. +Refer to a template variable anywhere in the component's template. Here, a `