Home / ANGULAR / Passing data with Angular Navigation

Passing data with Angular Navigation

Angular applications are component based. While navigating from one component to another sometime we need to pass some data or parameter values. Angular provides multiple ways of passing data. Below example will show one method.

In this example our angular application has two components.

  • Employee Component
  • Department Component

We want to get department details of selected employee. Each employee had unique file number. So when we pass from Employee Component to department component. We need to pass the selected employee file number.

So Write the below code in the Employee component at navigation event.

let FileState =  {id:1, fileno: this.FileNumber}

 this.router.navigateByUrl(‘/employeedepartment’,{ state: FileState});

Write below code in the Department Component to receive the parameter value of file number.

this.filecode = history.state.fileno;

Data will be kept in the state object during navigation.

Leave a Reply

Your email address will not be published.