One of the new features introduced in Angular 7.2.0 is a different way to pass data when navigating between routed components:

@Component({
  template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent {
  constructor(public router: Router) {}
  navigateWithState() {
    this.router.navigateByUrl('/123', { state: { hello: 'world' } });
  }
}

Alternatively, you can achieve the same result with:

@Component({
  selector: 'my-app',
  template: `
  <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent {}

To access the passed state information, you can retrieve it from the window.history.state property after the navigation completes:

export class PageComponent implements OnInit {
  state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }
}

With the absence of $rootScope in Angular 2, we can utilize a shared service/class to pass data between components. By storing the data in the service during ngOnDestroy and retrieving it in the ngOnInit function after routing, we can achieve the desired functionality:

In this scenario, DataService is used to share the hero object:

import { Hero } from './hero';
export class DataService {
  public hero: Hero;
}

Passing the object from the first page component:

 ngOnDestroy() {
    this.dataService.hero = this.hero; 
 }

Retrieving the object in the second page component:

 ngOnInit() {
    this.hero = this.dataService.hero; 
 }

For a demonstration, check out this example on Plunker

<div class="button" click="routeWithData()">Pass data and navigate</div>

If you are working with Angular 6 or any other versions, a simple way to pass data when navigating is by defining your path with the specific data you want to transmit.

{path: 'detailedInfo/:id', component: DetailedInformationComponent}

In this route definition example, I have included /:id to indicate the data that will be passed to the component during router navigation. So, your code would appear like this:

<a class="btn btn-white-view" [routerLink]="[ '/detailedInfo', item.id]">View Details</a>

To access the id in the component, import ActivatedRoute as follows:

import { ActivatedRoute } from '@angular/router'

In the ngOnInit method is where you can retrieve the transmitted data:

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
      }

For further information on passing parameters through routes, check out this article:

After exploring various solutions on this topic and experimenting with a few, I was unsatisfied with the idea of resorting to a hacky approach for data transfer between routes.

An issue with using history.state simply is that when passing an instance of a specific class in the state object, it loses its type during retrieval and becomes a basic JavaScript object.

In my Angular v10 (Ionic v5) application, I tackled this by-

this.router.navigateByUrl('/authenticate/username', {
    state: {user: new User(), foo: 'bar'}
});

https://i.sstatic.net/vIVig.png

Within the destination component ('/authenticate/username'), in the ngOnInit() method, I accessed the passed data using

this.router.getCurrentNavigation().extras.state

ngOnInit() {
    console.log('>>authenticate-username:41:',
        this.router.getCurrentNavigation().extras.state);
}

https://i.sstatic.net/bSx7S.png

I successfully retrieved the intended data that was sent-

https://i.sstatic.net/JGWc6.png

In the current year of 2019, there are multiple options available for achieving your desired outcome. If you need to pass internal state information that is not visible in the URL parameters or query, you can utilize the state feature introduced since version 7.2 (as I recently discovered from a helpful blog post).

As detailed in the blog post by Tomasz Kula, you can navigate to a route using the following methods...

...from TypeScript:

this.router.navigateByUrl('/details', { state: { hello: 'world' } });

...from an HTML template:

<a routerLink="/details" [state]="{ hello: 'world' }">Go</a>

To access this state in the target component:

constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

While this information may be coming a bit late, it could still prove useful for anyone working with more recent versions of Angular.

It seems like the alternative method may not be ideal for addressing this particular issue. I believe the most effective approach involves using Query-Parameter with the Router in Angular, which can be done in two ways:

Directly passing query parameters

By including the following code, you can navigate to a specific url using params in your HTML:

<a [routerLink]="['customer-service']" [queryParams]="{ serviceId: 99 }"></a>

Passing query parameter through the Router

To achieve this, you need to inject the router into your constructor like so:

constructor(private router:Router){

}

You can then utilize it as follows:

goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { serviceId: serviceId} });
}

If you wish to retrieve information from the Router in another Component, you must make use of the ActivatedRoute by doing the following:

constructor(private activateRouter:ActivatedRouter){

}

and then subscribe to it:

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['serviceId'] || 0;
      });
  }

According to a brilliant individual known as tmburnell, it is advised to rewrite the route data like this:

let newRoute = this.router.config.find(route => route.path === '/path');
newRoute.data = { entity: 'entity' };
this.router.navigateByUrl('/path');

This amazing suggestion can be found here in the comments section.

I genuinely hope that someone will benefit from this information.

Using ActiveRoute for Passing Objects via Route:

Prepare the object before sending it:

export class AdminUserListComponent {

  users : User[];

  constructor( private router : Router) { }

  modifyUser(index) {

    let navigationExtras: NavigationExtras = {
      queryParams: {
          "user": JSON.stringify(this.users[index])
      }
    };

    this.router.navigate(["admin/user/edit"],  navigationExtras);
  }

}

Access and utilize the object in the destination component:

export class AdminUserEditComponent  {

  userWithRole: UserWithRole;      

  constructor( private route: ActivatedRoute) {}

  ngOnInit(): void {
    super.ngOnInit();

      this.route.queryParams.subscribe(params => {
        this.userWithRole.user = JSON.parse(params["user"]);
      });
  }

}

Paths to Follow:

{ route: 'bar-route', component: BarComponent, info: { myInfo: true } },

Upon accessing the component, make sure to only utilize the data once:

pipe(take(1)) ensures immediate unsubscription, preventing memory leaks and eliminating the need for manual unsubscribing

constructor(private activatedRoute: ActivatedRoute) { ... }

ngOnInit(): void {
  this.activatedRoute.data.pipe(take(1)).subscribe((data) => {
    console.log(data); // process the data accordingly
  });
}

• Don't forget to import necessary dependencies

Note: Consider using the new firstValueFrom() method for improved functionality

The 3rd method is the most commonly used approach for sharing data between components. An item service can be injected into the related component to enable this functionality.

import { Injectable } from '@angular/core';
import { Predicate } from '../interfaces'

import * as _ from 'lodash';

@Injectable()
export class ItemsService {

    constructor() { }

    removeItemFromArray<T>(array: Array<T>, item: any) {
        _.remove(array, function (current) {
            return JSON.stringify(current) === JSON.stringify(item);
        });
    }

    removeItems<T>(array: Array<T>, predicate: Predicate<T>) {
        _.remove(array, predicate);
    }

    setItem<T>(array: Array<T>, predicate: Predicate<T>, item: T) {
        var _oldItem = _.find(array, predicate);
        if(_oldItem){
            var index = _.indexOf(array, _oldItem);
            array.splice(index, 1, item);
        } else {
            array.push(item);
        }
    }

    addItemToStart<T>(array: Array<T>, item: any) {
        array.splice(0, 0, item);
    }

    getPropertyValues<T, R>(array: Array<T>, property : string) : R
    {
        var result = _.map(array, property);
        return <R><any>result;
    }

    getSerialized<T>(arg: any): T {
        return <T>JSON.parse(JSON.stringify(arg));
    }
}

export interface Predicate<T> {
    (item: T): boolean
}

Send data with JSON

  <a routerLink = "/link"
   [queryParams] = "{parameterName: objectToTransfer| json }">
         Example Link                   
  </a>

Utilize a shared service for storing data using a personalized index and then transmit that specific index with query parameters. This method offers greater flexibility.

// Within component-a in TypeScript:
constructor(private DataCollector: DataCollectorService) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// Within component-a HTML file :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

.

// Within component-b in TypeScript:
public data;

constructor(private DataCollector: DataCollectorService) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

Imagine you have

1. file1.ts
2. file1.html

and you need to send information to file2.ts.

• In file1.ts, there is a variable containing data like this:

    //file1.ts
    item={name:"Nelson", bankAccount:"1 million dollars"}
  
    //file1.html
     //the line routerLink="/meter-readings/{{item.meterReadingId}}" has no relevance here, replace it with the URL you intend to navigate to
    <a
      mat-button
      [queryParams]="{ params: item | json}"
      routerLink="/meter-readings/{{item.meterReadingId}}"
      routerLinkActive="router-link-active">
      View
    </a>
  
    //file2.ts
    import { ActivatedRoute} from "@angular/router";
    import 'rxjs/add/operator/filter';
  
    /*class name etc and class boiler plate */
    data:any //will hold our final object that we passed 
    constructor(
    private route: ActivatedRoute,
    ) {}
  
   ngOnInit() {
  
   this.route.queryParams
    .filter(params => params.reading)
    .subscribe(params => {
    console.log(params); // DATA WILL BE A JSON STRING- WE PARSE TO GET BACK OUR 
                         //OBJECT
  
    this.data = JSON.parse(params.item) ;
  
    console.log(this.data,'PASSED DATA'); //Gives {name:"Nelson", bankAccount:"1 
                                          //million dollars"}
     });
    }
  

Sharing data between routed components can be achieved using a BehaviorSubject. A unique feature of BehaviorSubject is that it holds one value and emits it immediately upon subscription, unlike Subject which does not hold any value.

The approach in the service:

@Injectable({
  providedIn: 'root'
})
export class CustomerReportService extends BaseService {
  reportFilter = new BehaviorSubject<ReportFilterVM>(null);
  constructor(private httpClient: HttpClient) { super(); }

  getCustomerBalanceDetails(reportFilter: ReportFilterVM): Observable<Array<CustomerBalanceDetailVM>> {
    return this.httpClient.post<Array<CustomerBalanceDetailVM>>(this.apiBaseURL + 'CustomerReport/CustomerBalanceDetail', reportFilter);
  }
}

To access the BehaviorSubject in the component, subscribe to it like so:

this.reportService.reportFilter.subscribe(f => {
      if (f) {
        this.reportFilter = f;
      }
    });

Remember: Only a BehaviorSubject should be used here, Subject won't serve the purpose.

By default, I prefer not to use a guard in this case. For me, the question is more about whether I can enter or leave the route, rather than sharing data between them.

If you need to load data before entering a route, simply add a resolver. This is also a feature of the Router.

Here's a basic example:

Resolver

import { Resolve, ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs";
import { Injectable } from "@angular/core";
import { take } from "rxjs/operators";

@Injectable()
export class UserResolver implements Resolve<User> {

    constructor(
        private userService: UserService,
        private route: ActivatedRoute
    ) {}

    resolve(): Observable<firebase.User> {
        return this.route.params.pipe(
            switchMap((params) => this.userService.fetchUser(params.user_id)),
            take(1)
        );
    }
}

Add it to the router:

RouterModule.forChild([
{
    path: "user/:user_id",
    component: MyUserDetailPage,
    resolve: {
        user: UserResolver
    }
  }
}]

Retrieve the data in our component

ngOnInit() {
    const user: firebase.User = this.activatedRoute.snapshot.data.user;
}

The drawback of this approach is that the user will enter the route first before getting the user data. This ensures that the data for the user is loaded and ready at the start of the component, but you will remain on the old page until the data has been fully loaded (Loading Animation)

To navigate to a different component while adding a parameter to the URL and hiding the data being transferred, you will need to utilize both state and queryParams.

For instance: Clicking on the edit button will take you to the CreateEmployeeComponent along with the employee data.

ViewEmployeeComponent:

editEmployee(employee) {
  this.router.navigate(['employee/create'], { queryParams: { action: 'edit' }, state: { user: this.employee } }); }

Subsequently, after routing to the component, the URL will appear as follows:

http://localhost:4200/employee/create?action=edit

CreateEmployeeComponent

    let employeeData = history.state.user;
    console.log(employeeData);

Angular 17.1 has introduced a new Router information parameter in the NavigationExtras:

.html:

<button routerLink="home" [info]="{ hello: 'world' }">
    Home
</button>

.ts:

this.router.navigateByUrl('home', { info: { hello: 'world' } });

This feature is similar to the state option but differs in two main ways. It does not get saved in the navigation history (history.state). Additionally, the object is not copied or cloned but directly assigned to the current Navigation of the Router.

To efficiently control access to a component based on fetched data, one effective approach is to utilize a Guard with the canActivate method. By implementing this strategy, you can retrieve information from an API and grant users permission to enter the specified component outlined in the routing configuration file. Additionally, you can store the retrieved data within the route object's data property for easy access within the component.

For example, consider the following routing configuration:

const routes: Routes = [
    { path: "/:projectName", component: ProjectComponent, canActivate: [ProjectGuard] }
]

Within your guard file, you could define the canActivate method as follows:

canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot)
: Observable<boolean> | Promise<boolean> | boolean {
return this.myProjectService.getProject(projectNameFoundElsewhere).pipe(
  map((project) => {
    if (project) {
      next.data = project;
    }
    return !!project;
  }),
);

Then, in your component:

constructor(private route: ActivatedRoute) {
    this.route.data.subscribe((value) => (this.project = value));
}

This method differs slightly from using a service to pass data since service keeps the value in a BehaviorSubject until it is reset. Passing data through the guard makes it accessible specifically for the current route. However, further testing may be needed to determine if child routes retain access to the data as well.

When transferring data to another Route, the most effective and straightforward method is utilizing { window.localStorage }. It is important to remember to clear the data from local storage once it is no longer needed. I made use of the destroy() method in ngOnDestroy to properly manage this data. This approach also addresses the issue of data loss caused by page refresh.

There are various methods for passing data to routed components.

One common approach is through the use of 'Query Parameters'.

If I need to pass the table-id data from the TableReservationComponent, I can achieve this by utilizing query parameters.

TableReservationComponent.ts

TableId: number = 2;

this.router.navigate(['order'], {queryParams:{table_id : TableId}});

Subsequently, in the OrderComponent, we can retrieve the table_id that was initially set in the TableReservationComponent.

export class OrderComponent implements OnInit

{
    tableId: number;

    constructor(private route: ActivatedRoute) { }

    ngOnInit(): void {
       this.route.queryParams.subscribe(params => {
       this.tableId = params['table_id'];
       
        });
    }

}

The table_id value is passed from the TableReservationComponent as a Key-Value Pair, and it can be accessed within the Order Component using the specified key (params['table_id']). This allows us to utilize the table_id data within the OrderComponent as required.

Here is a solution that worked for me:

export class Component1 implements OnInit{
  constructor(private router:Router){}
  ngOnInit():void{
    
    this.router.navigateByUrl('/paths',{state:{ data: your-data })
  }
}

In Component2.ts, you can retrieve data from the route history:

export class Component2 implements OnInit{
   states!:any;
   constructor(){}
   ngOnInit():void{
     this.states = history.state.data;

   }

}