How to show loader component when when form load before data

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
"loader" [scale]="1" [color]="color">
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
"z2-2cols-sub-2cols-left">
class="z2-boxstyle1 overflow-hidden">
class="z2-boxstyle1-header mb-1">
class="z2-boxstyle1-header-left">
class="z2iconfont icon-Financial-Data">

class="z2-boxstyle1-header-right">

class="partscore-contain">

"CompanyLogo!='' && CompanyLogo!=null &&CompanyLogo!=undefined" class="brand-logo height-50" src="https://cm.z2data.com/UploadedFiles/CompanyLogo/{{CompanyLogo}}" alt="avnet" title="avnet">

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Veerendra Annigere6y ago
3. isloading: Boolean = false;
6. this.isloading = true
7. this.companyNameService.GetCompanyName(this.CompanyID).subscribe((data: []) => {
8. if (data.toString() != '[]') {
9. this.CompanyName = JSON.parse(data.toString())[0].DisplayName;
10. this.CompanyLogo = JSON.parse(data.toString())[0].LogoSourceUrl;
11. }
12. },
13. (err)=>{},
14. ()=>{
15. this.isloading = false
16. }
17. );
You can set flag before calling api and reset in finally block like above.

Also you can write INTERCEPTORS. it will go through all the api request and response.
0