CODEWITHSUNDEEP
angular
Beginner
Beginner

Reputation: 1

Can you help me to add button in the table cell on click of a button

I want to add a button in the table cell when i click a button to add a new row in the table in angular. I am able to add a new row but not able to get a button in the cell with the row creation.

Upvotes: 0

Views: 137

Answers (2)

Armin
Armin

Reputation: 149

Import { ChangeDetectorRef } from '@angular/core';

constructor (private cdref: ChangeDetectorRef) {
}

In addRow function, Please add following code

 this.cdref.detectChanges();

Upvotes: 0

F.Strathaus
F.Strathaus

Reputation: 39

I created a minimum Stackblitz example for you to look at: https://stackblitz.com/edit/angular-kpjesj

Here is my app.ts file:

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  tablerows = [{
    name: "rowobject"
  }, {
    name: "rowobject"
  }];

  addRow() {
    this.tablerows.push({name: "rowobject"});
  }
}

and here is my app.html file

<table>
  <tr *ngFor="let row of tablerows">
    <td>{{row.name}}</td>
  </tr>
  <tr>
    <button (click)="addRow()">add</button>
  </tr>

</table>

Upvotes: 1

Related Questions