diff --git a/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md b/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md index 7f141448f41..576ac3fc815 100644 --- a/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md +++ b/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md @@ -70,11 +70,11 @@ In the **Edit** pane of your IDE: 1. In `app.component.ts`, in `@Component`, update the `imports` array property and add `HomeComponent`. - + 1. In `app.component.ts`, in `@Component`, update the `template` property to include the following HTML code. - + 1. Save your changes to `app.component.ts`. 1. If `ng serve` is running, the app should update. @@ -87,6 +87,7 @@ In the **Edit** pane of your IDE: + In this step you add features to `HomeComponent`. In the previous step, you added the default `HomeComponent` to your app's template so its default HTML appeared in the app. @@ -99,7 +100,7 @@ In the **Edit** pane of your IDE: 1. In the `first-app` directory, open `home.component.ts` in the editor. 1. In `home.component.ts`, in `@Component`, update the `template` property with this code. - + 1. Next, open `home.component.css` in the editor and update the content with these styles. diff --git a/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md b/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md index d13906fc754..e43e884e7cb 100644 --- a/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md +++ b/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md @@ -51,11 +51,11 @@ In the **Edit** pane of your IDE: 1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocationComponent` to the array. - + 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 `` tag. - + diff --git a/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md b/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md index 5406268baf1..e131eac23a0 100644 --- a/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md +++ b/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md @@ -48,7 +48,7 @@ This step adds the properties to the interface that your app needs to represent 1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file. 1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example. - + 1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step. @@ -70,11 +70,11 @@ There are a few more lessons to complete before that happens. 1. In `src/app/home/home.component.ts`, replace the empty `export class HomeComponent {}` definition with this code to create a single instance of the new interface in the component. - + 1. Confirm that your `home.component.ts` file matches like this example. - + By adding the `housingLocation` property of type `HousingLocation` to the `HomeComponent` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors. diff --git a/adev/src/content/tutorials/first-app/steps/05-inputs/README.md b/adev/src/content/tutorials/first-app/steps/05-inputs/README.md index c78a8b4047d..9cc8ec4d7b2 100644 --- a/adev/src/content/tutorials/first-app/steps/05-inputs/README.md +++ b/adev/src/content/tutorials/first-app/steps/05-inputs/README.md @@ -33,7 +33,7 @@ In the code editor: 1. In the same file, add a property called `housingLocation` of type `HousingLocation` to the `HousingLocationComponent` class. Add an `!` after the property name and prefix it with the `@Input()` decorator: - + You have to add the `!` because the input is expecting the value to be passed. In this case, there is no default value. In our example application case we know that the value will be passed in - this is by design. The exclamation point is called the non-null assertion operator and it tells the TypeScript compiler that the value of this property won't be null or undefined. diff --git a/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md index b147eb21381..dcd69c6bafe 100644 --- a/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md +++ b/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md @@ -26,7 +26,7 @@ In the code editor: 1. Navigate to `src/app/home/home.component.ts` 1. In the template property of the `@Component` decorator, update the code to match the code below: - + When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value. diff --git a/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md b/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md index 1a29c478b1e..7443192e594 100644 --- a/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md +++ b/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md @@ -27,7 +27,7 @@ In the code editor: 1. Navigate to `src/app/housing-location/housing-location.component.ts` 1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code: - + 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. diff --git a/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md b/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md index 5af091d5bf9..c711d4aaf71 100644 --- a/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md +++ b/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md @@ -25,7 +25,7 @@ In the `HomeComponent` there is only a single housing location. In this step, yo 1. In `src/app/home/home.component.ts`, remove the `housingLocation` property from the `HomeComponent` class. 1. Update the `HomeComponent` class to have a property called `housingLocationList`. Update your code to match the following code: - + IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step. @@ -35,7 +35,7 @@ In the `HomeComponent` there is only a single housing location. In this step, yo Now the app has a dataset that you can use to display the entries in the browser using the `ngFor` directive. 1. Update the `` tag in the template code to this: - + Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it referred to the property on the `HomeComponent` class. diff --git a/adev/src/content/tutorials/first-app/steps/09-services/README.md b/adev/src/content/tutorials/first-app/steps/09-services/README.md index 0338f3366df..da436da636b 100644 --- a/adev/src/content/tutorials/first-app/steps/09-services/README.md +++ b/adev/src/content/tutorials/first-app/steps/09-services/README.md @@ -87,7 +87,7 @@ In the **Edit** pane of your IDE, in `src/app/home/home.component.ts`: 1. In `HomeComponent`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`. - + 1. Save the changes to `src/app/home/home.component.ts` and confirm your app builds without error. Correct any errors before you continue to the next step. diff --git a/adev/src/content/tutorials/first-app/steps/10-routing/README.md b/adev/src/content/tutorials/first-app/steps/10-routing/README.md index dab1d2b2078..2bdd6cea7a9 100644 --- a/adev/src/content/tutorials/first-app/steps/10-routing/README.md +++ b/adev/src/content/tutorials/first-app/steps/10-routing/README.md @@ -49,11 +49,11 @@ In this lesson, you will enable routing in your application to navigate to the d 1. Add `RouterModule` to the `@Component` metadata imports - + 1. In the `template` property, replace the `` tag with the `` directive and add a link back to the home page. Your code should match this code: - + diff --git a/adev/src/content/tutorials/first-app/steps/11-details-page/README.md b/adev/src/content/tutorials/first-app/steps/11-details-page/README.md index a337654def5..f3cb45be0f5 100644 --- a/adev/src/content/tutorials/first-app/steps/11-details-page/README.md +++ b/adev/src/content/tutorials/first-app/steps/11-details-page/README.md @@ -29,7 +29,7 @@ In this case, `:id` is dynamic and will change based on how the route is request 1. In `src/app/housing-location/housing-location.component.ts`, add an anchor tag to the `section` element and include the `routerLink` directive: - + The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data. @@ -53,7 +53,7 @@ In this step, you will get the route parameter in the `DetailsComponent`. Curren template: `

details works! {{ housingLocationId }}

`, -1. Update the body of the `DetailsComponent` with the following code: +1. Update the body of the `DetailsComponent` class with the following code: export class DetailsComponent { @@ -79,13 +79,13 @@ To access the data you will add a call to the `HousingService`. 1. Update the template code to match the following code: - + Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash. 1. Update the body of the `DetailsComponent` class to match the following code: - + Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function. @@ -106,7 +106,7 @@ In a previous lesson you updated the `AppComponent` template to include a `route 1. Confirm that your code matches the following: - + Your code may already be up-to-date but confirm to be sure. diff --git a/adev/src/content/tutorials/first-app/steps/12-forms/README.md b/adev/src/content/tutorials/first-app/steps/12-forms/README.md index eb828f0d3e5..244ea4d6217 100644 --- a/adev/src/content/tutorials/first-app/steps/12-forms/README.md +++ b/adev/src/content/tutorials/first-app/steps/12-forms/README.md @@ -25,7 +25,7 @@ In the **Edit** pane of your IDE: 1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition. - + 1. Confirm that the app builds without error. Correct any errors before you continue to the next step. @@ -42,7 +42,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: 1. In the `DetailsComponent` decorator metadata, update the `imports` property with the following code: - + 1. In the `DetailsComponent` class, before the `constructor()` method, add the following code to create the form object. @@ -52,7 +52,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: 1. In the `DetailsComponent` class, after the `constructor()` method, add the following code to handle the **Apply now** click. - + This button does not exist yet - you will add it in the next step. In the above code, the `FormControl`s may return `null`. This code uses the nullish coalescing operator to default to empty string if the value is `null`. @@ -67,7 +67,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: 1. In the `DetailsComponent` decorator metadata, update the `template` HTML to match the following code to add the form's markup. - + The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events. diff --git a/adev/src/content/tutorials/first-app/steps/13-search/README.md b/adev/src/content/tutorials/first-app/steps/13-search/README.md index a81a07d0625..d056e13575f 100644 --- a/adev/src/content/tutorials/first-app/steps/13-search/README.md +++ b/adev/src/content/tutorials/first-app/steps/13-search/README.md @@ -20,13 +20,13 @@ In this step, you'll update the `HomeComponent` class to store data in a new arr 1. In `src/app/home/home.component.ts`, add new property to the class called `filteredLocationList`. - + The `filteredLocationList` hold the values that match the search criteria entered by the user. 1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `HomeComponent` to set the value. - + @@ -62,7 +62,7 @@ The template has been updated to bind the `filterResults` function to the `click 1. Update the `HomeComponent` class to include the implementation of the `filterResults` function. - + This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise. diff --git a/adev/src/content/tutorials/first-app/steps/14-http/README.md b/adev/src/content/tutorials/first-app/steps/14-http/README.md index 4a52213897f..9ffb777fa68 100644 --- a/adev/src/content/tutorials/first-app/steps/14-http/README.md +++ b/adev/src/content/tutorials/first-app/steps/14-http/README.md @@ -162,7 +162,7 @@ The data source has been configured, the next step is to update your web app to 1. Update the `getAllHousingLocations` function to make a call to the web server you configured. - + The code now uses asynchronous code to make a **GET** request over HTTP. @@ -170,11 +170,11 @@ The data source has been configured, the next step is to update your web app to 1. Update the `getHousingLocationsById` function to make a call to the web server you configured. - + 1. Once all the updates are complete, your updated service should match the following code. - + @@ -183,7 +183,7 @@ The server is now reading data from the HTTP request but the components that rel 1. In `src/app/home/home.component.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method. - + 1. In `src/app/details/details.component.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method.