Insert data to table row using Angular

Question

I am new to angular, and currently working on my personal project. I have a question about how to insert new data to table row. Can anyone give me snippet/example how to do this?

Here is the form and the table headers:

<!--app.component.html-->

<!--show modal-->
<a href="#" (click)="smModal.show()" popover="Tambah Data Mhs" placement="bottom" triggers="mouseenter:mouseleave">ADD</a>

<!--Modal-->
<div class="container">
    <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title pull-left">Add</h4>
              <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <label>ID</label>
                <input type="text" class="form-control" placeholder="id">

                <label>name</label>
                <input type="text" class="form-control" placeholder="name">

                <label>year</label>
                <input type="text" class="form-control" placeholder="year">

                <label>major</label>
                <input type="text" class="form-control" placeholder="major">

                <label>address</label>
                <input type="text" class="form-control" placeholder="address">

                <label>Email</label>
                <input type="text" class="form-control" placeholder="email">

                <label>phone</label>
                <input type="text" class="form-control" placeholder="phone"><br>
                
                <button type="submit" class="btn btn-primary">Simpan</button>
                <button class="btn btn-danger">Batal</button>
              </form>
            </div>
          </div>
        </div>
      </div>
<!--enf of modal-->

<!--table-->
<div class="container">
  <table class="table table-responsive table-striped">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>year</th>
      <th>major</th>
      <th>address</th>
      <th>email</th>
      <th>phone</th>
    </tr>
  </table>
<div>
<!--end of table-->

Here is the typescript file:

//app.component.ts

import { Component } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
import { NgIf } from '@angular/common';

 @Component({
  selector: 'app-root',
  styleUrls:['app.component.css'],
  templateUrl:'app.component.html',
  //template:`<h1 align="center">template</h1>`
})

export class AppComponent 
{
  title = 'title';

}

What I need to do is simply insert the user input from that from into a table row. Please let me know if more snippets are needed.

Metehan Senol · Accepted Answer · 2017-10-25 11:04:23Z

3

You can declare custom object array in your app.component.ts file like this

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
  <div class="container">
  <table class="table table-responsive table-striped">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>year</th>
    </tr>
    <tr *ngFor="let row of rows">
      <td>{{row.id}}</td>
      <td>{{row.name}}</td>
      <td>{{row.year}}</td>
    </tr>
  </table>
  <div>

  <hr />
  <input type="text" [(ngModel)]="id" placeholder="id" />
  <input type="text" [(ngModel)]="name" placeholder="name" />
  <input type="text" [(ngModel)]="year" placeholder="year" />

  <button (click)="buttonClicked()">Click to Insert New Row</button>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';

  public id: number;
  public name: string;
  public year: number;
  public rows: Array<{id: number, name: string, year: number}> = [];

  buttonClicked() {
    this.rows.push( {id: this.id, name: this.name, year: this.year } );

    //if you want to clear input
    this.id = null;
    this.name = null;
    this.year = null;
  }
}

edited Oct 25, 2017 at 11:04

answered Oct 25, 2017 at 10:42

Metehan Senol

6696 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wira Xie Over a year ago

How to insert new row by user input from <input type="text" class="form-control" placeholder="id" id="id"> tag ? can you give an example please? Thank you

Wira Xie Over a year ago

Thank you very much Mr Metehan Senol

sukumar · Accepted Answer · 2018-06-01 04:52:24Z

// html data//   

 <table border="1">
   <thead>
      <tr>
        <th>Type</th>
        <th>Name</th>
        <th>Batters</th>
        <th>Toppings</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let data of Newjson;">
        <td >
          {{data.type}}  
        </td>
        <td>
              {{data.name}}  
          </td>
          <td>
               <ul *ngFor="let item of data.batters.batter;" [ngClass]="{'devils-find':item.type==='Devil\'s Food'}">
                 <li [ngClass]="item.type">
                    {{item.type}} 
                 </li>
               </ul>
            </td>
            <td>
                <ul *ngFor="let y of data.topping;">
                    <li>
                       {{y.type}} 
                    </li>
                  </ul>
              </td>

     </tr> 
    </tbody>
  </table>

//component.ts file//

export class AppComponent {
public newtext:any;
public rows:any=[];
public url:any=["../assets/images/image.jpeg","../assets/images/danger.jpeg","../assets/images/crab.jpeg",
"../assets/images/aws.png","../assets/images/error404.jpg","../assets/images/night.jpg"];
public displayimage:any=["../assets/images/image.jpeg"];
public setimage:boolean=true;
public i:any=1;


Newjson=[
    {
      "id": "0001",
      "type": "donut",
      "name": "Cake",
      "ppu": 0.55,
      "batters":
        {
          "batter":
            [
              { "id": "1001", "type": "Regular"},
              { "id": "1002", "type": "Chocolate"},
              { "id": "1003", "type": "Blueberry"},
              { "id": "1004", "type": "Devil's Food"}
            ]
        },
      "topping":
        [
          { "id": "5001", "type": "None" },
          { "id": "5002", "type": "Glazed" },
          { "id": "5005", "type": "Sugar" },
          { "id": "5007", "type": "Powdered Sugar" },
          { "id": "5006", "type": "Chocolate with Sprinkles" },
          { "id": "5003", "type": "Chocolate"},
          { "id": "5004", "type": "Maple" }
        ]
    },
    {
      "id": "0002",
      "type": "donut",
      "name": "Raised",
      "ppu": 0.55,
      "batters":
        {
          "batter":
            [
              { "id": "1001", "type": "Regular"}
            ]
        },
      "topping":
        [
          { "id": "5001", "type": "None" },
          { "id": "5002", "type": "Glazed" },
          { "id": "5005", "type": "Sugar" },
          { "id": "5003", "type": "Chocolate"},
          { "id": "5004", "type": "Maple" }
        ]
    },
    {
      "id": "0003",
      "type": "donut",
      "name": "Old Fashioned",
      "ppu": 0.55,
      "batters":
        {
          "batter":
            [
              { "id": "1001", "type": "Regular"},
              { "id": "1002", "type": "Chocolate"}
            ]
        },
      "topping":
        [
          { "id": "5001", "type": "None" },
          { "id": "5002", "type": "Glazed" },
          { "id": "5003", "type": "Chocolate"},
          { "id": "5004", "type": "Maple" }
        ]
    }
  ]
}

Collectives™ on Stack Overflow

Insert data to table row using Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related