1
Answer

How to show loader component when when form load before data

ahmed elbarbary

ahmed elbarbary
5y
1.4k
1
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 display on main-financial .
I work on angular 7 app I need when page load show loader component before data display
and after data display hide loader
 
  1. LoaderComponent.ts  
  2. import { Component, OnInit } from '@angular/core';  
  3. import { LoadersCSS } from 'ngx-loaders-css';  
  4. @Component({  
  5.   selector: 'app-loader',  
  6.   templateUrl: './loader.component.html',  
  7.   styleUrls: ['./loader.component.css']  
  8. })  
  9. export class LoaderComponent implements OnInit {  
  10.   loader: LoadersCSS = 'line-scale-pulse-out';  
  11.   color = 'black';  
  12.   
  13.   constructor() { }  
  14.   
  15.   ngOnInit() {  
  16.   }  
  17.   
  18. }  
  19. loadercomponent.html  
  20. <loaders-css [loader]="loader" [scale]="1" [color]="color"></loaders-css>  
  21. loadercomponent.css  
  22. .loaders-css  
  23.   {  
  24.     margin:10px auto;  
  25.   }  
  26. I need to display loader on component finiancial.ts before data load and after data load hide loader   
  27.   
  28. main-financial.ts  
  29.   
  30. import { Component, Input } from '@angular/core';  
  31. import { ActivatedRoute } from '@angular/router';  
  32. import { CompanyNameService } from '../services/company-name-service';  
  33.   
  34. @Component({  
  35.   selector: 'app-financial-main',  
  36.   templateUrl: './main-financial.html',  
  37. })  
  38.   
  39. export class MainFinancialComponent {  
  40.   
  41.   @Input() CompanyID: number;  
  42.   CompanyName: string = "";  
  43.   CompanyLogo: string = "";  
  44.   
  45.   
  46.   
  47.   constructor(private route: ActivatedRoute, private companyNameService: CompanyNameService) { }  
  48.   
  49.   ngOnInit() {  
  50.     this.route.params.subscribe(params => {  
  51.       this.CompanyID = params['CompanyID'];  
  52.       this.companyNameService.GetCompanyName(this.CompanyID).subscribe((data: []) => {  
  53.         if (data.toString() != '[]') {  
  54.           this.CompanyName = JSON.parse(data.toString())[0].DisplayName;  
  55.           this.CompanyLogo = JSON.parse(data.toString())[0].LogoSourceUrl;  
  56.         }  
  57.       });  
  58.     });  
  59.   }  
  60. }  
  61. main-financial.html  
  62. <div id="z2-2cols-sub-2cols-left">  
  63.   <div class="z2-boxstyle1 overflow-hidden">  
  64.     <div class="z2-boxstyle1-header mb-1">  
  65.       <div class="z2-boxstyle1-header-left">  
  66.         <div class="z2iconfont icon-Financial-Data"></div>  
  67.         {{CompanyName}}  
  68.       </div>  
  69.       <div class="z2-boxstyle1-header-right">  
  70.         <div class="partscore-contain">  
  71.           <img *ngIf="CompanyLogo!='' && CompanyLogo!=null &&CompanyLogo!=undefined" class="brand-logo height-50" src="https://cm.z2data.com/UploadedFiles/CompanyLogo/{{CompanyLogo}}" alt="avnet" title="avnet">  
  72.         </div>  
  73.       </div>  
  74.     </div>  
  75.   </div>  
  76.   
  77.   <div class="z2-boxstyle1">  
  78.     <ul class="nav nav-tabs nav-top-border square">  
  79.       <li class="nav-item active">  
  80.         <a data-toggle="tab" href="#FinancialKeyState" class="nav-link text-underline-none active">Key State</a>  
  81.       </li>  
  82.       <li class="nav-item">  
  83.         <a data-toggle="tab" href="#FinancialFN" class="nav-link text-underline-none">Financial</a>  
  84.       </li>  
  85.       <li class="nav-item">  
  86.         <a data-toggle="tab" href="#tabFinancialRatios" class="nav-link text-underline-none">Ratios</a>  
  87.       </li>  
  88.       <li class="nav-item">  
  89.         <a data-toggle="tab" href="#FinancialSegments" class="nav-link text-underline-none">Segmentation</a>  
  90.       </li>  
  91.       <li class="nav-item">  
  92.         <a data-toggle="tab" href="#FinancialScores" class="nav-link text-underline-none">Scores</a>  
  93.       </li>  
  94.       <li class="nav-item">  
  95.         <a data-toggle="tab" href="#FinancialCredit" class="nav-link text-underline-none">Credit</a>  
  96.       </li>  
  97.     </ul>  
  98.     <div class="z2-boxstyle1-content">  
  99.       <div class="tab-content">  
  100.         <div id="FinancialKeyState" class="tab-pane active">  
  101.           <app-financial-key-stats [CompanyID]="CompanyID" [hidden]="financialkeystats.haveData" #financialkeystats ></app-financial-key-stats>  
  102.         </div>  
  103.         <div id="FinancialFN" class="tab-pane">  
  104.           <app-financial [CompanyID]="CompanyID" [hidden]="financial.haveData" #financial></app-financial>  
  105.   
  106.         </div>  
  107.         <div id="tabFinancialRatios" class="tab-pane">  
  108.           <app-financial-ratio [CompanyID]="CompanyID" [hidden]="financialratio.haveData" #financialratio></app-financial-ratio>  
  109.   
  110.         </div>  
  111.         <div id="FinancialSegments" class="tab-pane">  
  112.           <app-financial-segmentation [CompanyID]="CompanyID" [hidden]="financialsegmentation.haveData" #financialsegmentation></app-financial-segmentation>  
  113.   
  114.         </div>  
  115.         <div id="FinancialScores" class="tab-pane">  
  116.           <app-financial-scores [CompanyID]="CompanyID" [hidden]="financialScores.haveData"  #financialScores></app-financial-scores>  
  117.   
  118.         </div>  
  119.         <div id="FinancialCredit" class="tab-pane">  
  120.           <app-financial-credit [CompanyID]="CompanyID" [hidden]="financialcredit.haveData" #financialcredit></app-financial-credit>  
  121.   
  122.         </div>  
  123.       </div>  
  124.   
  125.       </div>  
  126.   </div>  
  127. </div>  
  128. Components above work good actually i need to call on main-financial.ts to display before data show and hide after data show ?  
 
Answers (1)
Next Recommended Forum