Angular Router and Route Guards | Angular Concepts made easy | Procademy Classes
Vložit
- čas přidán 11. 09. 2023
- In this video, i am going to cover everything related to routing in Angular. You will learn how to create routing, how to pass route parameters, query strings, fragments etc. You will also learn what are route guards in angular and how to use route guards in Angular 14 and lower versions and also in Angular 15 and higher versions. Following are the topics i am going to cover in this video:
1. What is a route and how to create and use it?
2. How to use & read route parameters, query strings and fragments?
3. How to access routes programatically?
4. What are child routes and how to create a child route?
5. What are route guards in angular and how to create and use them?
6. What are navigation events in angular and how to make use of them?
7. How to pass static and dynamic data to a route in Angular?
YOU CAN DOWNLOAD THE STARTUP PROJECT FROM HERE: github.com/manojjha86/angular...
YOU CAN DOWNLOAD THE FINAL PROJECT FROM HERE: github.com/manojjha86/angular...
DOWNLOAD NOTES FOR THIS SECTION FROM HERE: "I WILL ADD THE LINK SOON!"
ASP.NET Core GitHub Repo: github.com/manojjha86/ASP.NET...
NODE JS Course GitHub Repo: github.com/manojjha86/NODE-JS
ANGULAR 16 Course GitHub Repo: github.com/manojjha86/angular...
if you want to use router to get the data you can do this
const state = this.router.lastSuccessfulNavigation?.extras.state; is the correct way to get the state from the route in Angular 16.
Pinned your comment. Thank you for your valuable input 🙂
This channel literally stand alone, against all of paid course CZcamsrs combined. One small request to admin, can you please share the code snippets which is shown as key points in between this video in git or somewhere. So it will be useful to recap this entire video session quickly whenever needed. Thanks again ngMaster 😊
My best Angular teacher
you are the best teacher thanks for your time ❤❤
one of best teacher on youtube .. pls start with nodejs also very very helpful sir, thanks so much
Given the lack of angular content we have on CZcams would love it you can make angular your thing. Make it an Angular only channel.
Great explanation, thank you so much sir.
Wow🔥🔥🔥 Amazing content as always..
Thank you so much for covering these topics in detail.. Please include change detection, ngzone, subjects , inject() topics also in your future videos.
Thanks for this great video. 😊😊
It really helped me understand Angular Routing properly.
great course just loved it ❤🔥🔥🔥
Absolutely brilliant Sir g, Content at your channel is very helpful and informative. Thank you
Wow, that so cool 🎉
Was waiting from long time
This content is amazing! Could you put the keypoints into the video time line in every new topic? Thanks
Waiting from Portugal 👋
You are one of the best, thanks a lot!🙏
Thank you 😊
want a whole video like this series about RXJS
+1
Amazing sir!
It's helpful.
god like thank you sir. very helpful indeed.
Thank you!
please make a full expalin video on RxJs library and NgRx in hindi with proper example
Please make one video about Lazy loading
Please provide video on RxJs
I have seen tutorial which convers entire react within 5hr but for routing in ng is more than 5 hr :|
Please Mr. Manoj:
when using RouterLink Directive with all links in my application,
use attribute like this: routerLink="Home"
or
use property like this: [routerLink]=" ' Home ' "
Thank you for your efforts in explaining and simplifying the lesson.
Thank you for the great explanation. I have a question: Can we use ngOnChanges instead of ngOnInit in the case of changing parameters? Thank you very much.
When you are going to upload video on Rxjs and NgRx ?
Wow! Have learnt alot kindly assist us with pdf to the course
We ask you, sir, to complete the Node JS course, because there is no teacher like you who explains Node in a wonderful way... I hope you see my comment
you can make the guard function more generic => like this, it will except any component that implements CanComponentDeactivate interface
export interface CanComponentDeactivate {
canDeactivate: () => Observable | Promise | boolean;
}
export const canExitRoute = (
component: T
): Observable | Promise | boolean => {
return component.canDeactivate ? component.canDeactivate() : true;
};
Thank you
Waiting...
thank you for covering this content. i want to ask you when do you want create a video about ngrx ? this is very important topic but we dont have a good video for it
I am going to cover ngRx is detail very soon. First I will finish all the core concepts of Angular and then I will cover ngRx.
@@procademy Need Jest with angular series please
Please create project using reactive angular also❤
Boss, pls do any project as sample from start to end...
hey sir, can you tell me how to create admine dashboard, and also how to doe login as a user and how to login as admin?
Sir please make vidoes daily , please complete fast
from 1:18 to 1:29 czcams.com/video/oFDS1Nq4KCE/video.htmlsi=ALhL_hGFy1s2lfV6&t=4725 to czcams.com/video/oFDS1Nq4KCE/video.htmlsi=C6dQblVfNrQDKUT2&t=5354 :i have not been able to use: this.courseId = this.activeRoute.snapshot.params['id']; i also tried to pass to the console: this.courseId = +this.activeRoute.snapshot.paramMap.get('id'); but it didnt get passed to the Console no idea why.... czcams.com/video/oFDS1Nq4KCE/video.htmlsi=ALhL_hGFy1s2lfV6&t=4725 to czcams.com/video/oFDS1Nq4KCE/video.htmlsi=C6dQblVfNrQDKUT2&t=5354 Also i love your content and any advice you can provide.
want CSS tutorial
2:59:43 The definitions of canActivateChild and canDeactivate are listed incorrectly
Thanks for the knowledge
1:22:00
when it is expected to add chapters to the video
Can you please make a timestamps. This video is very long and everytime you need to rewind to searh for specific part you are looking for.
plase add timestamps!
Hello, I would like to share my problem what I had in resolve route guard in simulating Angular version 14 and lower
In console I'had Error "ERROR Error: Uncaught (in promise): TypeError: this.courseService.getAllcourses is not a function"
I had found solution in authguard.service.ts components changed to this
export class AuthGuardService implements
CanActivate, CanActivateChild, CanDeactivate, Resolve {
constructor(
private authService: AuthService,
private router: Router,
private courseService: CourseService,
) { }
And now is working.
Do you anybody know why this happened?
great course just loved it ❤🔥🔥🔥