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 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 = "";

  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, C/C++, mobile programming languages etc, and, computing fundamentals related with cloud-native technologies, application security, cloud computing platforms, mobile apps, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.