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>
On Tuesday, November 19, 2019 at 5:51:30 AM UTC+9, ahmed elbarbary wrote:
>
> 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/2d5608fa-d143-46c1-b476-9beead336198%40googlegroups.com.
