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-14 11:48:59Z

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, 2018 at 11:48

answered Mar 25, 2017 at 5:31

Rehban Khatri

9741 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Joaquin Hernandez Zubiri Over a year ago

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.

Rehban Khatri Over a year ago

What do you mean by 1 button? Please explain a little bit

Joaquin Hernandez Zubiri Over a year ago

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.

Rehban Khatri Over a year ago

Let me update the answer. There is a more cleaner way than ngSwitch

Joaquin Hernandez Zubiri Over a year ago

Sure, ngSwitch works just fine anyways, but if you say theres some way cleaner. I'm eagger to know.

|

Lon Yang · Accepted Answer · 2017-03-25 05:41:35Z

2

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>

answered Mar 25, 2017 at 5:41

Lon Yang

6965 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related