Recommended Free Tools
To show the housing location a visitor selected, pass its ID in a RouterLink, read that ID from the details route, and use it to retrieve and display the matching record. This is the focus of Angular’s current “Customize the details page” tutorial: connecting a routed details view to data selected on the home page.
How the route connects a selection to its details
The flow has four parts: a route pattern reserves a place for an ID, a link supplies the selected location’s ID, the details view reads it, and the service finds the matching record.
As an Amazon Associate I earn from qualifying purchases.
- Define the parameterized route. The preceding tutorial step uses a path such as
details/:id. The colon marksidas a route parameter, so different locations can use the same details view with different URLs. - Build a link for each location. Add Angular’s
RouterLinkdirective to the housing-location component and bind it to an array containing/detailsand that location’sid. Each item then navigates to its own details URL. - Read the current ID. In the details component, inject
ActivatedRouteand readidfrom the current route snapshot. Route parameters are read as strings; convert the value to a number for the tutorial’s numeric-ID lookup. - Find the record. Inject the tutorial’s
HousingServiceand callgetHousingLocationByIdwith the numeric ID. Store the returnedHousingLocationInfoso the view can use it. - Render its fields. Use the returned location to show the image, name, location, available units, Wi-Fi, and laundry information. The tutorial uses optional chaining on the location value, such as
housingLocation?.name, so a missing value does not cause a property-access error.
Angular Router handles navigation between views in a single-page application; the route parameter is what tells this shared details view which record to show. See the Angular routing overview for Router concepts and the route definitions guide for route patterns.
What to check in the application
The tutorial also relies on the app shell’s router setup and a link back to the home route. Confirm the router directives and providers are present where the app expects them, then use the tutorial’s manual check:
#1 Best Overall
- Open the home view and choose Learn More for a housing location.
- Check that the resulting details view shows the same location you selected.
- Use the home link to return and select a different location; its details should follow that selection.
Keep the example’s scope and naming clear
HousingService and HousingLocationInfo belong to this tutorial application; they are not Angular framework services or types. In a different app, use its own data service and record model while keeping the same routing pattern.
Use the current angular.dev lesson for current file names: it uses Details and details.ts. The Angular v18 version of the lesson uses the older DetailsComponent and details.component.ts naming. If you are following a project on a particular Angular version, match its conventions rather than mixing examples.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
