Angular Router - The Basics and Beyond
Why Stack Overflow recommends it
Stack Overflow users link it as a beginner-friendly walkthrough of Angular routing when answering questions about navigation, route data and structuring components with the router.
Recommended by 2 people across 2 different months, 2019 to 2022.
What it is
A Fireship tutorial on the Angular v6 router, starting with basic route setup and router-outlet and moving on to advanced topics such as route guards and resolvers. It is a short, fast-paced screencast with links to the router docs and a lazy loading follow-up.
What people said
Recommends Sivuyile TG Magutywa · 2020-02 · Stack Overflow · on “Trying to use single Angular component as template for multiple HTML content”
@DavidMarshall the stackblitz link above has the example you require, you just need to understand how the Angular Router works and also Angular Modules. understand both Angular Modules and Angular Router will make it easy to structure your app the way you want. here is a youtube channel explaining router [this video]
Recommends Elmehdi · 2020-10 · Stack Overflow · on “How to pass value(index) through navigateByUrl”
Just follow along with this video: link [this video] it's explaining exactly what you want to achieve with angular router. EDIT: You can visit this demo too: link [LINK] , and notive the relationship between hero-list component and hero-detail component, both of them inside heroes folder. for example, in the demo app, if you click on heroes you navigate to hero-list component, and after that if you click on Dr Nice for example: [LINK] you navigate to hero-detail component, but with data corresponding to Dr Nice : [LINK]
Cites Tayamba · 2019-08 · Stack Overflow · on “How to get data from Route or ActivatedRoute when subscribing to router.events.subscribe in Angular2?”
Here is a modified example using @Neelavar link [LINK] example. It might look long but it's simple, be patient, if you stick through it, it should work. Just following the steps outlined should take a few minutes. Full Explanation for my setup, for beginners You should already know how to create components and setup routing, I won't explain that in depth. 1. Setup Data Property in Routes Array In your routes array (you will find this either in app.module.ts or app-routes.module.ts or in some cases a routes.ts file). If you can't find this, check basic routing setup in: angular docs [LINK] a video as well [this video] a basic setup is all you need! Add the data property like so (you will need to g
Cites Quick Maths · 2022-09 · Stack Overflow · on “Angular: simplest way to visually handle api-request-errors from child-component in parent-component (parent uses router or dynamic components)”
Let's say I have a parent element with router-outlet that routs to children-components. Like in the first 10 seconds of the fireship youtube tutorial: [this video] I have 10 different but similar child-components. The child component will do some API-requests. How can the parent-component display what went wrong in the API request? I don't want to write the same error-display code 10 times. Should I define some different error-codes and pass them up somehow? Is it smart to use a router in that case even? What are the alternatives? Make requests in parent and send to child? But then how do I pass a complex response down the router-outlet? Or can you create a generic "interface" component like in J