Categories

Wednesday, December 4, 2024
#919814419350 therichposts@gmail.com
Angular 7.2.4Angular7Bootstrap 4

Angular Latest Versions Loader Working Example

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://project/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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

1 Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.