How to access value from response angular

this.userApiService.login is asynchronously so you don't know when this.user_id = response.user_id is executed. You should use this.router.navigateByUrl inside subscribe.

The problem is that the code for the second console.log and your router navigation is outside the subscribe block. You need to move your routing up inside the subscribe, like this:

login(user){ 
    this.userApiService.login({'username': this.user.username, 'password': this.user.password}).subscribe( resp => {
      let response = resp;
      this.user_id = response.user_id;
      console.log(this.user_id);
      this.router.navigateByUrl('/dashboard/'+this.user_id);
    });
  }

The reason why your initial code does not work is that the code inside your "subscribe" will run asyncronously, meaning that it will happen after your api has returned with the answer. So what happens in your initial code is this:

1. The userApiService is called and it sends an http request to your server.
2. The code after the subscribe block is run, meaning your second console.log and router navigation. At this point in time the http call has not returned with the user_id, so the code does not know what the user_id is.
3. The response from your http request comes back, and the code inside your subscribe block is now run. You now have access to the user_id.

That happens that way because, it's navigating to dashboard even before you get response. It's not waiting till response comes. Keep .navigateByUrl() inside .subscribe (). So, it'll navigate after getting response

Because userApiService.login method return observable object.

What is observable ?

Observable is:

Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values. For more example please visit this link: Angular Observables

in a nutshell userApiService.login's return type is observable, so that the it is working async, therefore your code is not correct working. Please below code part move to subscribe's inside.

console.log(this.user_id)
this.router.navigateByUrl('/dashboard/'+this.user_id)

For example :

login(user){ 
    this.userApiService.login({'username': this.user.username, 'password': this.user.password}).subscribe( resp => {
      let response = resp;
      this.user_id = response.user_id
      console.log(this.user_id)

      //it is correct 
      console.log(this.user_id)
      this.router.navigateByUrl('/dashboard/'+this.user_id)
      });
  }