rahulsahay19

newRequest() {

    const request = new HttpRequest(
        "POST", "/api/progress-request", {}, 
         {reportProgress: true});

    this.http.request(request)
        .subscribe(
            event => {

rahulsahay19

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [
        [ { provide: HTTP_INTERCEPTORS, useClass: 

rahulsahay19

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) {

rahulsahay19

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)

rahulsahay19

<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>

rahulsahay19

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';

rahulsahay19

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';

rahulsahay19

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',

rahulsahay19

<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>

rahulsahay19

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',