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

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>

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

1 solution

Solution 1

Add your solution here

Preview 0

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

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us