Angular 6 HttpClient Loading Spinner Example

Today, We want to share with you Angular 6 HttpClient Loading Spinner Example.In this post we will show you Angular 6 Loading Spinner Example, hear for Intercept all HTTP calls with Angular 6 to display a loader we will give you demo and example for implement.In this post, we will learn about Angular 6 Http Interceptor and Loading Indicator with an example.

Angular 6 HttpClient Loading Spinner Example

There are the Following The simple About Angular 6 HttpClient Loading Spinner Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Show loader on every request in Angular 6 Example, so the some major files and Directory structures for this example is following below.

Angular 6 Loading Spinner Tutorial Example From Scratch

  • Angular 6 HttpClient Loading Spinner Example
  • Setup Angular 6
  • Setup Angular 6 rxjs-compat library.
  • Setup Bootstrap 4.
  • Setup Angular 6 epic spinners.
  • Make Angular 6 JSON server.
  • Setup Angular 6 HttpClient.
  • Make Delay to display spinner.
  • List of the Angular 6 spinners.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client
Read Also:  PHP Create ZIP File In Laravel Using Zipper package

Step #1: Setup Angular 6 and Create Project

Simple Angular 6 HttpClient Loading Spinner Example

npm install -g @angular/cli

//create a local project using Angular 6
ng new angularspinner

Step #2: Setup rxjs-compat library.

npm install rxjs-compat --save

Step #3: Setup Bootstrap 4.

npm install bootstrap --save

src >> styles.css and Import bootstrap.min.css

@import "~bootstrap/dist/css/bootstrap.min.css"

Step #4: Setup Angular 6 simple epic spinners.

npm install angular-epic-spinners

app.module.ts

// app.module.ts

import {AtomSpinnerModule} from 'angular-epic-spinners'
  
@NgModule({
  imports: [AtomSpinnerModule]
})

src >> app >> app.component.html

<!-- app.component.html -->

<div>
  
  
</div>

app.component.ts

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  display = false;
}

Step #5: Make angular 6 JSON server.

json-server

npm install -g json-server

//or

yarn global add json-server

db.json

//Json in Angular 6 HttpClient Loading Spinner Example
{
    "memberList": [
    {
        "id": "1",
        "name": "Jaydeep Gondaliya",
        "salary": "120265"
    },
    {
        "id": "2",
        "name": "Krunal Sisodiya",
        "salary": "18500"
    },
    {
        "id": "3",
        "name": "Ankit Kathiriya",
        "salary": "245850"
    },
    {
        "id": "4",
        "name": "Chirag dethariya",
        "salary": "358523"
    },
    {
        "id": "5",
        "name": "Dhaval dave",
        "salary": "252030"
    }]
}

start the JSON server Run App’s

json-server --watch data/db.json --port 4000

Step #6: Setup GET and POST Angular 6 HttpClient.

app.module.ts

// app.module.ts

import { HttpClientModule } from '@angular/common/http';

imports: [
  BrowserModule,
  AtomSpinnerModule,
  HttpClientModule
],

Member.ts.

// Member.ts

export interface Member {
    id: Number;
    name: String;
    salary: Number;
}

Make a service using CMD

ng g s member --spec=false

member.service.ts

// member.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MemberService {

  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getMembers() {
    return this
            .http
            .get(`${this.url}/memberList`);
        }
}

app.component.ts

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { MemberService } from './member.service';
import { Member } from './Member';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  display = false;
  members: Member[];

  constructor(private memberService: MemberService) {}

  ngOnInit() {
    this.memberService
      .getMembers()
      .subscribe((data: Member[]) => {
          this.members = data;
        });
  }
}

app.component.html

<!-- app.component.html -->

<div>
  
  
</div>

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Member Name</th>
      <th>Member Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ member.id }}</td>
      <td>{{ member.name }}</td>
      <td>{{ member.salary }}</td>
    </tr>
  </tbody>
</table>

Step #7: Make Delay(SetTiemOut) to Showing spinner.

app.component.ts

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { MemberService } from './member.service';
import { Member } from './Member';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  display = false;
  members: Member[];

  constructor(private memberService: MemberService) {
    this.fetchMembers = this.fetchMembers.bind(this);
  }

  ngOnInit() {
    this.display = true;
    setTimeout(this.fetchMembers, 2000);
  }
  fetchMembers() {
    this.memberService
      .getMembers()
      .subscribe((data: Member[]) => {
        this.members = data;
        this.display = false;
      });
    }
}

List of Angular 6 spinners Source Code Download

Step #8: List of Angular 6 spinners.

Angular 6 color, size and animation more speed























  







  

    



    


Angular 6 HttpClient Loading Spinner – Output

Angular 6 HttpClient Loading Spinner

Angular 6 CRUD Operations Application Tutorials
Read Also:  Angular 4+ Loading Spinner Component with example and Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 HttpClient Loading Spinner Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.