Angular 5 interceptor for loading message

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserDetailsComponent } from './user-details/user-details.component';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CommentsComponent } from './comments/comments.component';
import { loadingInterceptor } from './Services/loadingInterceptor';

@NgModule({
  declarations: [
    AppComponent,
    UserDetailsComponent,
    CommentsComponent
  ],
  imports: [
    BrowserModule,HttpClientModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: loadingInterceptor,
    multi: true
}],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div class="row">
<div class="col-md-6">
    <app-user-details></app-user-details></div>
<div class="col-md-6">
    <app-comments></app-comments></div>
</div>
<div class="loading" style="display: none">
  <span>Loading.....</span></div>

app.component.css


.loading {
    background: rgba(0,0,0,0.4);
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.loading span {
    position: fixed;
    left: 50%;
    top: 50%;
    border: solid 1px #ccc;
    display: block;
    padding: 20px 40px;
    margin-left: -40px;
    background: rgba(255,255,255,0.8);
}

comments/comments.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppComponent } from '../app.component';

@Component({
  selector: 'app-comments',
  templateUrl: './comments.component.html',
  styleUrls: ['./comments.component.css']
})
export class CommentsComponent implements OnInit {
  commentList: Array<Comment>;
  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
  }
  getComments() {
    this.commentList = [];
    this.httpClient.get('https://jsonplaceholder.typicode.com/comments').subscribe((data: Array<Comment>) => {
      this.commentList = data;
    })
  }
}

export class Comment {
  public body: string;
  public email: string;
  public id: number;
  public name: string;
  public postId: number;
}

comments/comments.component.html

<div class="row">
<div class="col-md-12">
    <button (click)="getComments()" class="btn btn-primary">Get Comments</button></div>
<div class="col-md-12" *ngFor="let item of commentList" style="max-height:500px;">
    <b style="display:block">{{item.name}}</b>
    <small>{{item.email}}</small>

{{item.body}}</div>
</div>

user-details/user-details.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent implements OnInit {

  private user: User;
  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
  }
  getUserInfo() {
    this.httpClient.get('https://jsonplaceholder.typicode.com/users/3').subscribe(
      success => {
        this.user = (success as User);
      }
    )

  }
}

export class User {

  public id: number;
  public name: string;
  public username: string;
  public email: string;
  public phone: string;

}

user-details/user-details.component.html

<div class="row col-md-12">
  <button (click)="getUserInfo()" class="btn">Get User Info</button></div>
<div class="row col-md-12" *ngIf="user">
<table class="table">
<tr>
<td>Name</td>
<td>{{user.name}}</td>
</tr>
<tr>
<td>User Name</td>
<td>{{user.username}}</td>
</tr>
<tr>
<td>Email</td>
<td>{{user.email}}</td>
</tr>
<tr>
<td>Phone</td>
<td>{{user.phone}}</td>
</tr>
</table>
</div>

services/loadingInterceptor.ts

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';

@Injectable()
export class loadingInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let loadingContainer: HTMLElement = document.getElementsByClassName('loading').item(0) as HTMLElement;
        loadingContainer.style.display = 'block';
        //send the request
        next.handle(req).subscribe((observer: any) => {
            if (observer.status == 200) {
                loadingContainer.style.display = 'none';
            }
        })
        return next.handle(req);
    }
}
Advertisements