Angular 14 - Using BehaviourSubject to pass data between routes

To pass data between two routes in Angular 14, you can use a combination of routing parameters and data services. Here's how:

1. Define a data service 

Create a service file that will be responsible for sharing data between components. Here's an example:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private messageSource = new BehaviorSubject("");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

This service creates a `BehaviorSubject` that can be used to hold the data you want to pass between components. The `changeMessage` function can be used to update the value of the `BehaviorSubject`. 

2. Define a route with a parameter 

 In the `app-routing.module.ts` file, define a route that accepts a parameter. Here's an example:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';

const routes: Routes = [
  { path: '', redirectTo: '/component1', pathMatch: 'full' },
  { path: 'component1', component: Component1Component },
  { path: 'component2/:data', component: Component2Component }
];

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

export class AppRoutingModule { }

In this example, the `component2` route accepts a parameter called `data`. 

3. Update the data service 

 In the component that will pass the data, inject the data service and call the `changeMessage` function to update the `BehaviorSubject`. Here's an example:

import { Component } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-component1',
  template: `
<input type="text" [(ngModel)]="message">
<button (click)="sendMessage()">Send Message</button>
  `
})

export class Component1Component {
  message: string;

  constructor(private dataService: DataService) { }

  sendMessage() {
    this.dataService.changeMessage(this.message);
  }
}

In this example, the `Component1Component` sends a message by calling the `changeMessage` function of the `DataService`. 

4. Access the data in the receiving component 

 In the component that will receive the data, inject the data service and subscribe to the `currentMessage` observable. Here's an example:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-component2',
  template: `{{ message }}`
})

export class Component2Component implements OnInit {
  message: string;

  constructor(private dataService: DataService, private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.params.subscribe(params => {
      this.message = params['data'];
    });

    this.dataService.currentMessage.subscribe(message => {
      this.message = message;
    });
  }
}

In this example, the `Component2Component` subscribes to both the `params` observable and the `currentMessage` observable. The `params` observable is used to get the value of the parameter `data` from the route, and the `currentMessage` observable is used to get the latest value of the `BehaviorSubject`.

That's it! With these steps, you can now pass data between two routes in Angular 14, or even older versions using a data service and routing parameters.