How to navigate to a parent route from a child route?

In angular, a root component that serves as the parent component of all the components and rest of the other components can be called a Child Component to the root component. This structure is in a form of a tree where a component which is the parent of a child lies above the child component and this there is no direct link between them but in general, a parent component can be routed from the child component via two ways:

  1. Directly using the routerLink directive in case of linkage of child to parent.
  2. Using Route class in case of navigation to happen on a triggered event.

Approach:

Before performing the above two operations, there is a need to register this component in the Route class’s instance which lies inside the app-routing.module.ts file. This will be further used to navigate from child to parent.

The routing should be defined within the app-routing.module.ts file as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './parent/child/child.component';


const routes: Routes = [
  {path: 'parent' , component: ParentComponent},
  {path: 'parent/child' , component: ChildComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Once it is done, anyone of the two methods can be used to route to parent from a child.



Syntax:

To register routes in angular for any component, set the path and the class name of the component inside the app-routing.module.ts file. The syntax for the same is given as follows:

import { Routes, RouterModule } from '@angular/router';
import { Component_1 } from 'path_to_component_1';
import { Component_2 } from 'path_to_component_2';

const routes: Routes = [
  {path: 'URL_mapping_component_1' , component: Component_1},
  {path: 'URL_mapping_component_2' , component: Component_2}
];

As components are different from web pages and thus are to be registered with proper URL paths, which will map the respective path to the respective component.

Basic Examples and Explanations

  • Using routerLink directive:

    This is a simplest method that can be used to redirect to any component allover the project. It is used within the template as a option acting equivalent to the href option in in the anchor tag, the difference is that, that it links a anchor to the components within the angular project.

    It is used as a directive within the anchor tag. The child template file code is given as follows:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
          
         <a [routerLink]=
         "[ '/parent']" [queryParams]="{GfG: 'Geeks for Geeks'}">
                   Redirect message to parent
          </a>
    </body>
    </html>

    chevron_right

    
    

    The routerLink is set to the parent component route. Just to add up, queryParams directive is used to send a message to the parent component via the query string.

  • In the parent component file the query parameter can be accessed as follows:

    @Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.css']
    })
    export class ParentComponent implements OnInit {
      constructor( private activateRoute: ActivatedRoute) {
       }
       message = this.activateRoute.snapshot.queryParamMap.get('GfG')
      ngOnInit() {
     
      }
      
    }
    

    Within the message variable the parameter is received and the message s stored. It captures using the ActivatedRoute class.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
          <title>Page Title</title>
        </head>
    <body>
    <p>On the Parent page </p>
    <p>
        Message By Child is {{message}}
    </p>
    </body>
    </html>

    chevron_right