How to send data from one routed component to another

I am trying to send data from one routed component to another using RxJS Subject by the click of a button. The value is showing in console inside subscription but is not reflecting in the template/view.

Also, is using a subject the right way of sharing data between routed components, if not then what should I use?

StackBlitz link:

home.html

<input #input placeholder="Enter something">
<button (click)="onSubmit(input.value)">Submit</button>

home.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { SubjectService } from '../subject.service';
@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']
})
export class HomeComponent { constructor(private router: Router, private ser: SubjectService) { } onSubmit(value: string) { console.log(value); this.ser.send(value); this.router.navigate(['result']); }
}

result.ts

import { Component, OnInit } from '@angular/core';
import { SubjectService } from '../subject.service';
@Component({ selector: 'app-result', templateUrl: './result.component.html', styleUrls: ['./result.component.css']
})
export class ResultComponent implements OnInit { constructor(private ser: SubjectService) { } data = 'Data before it has changed'; ngOnInit(): void { console.log('result'); this.ser.source$.subscribe((message) => { this.data = message; console.log('Inside subcription:' + this.data); }); }
}

result.html

<p>Result page: </p>
<p>Data : {{data}}</p>

SubjectService.ts:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({ providedIn: 'root'
})
export class SubjectService { constructor() { } private source = new Subject<any>(); source$ = this.source.asObservable(); send(message : string){ this.source.next(message); }
}

App.component.html

<ul> <li><a routerLinkActive="active" routerLink="/home">Home</a></li> <li><a routerLinkActive="active" routerLink="/result">Result</a></li>
</ul>
<p>Router Outlet: </p>
<router-outlet></router-outlet>

App-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ResultComponent } from './result/result.component';
const routes: Routes = [ { path: 'result', component: ResultComponent }, { path: 'home', component: HomeComponent }, { path: '', redirectTo:'home', pathMatch:'full'}
];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]
})
export class AppRoutingModule { }

The data variable is not updating in the result page.

1 Answer

The problem is that you're firing the source$ observable before the results view is even initialized. If you start on your home view and enter a value you will not see the Here it is updating log in the console.

You don't really need a subject for your example, a simple service that holds your shared data in a property is plenty enough:

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class SubjectService { public value: string | null = null; }

You can update this property by assigning it a value, e.g.

onSubmit(value: string) { this.ser.value = value; this.router.navigate(['result']); }

and in your results page you can define a getter to the service variable, which will always return the current value:

 public get data() { return this.ser.value || 'Value is empty'; }

Stackblitz demo