CODEWITHSUNDEEP
javascripthtmlangularangular6ngfor
ashwin karki
ashwin karki

Reputation: 673

How to use *ngIf condition inside the <td> field of table using angular where *ngFor is looping?

Actually in my component.ts file i have used the api to call the method and it is returning me array of objects.

enter image description here And my problems began as I m trying to use ngIf in tag to hide/show column according to the client.auditorGroup as it is either true or false(it is of type boolean) but it is not giving me access:

enter image description here

enter image description here

1st code:

ngOnInit() {

   this.http.get('http://localhost:8080/api/selections')
      .subscribe((data: any[]) => {
        this.clients = data;
        console.log(this.clients);


        this.chRef.detectChanges();

        const table: any = $('table');
        this.dataTable = table.DataTable();
      });

  }

And in my html code I have used this Edit Delete and it is h

<table class="table table-bodered">

          <thead>
            <tr>
              <th>Mag No</th>
              <th>SelectionDate</th>
              <th> SelectedBy</th>
              <th>PanEximNumber</th>
              <th>Name</th>
              <th>Address</th>
              <th>PhoneNumber</th>
              <th>SelectionType</th>
              <th>Action</th>

            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let client of clients">
              <td>{{client.selectionId}}</td>
              <td>{{client.selectionDate}}</td>
              <td>{{client.selectedBy}}</td>
              <td>{{client.panEximNumber}}</td>
              <td>{{client.name}}</td>
              <td>{{client.address}}</td>
              <td>{{client.phoneNumber}}</td>
              <td>{{client.selectionType}}</td>
              <td *ngIf="{{client.auditorGroup}}==false">Edit Delete</td>

            </tr>


          </tbody>

        </table>

Upvotes: 0

Views: 1362

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222720

Remove the interpolation {{}} when using *ngIf

 <td *ngIf="!client.auditorGroup">Edit Delete</td>

Upvotes: 2

Related Questions