In Angular / TypeScript can I toggle the Loading prop on a button

[fredmorinmibu]

I have this button

<sl-button type="success"
          (click)="clickOrderEverything($event)">
          Everything
</sl-button>

If I add loading

<sl-button type="success" loading
          (click)="clickOrderEverything($event)">
          Everything
</sl-button>

I get the busy spinner.

How can i see this prop dynamically, it's not a class prop, it's just a prop.

[fredmorinmibu]

I figured out a way, but i cant believe its the good way to do it.

I created a view child on the parent div of the sl-button
I access the div and do a innerHtml replace to add or remove the work loading.

[claviska]

I’m not sure of the Angular syntax, but binding a boolean to the loading property should do the trick.

[fredmorinmibu]

Thanks... you put me on the right path

 <sl-button type="primary" #btnSaveOrder loading="{{loading}}"
          (click)="clickSaveOrder($event)">
          Validate
  </sl-button>

and then in .ts

if (!this.loading)
   {
     this.loading = 'loading';
   }
   else
   {
     this.loading = '';
   }

no need to use viewChild and ugly InnerHtml hacks