Angular 2: Setting a button with conditional content with material-icons

Question

Well, I'm learning angular 2, and im starting by developing a log in form, and I'm having trouble making a button with conditional content.

This complement template's code would go like:

<button class="login-button" (click)="checkData()"> 
{{isLoading ? "loading...":"Log In" }} 
</button>

It checks the isLoading bool, and sets a inner html in condition to this bool value. Right?

Yes, this renders well, a button with a conditional content of "loading..." if isLoading is true, and "Log In" if its false.

But if want to add some google material icons inside the button it stops working:

<button class="login-button" (click)="checkData()"> 
{{isLoading ? "<i class='material-icons'>spinner</i>":"Log In <i class='material-icons'>arrow_forward</i>" }} 
</button>

It just doesn't work. It render a button with a content of "{{isLoading ? "spinner":"Log In arrow_forward" }}";

How can I add the html of the icons to my posible outcomes?

Answer 1

Try this -

<button class="login-button" [disabled]="isLoading" (click)="checkData()"> 
   <i [hidden]="!isLoading" class='material-icons'>spinner</i>
   <span [hidden]="isLoading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>