Exploring the method of dynamically adding a row to a table on button click using Angular 2

Question

Exploring the method of dynamically adding a row to a table on button click using Angular 2

In the midst of my Angular2 project, I am exploring the possibility of dynamically adding rows to a table when a button is clicked. While I am aware that *ngFor can achieve this, I am curious if it can be implemented only upon the clicking of a button.

javascript angular typescript

Answer 1

Answer №1

Typically, the *ngFor directive is used to loop through an array, usually containing objects. If your array is named "data," you can implement it like this:

<table *ngIf="data.length">  <!--Only display if there is data-->
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr *ngFor="let item of data">
   <td>{{item.firstName}}</td>
   <td>{{item.lastName}}</td>
   <td>{{item.age}}</td>
</tr>
</table>

Make sure to define the data variable like this:

data:any[]=[] //don't forget to initialize it!

A button can trigger something like:

onClick()
{
   this.data.push({firstName:"First Name", lastName:"Last Name", age:18})
}

Answer 2

Typically, the *ngFor directive is used to loop through an array, usually containing objects. If your array is named "data," you can implement it like this:

<table *ngIf="data.length">  <!--Only display if there is data-->
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr *ngFor="let item of data">
   <td>{{item.firstName}}</td>
   <td>{{item.lastName}}</td>
   <td>{{item.age}}</td>
</tr>
</table>

Make sure to define the data variable like this:

data:any[]=[] //don't forget to initialize it!

A button can trigger something like:

onClick()
{
   this.data.push({firstName:"First Name", lastName:"Last Name", age:18})
}

Answer 3

Answer №2

Just a brief example:

  <button (onClick)="toggle=!toggle">click</button>
       <div *ngIf="toggle">
        <div *ngFor="...">
         ...
        </div>
       </div>

Answer 4

Just a brief example:

  <button (onClick)="toggle=!toggle">click</button>
       <div *ngIf="toggle">
        <div *ngFor="...">
         ...
        </div>
       </div>

Exploring the method of dynamically adding a row to a table on button click using Angular 2

Answer №1

Answer №2

Similar questions

Efficient methods to transfer values or arrays between components in Angular 8 without relying on local storage

The module named "mongoose" does not have any member called 'PaginateResult' exported

I discovered an issue in Handsontable while trying to copy and paste a numeric value in German format

Error message indicating the Ionic 5 Phonegap-NFC plugin is not installed, even though it has been successfully installed

Creating a fresh React component within a current project: What steps can I take to view it on the browser?

Using JavaScript and HTML to show the current month, date, and year on a webpage

There is no record of the property's history

Issue with Angular 5 Application - "Implementations cannot be declared in ambient contexts"

Is the Facebook AJAX Permissions Dialog displayed outside of a Pop-Up?

Sending properties to MUI Box component enhancer (Typescript)

Is it possible to further simplify this piece of JavaScript using jQuery?

Encountered an issue while saving a blob in NativeScript: "Unable to convert object to [B at index

Identifying the specific filter used in Vue-tables-2

Having trouble dynamically adding HTML elements in JQuery

Improving conditional rendering in Mui <Cards> component by fixing state behavior

What is the best way to send two Array objects through http requests in AngularJS?

Using jQuery to detect changes in the value of form fields, excluding any changes related to display toggles

Increase the gap between the legend and the chart when utilizing charts.js

Convert all page links to post requests instead

Adding associated documents into MongoDB from an Express application