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

• Add Row – Code Sample

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 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({
})
@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>


})
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>
this.rows.push({name: this.name});
this.name = '';
}
}