Angular 2 – Add Row Code Sample

0
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 to mention 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 key points to be noted in relation with 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 <add-rows>loading…</add-rows>
  • 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 = "";

  addRow() {
    this.rows.push({name: this.name});
    this.name = '';
  }
}
bootstrap(AddRowComponent);

 

Ajitesh Kumar

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc.Recently, he has been digging deep into the field of data science and machine learning.

Follow him on Twitter and Google+.
Ajitesh Kumar

Leave A Reply