javascript - Angular2 - the flow of code execution -

i java background. started learning angular2 while , working on it. in 1 of projects, have come across situation cannot understand.

for pagination implementation, taking number of tenders available in database using angular2 observables. after getting value, log in console make sure code works fine. prints undefined.

this relevant part of code.

this.getnumberofalltenders(); console.log("number of tenders = "+this._numberofalltenders); 

here output

number of tenders = undefined

following method takes number of tenders end

 getnumberofalltenders(){          this._tendersservice.getnumberofalltenders().             subscribe(              numberofalltenders => this._numberofalltenders = numberofalltenders,             error => this._error_all_numbers = error              );             console.log('+++++++++++++++++++ number of tenders in db = '+this._numberofalltenders);     } 

in above code snippet also, there line print console. output of undefined. line executed once variable assigned value obtained end.

i sure that, service code gets value backend. tried printing on template. prints correct value.

now question is, why prints 'undefined' in console. variables assigned values correctly. know, once function assign values variables called, values should available latter parts of code.

please clarify me on this. flow of code execution different in angular2?

it prints undefined because observables run async , aren't finished running time console commands run. if wanted use console.log on return value of observable, move console command inside subscribe function:

this._tendersservice.getnumberofalltenders().             subscribe(               numberofalltenders => {                  this._numberofalltenders = numberofalltenders;                  console.log('+++++++++++++++++++ number of tenders in db = '+this._numberofalltenders);               },               error => this._error_all_numbers = error             ); 

when working variables in component values observables, can either have default value or, if necessary, use null checks *ngif:

*ngif="_numberofalltenders" 

you can have template subscribe observables directly using syntax this:

//in component this._numberofalltenders = this._tendersservice.getnumberofalltenders();  //in template {{_numberofalltenders | async}} 

this way this._numberofalltenders of type observable<number>. , template can subscribe async pipe, calls subscribe in background , retrieves value.

since angular 4, can use async inside *ngif statements , assign value local template variable:

<div *ngif="_numberofalltenders | async; let myvalue">{{myvalue}}</div> 

the main thing observable not return value synchronously , need adjust other code work that. if needing use value 1 observable in order call second observable, need @ chaining observables flatmap or that:

firstobservable()   .flatmap(datafromfirst => secondobservable(datafromfirst)   .subscribe(datafromsecond => //do 

or if need save value first observable before proceeding second:

firstobservable()   .flatmap(datafromfirst => {       this.variable = datafromfirst;       return secondobservable(datafromfirst)    })   .subscribe(datafromsecond => //do 

hope helps.