Change icon to spinner while action is running

[Paul Kocher]

Hi!

In my regular Bootstrap buttons I add/change an existing icon to a spinner while some action is running.

Looks like this on the regular buttons:

<button type='button' class='btn btn-primary' [disabled]='loggingIn' type="submit">

<div *ngIf='!loggingIn'>

Login

</div>

<div *ngIf='loggingIn'>

Login&nbsp;<fa-icon [icon]="['far', 'spinner']" [spin]='true' [fixedWidth]='true'></fa-icon>

</div>

</button>

Using the DropDownButton the code is like this:

<button #dropdownbutton ejs-dropdownbutton class='ddbtn e-primary' target='#target' content='PDF' iconCss='mc-file-pdf' (open)='onOpen($event)'>

</button>

<div *ngIf='abrechnungMode == "Erstellen"' id="target">

<div class="list-group">

<button type="button" class="link list-group-item list-group-item-action" (click)='keineUeberstunden(); dropdownbutton.toggle();'>

<fa-icon [icon]="['far', 'file-pdf']" [fixedWidth]='true'></fa-icon>&nbsp;Ohne Überstunden

</button>

<button type="button" class="link list-group-item list-group-item-action" (click)='onOpenDialog.emit(dateForAbrechnung); dropdownbutton.toggle();'>

<fa-icon [icon]="['far', 'file-pdf']" [fixedWidth]='true'></fa-icon>&nbsp;Mit Überstunden</button>

</div>

</div>

The problem is that I haven't found anything about using ng-template on the button with the dropdownbutton directive - The only way to add an icon

to the button is to use iconCss. I would imagine using a ternary operator on the iconCss might work but using ng-template would be preffered because -

as you can see - I'm using the Angular implementation of FontAwesome.

Am I missing something here?

[Shanmugaraja K]

Hi Paul,  

 

Thank you for contacting Syncfusion support.  

 

We have checked your requirement “Using ng-template to load icon to the DropDownButton” and it can be achieved by using “open” and “close” event in DropDownButton. Please refer the below code example to achieve your requirement.  

 

app.component.html 

 

<button ejs-dropdownbutton [items]='items' (open)="open($event)" (close)="close($event)">  

    <span *ngIf="loggingIn else logout">Login</span>  

    <ng-template #logout>  

      <span class="e-btn-icon e-icons e-icon-left">  

        <fa-icon [icon]="spinner"></fa-icon>  

      </span>  

      LogOut  

    </ng-template>  

</button>  

  

app.component.ts  

 

    export class AppComponent {  

        spinner = faSpinner;  

        loggingIn = true;  

  

        // Initialize action items.  

        public items: ItemModel[] = [  

         {  

             text: 'Edit'  

         },  

         {  

             text: 'Delete'  

         },  

         {  

             text: 'Mark as Read'  

         },  

         {  

             text: 'Like Message'  

         }];  

    

        public open (args: OpenCloseMenuEventArgs) {  

            this.loggingIn = !this.loggingIn;  

        }  

  

        public close (args: OpenCloseMenuEventArgs){  

            this.loggingIn = !this.loggingIn;  

        }  

    } 

 

Sample Link: https://stackblitz.com/edit/angular-sifbup  

 

Could you please check the above sample and get back to us if we misunderstood your requirement or you need any further assistance on this.  

 

Regards, 

Shanmugaraja K