Send data from one componentA to componentB on clicking at a place in componentA (through angular service)

Question

I am working on a simple music app. Now in the app I have two components , one is a home componentA that contains the audio player(meaning the volume bar , seek bar , play pause etc..) and the other componentB that has all the songs.

My objective is that whenever someone clicks on a song on componentB(that is a list of songs) immediately the details of that song(url,img etc..) are sent to componentA so that the song start playing.

this is my componentB.html

<div *ngFor="let song of songs | filter:searchText" 
      (click)="songSelected(song.url,song.name)">
      <img src="{{song.img}}">
      <div>
        <p><strong>{{song.name}}</strong><br>
        <h6>{{song.singer}}</h6>
      </div>
    </div>

songSelected() above is working fine.

This is my componentB.ts

  songSelected(url: string,name:string){
      this.selectedurl=url
      this.selectedname=name
      this._allsongs.setData(this.selectedurl,this.selectedname);
      
  }
  constructor(public _allsongs:AllsongsService) { }

  ngOnInit(): void {
    this.songs=this._allsongs.getSongs();
  }

and this is my service.ts

setData(url: any, name: any) {
    console.log("From Service set data previous = " + this.name)
    this.url = url;
    this.name = name;
    console.log("From Service set data new = " + this.name)
  }

  getData(): any {
    return [this.url, this.name]
    
  }

And this is my componentA.ts

ngOnInit(): void {
   this.songurl=this._allsongs.getData()[0];
   this.songname=this._allsongs.getData()[1];
  }

NOw what problem I am facing is that ngOnInit only works when component is initialised so when someone clicks on the song in componentB the song details are not sent using getdata. Please help me to figure this out.

Answer 1

you need use in your service a Subject and subscribe in your component A, see an example of Subject in this SO

Your service

  private mySubjectSource = new Subject<any>();
  myObservable=this.mySubjectSource.asObservable();

  constructor(){}

  sendValue(value:any)
  {
    this.mySubjectSource.next(value);
  }

Your component A, in ngOnInit

  constructor(private myService: MyService) {}
  ngOnInit()
  {
    this.myService.myObservable.subscribe(res=>{
      ..make something with the response...
    })
  }

Your component B

   constructor(private myService: MyService) {}
   sendValue(value:any)
   {
     this.myService.sendValue(value);
   }

A fool example