CODEWITHSUNDEEP
angular
Stathis Ntonas
Stathis Ntonas

Reputation: 1262

Insert a table cell programmatically in Angular 2

I have this table in component html file:

<table class="table table-hover table-responsive table-condensed">
<thead>
<tr>
  <th>Image</th>
  <th>Form ID</th>
  <th>Text Input One</th>
  <th>Text Input Two</th>
  <th>Owner</th>
  <th>Date Submitted</th>
  <th>Date Edited</th>
  <th>Edit</th>
  <th>Delete</th>
</tr>
</thead>
<tbody *ngFor="let form of fetchedForms">
<tr>
  <td class="img-resized"><img class="img-thumbnail img-responsive" src="./uploadsFolder/{{form.owner}}/{{form.imagePath}}"></td>
  <td>{{form._id}}</td>
  <td>{{form.textInputOne}}</td>
  <td>{{form.textInputTwo}}</td>
  <td>{{form.owner}}</td>
  <td>{{form.dateSubmitted | date: 'medium'}}</td>
  <td>{{form.updatedAt | date: 'medium'}}</td>
  <td>
    <button class="btn-default" [routerLink]="['edit', form._id]"><i class="fa fa-pencil"></i></button>
  </td>
  <td>
    <button class="btn-danger" (click)="onDelete(form._id)"><i class="fa fa-trash"></i></button>
  </td>
</tr>
</tbody>

Right now, the cell

<td>{{form.updatedAt | date: 'medium'}}</td>

is always displayed and i want to hide/show it with certain criteria like:

*ngIf="form.dateSubmitted != form.updatedAt"

so the code i want to use is:

<td *ngIf="form.dateSubmitted != form.updatedAt">{{form.updatedAt | date: 'medium'}}</td>

but that's how it's rendered:

form

How i can add an empty cell in case the *ngIf returns true like in picture so the table can be aligned/shown correctly?

here's the repo with the files: https://github.com/predatorkill/ng2-forms-demo/tree/master/src/app/client/userForms/formsTable

Upvotes: 0

Views: 385

Answers (1)

Petr Adam
Petr Adam

Reputation: 1437

You need to hide the content of a cell, instead of hiding the whole cell. Use inner span for example:

<td>
    <span *ngIf="form.dateSubmitted != form.updatedAt">{{form.updatedAt | date: 'medium'}}</span>
</td>

With this approach, td is always visible (so you don't see broken table), but with empty content if needed.

..and please put the *ngFor cycle on the <tr> element, instead of <tbody>. Like: 

<tbody>
    <tr *ngFor="let form of fetchedForms">
...

(In Angular, the *ngFor iterates on assigned element, and you want just single tbody)

Upvotes: 2

Related Questions