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

ahmed elbarbary

unread,

Nov 18, 2019, 3:51:30 PM11/18/19

to Angular and AngularJS discussion

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>

</div>

<a data-toggle="tab" href="#FinancialKeyState" class="nav-link text-underline-none active">Key State</a>

</li>

<a data-toggle="tab" href="#FinancialFN" class="nav-link text-underline-none">Financial</a>

</li>

<a data-toggle="tab" href="#tabFinancialRatios" class="nav-link text-underline-none">Ratios</a>

</li>

<a data-toggle="tab" href="#FinancialSegments" class="nav-link text-underline-none">Segmentation</a>

</li>

<a data-toggle="tab" href="#FinancialScores" class="nav-link text-underline-none">Scores</a>

</li>

<a data-toggle="tab" href="#FinancialCredit" class="nav-link text-underline-none">Credit</a>

</li>

</ul>

<app-financial-key-stats [CompanyID]="CompanyID" [hidden]="financialkeystats.haveData" #financialkeystats ></app-financial-key-stats>

</div>

<app-financial [CompanyID]="CompanyID" [hidden]="financial.haveData" #financial></app-financial>

</div>

<app-financial-ratio [CompanyID]="CompanyID" [hidden]="financialratio.haveData" #financialratio></app-financial-ratio>

</div>

<app-financial-segmentation [CompanyID]="CompanyID" [hidden]="financialsegmentation.haveData" #financialsegmentation></app-financial-segmentation>

</div>

<app-financial-scores [CompanyID]="CompanyID" [hidden]="financialScores.haveData" #financialScores></app-financial-scores>

</div>

<app-financial-credit [CompanyID]="CompanyID" [hidden]="financialcredit.haveData" #financialcredit></app-financial-credit>

</div>

Thang Le Duc

unread,

Nov 19, 2019, 11:58:03 AM11/19/19

to ang...@googlegroups.com

main-financial.ts:

isLoading = true;

ngOnInit() {

...

this.companyNameService.GetCompanyName(this.CompanyID).subscribe((data: []) => {

isLoading = false;

...

});

...

}

main-financial.html :

// code loading here...

</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+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/a56bdea4-8c5b-4e4f-96ef-4e97efdcfadc%40googlegroups.com.

--

Thanks and Best Regards

Thang Le Duc

Rikkeisoft Co., Ltd.

Mobile: 0935334983

Skype: ducthang237

Email: thangld@rikkeisoft.com

--------------------------------------------

Head Office:. 3rd Floor, HH3 Bldg., Me Tri St., Nam Tu Liem Dist., Hanoi

. 11th Floor, VietNam News Agency Build., 81 Quang Trung St., Hai Chau Dist., Da Nang City

. 3rd Floor, Ishige Bldg., 4-9-3 Shiba., Minato-ku., Tokyo., Japan

Tel: (+84) 236 3962 685

Page: https://www.facebook.com/rikkeisoft?fref=ts

Website: http://rikkeisoft.com/

Thang Le Duc

unread,

Nov 19, 2019, 11:58:03 AM11/19/19

to Angular and AngularJS discussion

main-financial.ts:

isLoading = true;
ngOnInit() {
    ...
      this.companyNameService.GetCompanyName(this.CompanyID).subscribe((data: []) => {
        isLoading = false;
       ...
      });
   ...
  }

main-financial.html :

<div *ngIf="isLoading">
   // code loading here...
</div>

ahmed elbarbary

unread,

Nov 19, 2019, 6:16:39 PM11/19/19

to Angular and AngularJS discussion

thank you for reply

can you please tell me what is meaning of code load here

I have

loader component must work before data

after data display hide loader and display data

i use loader as

but i cannot control to show it or hidden so that can you please help me

ahmed elbarbary

unread,

Nov 20, 2019, 2:06:31 AM11/20/19

to Angular and AngularJS discussion

what i need actually on view

ng if to loader true or false

ng if to data what status true or false

Reply all

Reply to author

Forward