Multiple Router Outlet | Nested routes | Angular Project Layout | Angular 16

In this video you will learn

1. Advanced routes in angular
2. How nested routes works in angular 16
3. How to create a nested routes layout in angular 16
4. How to navigate and create multiple router outlets in angular 16
5. How to configure and use multiple router outlets.
6. How to work with nested routes and how to use loadchildren and children properties in angular.

Github

For angular 16 Features and migration, Please check the below

For Angular 15 features, Please check the below

Angular Standalone components | Ways of using standalone components | Angular 15 | Stable release

For Angular 12 features, Please check the below playlist

Basic Software concepts

For Angular Unit Testing, Please check the below playlist

To know how to test basic patch value in angular watch below video

Medium:

Address management Angular Tutorials

Mandatory to watch before watching unit testing for better understanding:
(Reactive Forms Part 16 | Form Arrays removeAt method | Dynamically remove control from form array)

Recommend you to watch my previous videos for more information and the context.

For testing form control without any validation watch below:

For testing, Template driven forms

For template and template context

For Attribute Binding testing:

For Testing style bindings:

For Testing class binding

For Testing property binding

For interpolation unit testing

Different Types of Data binding

Interpolation in angular

For Component introduction check the below link

Angular Installation and setup

For ng serve mechanisum and internal flow of angular follow the link below

Angular Modules

Angular Tutorial playlist:

Medium:

For Angular 12 features, Please check the below playlist

Basic Software concepts

For Angular Unit Testing, Please check the below playlist

Instagram:

#angular16 #angular #angularrouting #nestedroutes #latestversion #angularupdates #updates #trending

[dheerajsharma-ofxs]

Searching for nested routes and got the most clearified explanation so far 😊

[saqibghouse]

Thankyou it worked. I am on angular 17 some syntax change. But thankyou very much for your help for explaining in detail

[bazithmohammed]

Thank you very much for this excellent tutorial.

[phongnguyenthe]

Thanks for your tutorial, it was so clear and easy to understand. Exciting to see your upcoming video!

[saddammd]

Wow... I learnt so many advanced concepts in just one video. Thanks a lot.... but I am sorry I can't do more than liking and subscribing to your channel...

[LarsRyeJeppesen]

Good stuff, however a few questions: how come you are using a module based app to showcase Ng16 router? Why not component/standalone based? How come you are not using the inject() function instead of injecting dependencies in the constructor? Should your router definition not be functional and use provideRouter() to configure? What about loadComponent() to lazy load components? NG16 brings so many cool improvements to the table that it's strange to see you not use any of them

[GourisankarYanamalachinthala]

Good video. But, why did you create a module for every component? Can't we maintain all the routes in app-routing.module.ts?

[mohamedzaki]

✌Man You Were Very Helpful, V. Good Stuff Thanks Alot

[arjunsinghpowersoft]

for each page why separate module? module which is something to group the pages based on features/functionality/area

[akshatmathur]

How to do the same thing using standalone approach?

[sidakgujral]

Man u are doing great but please slow down the pace a little bit otherwise all awesome

[shwan]

Thank you for sharing! It was really helpful :) I have a done something different in the past and would love to see your opinion to see which approach you would prefer for an enterprise application please? Thank you!

export class AppComponent {
isDashboardRouteActive = false;
isAdminRouteActive = false;

constructor(private router: Router) {
=> {
if (event instanceof NavigationEnd) {
this.isDashboardRouteActive =
this.isAdminRouteActive = event.url.includes('admin');
}
});
}
}

<app-header></app-header>
<app-dashboard-nav
<app-admin-nav

<app-footer></app-footer>