angular-observable

I am trying to implement using Angular5 an HttpInterceptor to inject an Authorization header in all HTTP requests. I rely on a third party library (ADAL, here called AuthService ) that exposes a acquireToken() method to get the token to be used for Bearer authorization. The problem is that aquireToken() returns an observable, and i have to subscribe to get the real string I need. Therefore, my code never injects the header, i suppose because next.handle() is executed before acquireToken() returns any value. How can i ensure that the next handler is called only after the token has been

I am upgrading my app to Angular 6 . I am upgrading from Angular 4 , but the code below is causing errors in Angular 6, where it worked fine in Angular 4. The errors I am getting: Property 'of' does not exist on type 'typeof Observable' Error: Property 'catch' does not exist on type 'Observable' How should I resolve these errors? private authInterceptor(observable: Observable<Response>): Observable<Response> { return observable.catch((error, source) => { if (error.status == 401) { this.router.navigateByUrl('/login'); return Observable.of(); } else { return Observable.throw(error); } }); }

I have the following in my component template: <div *ngIf="user$ | async as user>...</div> Within the above div I would like to use the async pipe to subscribe to another observable only once, and use it just like user above throughout the template. So for instance, would something like this be possible: <ng-template *ngIf="language$ | async as language> <div *ngIf=" user$ | async as user> <p>All template code that would use both {{user}} and {{language}} would go in between</p> </div> </ng-template> Or can this even be combined in one statement? You can use object as variable: <div *ngIf="{

I am trying to take advantage of observables in angular2 and got confused on why should i use map() over subscribe() . Suppose i am getting values from a webApi, like this this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry') Now using subscribe(success, error, complete) I can get all the values on the success callback and I can return the values on the complete callback. If I can do all theses functionalities then what is the need of map() ? Does it give any advantage? In short, why one should write like this : this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')

I'm migrating an Angular 5 app to the latest CLI and Angular 6 RC and all of my Observable imports are broken. I see that Angular 6 changes the way the imports work, but I can't find any definite reference as to how the syntax works. I had this in 5 and it worked fine: import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; Now with the new syntax I see that import { Observable, Subject, throwError} from 'rxjs'; import { map } from 'rxjs/operators'; The first two lines compile, but I can't figure out

import { Observable, of } from "rxjs"; // And if I try to return like this return Observable.of(this.purposes); I am getting an error stating, Property 'of' does not exist on type 'typeof Observable' Looks like cartant's comment is correct, the RxJS upgrade guide doesn't cover that method specifically but does say "Classes that operate on observables have been replaced by functions" Which seems to mean all or most of those class methods like .of, .throw etc. have been replaced by a function So instead of import { Observable, of } from "rxjs"; Observable.of(this.purposes); do import { of } from

I am retrieving the moved element top and left values and displaying it within the element, the issue is the top, left values of the current moved element modifies the span text top,left of all the elements. Note : It modifies the span text(top,left values) of all the elements which I dont want . The top,left positions per say of element are correct that is not getting affected. html <div (mousemove)="documentMouseMove($event)" #parentparent> <div id="toget" class="dropzone"> <div class="box" *ngFor="let existingZone of existingDroppedItemZoneIn"> {{ existingZone }} <span>{{left}}</span> <span