Updating a list on button click Angular

Question

I hope i post this in a concise way. The main goal here is to update a list after a button click. I have a list of hobbies. When I click the (hobbies.component) in the list, the hobby-view component should update with a list of that hobby type. I can successfully make a call to the server. But, I'm not seeing the component hobby-view update.

Hobbies.component

<ul class="hobbyList">
  <li *ngFor="let hobby of hobbies" (click)="onSelect(hobby)">
      <span class="badge">{{hobby.HobbyName}}</span>
  </li>
</ul>

getHobbies() creates the ul of hobbies to click. onSelect then uses a service to update a string inside the hobby-view component (which works). Then tries to update a list inside the hobby-view component.

export class HobbiesComponent implements OnInit {

  selectedHobby: hobbyObj;

  hobbies: hobbyObj[];

  constructor(
    private hobbyService: HobbyService,
    private masterhobbydata: MasterHobbydata
  ) { }

  ngOnInit() {
    this.getHobbies();
  }

  getHobbies(): void {
    this.hobbyService.getHobbies()
    .subscribe(hobbies => this.hobbies = hobbies);
  }

  onSelect(hobby: hobbyObj): void {
    this.selectedHobby = hobby;
    this.masterhobbydata.changeMessage(this.selectedHobby.HobbyName);
    this.masterhobbydata.getHobbiesById();
  }

}

Hobby-view.component

<ul>
  <li *ngFor="let hobby of hobbiesRooms">
      <span class="badge">{{hobby.hname}}</span>
  </li>
</ul>
<p>
  Message: {{message}}
</p>

export class HobbyViewComponent implements OnInit {
  hobbyRoomObj = HobbyRoomObj;
  hobbiesRooms: HobbyRoomObj[];

  message:string;

  constructor(private data: MasterHobbydata) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
  }

  getHobbiesById(): void {
    console.log("hit");
    this.data.getHobbiesById()
    .subscribe(hobbiesRooms => this.hobbiesRooms = hobbiesRooms);
  }
}

Inside ngOnIt is where the simple string gets updated successfully from the onClick method inside hobbies.component.

Here is the service component MasterHobbyData

@Injectable({
    providedIn: 'root'
  })
export class MasterHobbydata {
    private messageSource = new BehaviorSubject<string>("1");
    currentMessage = this.messageSource.asObservable();

    private hobbyListByIdUrl="http://local/?Hobby=";

    constructor(private http: HttpClient){}

    changeMessage(message: string) {
        this.hobbyListByIdUrl += message;          
        this.messageSource.next(message);
    }

  //Returns a full list of current hobbies hosted
  getHobbiesById(): Observable<HobbyRoomObj[]>{
    return this.http.get<HobbyRoomObj[]>(this.hobbyListByIdUrl)
      .pipe(
        catchError(this.handleError('getHobbiesById', []))
      );
  }
}

I've been trying to manipulate this piece of code for the list of hobbies. I believe this where my problem lies.

private messageSource = new BehaviorSubject<string>("1");
currentMessage = this.messageSource.asObservable();

I think I have to make variable of BehaviorSubject

But I can't seem to find the correct syntax to this.

Am I correct in my approach? If i am, how should I implement the syntax? Any help would be much appreciated. I am new to Angular.

LIST

---

Karate Apples Cake

When I click on Apples, a request to my php script will return a list of apples. And so on and so forth.

Answer 1

my suggestion is to use Subject.

i.e messageSource =  new Subject<string>();

and subscribe to messageSource

 currentMessage = this.messageSource.asObservable(); not required remove it.

Change the currentMessage to messageSource

 ngOnInit() {
this.data.messageSource .subscribe(message => this.message = message);

}

Whenever the messageSource changed it will automatically subscribed in you component.

 @Injectable({
    providedIn: 'root'
  })
export class MasterHobbydata {
    private messageSource = new BehaviorSubject<string>("1");
    currentMessage = this.messageSource.asObservable();

    private hobbyListByIdUrl="http://local/?Hobby=";

    constructor(private http: HttpClient){}

    changeMessage(message: string) {         
        this.messageSource.next(message);
    }

  //Returns a full list of current hobbies hosted
  getHobbiesById(message): Observable<HobbyRoomObj[]>{
const url = this.hobbyListByIdUrl + message; 
    return this.http.get<HobbyRoomObj[]>(url)
      .pipe(map(( response) =>{
return response;
        }
)).pipe(catchError(this.handleError('getHobbiesById', []))
      );
  }
}

component file changes

    export class HobbyViewComponent implements OnInit {
      hobbyRoomObj = HobbyRoomObj;
      hobbiesRooms: HobbyRoomObj[];

      message:string;

      constructor(private data: MasterHobbydata) { }

      ngOnInit() {
        this.data.currentMessage.subscribe(message => { 
    this.message = message
this.getHobbiesById(message);
});
      }

      getHobbiesById(message): void {
        console.log("hit");
        this.data.getHobbiesById(message)
        .subscribe(hobbiesRooms => this.hobbiesRooms = hobbiesRooms);
      }
    }