Angular 7.2.4Angular7Bootstrap 4

Angular Latest Versions Loader Working Example

angular7
273Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular Latest Versions Loader Working Example.

I am doing this in Angular7.2.4 version. This is very interesting post because I liked it very much.

In this post, loader will show according to content load and this is the awesome thing.

I am calling Angular loader before API data will load successfully and I am getting API data with Angular HTTP Client.



Here is the working code, you need to follow carefully:


1. Here is the code, you need to add into app.module.ts file:

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

// we need this because we are calling API to get records
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

2. You need to add below code into your app.component.ts file:

import { Component } from '@angular/core';
// HttpClient will call the API and get data
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title  = 'angularloader'; //Initiate loader
  loader = true;
  post   : any;
  constructor(private http: HttpClient) {
  this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(data => {
  this.post = data;
  this.loader = false;
    }, error => console.error(error));
  }
}

 

3. You need to add below code into app.component.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="loader" *ngIf="loader">
  <div class="bar"></div>
</div>

<div class="jumbotron text-center">
  <h1> Welcome to {{ title }}!</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <ul>
     <!-- Get The API Data -->
      <li *ngFor="let Posts of post">
        <span>{{ Posts.id }}</span>
        <h2>{{ Posts.title }}</h2>
        <p>{{ Posts.body }}</p>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

 

4. You need to add the below code into app.component.css file to styling loader:

@keyframes loader-animation {
     0% {
         left: -100%;
     }
     49% {
         left: 100%;
     }
     50% {
         left: 100%;
     }
     100% {
         left: -100%;
     }
 }
 .loader {
     height: 5px;
     width: 100%;
     overflow: hidden;
 }
 .loader .bar {
     position: relative;
     height: 5px;
     width: 100%;
     background-color: dodgerblue;
     animation-name: loader-animation;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }

 

This is it, if you have any query regarding this post, then please let me know.

Jassa Jatt

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

1 Comment

Leave a Reply

Positive SSL