listen to service variable change from component angular
13,451
I believe you basically need the data in the component when your get request is completed.
Solution 1: Consider making userDetails
as an Observable, . This way you could listen to it when the value in it changes
export class UserService {
private _userDetails: Subject<any> = new Subject<any>(); // consider putting the actual type of the data you will receive
public userDetailsObs = this._userDetails.asObservable();
getUserProfile(){
return this.http.get(this.BaseURI+'/UserProfile').subscribe(
res=>{
this._userDetails.next(res)
// console.log(res);
},
err=>{
console.log(err);
}
);
}
}
Inside your component(s)
constructor(private _userService: UserService) {}
ngOnInit() {
this._userService.userDetailsObs.subscribe((userDetails) => {
console.log(userDetails)
})
}
Solution 2. Consider just returning the HTTP observable itself.
getUserProfile(){
return this.http.get(this.BaseURI+'/UserProfile');
}
Inside your component(s)
constructor(private _userService: UserService) {}
ngOnInit() {
this._userService.getUserProfile.subscribe((userDetails) => {
console.log(userDetails)
})
}
Author by
David
Updated on June 04, 2022Comments
-
David over 1 year
I have service with variable and method that brings data to that variable
export class UserService { userDetails; getUserProfile(){ return this.http.get(this.BaseURI+'/UserProfile').subscribe( res=>{ this.userDetails=res; // console.log(res); }, err=>{ console.log(err); } ); }
now I want to check from component when the variable changes and read it. How can I do that ?
UPDATE.
export class UserService { userDetails; getUserProfile(){ this.http.get(this.BaseURI+'/UserProfile').subscribe( res=>{ this.userDetails=res; }, err=>{ console.log(err); } ) }
In component I have this:
ngOnInit() { this.service.userDetails.subscribe((userDetails) =>this.userDetails=userDetails) }
Now When I run the app I get error in component:
AppComponent.html:2 ERROR TypeError: Cannot read property 'subscribe' of undefined
-
Ashish Ranjan over 4 yearscreate a Subject and add value to it when
userDetails
change, subscribe to the Subject in the component? -
David over 4 yearscan u write that like answer ?I'm novice in angular
-
Ashish Ranjan over 4 yearsYes, so before I do that where do you eventually need
userDetails
? in your component? or in the service? -
David over 4 yearsuserDetails are already declared in the service. And service has method to get new data into that variable. What I need is to listen from component to that variable change. and if it changes grab the data to component. So In component I want to have the same userDetails variable updated form service variable on change event.
-
-
David over 4 yearsthis happens only when ngOnInit() problem is that component is already rendered.
-
David over 4 yearsthis happens only when ngOnInit() problem is that component is already rendered.
-
David over 4 yearsI've tested it and it only works from the beginning when all components are rendered. but I want it to work also after that when I call that service
-
David over 4 yearsI've tested it and it only works from the beginning when all components are rendered. but I want it to work also after that when I call that service
-
Ashish Ranjan over 4 years@David: Its a
subscription
you have created it when you initialized the component and that subscription will keep listening to changes inuserDetails
throughout until the subscription is killed. -
David over 4 yearsI'm trying to do it somehow my way, please read the question Update. But I get error. I know that I am doing something wrong, can you check what exactly ?
-
Ashish Ranjan over 4 years@David: The error says it correct, the service class variable
userDetails
doesn't have a value in begining (alsosubscription()
won't exist on a normal data type). Did you not follow my answer? I have initialized userDetails as a Subject.. -
Ashish Ranjan over 4 years@David how do you invoke the "HTTP get" request? is it some button click? I mean when do you call getUserProfile()?
-
David over 4 yearsI call HTTP request get after I login to site. And of course this component inits before this
-
Ashish Ranjan over 4 yearsLet us continue this discussion in chat.