CODEWITHSUNDEEP
angular
Trimidas
Trimidas

Reputation: 97

Angular2 click and ngIF

I want to use (click) function only when ngIF have value True.

<tbody class="table-hover domains">
    <tr *ngFor="let domain of domains" (click)="gotoDetail(domain.id)">
        <td class="col-md-3">{{ domain.name }}</td>
        <td>{{ domain.validated }}</td>
    </tr>
</tbody>

So I need to add ngIF in <tr> tag as if {{ domain.validated }} value is True, then (click) function works, else it don't work or show message that variable have value False. How to do that?

Upvotes: 6

Views: 19892

Answers (4)

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Try this:

<tbody class="table-hover domains">
  <template ngFor let-domain [ngForOf]="domains ">
  <tr *ngIf="domain.validated" (click)="gotoDetail(domain.id)">
    <td class="col-md-3">{{ domain.name }}</td>
    <td>{{ domain.validated }}</td>
  </tr>
  </template>
</tbody>

You can use ng-template also.

Upvotes: 0

Paresh Nagore
Paresh Nagore

Reputation: 486

You can define your function like this:

gotoDetail(id: number){
    if (this.domain.validated)
    // Your normal code
    else 
    // Display error message, Do nothing
}

Upvotes: 0

Viplock
Viplock

Reputation: 3319

Try using this: 

<tbody class="table-hover domains">
  <tr *ngFor="let domain of domains" (click)="!domain.validated || gotoDetail(domain.id)">
  <td class="col-md-3">{{ domain.name }}</td>
  <td>{{ domain.validated }}</td>
  </tr>
</tbody>

Hope it will work for you .

The function will only be called if first part(!domain.validated) will return false.

Upvotes: 16

Ploppy
Ploppy

Reputation: 15363

You can give a second parameter, Boolean, to the the goToDetail function and redirect the user only if it's true.

Upvotes: 2

Related Questions