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 Tue, Nov 19, 2019 at 5:52 AM ahmed elbarbary <ahmedsa.aziz...@gmail.com>
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/a56bdea4-8c5b-4e4f-96ef-4e97efdcfadc%40googlegroups.com
> <https://groups.google.com/d/msgid/angular/a56bdea4-8c5b-4e4f-96ef-4e97efdcfadc%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
--
Thanks and Best Regards
Thang Le Duc
Rikkeisoft Co., Ltd.
Mobile: 0935334983
Skype: ducthang237
Email: than...@rikkeisoft.com <h...@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/
<http://rikkeisoft.com/>
--
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/CA%2BATmqUAdumrmgtpeDKRr8CmN-UqROOJZ%2BjydAeZN4T-91KXhQ%40mail.gmail.com.
