docs: fix typos in several guides (#46453)

PR Close #46453

aio/content/guide/attribute-binding.md

@@ -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).

aio/content/guide/binding-overview.md

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

aio/content/guide/change-detection-skipping-subtrees.md

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

aio/content/guide/class-binding.md

@@ -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—with the exception of `undefined`.  See [styling delegation](guide/style-precedence#styling-delegation) for more information.
 
@@ -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.
 

aio/content/guide/interpolation.md

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

aio/content/guide/property-binding.md

@@ -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>
 
@@ -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 with each other, type the following:
 
 <code-example path="property-binding/src/app/app.component.html" region="model-property-binding" header="src/app/app.component.html"></code-example>
 

aio/content/guide/template-typecheck.md

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

aio/content/guide/upgrade.md

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