Angular 6 - To pass parameter using service

Question

I am working on an application of Angular 6 with the step of parameters through the use of a service.

In the constructor method I call the following service (app.component.ts):

constructor(private userService: UserService) {
      this.menuService.getDataRegister(this.aliasUser)
      .subscribe(
        data => {
          if(data == 1) {
            this.userService.setPage(1);
            this.page = this.userService.getPage();
            console.log('page1: ', this.page);
          } else {
            this.userService.setPage(0);
            this.page = this.userService.getPage();
          }
        }, // Bind to view
        error => {
          // Log errors if any
          this.processError(error);
        });

        console.log('page2: ', this.page);

    }
  }

The value of console.log "page1" shows me the expected content, but the value of console.log "page2", I get undefined and the value should remain, because it is same variable and load it in the answer ok of the service.

And then when I try to pick it up in another component, it loads undefined too (home.component.ts):

this.page = this.userService.getPage();
console.log('page: ', this.page);

What could be the problem? thanks,

your `console.log('page2...` is executed in the constructor. Nothing has been received so far. So `this.page` has still its init value (`undefined` if you've not defined it before...) — ValLeNain, Oct 15 '18 at 10:37
Take all of you logic out of constuctor. It doesn't belong there. — Alex Link, Oct 15 '18 at 10:41
Right, I've already initialized it in the constructor and put it in ngOnInit, now it works ok — Eladerezador, Oct 15 '18 at 10:43

score 1 · Accepted Answer · answered Oct 15 '18 at 10:44

When console.log('page2: ', this.page) is executed, the result of this.menuService.getDataRegister is not available yet. The order of execution of your console.log is:

console.log('page2: ', this.page);
console.log('page1: ', this.page);

You should use this.page only within the subscription

Sunil Singh · Answer 2 · 2018-10-15T10:55:56.547

Your implementation is looking fine. You don't need to access the page console.log('page2: ', this.page); since sooner or later you will be having the value once the API response value will be called.

Just read about the Asynchronous call you will get some idea how it works.

constructor(private userService: UserService) {
      this.menuService.getDataRegister(this.aliasUser)
      .subscribe(
        data => {
          if(data == 1) {
            this.userService.setPage(1);
            this.page = this.userService.getPage();
            console.log('page1: ', this.page);
          } else {
            this.userService.setPage(0);
            this.page = this.userService.getPage();
          }
        }, // Bind to view
        error => {
          // Log errors if any
          this.processError(error);
        });

        console.log('page2: ', this.page); // No need to check page here and you should not be bothered about this even.

    }
  }

Angular 6 - To pass parameter using service

2 Answers2