wKoza

.my-drop-zone {
  width: 300px;
  height: 300px;
  cursor: pointer;
  padding: 1em;
  opacity: 0.4;
  text-align: center;
}

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

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

export function configFactory(config: ConfigService) {
  return  () => config.load();
}

...


providers: [
    ConfigService,
    {

wKoza

import { Injectable } from '@angular/core';

@Injectable()
export class LoggerService {

  logs: Array<string> = [];

  level: number= 2;  //debug:2, info:1, error:0

wKoza

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'ma-taille',
  template: `
  <div>
    <button (click)="dec()" title="plus petit">-</button>
    <button (click)="inc()" title="plus grand">+</button>
    <label [style.font-size.px]="taille">FontSize: {{taille}}px</label>
  </div>