Angular pass data between components with no relationship

Question

I'm trying to pass data between two different components with no relationship but am having some difficulties. Does anyone have any recommendation on how to do this? Example:

I've got a page with 3 buttons. passing a string value upon click to a variable called selectAgent.

~agents.html~

<div routerLink="/lineups/brimstone" (click)="selectAgent('brimstone')"> </div>

<div routerLink="/lineups/viper" (click)="selectAgent('viper')"> </div>

<div class="col sova" routerLink="/lineups/sova" (click)="selectAgent('sova')"> </div>

Now, i'm trying to pass selectAgent into another component (called maps):

~maps.html~

<h5> selected agent: {{selectedAgent}} </h5>
    <div class="select row mx-auto">
        <div class="col" *ngFor="let map of maps">
            <img src={{map.url}} (click)='openMap(map.name)'/>
        </div>
    </div>

Which will also be appended into the URL on click:

~maps.component.ts~

openMap(setMap: any) {
    this.router.navigateByUrl(`/lineups/${selectedAgent}/${setMap}`);
    console.log(setMap);
  }

My goal is to pass the clicked variable into the h5 tag. Does anyone have any suggestions I can go off?

Answer 1

test-service.service.ts

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

@Injectable({
    providedIn: 'root'
})
export class TestServiceService {

    constructor() { }

    agentComponentData: any = new Subject();
}

agent.component.html

<p>agents works!</p>

<div routerLink="/lineups/brimstone" (click)="selectAgent('brimstone')"> A </div>

<div routerLink="/lineups/viper" (click)="selectAgent('viper')"> B </div>

<div class="col sova" routerLink="/lineups/sova" (click)="selectAgent('sova')"> C </div>

agent.component.ts

import { Component, OnInit } from '@angular/core';
import { TestServiceService } from '../test-service.service';

@Component({
    selector: 'app-agents',
    templateUrl: './agents.component.html',
    styleUrls: ['./agents.component.css']
})
export class AgentsComponent implements OnInit {

    constructor(private testService: TestServiceService) { }

    ngOnInit(): void {
    }

    selectAgent(data: any) {
        this.testService.agentComponentData.next(data);
    }

}

maps.component.html

<p>maps works!</p>
<h5> selected agent: {{selectedAgent}} </h5>

maps.component.ts

import { Component, OnInit } from '@angular/core';
import { TestServiceService } from '../test-service.service';

@Component({
    selector: 'app-maps',
    templateUrl: './maps.component.html',
    styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {

    selectedAgent: any;

    constructor(private testService: TestServiceService) { }

    ngOnInit(): void {
        this.testService.agentComponentData.subscribe((val: any) => {
            console.log(val);
            this.selectedAgent = val;
        });;
    }

}

Answer 2

//Solution: 1
selectAgent(agent) {
 //save to session storage
 sessionStorage.setItem('Agent',agent);
}

//maps.ts
ngOnInit(){
 this.selectedAgent = sessionStorage.getItem('Agent');
}

//Solution: 2
selectAgent(selectedAgent) {
 //send in query param
 this.router.navigate(['/maps'], { queryParams: { agent: selectedAgent} });
}

//maps.ts
constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      //get data from query string
      this.selectedAgent = params['agent'];
    });
  }

//Solution: 3
selectAgent(selectedAgent) {
 //set observable in service
 this.Service.Agent.next(selectedAgent);
}

//maps.ts
ngOnInit(){
this.Service.Agent.subscribe((agent) => {
  this.selectedAgent = agent; 
 }); 
}