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';

@Component({
  selector: 'add-rows'
})
@View({
  template: `
    

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


    <hr/>
    

<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>


      </div>


    </form>


    

<ul>
        

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


    </ul>


  `
})
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: this.name});
    this.name = '';
  }
}
bootstrap(AddRowComponent);