How to add a row in a table when clicking the add button using angular 7

Question

When I am clicking the add button, the row cannot be added. How can I add a row in a table?

My HTML file looks like:

<div>
<div>
<table class="table table-bordered table-striped mb-0 mt-3">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Required</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let field of fieldArray; let i = index">
      <td>
        <input type="text" [(ngModel)]="field.domainName"> 
</td>
      <td>
        <div class="optionDropdown" 
[(ngModel)]="field.domainSelect">
        <nb-select class="" placeholder="All" 
[(selected)]="selectedItem">
          <nb-option value="">Option empty</nb-option>
          <nb-option value="0">Integer</nb-option>
          <nb-option value="1">Float</nb-option>
          <nb-option value="2">String</nb-option>
          <nb-option value="3">Character</nb-option>
          <nb-option value="4">Boolean</nb-option>
        </nb-select>
      </div></td>
      <td>
        <div [(ngModel)]="field.domainRequired">
            <nb-checkbox (checkedChange)="toggle($event)"></nb- 
checkbox>
        </div>            
      </td>
      <td (click)="newRow()">
        <div [(ngModel)]="field.domainIcon">
            <i class="plusIcon nb-plus"></i>
        </div>            
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>

My ts file looks like:

export class DomainStructuredDataComponent implements OnInit {

  constructor() { }
  checked = false;
  domain: string;
  selectedItem: any;
  domainSelect: any;
  domainIcon: boolean;
  fieldArray: any = [];
  newAttribute: any = {};
  ngOnInit() {
  }
  toggle(checked: boolean) {
    this.checked = checked;
  }
  newRow() {
    this.fieldArray.push('');
  }
}

I mentioned my code above. Let me know, how to fix it.

jitender · Accepted Answer · 2019-08-14 07:48:58Z

1

Your need to push an object instead of string something like

newRow() {
    this.fieldArray.push({
       domainName:'',
       domainSelect:'',
       domainRequired:'',
       domainIcon:''
    });
}

Note:- you can use your default values instead of '' in above object

edited Aug 14, 2019 at 7:48

answered Aug 14, 2019 at 7:21

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SGalea Over a year ago

also set fieldArray: any = []; to public

Rahul Raveendran Over a year ago

According to his ngFor add "domainIcon" too

vishnupriya Over a year ago

Thanks for pointed out my mistakes. After changed the array push, the tbody not show.

jitender Over a year ago

@vishnupriya this is because you don't have any item in your array you can have add button outside of your row put it at some other place instead

Collectives™ on Stack Overflow

How to add a row in a table when clicking the add button using angular 7

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related