How to show loader component when when form load before data display and hide loader after data display ?

Question

0.00/5 (No votes)

See more:

, +

How to show loader component when when form load before data display and hide loader after data display ?


I work on angular 7 app I need when page load show loader component before data display

and after data display hide loader component

loader component work perfect and component main-finincial work perfect
but how to call <loader> on form main-financial.ts

What I have tried:

LoaderComponent.ts
import { Component, OnInit } from '@angular/core';
import { LoadersCSS } from 'ngx-loaders-css';
@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
  loader: LoadersCSS = 'line-scale-pulse-out';
  color = 'black';

  constructor() { }

  ngOnInit() {
  }

}
loadercomponent.html
<loaders-css [loader]="loader" [scale]="1" [color]="color"></loaders-css>
loadercomponent.css
.loaders-css
  {
    margin:10px auto;
  }
I need to display loader on component finiancial.ts before data load and after data load hide loader 

main-financial.ts

import { Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CompanyNameService } from '../services/company-name-service';

@Component({
  selector: 'app-financial-main',
  templateUrl: './main-financial.html',
})

export class MainFinancialComponent {

  @Input() CompanyID: number;
  CompanyName: string = "";
  CompanyLogo: string = "";



  constructor(private route: ActivatedRoute, private companyNameService: CompanyNameService) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.CompanyID = params['CompanyID'];
      this.companyNameService.GetCompanyName(this.CompanyID).subscribe((data: []) => {
        if (data.toString() != '[]') {
          this.CompanyName = JSON.parse(data.toString())[0].DisplayName;
          this.CompanyLogo = JSON.parse(data.toString())[0].LogoSourceUrl;
        }
      });
    });
  }
}
main-financial.html
<div id="z2-2cols-sub-2cols-left">
  <div class="z2-boxstyle1 overflow-hidden">
    <div class="z2-boxstyle1-header mb-1">
      <div class="z2-boxstyle1-header-left">
        <div class="z2iconfont icon-Financial-Data"></div>
        {{CompanyName}}
      </div>
      <div class="z2-boxstyle1-header-right">
        <div class="partscore-contain">
          <img *ngIf="CompanyLogo!='' && CompanyLogo!=null &&CompanyLogo!=undefined" class="brand-logo height-50" src="https://cm.z2data.com/UploadedFiles/CompanyLogo/{{CompanyLogo}}" alt="avnet" title="avnet">
        </div>
      </div>
    </div>
  </div>

  <div class="z2-boxstyle1">
    <ul class="nav nav-tabs nav-top-border square">
      <li class="nav-item active">
        <a data-toggle="tab" href="#FinancialKeyState" class="nav-link text-underline-none active">Key State</a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#FinancialFN" class="nav-link text-underline-none">Financial</a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#tabFinancialRatios" class="nav-link text-underline-none">Ratios</a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#FinancialSegments" class="nav-link text-underline-none">Segmentation</a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#FinancialScores" class="nav-link text-underline-none">Scores</a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#FinancialCredit" class="nav-link text-underline-none">Credit</a>
      </li>
    </ul>
    <div class="z2-boxstyle1-content">
      <div class="tab-content">
        <div id="FinancialKeyState" class="tab-pane active">
          <app-financial-key-stats [CompanyID]="CompanyID" [hidden]="financialkeystats.haveData" #financialkeystats ></app-financial-key-stats>
        </div>
        <div id="FinancialFN" class="tab-pane">
          <app-financial [CompanyID]="CompanyID" [hidden]="financial.haveData" #financial></app-financial>

        </div>
        <div id="tabFinancialRatios" class="tab-pane">
          <app-financial-ratio [CompanyID]="CompanyID" [hidden]="financialratio.haveData" #financialratio></app-financial-ratio>

        </div>
        <div id="FinancialSegments" class="tab-pane">
          <app-financial-segmentation [CompanyID]="CompanyID" [hidden]="financialsegmentation.haveData" #financialsegmentation></app-financial-segmentation>

        </div>
        <div id="FinancialScores" class="tab-pane">
          <app-financial-scores [CompanyID]="CompanyID" [hidden]="financialScores.haveData"  #financialScores></app-financial-scores>

        </div>
        <div id="FinancialCredit" class="tab-pane">
          <app-financial-credit [CompanyID]="CompanyID" [hidden]="financialcredit.haveData" #financialcredit></app-financial-credit>

        </div>
      </div>

      </div>
  </div>
</div>

Posted 18-Nov-19 9:44am

ahmed_sa

Updated 24-Nov-19 4:35am

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

impuru · Answer 1 · 2019-11-24T04:35:00

Install it with npm

npm install ngx-progressbar --save

Import NgProgressModule in the root module

import { NgProgressModule } from 'ngx-progressbar';
 @NgModule({
  imports: [
    // ...
    NgProgressModule
  ]
})

In your template

<ng-progress></ng-progress>

Add NgProgress service wherever you want to use the progressbar.
So you can modify your above code as below:

import { Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CompanyNameService } from '../services/company-name-service';
import { NgProgress } from 'ngx-progressbar';

@Component({
  selector: 'app-financial-main',
  templateUrl: './main-financial.html',
})

export class MainFinancialComponent {

  @Input() CompanyID: number;
  CompanyName: string = "";
  CompanyLogo: string = "";



  constructor(private route: ActivatedRoute, private companyNameService: CompanyNameService, public ngProgress: NgProgress) { }

  ngOnInit() {
this.ngProgress.start();
    this.route.params.subscribe(params => {
      this.CompanyID = params['CompanyID'];
      this.companyNameService.GetCompanyName(this.CompanyID).subscribe((data: []) => {
        if (data.toString() != '[]') {
          this.CompanyName = JSON.parse(data.toString())[0].DisplayName;
          this.CompanyLogo = JSON.parse(data.toString())[0].LogoSourceUrl;
        }
this.ngProgress.done();
      });
    });
  }
}

And in your HTML template use this:

<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1"
             [speed]="200" [showSpinner]="false" [direction]="'rightToLeftIncreased'"
             [color]="'red'" [trickleSpeed]="250" [thick]="false" [ease]="'linear'"
></ng-progress>