Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix typos in several guides #46453

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion aio/content/guide/attribute-binding.md
Expand Up @@ -58,7 +58,7 @@ This binding causes the `<tr>` to span two columns.

Sometimes there are differences between the name of property and an attribute.

`colspan` is an attribute of `<tr>`, while `colSpan` with a capital "S" is a property.
`colspan` is an attribute of `<td>`, while `colSpan` with a capital "S" is a property.
When using attribute binding, use `colspan` with a lowercase "s".

For more information on how to bind to the `colSpan` property, see the [`colspan` and `colSpan`](guide/property-binding#colspan) section of [Property Binding](guide/property-binding).
Expand Down
2 changes: 1 addition & 1 deletion aio/content/guide/binding-overview.md
Expand Up @@ -76,7 +76,7 @@ Conversely, `customer` in the `<h1>` doesn't include Ebony or Chiho because the

## Expression best practices

When using template a expression, follow these best practices:
When using a template expression, follow these best practices:

* **Use short expressions**

Expand Down
2 changes: 1 addition & 1 deletion aio/content/guide/change-detection-skipping-subtrees.md
Expand Up @@ -11,7 +11,7 @@ If you are confident that a part of the application is not affected by a state c

OnPush change detection instructs Angular to run change detection for a component subtree **only** when:
* The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with `==`
* Angular handles an event _(e.g. using event binding, output binding, or `@HostListener`)_ in the subtree's root component or any of its children wether they are using OnPush change detection or not.
* Angular handles an event _(e.g. using event binding, output binding, or `@HostListener`)_ in the subtree's root component or any of its children whether they are using OnPush change detection or not.

You can set the change detection strategy of a component to `OnPush` in the `@Component` decorator:

Expand Down
4 changes: 2 additions & 2 deletions aio/content/guide/class-binding.md
Expand Up @@ -10,7 +10,7 @@ Use class and style bindings to add and remove CSS class names from an element's

To create a single class binding, type the following:

[class.sale]="onSale"
`[class.sale]="onSale"`

Angular adds the class when the bound expression, `onSale` is truthy, and it removes the class when the expression is falsy&mdash;with the exception of `undefined`. See [styling delegation](guide/style-precedence#styling-delegation) for more information.

Expand Down Expand Up @@ -50,7 +50,7 @@ The following table summarizes class binding syntax.

To create a single style binding, use the prefix `style` followed by a dot and the name of the CSS style.

For example, set the width style, type the following: `[style.width]="width"`
For example, to set the `width` style, type the following: `[style.width]="width"`

Angular sets the property to the value of the bound expression, which is usually a string. Optionally, you can add a unit extension like `em` or `%`, which requires a number type.

Expand Down
4 changes: 2 additions & 2 deletions aio/content/guide/interpolation.md
Expand Up @@ -10,15 +10,15 @@

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:
To illustrate how interpolation works, consider an Angular component that contains a `currentCustomer` variable:

<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:

<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1"></code-example>

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

Expand Down
4 changes: 2 additions & 2 deletions aio/content/guide/property-binding.md
Expand Up @@ -68,7 +68,7 @@ Declare the `itemImageUrl` property in the class, in this case `AppComponent`.

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 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>

Expand All @@ -80,7 +80,7 @@ To set a property of a directive, type the following:

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

To set the model property of a custom component for parent and child components to communicated, type the following:
To set the model property of a custom component for parent and child components to communicate each other, type the following:
bampakoa marked this conversation as resolved.
Show resolved Hide resolved

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

Expand Down
4 changes: 2 additions & 2 deletions aio/content/guide/template-typecheck.md
Expand Up @@ -348,13 +348,13 @@ Care should be taken that if an `ngAcceptInputType_` override is present for a g
Disable checking of a binding expression by surrounding the expression in a call to the [`$any()` cast pseudo-function](guide/template-expression-operators).
The compiler treats it as a cast to the `any` type just like in TypeScript when a `<any>` or `as any` cast is used.

In the following example, casting `person` to the `any` type suppresses the error `Property addresss does not exist`.
In the following example, casting `person` to the `any` type suppresses the error `Property address does not exist`.

<code-example format="typescript" language="typescript">

&commat;Component({
selector: 'my-component',
template: '{{&dollar;any(person).addresss.street}}'
template: '{{&dollar;any(person).address.street}}'
})
class MyComponent {
person?: Person;
Expand Down
2 changes: 1 addition & 1 deletion aio/content/guide/upgrade.md
Expand Up @@ -364,7 +364,7 @@ The result is an AngularJS *directive*, which you can then register in the Angul
<div class="alert is-helpful">

By default, Angular change detection will also run on the component for everyAngularJS `$digest` cycle.
If you want to only have change detection run when the inputs change, you can set `propagateDigest` to `false` when calling`downgradeComponent()`.
If you want to only have change detection run when the inputs change, you can set `propagateDigest` to `false` when calling `downgradeComponent()`.

</div>

Expand Down