X Tutup
Skip to content

docs: fix typos on first-app tutorial #50211

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.

Sign up for GitHub

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

Closed
emartinez-dev wants to merge 1 commit into from
Closed

docs: fix typos on first-app tutorial #50211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions aio/content/tutorial/first-app/first-app-lesson-01.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ If you have any trouble during this lesson, you can review the completed code fo

## Lesson steps

Perform these steps on the app code in your chosen IDE (locallly or using the StackBlitz).
Perform these steps on the app code in your chosen IDE (locally or using the StackBlitz).

### Step 1 - Test the default app

Expand Down Expand Up @@ -117,7 +117,7 @@ In your IDE:
</section>
## Lesson review

In this lesson, you updated a default Angualar app to display *Hello world*.
In this lesson, you updated a default Angular app to display *Hello world*.
In the process, you learned about the `ng serve` command to serve your app locally for testing.

If have any trouble with this lesson, review the completed code for it in the <live-example></live-example>.
Expand Down
2 changes: 1 addition & 1 deletion aio/content/tutorial/first-app/first-app-lesson-03.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ In the **Edit** pane of your IDE:

<code-example header="Add HousingLocationComponent to imports array in src/app/home/home.component.ts" path="first-app-lesson-03/src/app/home/home.component.ts" region="add-housingLocation-to-array"></code-example>

1. Now the component is ready for use in the template for the `HomeComponent`. Update the `template` property of the `@Component` metatdata to include a reference to the `<app-housing-location>` tag.
1. Now the component is ready for use in the template for the `HomeComponent`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag.

<code-example header="Add housing location to the component template in src/app/home/home.component.ts" path="first-app-lesson-03/src/app/home/home.component.ts" region="add-housingLocation-to-template"></code-example>

Expand Down
2 changes: 1 addition & 1 deletion aio/content/tutorial/first-app/first-app-lesson-04.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ This step adds the properties to the interface that your app needs to represent

1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.

At this point, you've defined an inteface that represents data about a housing location including an id, name, and location information.
At this point, you've defined an interface that represents data about a housing location including an id, name, and location information.

### Step 3 - Create a test house for your app

Expand Down
2 changes: 1 addition & 1 deletion aio/content/tutorial/first-app/first-app-lesson-06.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ For a more in depth explanation, please refer to the [Property binding](guide/pr

Perform these steps on the app code in your IDE.

### Step 1 - Update <app-housing-location> tag in the `HomeComponent` tempalte
### Step 1 - Update <app-housing-location> tag in the `HomeComponent` template
This step adds property binding to the `<app-housing-location>` tag.

In the code editor:
Expand Down
6 changes: 3 additions & 3 deletions aio/content/tutorial/first-app/first-app-lesson-07.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ For a more in depth explanation, please refer to the [Displaying values with int

Perform these steps on the app code in your IDE.

### Step 1 - Update `HousingLocationComponent` template to include iterpolated values
### Step 1 - Update `HousingLocationComponent` template to include interpolated values
This step adds new HTML structure and interpolated values in the `HousingLocationComponent` template.

In the code editor:
Expand All @@ -44,9 +44,9 @@ In the code editor:

<code-example header="Update HousingLocationComponent template" path="first-app-lesson-07/src/app/housing-location/housing-location.component.ts" region="add-listing-details"></code-example>

In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpoloation to give more context to the alt text of the image.
In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image.

You use interpoloation to include the values for name, city and state of the `housingLocation` property.
You use interpolation to include the values for name, city and state of the `housingLocation` property.

### Step 2 - Confirm the changes render in the browser
1. Save all changes.
Expand Down
2 changes: 1 addition & 1 deletion aio/content/tutorial/first-app/first-app-lesson-10.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ In the previous step you removed the reference to the `<app-home>` component in

<code-example header="Add routes to the app" path="first-app-lesson-10/src/app/routes.ts" region="define-app-routes"></code-example>

The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `HomeComponent` whenever the url matches `''`. The second entry uses some special formatting that will be revisted in a future lesson.
The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `HomeComponent` whenever the url matches `''`. The second entry uses some special formatting that will be revisited in a future lesson.

1. Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations.

Expand Down
12 changes: 6 additions & 6 deletions aio/content/tutorial/first-app/first-app-lesson-11.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ If you have any trouble during this lesson, you can review the completed code fo
At the end of this lesson your application will have support for routing to the details page.

## Conceptual preview of routing with route parameters
In the previous lesson, you added routing to your app and in this lesson you will expand the types of routing your app supports. Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accopmlish this goal, you will need to use route parameters.
In the previous lesson, you added routing to your app and in this lesson you will expand the types of routing your app supports. Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accomplish this goal, you will need to use route parameters.

Route parameters enable you to include dynamic information as a part of your route URL. To identify which housing location a user has clicked on you will use the `id` property of the `HousingLocation` type.

Expand All @@ -30,7 +30,7 @@ Route parameters enable you to include dynamic information as a part of your rou
Perform these steps on the app code in your IDE.

### Step 1 - Create a new service for your app
In lesson 10, you added a second route to `src/app/routes.ts`, this route includes a special segment that identifes the route parameter, `id`:
In lesson 10, you added a second route to `src/app/routes.ts`, this route includes a special segment that identifies the route parameter, `id`:

<code-example format="javascript" language="javascript">
'details/:id'
Expand Down Expand Up @@ -111,7 +111,7 @@ To access the data you will add a call to the `HousingService`.
</section>

### Step 4 - Add navigation to the `HomeComponent`
In a previous lesson you updated the `AppComponent` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `HomeComponent` whenver the logo is clicked.
In a previous lesson you updated the `AppComponent` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `HomeComponent` whenever the logo is clicked.

1. Confirm that your code matches the following:

Expand All @@ -121,9 +121,9 @@ In a previous lesson you updated the `AppComponent` template to include a `route

## Lesson Review
In this lesson you updated your app to:
* use route paramters to pass data to a route
* use route parameters to pass data to a route
* use the `routerLink` directive to use dynamic data to create a route
* use route paramter to retrieve data from the `HousingService` to display housing location specific information.
* use route parameter to retrieve data from the `HousingService` to display housing location specific information.

Really great work so far.

Expand All @@ -137,7 +137,7 @@ If you are having any trouble with this lesson, you can review the completed cod
For more information about the topics covered in this lesson, visit:

<!-- vale Angular.Google_WordListSuggestions = NO -->
* [Route Paremters](guide/router#accessing-query-parameters-and-fragments)
* [Route Parameters](guide/router#accessing-query-parameters-and-fragments)
* [Routing in Angular Overview](guide/routing-overview)
* [Common Routing Tasks](guide/router)
* [Optional Chaining Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
X Tutup