wKoza

<div class="my-drop-zone" ngxDragAndDrop>
        Drop files here to upload
</div>

wKoza

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {NgxUploadModule} from '@wkoza/ngx-upload';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    NgxUploadModule.forRoot()

wKoza

<div class="col-md-9" style="margin-bottom: 40px">
    <h3>Upload queue <span *ngIf="uploader.queue.length>0"> - {{ uploader.queue.length }} item(s)</span></h3>

    <div class="card text-right">
      <div style="margin: 15px">
        <ngb-progressbar showValue="true" type="success" [striped]="true" [animated]="true"
                         [value]="uploader.progressTotal"></ngb-progressbar>
      </div>
      <div class="card-block">
        <button type="button" class="btn btn-outline-success btn-s" (click)="uploader.uploadAll({method: 'POST', url: 'my_url'})"

wKoza

export const HTTP_INTERCEPTORS_1 = new InjectionToken<HttpInterceptor[]>('HTTP_INTERCEPTORS_1');
export const HTTP_INTERCEPTORS_2 = new InjectionToken<HttpInterceptor[]>('HTTP_INTERCEPTORS_2');

@Injectable()
export class Http1Service extends HttpClient {

  constructor(backend: HttpBackend, private injector: Injector) {
    super(new MyHandlerService(backend, injector, HTTP_INTERCEPTORS_1));
  }

wKoza

import {InjectionToken, Injector} from '@angular/core';
import {HttpBackend, HttpEvent, HttpInterceptor, HttpReques, HttpHandler, HttpRequest} from '@angular/common/http';
import { Observable } from 'rxjs';

/**
* `HttpHandler` which applies an `HttpInterceptor` to an `HttpRequest`.
*/
export class MyHttpInterceptorHandler implements HttpHandler {
  constructor(private next: HttpHandler, private interceptor: HttpInterceptor) {}

wKoza

@Injectable()
export class HttpInterceptingHandler implements HttpHandler {
  private chain: HttpHandler|null = null;

  constructor(private backend: HttpBackend, private injector: Injector) {}

  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
    if (this.chain === null) {
      const interceptors = this.injector.get(HTTP_INTERCEPTORS, []);
      this.chain = interceptors.reduceRight(

wKoza

export class Http1Service extends HttpClient { };
export class Http2Service extends HttpClient { };

@NgModule({
  providers: [
    {provide: Http1Service, useClass: HttpClient},
    {provide: Http2Service, useClass: HttpClient},
  ]
})

wKoza

Observable<Article> article$ = this.http.get<Article>('api.learn-angular.fr/article', {responseType: 'blob'});

wKoza

Observable<Article[]> articles$ = this.http.get<Article[]>('api.learn-angular.fr/articles');

wKoza

Observable<Article[]> articles$ = this.http.get('api.learn-angular.fr/articles')
                                          .map((res:Response) => res.json() as Article[]);