docs: Fix minor typos and coding styles (#35325)

- Fix minor typos in the Getting Started, Forms and AOT Compiler guide.
- Fix minor typo in the Tour of Heroes app.
- Fix coding styles in the Getting Started guide and the Tour of Heroes app

PR Close #35325

aio/content/examples/getting-started/src/app/cart/cart.component.ts

@@ -39,10 +39,10 @@ export class CartComponent implements OnInit {
   // #enddocregion props-services
   onSubmit(customerData) {
     // Process checkout data here
-    console.warn('Your order has been submitted', customerData);
-
     this.items = this.cartService.clearCart();
     this.checkoutForm.reset();
+
+    console.warn('Your order has been submitted', customerData);
   }
 // #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
 }

aio/content/examples/getting-started/src/app/product-details/product-details.component.ts

@@ -39,8 +39,8 @@ export class ProductDetailsComponent implements OnInit {
 // #enddocregion props-methods, get-product
 // #docregion add-to-cart
   addToCart(product) {
-    window.alert('Your product has been added to the cart!');
     this.cartService.addToCart(product);
+    window.alert('Your product has been added to the cart!');
   }
 // #docregion props-methods, get-product, inject-cart-service
 }

aio/content/guide/aot-compiler.md

@@ -570,7 +570,7 @@ In the template type-checking phase, the Angular template compiler uses the Type
 Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json`
 (see [Angular Compiler Options](guide/angular-compiler-options)).
 
-<div class="alert is-helpful>
+<div class="alert is-helpful">
 
 In [Angular Ivy](guide/ivy), the template type checker has been completely rewritten to be more capable as well as stricter, meaning it can catch a variety of new errors that the previous type checker would not detect.
 

aio/content/start/data.md

@@ -234,7 +234,7 @@ This section shows you how to use the HTTP client to retrieve shipping prices fr
 
 ### Predefined shipping data
 
-The app StackBlitz generates for this guide comes with predefined shipping data in `assets/shipping.json`.
+The application that StackBlitz generates for this guide comes with predefined shipping data in `assets/shipping.json`.
 Use this data to add shipping prices for items in the cart.
 
 <code-example header="src/assets/shipping.json" path="getting-started/src/assets/shipping.json">
@@ -314,7 +314,7 @@ Now that your app can retrieve shipping data, create a shipping component and  t
 
     There's no link to the new shipping component yet, but you can see its template in the preview pane by entering the URL its route specifies. The URL has the pattern: `https://getting-started.stackblitz.io/shipping` where the `getting-started.stackblitz.io` part may be different for your StackBlitz project.
 
-1. Modify the shipping component so it uses the cart service to retrieve shipping data via HTTP from the `shipping.json` file.
+1. Modify the shipping component so that it uses the cart service to retrieve shipping data via HTTP from the `shipping.json` file.
 
     1. Import the cart service.
 

aio/content/start/forms.md

@@ -40,7 +40,7 @@ of the constructor.
 
 1. For the checkout process, users need to submit their name and address. When they submit their order, the form should reset and the cart should clear.
 
-    1. In `cart.component.ts`, define an `onSubmit()` method to process the form. Use the `CartService` `clearCart()` method to empty the cart items and reset the form after it is submission. In a real-world app, this method would also submit the data to an external server. The entire cart component class is as follows:
+    1. In `cart.component.ts`, define an `onSubmit()` method to process the form. Use the `CartService` `clearCart()` method to empty the cart items and reset the form after its submission. In a real-world app, this method would also submit the data to an external server. The entire cart component class is as follows:
 
     <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts">
     </code-example>

aio/content/start/index.md

@@ -92,7 +92,7 @@ To help you get going, the following steps use predefined product data from the
 
       <div class="alert is-helpful">
 
-      `*ngFor` is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an asterisk, `*`, is a structural directive.
+      `*ngFor` is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Directives with an asterisk, `*`, are structural directives.
 
       </div>