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

[ahmed elbarbary]

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



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


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

and after data display hide loader 



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>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/a56bdea4-8c5b-4e4f-96ef-4e97efdcfadc%40googlegroups.com.