I'm new to Angular and I'm having an issue.
I'm creating an app with several sibling components. When I update a value in one component other components don't update. I know that to resolve this issue I should use behaviour subject. But how do I implement it with my service, the components and all the templates?
Here is my code -
----------------------My service---------------------------
//import
@Injectable()
export class CoachService {
apiURL = environment.apiURL;
constructor(private http: HttpClient ) { }
coachProfile(token :string)
{
return this.http.post<any>(this.apiURL+'/coach/profile_infos',{
token: token
})
}
updateProfile(info: any, token: string, us_id: string) {
return this.http.post<any[]>(this.apiURL + '/coach/update_profile', {
token: token,
us_id: us_id,
us_lang: info.us_lang,
us_firstname: info.us_firstname,
us_lastname: info.us_lastname,
us_sex: info.us_sex,
us_birthdate: info.us_birthdate,
us_national_number : info.us_national_number,
us_email: info.us_email,
us_gsm: info.us_gsm,
online_profile: info.online_profile,
us_address: info.us_address,
us_zip: info.us_zip,
us_city: info.us_city,
country:{
id: info.country.id
}
})
}
}
----------one component.ts-------------------
//import
//component decorator
export class CoordonneesComponent implements OnInit, OnDestroy {
private coachProfile;
token: string = localStorage.getItem('token');
us_id : string;
us_lang: string;
infos_profile: any;
online: any;
constructor(private translate: TranslateService,private coachService: CoachService, private router: Router) { }
ngOnInit() {
this.coachProfile=this.coachService.coachProfile(this.token)
.subscribe((data) => {
this.infos_profile = data.results;
this.online = this.infos_profile.online_profile;
this.translate.use(this.infos_profile.us_lang)
this.infos_profile.lang= this.infos_profile.us_lang;
});
.....
}
updateCoordonees() {
this.coachService.updateProfile(this.infos_profile, this.token, this.us_id)
.subscribe((data: any) => {
if(data.success && data.msg!=null)
{
// do something
}
else
{
// do something
}
},
(err) => {
// do something
});
}
ngOnDestroy() {
this.countrieList.unsubscribe();
this.coachProfile.unsubscribe();
}
}
I'm going to show you a simple way:
@Injectable()
export class ProfileService {
private profileObs$: BehaviorSubject<Profile> = new BehaviorSubject(null);
getProfileObs(): Observable<Profile> {
return this.profileObs$.asObservable();
}
setProfileObs(profile: Profile) {
this.profileObs$.next(profile);
}
}
Now when you update something anywhere in the application, you can set that change by the ProfileService
and each subscriber is receiving the change. I recommend you subscribe in ngOnInit
.
ngOnInit() {
this.profileService.getProfileObs().subscribe(profile => this.profile = profile);
}
Never forget to unsubscribe from the observables to prevent memory leaks!
There are many ways u can do that --> Use a subscription and unsubscribe in ngOnDestroy()
or use another subject and deliver it to takeUntil like this:
unsubscribe$: Subject<boolean> = new Subject();
...
ngOnInit() {
this.profileService.getProfileObs()
.pipe(takeUntil(this.unsubscribe$)
.subscribe(profile => this.profile = profile);
}
ngOnDestroy() {
this.unsubscribe$.next(true);
this.unsubscribe$.complete();
}