loader in Angular 6 HttpClient Loading Spinner Example

Rate this post

Table of Contents

Angular 6 HttpClient Loading Spinner Example – Technology

In this post we will give you information about Angular 6 HttpClient Loading Spinner Example – Technology. Hear we will give you detail about Angular 6 HttpClient Loading Spinner Example – TechnologyAnd how to use it also give you demo for it if it is necessary.

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

Angular 6 Folder Project Structure
Angular 6 CLI Installation
Angular 6 Module File
Angular 6 Components
Angular 6 Services
Angular 6 Routing
Angular 6 CSS
Angular 6 Class Binding
Angular 6 Animation
Angular 6 Templating
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.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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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 >
  <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;
      });
    }
}