How to show loader component when when form load before data

Question

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

 

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>
Components above work good actually i need to call on main-financial.ts to display before data show and hide after data show ?