In Angular, how to pass value from one component to another when the components are not parent/child?

Question

I am new in Angular2+ and reading a lot of materials inclusive of Angular site.

From angular, for parent/child we can use @Input() https://angular.io/guide/template-syntax#input-and-output-properties

But in my code, I have two different modules, and each one has one component.

How to pass, object value from the component1 of the Module1 to the component2 of the Module2?

I have tried with @Input() but no success, and from the Argular link above @Input() refers to parent/child which this is not my case, well, from my understanding it's not :)

I can send through Route, string and number values, but not objects, that's the reason I need a different approach.

Thanks for any comments Ademir

Answer 1

App.component.ts

import { Component } from '@angular/core';
import {dataService} from './dataservice.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  //name = 'Angular';
  constructor(private SVC: dataService ){

  }
  sender(){
    this.SVC.name="sender"
    console.log("sending this string:    "+this.SVC.name)
  }

}

dataservice.service.ts

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

@Injectable()
export class dataService {
name=""
  constructor() { } 
}

recieved.component.ts

import { Component, OnInit } from '@angular/core';
import {dataService} from '../dataservice.service';
@Component({
  selector: 'app-recieved',
  templateUrl: './recieved.component.html',
  styleUrls: ['./recieved.component.css']
})
export class RecievedComponent implements OnInit {
  constructor(private dataservice: dataService ){

  }
  ngOnInit() { 
  }
print(){
  console.log("recieved:    " +this.dataservice.name)
}
}

Here I am setting the name = "sender" in app.component and using it in received.component.ts

demo

Answer 2

You can simply use the Angular service, have a read of the 'Add services' tutorial at Angular website, read several times, you will fully understand it.
Click url here: https://angular.io/tutorial/toh-pt4

Answer 3

Let's begin with creating a class (type);
_{This is a small example for people like me for whom it's difficult to understand the concept initially}

Now let's create a service.

shared-data.service.ts

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

@Injectable()
export class SharedDataService {
  sharedData: SharedData = { prop1: '', prop2: '' };
  private detailSource = new BehaviorSubject<SharedData>(this.sharedData);
  currentDetail = this.detailSource.asObservable();

  constructor() {}

  changeDetail(sharedData: SharedData) {
    this.detailSource.next(sharedData);
  }
}

Now, we will create a component where from you will trigger the message, ( or the message/data that you want to pass on to another component..

space-one.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { SharedDataService } from '../shared/shared-data.service';
import { SharedData } from '../shared/sharedData';

@Component({
  selector: 'app-space-one',
  template: `<p>Component:1, button <br>
  <button (click)="passValue()">pass value</button>
  </p>`,
  styleUrls: ['./space-one.component.css'],
})
export class SpaceOneComponent implements OnInit, OnDestroy {

  constructor(private router: Router, private sharedDataService: SharedDataService) {}

  sharedData: SharedData;
  subscription: Subscription;

  ngOnInit() {
    this.subscription = this.sharedDataService.currentDetail.subscribe(message => this.sharedData =message)

  }

  passValue() {
    let newData = new SharedData();
    newData.prop1 = "new message 1";
    newData.prop2 = "new message 2";
    this.sharedDataService.changeDetail(newData);
    this.router.navigate(['spacetwo'])
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Now turn for the second component to receive the data,
space-two.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { SharedDataService } from '../shared/shared-data.service';
import { SharedData } from '../shared/sharedData';

@Component({
  selector: 'app-space-two',
  templateUrl: './space-two.component.html',
  styleUrls: ['./space-two.component.css'],
})
export class SpaceTwoComponent implements OnInit, OnDestroy {
  sharedData: SharedData;
  subscription: Subscription;
  //for elucidation only
  prop1: string;
  prop2: string;
  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    this.subscription = this.sharedDataService.currentDetail.subscribe(
      (data) => (this.sharedData = data)
    );
    //for elucidation
    this.prop1 = this.sharedData.prop1;
    this.prop2 = this.sharedData.prop2;
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

_{output as in stackblitz, a small fully functional, with routing enabled has been implemented here}