Scribd
Upload
2 views13 pages

Child Routing

The document outlines the steps to implement child routing in an Angular application using the app-routing module. It details the creation of components, routing configuration, and navigation methods to allow for redirection to child components. Additionally, it explains how to manage the display of parent and child components using the <router-outlet> tag and provides guidance on creating further nested child components.

Uploaded by

karanrajput2019k
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views13 pages

Child Routing

The document outlines the steps to implement child routing in an Angular application using the app-routing module. It details the creation of components, routing configuration, and navigation methods to allow for redirection to child components. Additionally, it explains how to manage the display of parent and child components using the <router-outlet> tag and provides guidance on creating further nested child components.

Uploaded by

karanrajput2019k
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Child Routing

redirectTo: attribute in the app-routing module

This attribute is used to redirect to the specific action. Below we are redirecting to the “employee”
action.

Output:

Every time we hit the localhost: 4200/ it will redirect to localhost:4200/employee.


Step 1: create one component which we want to make a child component of already present
component.

Now we have create child component as department-child of department-list component

Step 2: create a child ‘dept-child’ routing in department-list routing

Step 3: want to call the department and dept-child routing at same time from [Link]
Step 4: create object of Router in [Link] in constructor

Step 5: add navigate method from route object, this will navigate to that particular routing.

After clicking on employee button, this will navigate to ‘emloyee’ routing and after clicking on
department button, it will route to department component. PFB screenshot,
Step 6: But now we want to call child routing from department button clicking.

navigateToDepartment(){
[Link](['department','dept-child']);
}

Step 7: add <router-outlet> tag parent component i.e department-list component.


If we remove <router-outlet> tag from parent component then

See the URL, its [Link] but only department-list works!! will
be displayed, not department-child works!!

Step 8: If we don’t want same time both components will load then, we have to do some mdifications
as follows,

 Modify the routes in [Link]


Add one button in [Link]

Create object of router in constructor and add method as,


Click on Department button

Click on Department-child button


Step 9: Same, we want an again child component of department-child component, means
grandchild then,

Create one component as department-grand-child

Add child routing in dept-child routing

Create button in department-child component


Step 10: If we want a one more child for department-list component
Add one more button in

Define the method,

navigateToDepartmentSecondChild(){
[Link](['department','dept-child1']);
}

You might also like