CODEWITHSUNDEEP
typescriptangular
Malik Kashmiri
Malik Kashmiri

Reputation: 5851

angular 2 client side condition

I am trying to call api on block/unblock Icon button to block and unblock user. Now I want to ask how could I change Icon Image if user active to show unlock image in front of active and vice versa.

Image

enter image description here

Html

<link href="../../font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>User View </h1>

<div class="row">
    <div class="panel panel-default">
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th class="text-center">First Name</th>
                        <th class="text-center">Last Name</th>
                        <th class="text-center">Email</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Block/Unblock</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let user of _data | paginate: { itemsPerPage: 10, currentPage: p }">
                        <th>{{user.FirstName}}</th>
                        <th>{{user.LastName}}</th>
                        <th>{{user.Email}}</th>
                        <th>{{ user.IsActive == true ? 'Active' : 'Block' }}</th>
                        <th>
                            <div class="text-center">
                                <button type="button" class="btn btn-xs " (click)="approvalPendingRequest(user.SubscriptionId)">
                                    <i class="fa fa-unlock" aria-hidden="true"></i>
                                </button>
                            </div>
                        </th>

                    </tr>
                </tbody>
            </table>
            <pagination-controls (pageChange)="p = $event" #api></pagination-controls>

        </div>
    </div>
</div>

Upvotes: 1

Views: 465

Answers (2)

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

You can use ngClass to accomplish that:

<button type="button" class="btn btn-xs " (click)="approvalPendingRequest(user.SubscriptionId)">
    <i [ngClass]="['fa', user.IsActive ? 'fa-lock' : 'fa-unlock']" aria-hidden="true"></i>
</button>

Upvotes: 1

basarat
basarat

Reputation: 275927

Quickfix

Change class="fa fa-unlock" to class="fa {{ user.IsActive == true ? 'fa-lock' : 'fa-unlock' }}"

Upvotes: 1

Related Questions