Product version : 8.9 Product type : Angular Framework : .net core
I want to show spinner only on to the specific div which takes some time to load data in it. I have one simple div and I set [busyIf] directive to it. I get the spinner on my whole page which I don't want(spinner which we show using "this.spinnerService.show()"). Please help.
So I have below div on my html page
<div [busyIf]="loading">
<div class="row align-items-center" *ngIf="excelData">
<dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
[allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
(onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
(onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
[customizeColumns]="customizeColumns">
<dxo-sorting mode="none">
</dxo-sorting>
<dxi-column dataField="Name" caption="reportName" [width]="400">
</dxi-column>
<dxi-column dataField="GLCode" caption="GLCode">
</dxi-column>
</dx-tree-list>
</div>
</div>
and here is my code
loading: boolean = false;
ngOnInit(): void {
// this.spinnerService.show();
this.loading = true;
this.service.GetFinancialsIncomeStatementData(this.timePeriod).subscribe((data) => {
this.apiResult = data;
this.excelData = JSON.parse(this.apiResult.result);
this.reportName = this.excelData.Name;
this.loading = false;
// this.spinnerService.hide();
});
this.customizeColumns = this.customizeColumns.bind(this);
}
this will show spinner on my entire page, I want to show spinner only on the above div
I tried by doing reverse order as you said above but didn't work. Can you please check at your end and send me sample code. Because in my application there is lot of primeng-table where they used this [busyIf] but there also the spinner is showing on whole screen.
Below is my whole HTML page :
<div [@routerTransition]>
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
<div class="kt-subheader kt-grid__item">
<div [class]="containerClass">
<div class="kt-subheader__main">
<h3 class="kt-subheader__title">
<span>{{"FinancialStatements" | localize}}</span>
</h3>
<span class="kt-subheader__separator kt-subheader__separator--v"></span>
<span class="kt-subheader__desc">
{{"FinancialStatementsHeaderInfo" | localize}}
</span>
</div>
</div>
</div>
<div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
<div class="kt-portlet">
<div class="kt-portlet__body" [busyIf]="loading">
<div class="kt-form">
<form>
<div class="form-body">
<div class="row mb-4">
<div class="col-xl-4" style="display: flex;align-self: center;">
<label for="StatementTypeDropdown"
style="align-self: center;font-weight: 600;">{{'FinancialStatements' | localize}}</label>
<select id="StatementType" name="StatementType"
style="display: flex;width: inherit;margin-left: 9.25px;width: 200px;"
class="form-control">
<option value="">{{"IncomeStatement" | localize}}</option>
<option value="false">{{"P&LStatement" | localize}}</option>
<option value="true">{{"BudgetStatement" | localize}}</option>
</select>
</div>
<!-- <div class="col-xl-2" style="align-self: center;">
<label class="kt-checkbox">
<input class="form-control" type="checkbox" name="showStatistics"
value="true" />{{"ShowStatistics" | localize}}
<span></span>
</label>
</div> -->
<div class="col-xl-4" style="display: flex;align-self: center;">
<label for="TimePeriodDropdown"
style="align-self: center;">{{'TimePeriod' | localize}}</label>
<select id="TimePeriod" name="TimePeriod" (change)='onTimePeriodChange($event)'
style="display: flex;width: inherit;margin-left: 9.25px;width: 150px;"
class="form-control">
<option value="Yearly">{{"Annual" | localize}}</option>
<option value="Quarterly">{{"Quarterly" | localize}}</option>
<option value="Monthly">{{"Monthly" | localize}}</option>
</select>
<button type="button" class="btn btn-brand1 btn-icon btn-filter"
(click)="openChangeSettingsModal()" style="margin-left: 30px;"><i
class="fa fa-cog" style="color: black;width: 3rem"></i></button>
</div>
<div class="col-xl-4" style="text-align: right;">
<button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
class="flaticon-refresh" (click)="refresh()"
style="color: black;"></i></button>
<button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
class="fa fa-print" style="color: black;"></i></button>
<!-- <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
class="fa fa-cog" style="color: black;"></i></button> -->
<button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
class="flaticon-download" style="color: black;"></i></button>
</div>
</div>
</div>
</form>
</div>
<!-- <div class="row align-items-center">
<dx-tree-list id="testDatas" [dataSource]="testDatas" itemsExpr="items" dataStructure="tree"
[showRowLines]="true" [showBorders]="true" [columnAutoWidth]="true"
(onRowPrepared)="onRowUpdated($event)" (onRowExpanding)="onRowExpanding1($event)"
(onRowCollapsing)="onRowCollapsing1($event)">
<dxi-column dataField="Full_Name" caption="Category" cellTemplate="testTemplate">
</dxi-column>
<dxi-column dataField="Amount" caption="Jan 2020"></dxi-column>
<div *dxTemplate="let options of 'testTemplate'">
<span *ngIf="options.data.visible"
style="color: blue;">{{options.data.Full_Name}}</span>
<span *ngIf="!options.data.visible">{{options.data.Full_Name}}</span>
</div>
</dx-tree-list>
</div> -->
<div class="row align-items-center" *ngIf="excelData">
<dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
[allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
(onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
(onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
[customizeColumns]="customizeColumns">
<dxo-sorting mode="none">
</dxo-sorting>
<dxi-column dataField="Name" caption="reportName" [width]="400">
</dxi-column>
<dxi-column dataField="GLCode" caption="GLCode">
</dxi-column>
</dx-tree-list>
</div>
</div>
</div>
</div>
</div>
</div>
<reportSettingsModal #reportSettingsModal></reportSettingsModal>
help me now to show the spinner on this Div which has class=kt-portlet__body, above code shows spinner but it covers the whole page like sidemenu bar,header etc
I am using checkbox using kt-checkbox class , but not able to set "indeterminate" state for the checkbox.
<label for="pOverpGrowth" class="kt-checkbox" style="display: block;">
<input id="pOverpGrowth" type="checkbox" [indeterminate]="myList">
{{'PeriodOverPeriodGrowth' | localize}}
<span></span>
</label>
in above code myList variable value is set to true, If I not set class="kt-checkbox" to the label then the "indeterminate" state is working but I want indeterminate state working with the same above code.
Hi , I want to use angular material Datepicker in my asp.net zero application , I install material in my aaplication and put the code to use Material Datepicker, But then I got the below error.
"ERROR in getInternalNameOfClass() called on a non-ES5 class: expected MatCommonModule to have an inner class declaration"
Could you please help me with the steps to use angular material controls in my asp.net zero application.
I already tried this approach, but not worked. We can use angular material in AspNet Zero right? Can you suggest me any way to resolve this issue. Thanks in advance.
Hi, I want to use ngx-org-chart in my aspnet zero project.
I am refering this link for that. So I am not able to import the file they have given in the link. i.e @import '~ngx-org-chart/_theming.scss';
I tried by putting @import '~ngx-org-chart/_theming.scss'; into "styles.css" as well as "custom-theme.scss" file. but didn't worked that.
Can you please suggest where do I exactly put that import line in our aspnet zero project?
Hi @ismcagdas, I am getting the same issue on my machine , but not on my colleague machine for same project. My node and gulp versions are below,
F:\GrowthPlan\GrowthPlan_ANZ8.9\GrowthPlan_ANZ8.9\angular>node -v v14.15.4
F:\GrowthPlan\GrowthPlan_ANZ8.9\GrowthPlan_ANZ8.9\angular>gulp -v CLI version: 2.3.0 Local version: 4.0.2
and in my package.json : "@angular-devkit/build-angular": "^0.901.12"
could you please help me with proper steps, what should I need to do.
Hi, I want to use DHTMLX diagram library in my angular project, and they dont have any npm package for that. so we need to add their javascript & css files into our project. I add that files reference into index.html file as `
` but then I was not able to acces that library. Then I added that files reference into angular.json files after that I was able to access the library but for export feature I am getting the error below "failed to read the 'cssrules' property from 'cssstylesheet' cannot access rules". please suggest the proper way to add external javascript libraries into asp.net zero angular project. and details about the above error. Thanks