Posted inTechnology / AngularJS

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

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



ID Member Name Member Salary
{{ member.id }} {{ member.name }} {{ member.salary }}

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 :

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype