Angular 2 – Add Row Code Sample

March 11, 2016 by Ajitesh Kumar · Leave a comment

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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);



Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in AngularJS, Javascript, Web. Tagged with , .