Calling a method from another component to keep data in sync - html

Question

Problem
I can not refresh a variable, and thus select dropdown in the club-list-component after I create a club in the create-club-component
Context:
I am developing an application which randomly select a person from a team, from a club. First I made 1 component which concluded all the functionality, but as that would be ugly I wanted to seperate the different components and functions.
What I tried:
I've tested the functionality and the dropdown-box refreshes after creating a club, if all code is contained in 1 component.
Code snippets
I have the following pieces of code to share (some left away for readability):
create-club.component.ts:
#Input() clubDetails = {name: ''};
createClub() {
this._clubService.createClub(this.clubDetails).subscribe((data: {}) => {
});
alert('Club Created');
}
club-list.component.ts:
public clubs = [];
ngOnInit() {
this.refreshClublist();
}
refreshClublist() {
this._clubService.getClubs().subscribe(data => this.clubs = data);
}
}
club-list.component.html
<div>
<div class="alert alert-primary">
Select a club from the list
</div>
<select class="form-control">
<option *ngFor="let club of clubs" [value]="club.id">
{{club.name}}
</option>
</select>
</div>
What do I try to archieve:
Once i create my club from the popup modal in create-club.component.html, I want to have the dropdown box in club-list.component.html to be refreshed
In my mind best case scenario would be:
[club-list-component] ngOnInit(refreshClublist()) {}
[create-club.component]createClub()
[club-list-component] refreshClublist() (called after createClub() in step 2)

Answer 1

You can achieve this using Observable BehaviorSubject
create-club.component.ts:
private clubList = new BehaviorSubject(null);
public clubList$ = this.clubList.asObservable();
createClub() {
this._clubService.createClub(this.clubDetails).subscribe((data: {}) => {
this.clubList.next(data);
});
alert('Club Created');
}
club-list-component:
ngOnInit(){
this.clubList$.subscribe(updatedList=>{
console.log(updatedList);
});
}