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:  Laravel 6 Show images from storage folder

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 CRUD Operations Application Tutorials
Read Also:  jQuery Back to top

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Java super Keyword Examples with Demo
  2. Read Also:  Simple PHP Laravel Pagination script
  3. Read Also:  pagination in php using ajax
  4. Read Also:  Laravel Soft Delete Example Tutorial From Scratch
  5. Read Also:  how to remove duplicates from array in java without using collections?
  6. Read Also:  Angular 4+ Loading Spinner Component with example and Demo
  7. Read Also:  Number Filter using Angular Example
  8. Read Also:  PHP Redirect To Another page Example
  9. Read Also:  Bootstrap table border Examples
  10. Read Also:  Number Filter using Angular Example
CLOSEX