View gist:2ba4e4f241d4604c12afd36d78792e82
newRequest() {
const request = new HttpRequest(
"POST", "/api/progress-request", {},
{reportProgress: true});
this.http.request(request)
.subscribe(
event => {
View NgModule.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
[ { provide: HTTP_INTERCEPTORS, useClass:
View gist:3d3d29c92047d8935c368298e81ae902
import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor}
from "@angular/common/http";
import {HttpRequest} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {
View seqRequests.ts
seqRequests() {
const sequence = this.http.get<Post>(
this.ROOT_URL + '/posts')
.switchMap(post => {
post.title += ' - TEST ';
return this.http.put(
this.ROOT_URL + '/posts',
post)
View app.component.html
<h1>HTTP Client Basics</h1>
<button (click)="getPosts()">Get Posts</button>
<button (click)="submitPost()">New Post</button>
<button (click)="parallelRequests()">Parallel Requests</button>
<div *ngFor="let post of posts | async">
{{post | json}}
</div>
View app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import * as _ from 'lodash';
import { Post } from './post';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/retry';
import 'rxjs/add/observable/of';
import { retry } from 'rxjs/operator/retry';
View app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import * as _ from 'lodash';
import { Post } from './post';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/retry';
import 'rxjs/add/observable/of';
import { retry } from 'rxjs/operator/retry';
View app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import * as _ from 'lodash';
import { Post } from './post';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
View app.component.html
<h1>HTTP Client Basics</h1>
<button (click)="getPosts()">Get Posts</button>
<button (click)="submitPost()">New Post</button>
<div *ngFor="let post of posts | async">
{{post | json}}
</div>
<div>
View app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import * as _ from 'lodash';
import { Post } from './post';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',