Angular - Why after changing components, the data in the variables gets lost? - arrays

Question

I have two components, one that creates and changes one array, and another that gets the array, the problem is that when getting the array in the second component, the array is the default one without data:
array creation:
export class AddPlayerComponent implements OnInit {
team = [
{
summonerName: '',
rank: '',
role: '',
}
];
// code that changes the array
}
the other component calling for the array:
export class WaitingComponent implements OnInit {
actualTeam;
constructor(
private addPlayerComponent: AddPlayerComponent
) { }
ngOnInit(): void {
console.log("add player team:", this.addPlayerComponent.team);
this.actualTeam = this.addPlayerComponent.team;
console.log("actual team:", this.actualTeam);
}
}
By logic when i get the array, it should come with the data that i placed, but it comes with the default empty data.
How can i get the real array with the data between the two components?

Answer 1

You might want to try using a behavior subject in this case. You'll want to create this in a service, which you can then inject into any number of components for easy access.
#Injectable()
export class TeamsService {
private teams: ITeam[];
private observableTeams: BehaviorSubject<ITeam[]>;
constructor() {
this.teams = new Array<ITeam>;
this.observableTeams = <BehaviorSubject<ITeam[]>>new BehaviorSubject([]);}
get teams() {
return this.observableTeams.asObservable();}
addTeam(team: ITeam) {
this.teams.push(team);
this.observableTeams.next(Object.assign({}, this.teams));}}

Answer 2

Create a service to share the data between the two components. Say your service appears like this
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class ShowService {
private data=new BehaviorSubject<any>();
public castTeam = this.data.asObservable();
showTeam(team){
this.data.next(team);
}
}
then import this service in both of your components and then call showTeam() in ngOnInit of your components like this
export class WaitingComponent implements OnInit {
actualTeam;
constructor(
private showdata: ShowService,
private addPlayerComponent: AddPlayerComponent
) { }
ngOnInit(): void {
console.log("add player team:", this.addPlayerComponent.team);
this.actualTeam = this.addPlayerComponent.team;
this.showdata.castTeam.subscribe(actualTeam => { this.actualTeam= actualTeam; });
console.log("actual team:", this.actualTeam);
}
}
and then import the same service in the other component and then in ngOnInit just subscribe to the service methodlike this
export class AddPlayerComponent implements OnInit {
constructor(
private showdata: ShowService
) { }
ngOnInit(): void {
this.showdata.castTeam.subscribe(actualTeam => { this.team = actualTeam; });
}
team = [
{
summonerName: '',
rank: '',
role: '',
}
];
}