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?

Rehban Khatri · Accepted Answer · 2018-03-14T11:48:59.407

2

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>

edited Mar 14 '18 at 11:48

answered Mar 25 '17 at 05:31

Rehban Khatri

924
1
7
19

It works, the same with *ngIf. But I was wondering if there was some way to have only one button. Thanks by the way, I didn't know about the hidden functionallity. – Joaquin Hernandez Zubiri Mar 25 '17 at 05:43
What do you mean by 1 button? Please explain a little bit – Rehban Khatri Mar 25 '17 at 05:45
With this method you would be creating two buttons and showing one if the boolean is false and the other one if the boolean is true. I was wondering if it could be made with only one. – Joaquin Hernandez Zubiri Mar 25 '17 at 05:48
Let me update the answer. There is a more cleaner way than ngSwitch – Rehban Khatri Mar 25 '17 at 05:52
Sure, ngSwitch works just fine anyways, but if you say theres some way cleaner. I'm eagger to know. – Joaquin Hernandez Zubiri Mar 25 '17 at 06:00
The point is - in case of boolean conditions, there is no need to use switch case. If else is much faster. – Rehban Khatri Mar 25 '17 at 06:03
There you go. Perfect. Thanks. – Joaquin Hernandez Zubiri Mar 25 '17 at 06:05
Could you pls improve this rightly accepted answer with the [disabled] directive on the button while the XHR is in progress... This way, the button not only shows the spinner but it is also disabled at the moment preventing another XHR to take off. – Average Joe Mar 14 '18 at 11:01

score 2 · Answer 2 · answered Mar 25 '17 at 05:41

You can use ngSwitch

<button class="login-button" (click)="checkData()" [ngSwitch]="isLoading"> 
  <i class='material-icons' *ngSwitchCase="true">spinner</i>
  <span *ngSwitchCase="false">
    Log In <i class='material-icons'>arrow_forward</i>
  </span>
</button>

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

2 Answers2