CODEWITHSUNDEEP
htmlangulartablerow
Genger
Genger

Reputation: 95

How To Display Selected HTML Table Row Values Into Input Text?

I have a table called Equipment and i want to display the rows into input text in another component any idea plz or exemple. this is my table Model 

export class store{
    id: number;
    park_id:string;
    BonMvt:Array<string>;
    SN: string;
    reference:string;
    ModelType: string;
    State: string;
    isActived: string;
}

Upvotes: 0

Views: 729

Answers (2)

BELLIL
BELLIL

Reputation: 765

TableWithInputComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-with-input',
  templateUrl: './table-with-input.component.html',
  styleUrls: ['./table-with-input.component.css']
})

export class TableWithInputComponent implements OnInit {

  stores : store [] = [];
  constructor() { }

  ngOnInit() {
for (let i=0; i<10; i++) {
  this.stores.push(new store(i));
}
  }
  submit() {
    console.log(this.stores)
  }
}

export class store{
  id: number;
  park_id:string;
  SN: string;
  reference:string;
  ModelType: string;
  State: string;
  isActived: string;
  constructor(i: any) {
    this.id = i;
    this.park_id = 'park_id'+i;
    this.SN = 'SN'+i;
    this.reference = 'reference'+i;
    this.ModelType = 'ModelType'+i;
    this.State = 'State'+i;
    this.isActived = 'isActived'+i;
  }
}

table-with-input.component.html

<table >
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let st of stores">
      <td><input  [(ngModel)]="st.id"/></td>
      <td><input  [(ngModel)]="st.park_id"/></td>
      <td><input  [(ngModel)]="st.SN"/></td>
      <td><input  [(ngModel)]="st.reference"/></td>
      <td><input  [(ngModel)]="st.ModelType"/></td>
      <td><input  [(ngModel)]="st.State"/></td>
      <td><input  [(ngModel)]="st.isActived"/></td>
    </tr>
  </tbody>
</table>

<button (click)="submit()"> submit </button>

Upvotes: 1

abbas-ak
abbas-ak

Reputation: 642

Refer the following highlevel implementation

StackBlitz URL: https://stackblitz.com/edit/angular-ylp9z4

Upvotes: 1

Related Questions