typescript - how to pass data between unrelated components angular 10

Question

i want to pass the id of a select value to another unrelated component

component 1 :

Html

<select (change)="getSelectedStoreId($event.target.value)">
   <option *ngFor="let store of stores.slice().reverse()" value="{{store.id}}">
      {{store.name}} 
   </option>
</select>

Ts

storeId: any;
getSelectedStoreId(store: any) {
 this.storeId = store;
}

Component 2:

loadItemByStore(storeId: number) {
   this.service.getItemByStore(storeId).subscribe((res: 
   HttpResponse<Item[]>) => {
   this.data= res.body || [];
  }); 
 }

question from:https://stackoverflow.com/questions/65670751/how-to-pass-data-between-unrelated-components-angular-10

Answer 1

Use a shared service with Subject or BehaviorSubject, like this:

// service.ts

@Injectable({
 providedIn: 'root'
})
export class MyService {
 sharedValue$ = new Subject();
}

// component a

@Component({
 ...
})
export class ComponentA implements OnInit {
constructor(private myService: MyService) {
}

ngOnInit() {
 // get data
 this.myService.sharedValue$.subscribe(data => {
  // data will update here upon changes
  console.log(data) // 100
 })
}


}

// component b

@Component({
 ...
})
export class ComponentB implements OnInit {
constructor(private myService: MyService) {
}

ngOnInit() {
 // set data
 this.myService.sharedValue$.next(100)
}


}