fix(primeng/p-button): not working loadingIcon property, update loa…

…dingdoc example Fixes primefaces#13098.
volvachev · Jun 16, 2023 · 0c8cdd6 · 0c8cdd6
1 parent 4f69e5a
commit 0c8cdd6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -244,7 +244,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="'p-button-loading-icon' + icon" [ngClass]="iconClass()"></span>
+                    <span *ngIf="loadingIcon" [class]="'p-button-loading-icon ' + loadingIcon" [ngClass]="iconClass()"></span>
                     <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="iconClass() + ' p-button-loading-icon'" [spin]="true" />
                 </ng-container>
                 <span *ngIf="loadingIconTemplate" class="p-button-loading-icon">

diff --git a/src/app/showcase/doc/button/loadingdoc.ts b/src/app/showcase/doc/button/loadingdoc.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
@@ -9,6 +9,8 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
+
+            <p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (click)="load()"></p-button>
         </div>
         <app-code [code]="code" selector="button-loading-demo"></app-code>
     </section>`
@@ -20,21 +22,26 @@ export class LoadingDoc {
 
     loading: boolean = false;
 
+    constructor(private readonly cdr: ChangeDetectorRef) {}
+
     load() {
         this.loading = true;
 
         setTimeout(() => {
             this.loading = false;
+            this.cdr.markForCheck();
         }, 2000);
     }
 
     code: Code = {
         basic: `
-<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>`,
+<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
+<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (click)="load()"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
     <p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
+    <p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (click)="load()"></p-button>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.ts
@@ -110,7 +110,7 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
             label && label.parentElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
         }
     }
-    
+
     isActiveChildId(isFirst: boolean, activeId: string, childId: string, parentId: string): boolean {
         if (isFirst) {
             return this.getActiveChildId(activeId, parentId);