Angular 5 HttpClient map Observable returned to local member of the component

Question

I have a service defines that simply does the following:

@Injectable()
export class SettingService {

  settingsForm : FormGroup;

  constructor(private http:HttpClient, private httpErrorHandlerService : HttpErrorHandlerService) { }

    getPreference()   {
      return this.http.get<Preference>('/api/admin/config');
    }

Here is snippet of Preference Model

export class Preference {

 utilityName : string;
 utilitySupportUrl : string
 utilitySupportPhone : string;
 utilitySupportEmail : string;
 utilityPayBillUrl : string;
 utilityUrl : string;
 defaultLocale : string;

 showTOC : Boolean;
 showLastBilledDate : Boolean ;

 notificationRangeInHours : String;

In my component..

settingsForm: FormGroup;
  public utilityPreference: Preference = new Preference();

 constructor(private settingService: SettingService, private messageService: MessageService, private httpErrorHandler: HttpErrorHandlerService, private fb: FormBuilder, @Inject(APP_CONFIG) private config: IAppConfig) {
     this.settingService.getPreference().subscribe((data)  => { 
     console.log(data); 
     this.utilityPreference = data;
    });
console.log("====Component's preference:"+ JSON.stringify(this.utilityPreference));

My issue is my component is not able to get the copy of the Observable returned by the subscribe on my service. I was setting it as

this.utilityPreference = data;

In other words if i do this.utilityPreference.utilityName, i see NULL

Can someone point me in the right direction here ?

try to avoid subscriptions within the constructer, as @Ricardo says, try onInit,or in its own method — seven, Mar 26 '18 at 13:03

score 0 · Answer 1 · answered Mar 26 '18 at 13:25

The problem that you are facing is that settingService.getPreference() is asynchronous. So your console.log evaluates first and then, some time later, getPreference() returns and subscribe block gets executed.

constructor(...) {
  this.settingService.getPreference().subscribe(data => { 
     this.utilityPreference = data;
     console.log('second', this.utilityPreference)
  });
  console.log('first', this.utilityPreference)
}

Also as others suggested, consider moving the logic to ngOnInit. Constructors should be thin, and only handle the dependency injection.

So are you saying moving this code to ngOnInit will resolve my issue here? — Jiji 007, Mar 26 '18 at 13:57

Angular 5 HttpClient map Observable returned to local member of the component

1 Answers1