For calls that depend on previous result you should use concatMap firstPOSTCallToAPI(‘url’, data).pipe( concatMap(result1 => secondPOSTCallToAPI(‘url’, result1)) concatMap( result2 => thirdPOSTCallToAPI(‘url’, result2)) concatMap(result3 => fourthPOSTCallToAPI(‘url’, result3)) …. ).subscribe( success => { /* display success msg */ }, errorData => { /* display error msg */ } ); if your async method does not depend on … Read more
Simplified version to add custom headers to your request: import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; @Injectable() export class ApiService { constructor(private _http: Http) {} call(url): Observable<any> { let username: string = ‘username’; let password: string = ‘password’; let headers: Headers = new Headers(); headers.append(“Authorization”, “Basic ” + btoa(username + “:” + password)); … Read more
Broad question, TL;DR version @Injectable() is a decorator which tells the typescript that decorated class has dependencies and does not mean that this class can be injected in some other. And then TypeScript understands that it needs to Inject the required metadata into decorated class when constructing, by using the imported dependencies. bootstrap(app, [service]) bootstrap() … Read more
On refresh or when you navigate away from the current page (except for routing), then ngOnDestroy won’t be called. The application will just be destroyed by the browser. Only when Angular2 removes the component from the DOM because you move away or you call destroy() on a dynamically created component, then ngOnDestroy() is called. You … Read more
files is defined to be FileList | null so it can be null. You should either check for null (using an if) or use a “Non-null assertion operator” (!) if you are sure it is not null: if(nativeElement.files != null) { this.photoService.upload(this.vehicleId, nativeElement.files[0]) .subscribe(x => console.log(x)); } //OR this.photoService.upload(this.vehicleId, nativeElement.files![0]) .subscribe(x => console.log(x)); Note: The … Read more
There are a few issues in your code <div [formGroup]=”form”> outside of a <form> tag <form [formGroup]=”form”> but the name of the property containing the FormGroup is loginForm therefore it should be <form [formGroup]=”loginForm”> [formControlName]=”dob” which passes the value of the property dob which doesn’t exist. What you need is to pass the string dob … Read more
In fact, you need to check differences for each object in the list not on the list itself. KeyValueDiffer must be applied on an object not on an array. You could initialize an object containing all these KeyValueDiffer instances for the elements of your array: constructor(private differs: KeyValueDiffers) { } ngOnInit() { this.objDiffer = {}; … Read more
Since you are already using Observables, simply make full use of it 🙂 Obersvable.interval() is your good friend here: In your component, do this: Observable .interval(2*60*1000) .timeInterval() .mergeMap(() => this.notificationService.getNotifications(this.token)) .subscribe(data => { console.log(data); }); Explanation: .interval() creates an observable that emits an event every 2 minutes. .timeInterval() convert an Observable that emits items into … Read more
What you are looking for is HttpClientXsrfModule. Please read more about it here: https://angular.io/api/common/http/HttpClientXsrfModule. Your usage should be like this: imports: [ HttpClientModule, HttpClientXsrfModule.withOptions({ cookieName: ‘My-Xsrf-Cookie’, // this is optional headerName: ‘My-Xsrf-Header’ // this is optional }) ] Additionally, if your code targets API via absolute URL, default CSRF interceptor will not work out of … Read more
You can pass in a second argument with options: imports: [ RouterModule.forRoot( routes, { enableTracing: true } // <– debugging purposes only ) ] Angular will then log all events to the browser’s console, per the documentation: enableTracing?: boolean When true, log all internal navigation events to the console. Use for debugging.