HTML in string interpolation with string

Question

How to write HTML with string in string interpolation ,

I want on load it should show Processing .... "loader"

<button type="button" class="btn btn-success" [disabled]="onAjaxCall" (click)="onSave()">
  {{ onAjaxCall ? 'Processing ...'+
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> : 'Save' }}
</button>

It doesn't work correctly , the I tag show always

Answer 1

Try this

<button type="button" class="btn btn-success" [disabled]="onAjaxCall" (click)="onSave()">
       <span *ngIf="onAjaxCall">Processing...<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
       <span *ngIf="!onAjaxCall">Save:</span>
</button>

Answer 2

just for the information form angular.io website (Read here : https://angular.io/guide/template-syntax )

JavaScript expressions that have or promote side effects are prohibited, including:

- assignments (=, +=, -=, ...)
- new
- chaining expressions with ; or ,
- increment and decrement operators (++ and --)

So for your case i do suggest make use of method and call it form you template syntax.

<button type="button" class="btn btn-success" [disabled]="onAjaxCall" (click)="onSave()">
  {{ methodcall() }}
</button>

in compoent write method this will return output of

method():string
{
  return 
 this.onAjaxCall ? 'Processing ...'+<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> : 'Save';
}