javascript - Understanding observables in angular 2 -

i new angular 2 , observables.

i have html template has text box. gets cleared when observables don't return data when data exists gets filled first data item.

i don't know how happens though have read tutorials observables.

html

<form class="clearfix" role="form"       [ngformmodel]="basicdetailsform">     <div class="form-group col-md-6 no-padding">         <label for="assignedto" class="text-muted">assigned to</label>         <input class="form-control bold"                id="assignedto"                 type="text"                 [ngformcontrol]="ctrlassignedto"                (change)="assignedtochanged($event)"                [(ngmodel)]="activeitem.assignee.name" />     </div> </form> 

and component .ts file has

.component.ts

 public ngoninit(): void {              // subscribe users observable             this.userssubs = this.userssubs || this.itemdetailservice.users$.subscribe(function (user: any) {                 if (user.usedfor !== 'basic') {                     return;                 }                  if (user.id === '0') {                     context.activeitem.assignee = {};                     return;                 }                  let assignedto: = {                     id: user.id,                     type: 'user',                     url: user.url,                     name: user.name,                     archived: false,                     archivedate: null                 }                  context.activeitem.assignee = assignedto;             });         }  constructor(         @inject(appstateservice) public appstateservice: appstateservice,         @inject(itemdetailservice) public itemdetailservice: itemdetailservice,         private formbuilder: formbuilder) {         super(appstateservice, itemdetailservice);           this.activeitem = this.activeitem || {             assignee: {}         };          // build form         this.basicdetailsform = this.formbuilder.group({             'assignedto': ['']         });         this.ctrlassignedto = <control>this.basicdetailsform.controls['assignedto'];      } 

and service.ts file has

.service.ts

 private usersobserver: observer<any>;  constructor(     @inject(projectsapiservice) private apiservice: projectsapiservice,     @inject(appstateservice) private appstateservice: appstateservice,     @inject(appobservableservice) private appobservableservice: appobservableservice) {     this.activedetailtab = {         index: 0     } }  public init() {  this.users$ = this.users$ || new observable((observer: any) => {             this.usersobserver = observer;         }).share(); }       public getuserbyalias(alias: string, usedfor: string): void {              let context = this;             this.apiservice.getuserbyalias(alias)                 .subscribe(                 (data: any) => {                     if (data.data.length === 0) {                         context.usersobserver.next({ id: '0', usedfor: usedfor });                         return;                     }                      data.data.foreach(function (user: any) {                         context.users.push(user);                     });                      data.data[0].usedfor = usedfor;                     context.usersobserver.next(data.data[0]);                 },                 err => { console.log(err); },                 () => { console.log('done'); }                 );         } 

i'll try explain following data flow. let's start triggers flow.

you have input triggers assignedtochanged event whenever changes.

(change)="assignedtochanged($event)" 

inside assignedtochanged() there's call getuserbyalias() method in service class.

you have removed part of code in last edit.

getuserbyalias class apiservice.getuserbyalias() , here observables step in.

first let's understand getuserbyalias does. if know basics observables you'll know .subscribe called when api response returned. inside .subscribe you'll dealing observable , there soon. i'll highlight 3 main things happening here.

if there's no data in api response, object id: 0 pushed userobservable stream.

if (data.data.length === 0) {     context.usersobserver.next({ id: '0', usedfor: usedfor });     return; } 

otherwise array of users populated users returned.

data.data.foreach(function (user: any) {    context.users.push(user); }); 

and first user pushed userobserver

data.data[0].usedfor = usedfor; context.usersobserver.next(data.data[0]); 

now, notice userobserver in above snippets. observer key notify textbox. when call .next() pushing new value observable stream , thus, listening observable notified.

but subscribed observable? inside component, subscribing userobservable:

this.userssubs = this.userssubs || this.itemdetailservice.users$.subscribe(function (user: any) {   //implementation removed readbility }); 

the function inside .subscribe() called whenever new value pushed observable stream ( userobservable.next() )

the key point understand service exposing observer class able listen , whenever new value has sent, service call .next('here goes value|object').