Make angular service return class field as a observable

Question

Here is what I want to achieve: There is a component that has a UserService in it. After log in I want to call that service to retrieve user data from backend and store it in a service field. Then after I reload main page I want that service to do not call backend again, just return previously stored data. Additionally I want some divs to do not load before a data is loaded. How can I achieve that? Should I make getAllUSerInfoNormal() method to return observable, if its possible how should I do that? Or there is some other way?

Here is what I have got right now:

Service class:

@Injectable()
export class AccountService {

    userAccount : UserAccount;
    constructor(private _httpClient: HttpClient) {
    }


     getAllUSerInfoNormal(): UserAccount {
    if (!this.userAccount) {
        this._httpClient.get<UserAccount>(Constants.apiRoot + 'account/accountInfo').subscribe(user => {
            this.userAccount = user;
            return this.userAccount
        })
    } else {
        return this.userAccount;
    }
}

Component class:

@Component({
  selector: 'app-main-view',
  templateUrl: './main-view.component.html',
  styleUrls: ['./main-view.component.scss']
})
export class MainViewComponent implements OnInit {

  private account: UserAccount;
  private isDataLoaded = false;

  constructor(private _router: Router,
              private _accountService: AccountService) {
    setInterval(() => {
      this.updateResources();
    }, 1);
  }

  ngOnInit() {
    this._accountService.getAllUSerInfoNormal();
  }

  updateResources(){

  }
}

Component template:

<div class="ingame-menu">
    <div *ngIf="isDataLoaded">
        <div class="resources">
            <div class="resource"><img src="../../../assets/images/resources/gold.png" title="Gold"/>
                <br/> {{account.gold}}</div>
            <div class="resource"><img src="../../../assets/images/resources/wood.png" title="Wood"/>
                <br/> {{account.wood}}</div>
            <div class="resource"><img src="../../../assets/images/resources/stone.png" title="Stone"/>
                <br/> {{account.stone}}</div>
            <div class="resource"><img src="../../../assets/images/resources/meat.png" title="Meat"/>
                <br/> {{account.people}} </div>
        </div>
    </div>
    <div class="ingame-nav">
        <ul>
            <li><a routerLink="overview">Overview</a></li>
            <li><a routerLink="population">Population</a></li>
            <li><a routerLink="resources">Resources</a></li>
            <li><a routerLink="research">Research</a></li>
            <li><a routerLink="buildings">Buildings</a></li>
            <li><a routerLink="barracks">Barracks</a></li>
            <li><a routerLink="tavern">Tavern</a></li>
            <li><a routerLink="defence">Defence</a></li>
        </ul>
    </div>
    <div id="content">
        <router-outlet></router-outlet>
    </div>
</div>

Eduardo Junior · Answer 1 · 2021-01-28T20:48:42.413

1

You can save the loaded user in the lcoalStorage after the first load and then just read it on the following accesses.

This is a simple solution to learn. But in a real application scenario you shouldn't have "infinite time" cache like this. And must have a way to update the cache sometimes.

Change the service class to :

@Injectable()
export class AccountService {

    get userAccount() {
      return JSON.parse(localStorage.getItem('user'));
    };

    constructor(private _httpClient: HttpClient) {
    }


    getAllUSerInfoNormal(forceBanckendCall: boolean): Observable<UserAccount> {
        if (this.userAccount && !forceBackendCall) {
           return of(this.userAccount);
        }

        return this._httpClient.get<UserAccount>(Constants.apiRoot + 'account/accountInfo')
           .pipe(
             tap(user => localStorage.setItem('user', JSON.stringify(user)))
           );

    }

then the component class to:

@Component({
  selector: 'app-main-view',
  templateUrl: './main-view.component.html',
  styleUrls: ['./main-view.component.scss']
})
export class MainViewComponent implements OnInit {

  private account: UserAccount;
  private isDataLoaded = false;

  constructor(private _router: Router,
              private _accountService: AccountService) {
    setInterval(() => {
      this.updateResources();
    }, 1);
  }

  ngOnInit() {
    this._accountService.getAllUSerInfoNormal().subscribe(account => this.userAccount = account);
  }

  updateResources(){

  }
}

then in your component template place a *ngIf="userAccount" in the elements that you want to be loaded just after the user is present.

edited Jan 28 '21 at 20:48

answered Jan 28 '21 at 13:04

Eduardo Junior

362
1
10

In several places I send some account actions to backend, so then I may need to reload cached data. How could I do that then? – Daniel Pawłowski Jan 28 '21 at 13:32
i'll edit the answer to have a forceUpload param. For you to call when you need to go to backend explicitly. – Eduardo Junior Jan 28 '21 at 14:23
I editted the answer and added a simple way to do that. So you call this._accountService.getAllUSerInfoNormal(true) when you wish to reaload the user data from backend :) – Eduardo Junior Jan 28 '21 at 14:25
Another question, there is an error on return statement: src/app/core/account.service.ts(35,58): error TS2345: Argument of type 'UserAccount' is not assignable to parameter of type 'string'. – Daniel Pawłowski Jan 28 '21 at 19:09
Oh, ok i see. I forgot to parse the json before caching. I'll update the answer – Eduardo Junior Jan 28 '21 at 20:47
added a JSON.pase in the userAccount() and a JSON.stringify at "tap" inside getAllUSerInfoNormal() – Eduardo Junior Jan 28 '21 at 20:49
thank you very much, now everything works good – Daniel Pawłowski Jan 29 '21 at 16:40

score 0 · Answer 2 · answered Jan 28 '21 at 13:01

You cannot return the value from the subscription synchronously like you're attempting. The variable from an observable is emitted asynchronously. Please see here for more info on async data. In short, the value is available only inside the subscription.
There are multiple ways to cache a notification from an observable. One of the quickest way is to use a multicast observable (like Subject) in the service to hold the data. I'll illustrate using ReplaySubject with buffer 1 since it can hold on to the current value.

Service

import { ReplaySubject } from 'rxjs';

@Injectable()
export class AccountService {
  userAccountSource: ReplaySubject<UserAccount> = new ReplaySubject<UserAccount>(1);
  userAccount$ = this.userAccountSource.asObservable();
  
  constructor(private _httpClient: HttpClient) {
    this.getAllUSerInfoNormal().subscribe();  // <-- push to cache on app start
  }

  getAllUSerInfoNormal(): Observable<UserAccount> {
    return this._httpClient.get<UserAccount>(Constants.apiRoot + 'account/accountInfo').pipe(
      tap({
        next: user => this.userAccountSource.next(user),
        error: error => { }  // <-- handle error
      })
    );
  }
}

Now if the emission is not needed in the component controller, you can straight up skip the subscription in it and using the Angular async pipe in the template. Besides keeping the code tidy, it'll handle the potential leak issue of an open subscription.

Controller

@Component({...})
export class MainViewComponent implements OnInit {
  private isDataLoaded = false;

  constructor(
    private _router: Router,
    private _accountService: AccountService
  ) {
    setInterval(() => {
      this.updateResources();
    }, 1);
  }

  ngOnInit() {
  }

  updateResources() {
  }
}

Template

<div class="ingame-menu">
  <div *ngIf="(_accountService.userAccount$ | async) as account">
    <div class="resources">
      <div class="resource"><img src="../../../assets/images/resources/gold.png" title="Gold" />
        <br /> {{account.gold}}</div>
      <div class="resource"><img src="../../../assets/images/resources/wood.png" title="Wood" />
        <br /> {{account.wood}}</div>
      <div class="resource"><img src="../../../assets/images/resources/stone.png" title="Stone" />
        <br /> {{account.stone}}</div>
      <div class="resource"><img src="../../../assets/images/resources/meat.png" title="Meat" />
        <br /> {{account.people}} </div>
    </div>
  </div>
  <div class="ingame-nav">
    <ul>
      <li><a routerLink="overview">Overview</a></li>
      <li><a routerLink="population">Population</a></li>
      <li><a routerLink="resources">Resources</a></li>
      <li><a routerLink="research">Research</a></li>
      <li><a routerLink="buildings">Buildings</a></li>
      <li><a routerLink="barracks">Barracks</a></li>
      <li><a routerLink="tavern">Tavern</a></li>
      <li><a routerLink="defence">Defence</a></li>
    </ul>
  </div>
  <div id="content">
    <router-outlet></router-outlet>
  </div>
</div>

As said, there are multiple other ways to cache the data from an observable. You can start from here and here.
Unrelated to the issue, I find the usage of setInterval() with argument 1 very inelegant. Do you wish to poll the end-point regularly to keep the data updated? If so you could look into RxJS timer or interval function. They let you poll with a single subscription instead of opening a new subscription every n seconds.

This solution doesn't allow him to update the page and don't go to backend again as he said `Then after I reload main page I want that service to do not call backend again, just return previously stored data` — Eduardo Junior, Jan 28 '21 at 13:12
@EduardoJunior: OP didn't explain what kind of `reload`. If it's web page reload, then the value could be cached in browser storage. If the are rerouting to the main page within the app, backend will not be called again. The data from the `ReplaySubject` will be used instead. — ruth, Jan 28 '21 at 13:20

Make angular service return class field as a observable

2 Answers2