From the course: Angular: Creating and Hosting a Full-Stack Site
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Create a Listing Detail page
From the course: Angular: Creating and Hosting a Full-Stack Site
Create a Listing Detail page
- [Instructor] So now that we've got our listings page working and linking to the corresponding detail page for each listing, it's time to actually implement the listing-detail-page. So let's open up our listing-detail-page TypeScript and HTML files and before we begin here, there's something to know about this page. Remember that earlier when we were creating the routes for our applications, there were several routes that we created with this ID URL parameter thing. Now, you may have noticed that when we navigate from our listings-page to our listing-detail-page, the URL that we're navigating to contains the ID of the individual listing that we clicked on. So what we're going to have to do on this page is somehow get access to the value of this part of the URL and use that to display the corresponding listing from our fake listings array on our page. So here's how we do that in Angular. Let's open up our TypeScript file…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
Why Angular?3m 5s
-
(Locked)
Set up an Angular project2m 4s
-
(Locked)
Angular project structure3m 47s
-
(Locked)
Create your first Angular component2m 55s
-
(Locked)
Routes and routing in Angular9m 45s
-
(Locked)
Add fake data3m 3s
-
(Locked)
Implement the Listings page5m 13s
-
(Locked)
Create a Listing Detail page5m 33s
-
(Locked)
Create a Contact Seller page9m 5s
-
(Locked)
Create a My Listings page4m 27s
-
(Locked)
Create a New Listings page5m 47s
-
(Locked)
Create a Listing Data form3m 57s
-
(Locked)
Create an Edit Listing page11m 14s
-
(Locked)
Create a navigation bar3m 1s
-
-
-
-
-
-
-