Angular 2 – Add Row Code Sample


This article represents concepts and code sample around how to add a row in a tabular dataset in Angular 2 apps. Please feel free to comment/suggest if I missed mentioning one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • Add Row – Concepts
  • Add Row – Code Sample

Add Row – Concepts

Following are some of the key points to be noted in relation to adding a row in an Angular 2 app.

  • Define a component, AddRowComponent, and bootstrap this component. Take a look at the code below on how to bootstrap the component.
  • Define a selector add-rows with AddRowComponent and access the AddRowComponent using the selector loading…
  • Define an array of objects in which the names will be added as an object such as {name: ‘Some Name’}.
  • Access the name one by one using *ngFor=”#row of rows” code. Note that *ngFor is used to represent structural directive.
  • Use (click) event binding to invoke addRow method for adding the object to the existing array.

Add Row – Code Sample

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

  selector: 'add-rows'
  template: `

<h1>Angular 2 - Add Row Example</h1>


<form class="form-group">

<div class="row">

<div class="col-md-4">
          <input type="text" [(ngModel)]="name" class="form-control"/></div>


<div class="col-md-2">
          <input type="button" (click)="addRow()" value="Submit" class="btn btn-primary"></div>





<li *ngFor="#row of rows">{{}}</li>


export class AddRowComponent {
  rows = [{name: 'Chris Daly'}];
  name = "";
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
  addRow() {
    this.rows.push({name:}); = '';

Ajitesh Kumar
Follow me

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.