mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
fix(docs-infra): fix tutorial formatting issues (for v20) (#62457)
Fixes including, but not limited to: - `visibleLines` values - all codeblocks normalized to 2 spaces indentation - lesson 14-http sEverely de-indented - descriptions and explanations were rewritten to reflect the changes from @Input to input and from ngFor to @for - missing step added in lesson 11-details-page - rewritten confusing instructions for adding code that was already added in previous steps PR Close #62457
This commit is contained in:
sEver
Andrew Kushnir
parent
4f25a8a756
commit
d6765d9958
21 changed files with 206 additions and 217 deletions
|
|
@ -21,9 +21,9 @@ Learn more in the [Accepting data with input properties](guide/components/inputs
|
|||
<docs-workflow>
|
||||
|
||||
<docs-step title="Import the input() function">
|
||||
In the code editor, import the `input` helper method from `@angular/core` and the `HousingLocation` component.
|
||||
In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component.
|
||||
|
||||
<docs-code header="Import HousingLocation and Input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
|
||||
<docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -32,14 +32,14 @@ Add a required property called `housingLocation` and initialize it using `input.
|
|||
|
||||
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>
|
||||
|
||||
You have to invoked the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
|
||||
You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Pass data to the input">
|
||||
Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component.
|
||||
|
||||
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
|
||||
<docs-code header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ This tutorial lesson demonstrates how to add interpolation to Angular templates
|
|||
|
||||
## Conceptual preview of interpolation
|
||||
|
||||
In this step you will display values (properties and `Input` values) in a template using interpolation.
|
||||
In this step you will display values read from `input` properties in a template using interpolation.
|
||||
|
||||
Using the `{{ expression }}` in Angular templates, you can render values from properties, `Inputs` and valid JavaScript expressions.
|
||||
Using the `{{ expression }}` in Angular templates, you can render values from properties, `inputs`, and valid JavaScript expressions.
|
||||
|
||||
For a more in depth explanation, please refer to the [Displaying values with interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation) guide.
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ In the code editor:
|
|||
1. Navigate to `src/app/housing-location/housing-location.ts`
|
||||
1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code:
|
||||
|
||||
<docs-code header="Update HousingLocation template" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
|
||||
<docs-code header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ In the `Home` there is only a single housing location. In this step, you will ad
|
|||
|
||||
1. In `src/app/home/home.ts`, remove the `housingLocation` property from the `Home` class.
|
||||
1. Update the `Home` class to have a property called `housingLocationList`. Update your code to match the following code:
|
||||
<docs-code header="Add housingLocationList property" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/>
|
||||
<docs-code header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/>
|
||||
|
||||
IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step.
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ In the `Home` there is only a single housing location. In this step, you will ad
|
|||
Now the app has a dataset that you can use to display the entries in the browser using the `@for` block.
|
||||
|
||||
1. Update the `<app-housing-location>` tag in the template code to this:
|
||||
<docs-code header="Add @for to Home template" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[14,20]"/>
|
||||
<docs-code header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/>
|
||||
|
||||
Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.ts`, add an anchor tag to the `section` element and include the `routerLink` directive:
|
||||
|
||||
<docs-code header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[19]"/>
|
||||
<docs-code header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/>
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -57,11 +57,11 @@ In this step, you will get the route parameter in the `Details`. Currently, the
|
|||
|
||||
<docs-code language="javascript">
|
||||
export class Details {
|
||||
route: ActivatedRoute = inject(ActivatedRoute);
|
||||
housingLocationId = -1;
|
||||
constructor() {
|
||||
this.housingLocationId = Number(this.route.snapshot.params['id']);
|
||||
}
|
||||
route: ActivatedRoute = inject(ActivatedRoute);
|
||||
housingLocationId = -1;
|
||||
constructor() {
|
||||
this.housingLocationId = Number(this.route.snapshot.params['id']);
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -93,7 +93,10 @@ To access the data you will add a call to the `HousingService`.
|
|||
|
||||
<docs-code header="Add styles for the Details" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.css" visibleLines="[1,71]"/>
|
||||
|
||||
1. Save your changes.
|
||||
and save your changes
|
||||
|
||||
1. In `Details` use the just created `details.css` file as the source for the styles:
|
||||
<docs-code header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/>
|
||||
|
||||
1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item.
|
||||
|
||||
|
|
@ -101,14 +104,14 @@ To access the data you will add a call to the `HousingService`.
|
|||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Add navigation to the `Home`">
|
||||
<docs-step title="Check navigation in the `Home`">
|
||||
In a previous lesson you updated the `App` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `Home` whenever the logo is clicked.
|
||||
|
||||
1. Confirm that your code matches the following:
|
||||
|
||||
<docs-code header="Add routerLink to App" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/>
|
||||
<docs-code header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/>
|
||||
|
||||
Your code may already be up-to-date but confirm to be sure.
|
||||
Your code should already be up-to-date but confirm to be sure.
|
||||
</docs-step>
|
||||
|
||||
</docs-workflow>
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@ In this step, you'll update the `Home` class to store data in a new array proper
|
|||
|
||||
1. In `src/app/home/home.ts`, add new property to the class called `filteredLocationList`.
|
||||
|
||||
<docs-code header="Add the filtered results property" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[29]"/>
|
||||
<docs-code header="Add the filteredLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[27]"/>
|
||||
|
||||
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 `Home` to set the value.
|
||||
|
||||
<docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[29,32]"/>
|
||||
<docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[29,32]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -35,27 +35,18 @@ The `Home` already contains an input field that you will use to capture input fr
|
|||
|
||||
1. Update the `Home` template to include a template variable in the `input` element called `#filter`.
|
||||
|
||||
<docs-code header="Add a template variable to Home's template" language="html">
|
||||
<input type="text" placeholder="Filter by city" #filter>
|
||||
</docs-code>
|
||||
|
||||
<docs-code header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/>
|
||||
This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value.
|
||||
|
||||
1. Next, update the component template to attach an event handler to the "Search" button.
|
||||
|
||||
<docs-code header="Bind the click event" language="html">
|
||||
<button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
|
||||
</docs-code>
|
||||
<docs-code header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/>
|
||||
|
||||
By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element.
|
||||
|
||||
1. The last template update is to the `ngFor` directive. Update the `ngFor` value to iterate over values from the `filteredLocationList` array.
|
||||
1. The last template update is to the `@for` directive. Update the `@for` to iterate over values from the `filteredLocationList` array.
|
||||
|
||||
<docs-code header="Update the ngFor directive value" language="html">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
}
|
||||
</docs-code>
|
||||
<docs-code header="Update the @for template directive in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[17,19]" language="html"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,110 +26,110 @@ JSON Server is an open source tool used to create mock REST APIs. You'll use it
|
|||
|
||||
1. Open `db.json` and copy the following code into the file
|
||||
<docs-code language="json">
|
||||
{
|
||||
"locations": [
|
||||
{
|
||||
"locations": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "Acme Fresh Start Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
|
||||
"availableUnits": 4,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "A113 Transitional Housing",
|
||||
"city": "Santa Monica",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
|
||||
"availableUnits": 0,
|
||||
"wifi": false,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Warm Beds Housing Support",
|
||||
"city": "Juneau",
|
||||
"state": "AK",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Homesteady Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Happy Homes Group",
|
||||
"city": "Gary",
|
||||
"state": "IN",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Hopeful Apartment Group",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
|
||||
"availableUnits": 5,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Hopeful Housing Solutions",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
|
||||
"availableUnits": 10,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Capital Safe Towns",
|
||||
"city": "Portland",
|
||||
"state": "OR",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
|
||||
"availableUnits": 6,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
}
|
||||
]
|
||||
"id": 0,
|
||||
"name": "Acme Fresh Start Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
|
||||
"availableUnits": 4,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "A113 Transitional Housing",
|
||||
"city": "Santa Monica",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
|
||||
"availableUnits": 0,
|
||||
"wifi": false,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Warm Beds Housing Support",
|
||||
"city": "Juneau",
|
||||
"state": "AK",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Homesteady Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Happy Homes Group",
|
||||
"city": "Gary",
|
||||
"state": "IN",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Hopeful Apartment Group",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
|
||||
"availableUnits": 5,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Hopeful Housing Solutions",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
|
||||
"availableUnits": 10,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Capital Safe Towns",
|
||||
"city": "Portland",
|
||||
"state": "OR",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
|
||||
"availableUnits": 6,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
}
|
||||
]
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
1. Save this file.
|
||||
|
|
@ -150,33 +150,31 @@ The data source has been configured, the next step is to update your web app to
|
|||
|
||||
1. In `src/app/housing.service.ts`, make the following changes:
|
||||
|
||||
1. Update the code to remove `housingLocationList` property and the array containing the data.
|
||||
1. Update the code to remove `housingLocationList` property and the array containing the data, as well as the `baseUrl` property.
|
||||
|
||||
1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'`
|
||||
1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'`
|
||||
|
||||
<docs-code language="javascript">
|
||||
url = 'http://localhost:3000/locations';
|
||||
</docs-code>
|
||||
<docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/>
|
||||
|
||||
This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next.
|
||||
This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next.
|
||||
|
||||
1. Update the `getAllHousingLocations` function to make a call to the web server you configured.
|
||||
1. Update the `getAllHousingLocations` function to make a call to the web server you configured.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/>
|
||||
<docs-code header="Update the getAllHousingLocations method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/>
|
||||
|
||||
The code now uses asynchronous code to make a **GET** request over HTTP.
|
||||
The code now uses asynchronous code to make a **GET** request over HTTP.
|
||||
|
||||
HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular.
|
||||
HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular.
|
||||
|
||||
1. Update the `getHousingLocationsById` function to make a call to the web server you configured.
|
||||
|
||||
HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information.
|
||||
1. Update the `getHousingLocationsById` function to make a call to the web server you configured.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,19]"/>
|
||||
HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information.
|
||||
|
||||
1. Once all the updates are complete, your updated service should match the following code.
|
||||
<docs-code header="Update the getHousingLocationById method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,19]"/>
|
||||
|
||||
<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" />
|
||||
1. Once all the updates are complete, your updated service should match the following code.
|
||||
|
||||
<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" />
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -185,12 +183,11 @@ The server is now reading data from the HTTP request but the components that rel
|
|||
|
||||
1. In `src/app/home/home.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/>
|
||||
<docs-code header="Update constructor in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/>
|
||||
|
||||
1. In `src/app/details/details.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/>
|
||||
|
||||
<docs-code header="Update constructor in details.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/>
|
||||
2. Save your code.
|
||||
|
||||
3. Open the application in the browser and confirm that it runs without any errors.
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {HousingService} from '../housing.service';
|
|||
</form>
|
||||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
@for(housingLocation of filteredLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {HousingService} from '../housing.service';
|
|||
</form>
|
||||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
@for(housingLocation of filteredLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@ To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ng
|
|||
import { NgOptimizedImage } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
template: ` ...
|
||||
template: `
|
||||
...
|
||||
<li>
|
||||
Static Image:
|
||||
<img ngSrc="/assets/logo.svg" alt="Angular logo" width="32" height="32" />
|
||||
|
|
@ -46,7 +47,7 @@ template: ` ...
|
|||
</li>
|
||||
...
|
||||
`,
|
||||
imports: [NgOptimizedImage],
|
||||
imports: [NgOptimizedImage],
|
||||
})
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ import {provideRouter} from '@angular/router';
|
|||
import {routes} from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(routes)],
|
||||
providers: [provideRouter(routes)],
|
||||
};
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -55,15 +55,16 @@ Update the template for `App` by adding `<router-outlet />`
|
|||
import {RouterOutlet} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
...
|
||||
template: ` <nav>
|
||||
...
|
||||
template: `
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
|
|
||||
<a href="/user">User</a>
|
||||
</nav>
|
||||
<router-outlet />
|
||||
`,
|
||||
imports: [RouterOutlet],
|
||||
imports: [RouterOutlet],
|
||||
})
|
||||
export class App {}
|
||||
</docs-code>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ To define a route, add a route object to the `routes` array in `app.routes.ts` t
|
|||
|
||||
```ts
|
||||
import {Routes} from '@angular/router';
|
||||
|
||||
import {Home} from './home/home';
|
||||
|
||||
export const routes: Routes = [
|
||||
|
|
@ -46,15 +45,14 @@ In `app.routes.ts`, add the `title` property to the default route (`path: ''`) a
|
|||
|
||||
<docs-code language="ts" highlight="[8]">
|
||||
import {Routes} from '@angular/router';
|
||||
|
||||
import {Home} from './home/home';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
title: 'App Home Page',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
title: 'App Home Page',
|
||||
component: Home,
|
||||
},
|
||||
];
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ import {Component} from '@angular/core';
|
|||
import {FormsModule} from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
...
|
||||
imports: [FormsModule],
|
||||
...
|
||||
imports: [FormsModule],
|
||||
})
|
||||
export class User {}
|
||||
</docs-code>
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ export class User {
|
|||
favoriteFramework = '';
|
||||
...
|
||||
|
||||
showFramework() {
|
||||
alert(this.favoriteFramework);
|
||||
}
|
||||
showFramework() {
|
||||
alert(this.favoriteFramework);
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ To make a service eligible to be injected by the DI system use the `@Injectable`
|
|||
|
||||
<docs-code language="ts" highlight="[1, 2, 3]">
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root'
|
||||
})
|
||||
class UserService {
|
||||
// methods to retrieve and return data
|
||||
// methods to retrieve and return data
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ It is often helpful to initialize class properties with values provided by the D
|
|||
<docs-code language="ts" highlight="[3]">
|
||||
@Component({...})
|
||||
class PetCareDashboard {
|
||||
petRosterService = inject(PetRosterService);
|
||||
petRosterService = inject(PetRosterService);
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ To use a pipe in a template include it in an interpolated expression. Check out
|
|||
import {UpperCasePipe} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
...
|
||||
template: `{{ loudMessage | uppercase }}`,
|
||||
imports: [UpperCasePipe],
|
||||
...
|
||||
template: `{{ loudMessage | uppercase }}`,
|
||||
imports: [UpperCasePipe],
|
||||
})
|
||||
class App {
|
||||
loudMessage = 'we think you are doing great!'
|
||||
loudMessage = 'we think you are doing great!'
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -41,8 +41,8 @@ Next, update `@Component()` decorator `imports` to include a reference to `Lower
|
|||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
@Component({
|
||||
...
|
||||
imports: [LowerCasePipe]
|
||||
...
|
||||
imports: [LowerCasePipe]
|
||||
})
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ In `app.ts`, update the template to include parameter for the `decimal` pipe.
|
|||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
template: `
|
||||
...
|
||||
<li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
|
||||
...
|
||||
<li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
|
||||
`
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -41,8 +41,8 @@ Now, update the template to use the `date` pipe.
|
|||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
template: `
|
||||
...
|
||||
<li>Date with "date" {{ birthday | date: 'medium' }}</li>
|
||||
...
|
||||
<li>Date with "date" {{ birthday | date: 'medium' }}</li>
|
||||
`
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -56,8 +56,8 @@ For your last task, update the template to use the `currency` pipe.
|
|||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
template: `
|
||||
...
|
||||
<li>Currency with "currency" {{ cost | currency }}</li>
|
||||
...
|
||||
<li>Currency with "currency" {{ cost | currency }}</li>
|
||||
`
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and pr
|
|||
|
||||
```ts
|
||||
@Pipe({
|
||||
name: 'reverse'
|
||||
name: 'reverse'
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -50,16 +50,15 @@ Now the `ReversePipe` class is a pipe. Update the `transform` function to add th
|
|||
|
||||
<docs-code language="ts" highlight="[3,4,5,6,7,8,9]">
|
||||
export class ReversePipe implements PipeTransform {
|
||||
transform(value: string): string {
|
||||
let reverse = '';
|
||||
transform(value: string): string {
|
||||
let reverse = '';
|
||||
|
||||
for (let i = value.length - 1; i >= 0; i--) {
|
||||
reverse += value[i];
|
||||
}
|
||||
|
||||
return reverse;
|
||||
for (let i = value.length - 1; i >= 0; i--) {
|
||||
reverse += value[i];
|
||||
}
|
||||
|
||||
return reverse;
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -70,9 +69,9 @@ With the pipe logic implemented, the final step is to use it in the template. In
|
|||
|
||||
<docs-code language="angular-ts" highlight="[3,4]">
|
||||
@Component({
|
||||
...
|
||||
template: `Reverse Machine: {{ word | reverse }}`
|
||||
imports: [ReversePipe]
|
||||
...
|
||||
template: `Reverse Machine: {{ word | reverse }}`
|
||||
imports: [ReversePipe]
|
||||
})
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ Update the code in `app.ts` by adding a property to the `App` class called `isEd
|
|||
|
||||
<docs-code highlight="[2]">
|
||||
export class App {
|
||||
isEditable = true;
|
||||
isEditable = true;
|
||||
}
|
||||
</docs-code>
|
||||
</docs-step>
|
||||
|
|
@ -35,8 +35,8 @@ Next, bind the `contentEditable` attribute of the `div` to the `isEditable` prop
|
|||
|
||||
<docs-code highlight="[3]" language="angular-ts">
|
||||
@Component({
|
||||
...
|
||||
template: `<div [contentEditable]="isEditable"></div>`,
|
||||
...
|
||||
template: `<div [contentEditable]="isEditable"></div>`,
|
||||
})
|
||||
</docs-code>
|
||||
</docs-step>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ In Angular you bind to events with the parentheses syntax `()`. On a given eleme
|
|||
|
||||
```angular-ts
|
||||
@Component({
|
||||
...
|
||||
template: `<button (click)="greet()">`
|
||||
...
|
||||
template: `<button (click)="greet()">`
|
||||
})
|
||||
class App {
|
||||
greet() {
|
||||
console.log('Hello, there 👋');
|
||||
}
|
||||
greet() {
|
||||
console.log('Hello, there 👋');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ Add the `onMouseOver` event handler function in the `App` class. Use the followi
|
|||
|
||||
```ts
|
||||
onMouseOver() {
|
||||
this.message = 'Way to go 🚀';
|
||||
this.message = 'Way to go 🚀';
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ To create the communication path from child to parent components, use the `outpu
|
|||
<docs-code header="child.ts" language="ts">
|
||||
@Component({...})
|
||||
class Child {
|
||||
incrementCountEvent = output<number>();
|
||||
incrementCountEvent = output<number>();
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
@ -23,13 +23,12 @@ Now the component can generate events that can be listened to by the parent comp
|
|||
|
||||
<docs-code header="child.ts" language="ts">
|
||||
class Child {
|
||||
...
|
||||
|
||||
onClick() {
|
||||
this.count++;
|
||||
this.incrementCountEvent.emit(this.count);
|
||||
}
|
||||
...
|
||||
|
||||
onClick() {
|
||||
this.count++;
|
||||
this.incrementCountEvent.emit(this.count);
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue