How to route in Angular - Learning Angular (Part 5)

[@davidcooper4327]

This dude is super positive. It makes me smile.

[@rembautimes8808]

I really like the content and presentation style. I tried my hand at Angular last year but gave up as I couldn’t get routing. This video gives me confidence to try it again.

[@Dmitriy-p4y]

You guys should update the documentation, because I am struggling with Tour of Heroes where I have to follow other instructions that do not work on my Angular version

[@marlosbross423]

This week, I started learning Angular and encountered some difficulty with the router. I consulted the documentation, but it wasn't until I came across a helpful video that I managed to navigate my pages successfully. However, I'm working with Angular 17 and I'm unsure if this approach is the best practice to use." tks for angular team and community.

[@bertholdmaier7342]

The anchor link works only in case you set the slash in front of the details: Learn More

[@guilllermomolinaavila9326]

I was stuck with the dynamic route, thanks a lot!

[@Angular]

Glad it was helpful

[@Angular]

Watch more episodes of Learning Angular→ goo.gle/Learning-Angular

[@oussemabouyahia474]

i thought that angular dead comparing by react , fortunately three days ago you come up with this tutorial

[@Flo22222]

Well done explained. Not that what I looked 100% for but very interesting! Does the routerlink in the tag refresh the page and load or no?

[@Alexanderscodesamples-x4u]

Thank you for the video.

[@forton615]

The tutorial I started with did not use standalone, so this doesn't work for my application. Do I have to start over again? This is frustrating.

[@forton615]

Update and a little rant: Migrated succesfully to standalone and I could follow along again (steps are well documented if you google). I tried this with another project that I did in a course a few years ago and it was a dependency nightmare, gave up on that one. If I'm correct the latest version of ngbootstrap is not up to date with the latest version of angular? I'm doing stuff with midi files, most of the libraries are old and outdated and need to be configured by hand. It's 2024 and it feels like web development is stuck in the dark ages (had a career in vfx for 24 years and I thought that was complicated stuff...)

[@jediampm]

Hi, few thins to point out: if you are using v16 and dont use the provide files, the config should be made in a file "call app.config.ts". instead of using "the main.ts" file - why not inject the deeps of router in the construtor instead of using inject function. what is the diff between inject as constructor params or using inject function? - in "routes.ts" why not just "export const ..." instead of export default and using naming import?

[@0xac829]

I want to like Angular, but it confuses the crap out of me.

[@javo5270]

@@0xac829 same, i am trying to do something with it for some weeks now and i watch so many tutorials but also read a lot of documentations, also started doing things myself but there are so many differences on many tutorials and docs, its so confusing and frustrating

[@tejas_bajaj]

At 9:03, in Angular 18, need to import RouterLink instead of RouterModule

[@JogandocomVini]

i used routerModule and it worked, switched to RouterLink and also worked. Great to know that Angular doesn't break old versions

[@Eltopshottah]

Thank you Angular team!

[@Guy-Scott]

I would recommend using Dependency Injection (DI) in a different way as shown in the tutorial. First, dependencies usually inject in the constructor rather then manually. Further I believe using the OnInit lifecycle (which is probably left out for simplicity) is often a better idea to do initialization then the constructor. This is my code: export class DetailsComponent implements OnInit { housingLocationId = 0; constructor(private route: ActivatedRoute) { } ngOnInit() { this.housingLocationId = Number(this.route.snapshot.params["id"]); }); } }

[@КонстантинСергеевич-ш6с]

Love this guy)

[@zeprincelini]

Hello, great tutorial. My question is, why is the router setup so different from what I have when I add router while creating the project(ng new). Its so different and both yours and mine is angular 15.

[@viky293]

Like the ENERGY !!

[@generativestudio]

Routing setup does not seem to work, the moment I add "provideRouter(routeConfig)" in the providers array, I get a bunch of error messages one being "Argument of type '{ providers: (ComponentInputBindingFeature | EnvironmentProviders)[]; }' is not assignable to parameter of type '(CompilerOptions & BootstrapOptions) | (CompilerOptions & BootstrapOptions)[] | undefined'.", not clear what's the issue here because even the documentation is the same.

[@ArmenJanamyan]

It seems you did the same error as me. Use providers: [ provideRouter(routeConfig) ] And not providers: { provideRouter(routeConfig) }

[@dev_ameen2455]

Thank you I had the same issue! @@ArmenJanamyan

[@nightsurvivor]

Hi, I'm a beginner in Javascript. I'm still confused after finishing these great videos. I found another video for beginners like me in Angular and this is the link: kzbin.info/www/bejne/onrFkJqkocqIpNU . I've tried this part 5 and combined this part with it, and the result is awesome. I'm sorry, I don't mean to thumb down all parts of videos. I've already thumbed up your video, sir.. These videos are the ideal starting point for learning Angular and i'm trying to do my best. Thank you for the first impression that opened my mind to learn more about Angular. My journey will be great after this ! 😁

[@Noname-i4f3z]

How create routing if you have one Component where change :id and change load data from API?

[@albrough]

@14:06 you show the end of the string to be added and then move off making it difficult to complete the task without rewinding the video

[@technovelodos]

For those wanting to see the cropped line at end: this.housingLocationId = Number(this.route.snapshot.params["id"])

[@pogchamper228]

You solved my problem

[@justzcross6236]

By having a non standalone app does it change?

[@ohmegatech666]

There are so many convoluted steps just to add the router which seems like basic functionality. Why is there not a CLI command to just add all that's required for the router? In fact why doesn't ng new add the router by default? Edit: Just looked it up and since version 17 ng new DOES include router by default. Good job Google, took you a while though

[@srdouglas1026]

nesse caso o standalone está "false" ?

[@graydhd8688]

Is this an outdated version of Angular?

[@manojht8036]

Yes

[@obijuank2009]

Amazing toturial for beginners

[@adimardev1550]

i don't understand why you have to make everything too small when you have the entire blank screen for free. i can barely see a text even in full screen with 4k 14inch lap top. negative comments is positively necessary.

[@Abhijit-techie]

the tutorial is too fast and many topics gathered at once...please break it down in small tutorials

[@TrashCanSystem]

I don't understand why if I follow this tutorial minutiously, I always get ERROR messages that takes me hours of research for no help at all, just confusion and frustration. Then when i finally give up, I just download the code of the lesson, open on vscode and give a npm install and ng serve, then Voilà, the project comes back showing on browser without errors anymore. Seriously, WTF? Angular can be very tiresome, mostly when following Bad tutorials like this. Does anybody know of a Good tutorial beginner friendly we could be following?

[@flamousz]

tips from me just relax and take a breath, keep your mind calm and finally see a bit minute of step then write that lecturer code to yours code. inshaallah it works

[@ohmegatech666]

Make sure to use the same versions of everything as in the tutorials, like Angular, Node, TypeScript etc.

[@CaptainDouchie]

pretty bad tutorial for beginners

[@Angular]

which part makes it bad for beginners? What's missing?

[@Vthoen]

@@Angular After adding all the css the tutorial becomes very confusing, because you added the detail component in a different order than in the writen/text tutorial on the angular website..

[@donmarkham9811]

definitely not good, as why use unix commands, lol

[@teemusekki1743]

What I'm missing here after this change Learn more link doesn't work any more. "details" work but not this.

[@teemusekki1743]

Aa sorry I was too hurry

[@kacperkepinski4990]

mess

[@rosendotorres3306]

main.ts? Where did that come from?

[@mhytos420]

main.ts is a file that should automatically be generated when setting up a new angular project. If its not there (in the "./src" dir) then you can just create a new, empty main.ts file and use this