The previous blog, discussed how to pass and retrieve query parms.
Link for the previous blog: Router 07 Activated Route, Retriew Route params, fragments and query params
https://medium.com/@yuvayuvaraj720444/router-07-activated-route-retriew-route-params-fragments-and-query-params-aa86d0117f21
In today’s router blog we will see about the child router section and nested child route. Let’s quickly see the setup of setting components.
Firstly I am creating six components,
Link for the Live Demo:
https://stackblitz.com/edit/router-child-and-nested-child
Child route setup (3 components): parent-child, child parent-one, child-parent,
Nested Child route Setup: nested-child inside nested-child I have created two child route, child one and child two
Once we are created we will end up with this view
App.module.ts
In app.module.ts we declare a route. Assign any routing path to it,
In addition, we add a children key to give more paths as children. We will leave the first path empty so it will point to the parent-child itself.
{
path: 'parent-child',
children: [
{path: '', component: ParentChildComponent},
{path: 'child-one', component: ChildParentOneComponent},
{path: 'child-two', component: ChildParentTwoComponent}
]
}Child Route
Let’s see the app.component.html file
Here I have added some buttons with style, also a router link to configure where to navigate.
Output of child route
On navigating to parent-child
on navigating to Child one, Click the button.
Have close look on red mark of the below image. This means the location of the component is in the child route of the component. However it is not nested inside of the child component, only the view has been changed in the place of router-outletsection.
Nested Child Route
For nested child routes we assign the router in the parent component so the route will view as if it is inside of parent compoenent. The route configuration for nested routed is as follows in the code snippet in app.module.ts (refer to the app.module.ts snippet).
{
path: 'nested', component: NestedChildComponent, children: [
{path: 'child-one', component: ChildOneComponent },
{path: 'child-two', component: ChildTwoComponent },
]
}Firstly we will declare the parent component, and inside of it, we will declare as many ever child components as we wish for it.
nested-child.component.html
We need to declare the router outlet in the nested child HTML, the declared child routes will point to declared router oultet.
Output
On navigating nested, we see the html element is viewed in router of app.component.html.
when we navigate to nested one, we see the component will view inside of parent component.
This is all about child and nested child router,
Link for the Live Demo: https://stackblitz.com/edit/router-child-and-nested-child
Link for the next blog : Angular Router 09 : Configure Page not found in Router
— — — — — — — — — End Of Lecture — — — — — — —
Check All lessons of Angular Intermediate Lessons
https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b
