CODEWITHSUNDEEP
htmlangularvariablesgoogle-material-icons
Joaquin Hernandez Zubiri
Joaquin Hernandez Zubiri

Reputation: 29

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

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?

Upvotes: 1

Views: 6509

Answers (2)

Rehban Khatri
Rehban Khatri

Reputation: 954

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>

Upvotes: 2

Lon Yang
Lon Yang

Reputation: 696

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>

Upvotes: 2

Related Questions