diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.2.html b/aio/content/examples/getting-started/src/app/cart/cart.component.2.html index 050618d664..829bc0e8fa 100644 --- a/aio/content/examples/getting-started/src/app/cart/cart.component.2.html +++ b/aio/content/examples/getting-started/src/app/cart/cart.component.2.html @@ -9,7 +9,7 @@
- {{ item.name }} + {{ item.name }} {{ item.price | currency }}
- \ No newline at end of file + diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.html b/aio/content/examples/getting-started/src/app/shipping/shipping.component.html index d4566bc318..72fc2d58e1 100644 --- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.html +++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.html @@ -1,6 +1,6 @@

Shipping Prices

- {{ shipping.type }} + {{ shipping.type }} {{ shipping.price | currency }} -
\ No newline at end of file + diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts index 4a86d5c664..6a04bcb55e 100644 --- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts +++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts @@ -16,7 +16,9 @@ export class ShippingComponent { // #enddocregion props // #docregion inject-cart-service - constructor(private cartService: CartService) { + constructor( + private cartService: CartService + ) { // #enddocregion inject-cart-service this.shippingCosts = this.cartService.getShippingPrices(); // #docregion inject-cart-service diff --git a/aio/content/start/data.md b/aio/content/start/data.md index a95b48c2cf..3afff3b116 100644 --- a/aio/content/start/data.md +++ b/aio/content/start/data.md @@ -6,7 +6,7 @@ Users can click on a product name from the list to see details in a new view, wi In this section, you'll create the shopping cart. You'll: * Update the product details page to include a "Buy" button, which adds the current product to a list of products managed by a cart service. * Add a cart component, which displays the items you added to your cart. -* Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's HttpClient to retrieve shipping data from a `.json` file. +* Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's `HttpClient` to retrieve shipping data from a `.json` file. {@a services} ## Services @@ -34,7 +34,7 @@ Later, in the [Forms](start/forms "Getting Started: Forms") part of this tutoria 1. Generate a cart service. - 1. Right click on the `app` folder, choose `Angular Generator`, and choose `**Service**`. Name the new service `cart`. + 1. Right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`. @@ -238,7 +238,7 @@ In this section, you'll use the HTTP client to retrieve shipping prices from an ### Predefined shipping data -For the purpose of this Getting Started, we have provided shipping data in `assets/shipping.json`. +For the purpose of this Getting Started guide, we have provided shipping data in `assets/shipping.json`. You'll use this data to add shipping prices for items in the cart. @@ -306,7 +306,7 @@ Here you'll define the `get()` method that will be used.
-Learn more: See the [HttpClient guide](guide/http "HttpClient guide") for more information about Angular's HttpClient. +Learn more: See the [HttpClient guide](guide/http "HttpClient guide") for more information about Angular's `HttpClient`.
diff --git a/aio/content/start/deployment.md b/aio/content/start/deployment.md index 2eed50a886..f909cd086e 100644 --- a/aio/content/start/deployment.md +++ b/aio/content/start/deployment.md @@ -52,7 +52,7 @@ This will produce the files that you need to deploy. #### Hosting the built project -The files in the `dist/my-project-name` folder are static and can be hosted on any web server capable of serving files (node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others). +The files in the `dist/my-project-name` folder are static and can be hosted on any web server capable of serving files (Node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others). ### Hosting an Angular app on Firebase diff --git a/aio/content/start/index.md b/aio/content/start/index.md index c648a05cdd..31e39be5c2 100644 --- a/aio/content/start/index.md +++ b/aio/content/start/index.md @@ -11,7 +11,7 @@ You don't need to install anything: you'll build the app using the [StackBlitz](
New to web development?
-You'll find many resources to complement the Angular docs. Mozilla's MDN docs include both [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") introductions. [TypeScript's docs](https://www.typescriptlang.org/docs/home.html "TypeScript documentation") include a 5-minute tutorial. Various online course platforms, such as [Udemy](http://www.udemy.com "Udemy online courses") and [Codeacademy](https://www.codecademy.com/ "Codeacademy online courses"), also cover web development basics. +You'll find many resources to complement the Angular docs. Mozilla's MDN docs include both [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") introductions. [TypeScript's docs](https://www.typescriptlang.org/docs/home.html "TypeScript documentation") include a 5-minute tutorial. Various online course platforms, such as [Udemy](http://www.udemy.com "Udemy online courses") and [Codecademy](https://www.codecademy.com/ "Codeacademy online courses"), also cover web development basics. @@ -69,7 +69,9 @@ In this section, you'll learn about template syntax by enhancing the "Products" `*ngFor` causes the `
` to be repeated for each product in the list.
- `*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 * 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. Any directive with an `*` is a structural directive. +
1. To display the names of the products, use the interpolation syntax {{ }}. Interpolation renders a property's value as text. Inside the `
`, add an `

` heading to display the interpolation of the product's name property: @@ -131,9 +133,9 @@ The app now has a product list and sharing feature. In the process, you've learned to use five common features of Angular's template syntax: * `*ngFor` * `*ngIf` -* Interpolation {{ }} -* Property binding [ ] -* Event binding ( ) +* Interpolation `{{ }}` +* Property binding `[ ]` +* Event binding `( )`