angular

Angular 2 http get not getting

Http uses rxjs and is a cold/lazy observable, meaning that you should subscribe to it to make it work. this.http.get(`http://swapi.co/api/people/1`) .map((response: Response) => { console.log(response.json()); response.json(); }) .subscribe(); Or if you want to subscribe from somewhere else, you should return the http.get method like this: getAllPersons(): Observable <any> { console.log(“Here”); return this.http.get(`http://swapi.co/api/people/1`) .map((response: Response) => … Read more

Angular – Set headers for every request

To answer, you question you could provide a service that wraps the original Http object from Angular. Something like described below. import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; @Injectable() export class HttpClient { constructor(private http: Http) {} createAuthorizationHeader(headers: Headers) { headers.append(‘Authorization’, ‘Basic ‘ + btoa(‘username:password’)); } get(url) { let headers = new Headers(); … Read more

Angular 2: 404 error occur when I refresh through the browser [duplicate]

Update for Angular 2 final version In app.module.ts: Add imports: import { HashLocationStrategy, LocationStrategy } from ‘@angular/common’; And in NgModule provider, add: {provide: LocationStrategy, useClass: HashLocationStrategy} Example (app.module.ts): import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { AppComponent } from ‘./app.component’; import { HashLocationStrategy, LocationStrategy } from ‘@angular/common’; @NgModule({ declarations: … Read more

File Upload In Angular?

Angular 2 provides good support for uploading files. No third party library is required. <input type=”file” (change)=”fileChange($event)” placeholder=”Upload file” accept=”.pdf,.doc,.docx”> fileChange(event) { let fileList: FileList = event.target.files; if(fileList.length > 0) { let file: File = fileList[0]; let formData:FormData = new FormData(); formData.append(‘uploadFile’, file, file.name); let headers = new Headers(); /** In Angular 5, including the … Read more

Angular File Upload

Here is a working example for file upload to api: Step 1: HTML Template (file-upload.component.html) Define simple input tag of type file. Add a function to (change)-event for handling choosing files. <div class=”form-group”> <label for=”file”>Choose File</label> <input type=”file” id=”file” (change)=”handleFileInput($event.target.files)”> </div> Step 2: Upload Handling in TypeScript (file-upload.component.ts) Define a default variable for selected file. … Read more

How do I share data between components in Angular 2?

A service singleton is a nice solution. Other way – data/events bindings. Here is an example of both: class BazService{ n: number = 0; inc(){ this.n++; } } @Component({ selector: ‘foo’ }) @View({ template: `<button (click)=”foobaz.inc()”>Foo {{ foobaz.n }}</button>` }) class FooComponent{ constructor(foobaz: BazService){ this.foobaz = foobaz; } } @Component({ selector: ‘bar’, properties: [‘prop’] }) … Read more

Adding a HTTP header to the Angular HttpClient doesn’t send the header, why?

The instances of the new HttpHeader class are immutable objects. Invoking class methods will return a new instance as result. So basically, you need to do the following: let headers = new HttpHeaders(); headers = headers.set(‘Content-Type’, ‘application/json; charset=utf-8’); or const headers = new HttpHeaders({‘Content-Type’:’application/json; charset=utf-8′}); Update: adding multiple headers let headers = new HttpHeaders(); headers … Read more