Как скопировать данные из электронной таблицы, например, Excel, в таблицу html и отобразить ее, используя angular 7

Question

Привет всем. Я новичок в javascript / typcript / angular. Мне нужно скопировать данные из Excel, вставить в текстовое поле, а затем, нажав кнопку ввода, скопированные данные должны быть заполнены в таблице. После копирования данных в текстовое поле и нажатия кнопки ввода я получаю не таблицу, а заполненные данные. Я не могу выяснить, где я мог ошибиться, и подход, которому я должен следовать, чтобы решить эту проблему.

emp.component.ts

Component({
  selector: 'app-emp-content',
  templateUrl: './emp-content.component.html',
  styleUrls: ['./emp-content.component.css'],
})
export class EmpContentComponent implements OnInit {

  @Input() regForm: FormGroup;
  @Input() relName = "";
  parentForm: any;
  public empContentForm: FormGroup;
  excel: FormControl = new FormControl(undefined);
  empList = [];
  list = [];

buildForm(): void {
    this.empForm.addControl('empContent', this.empContentForm = this.formBuilder.group({

      excel: this.excel
    }));
    if (!this.empAccessRight.empContent.edit) {
      this.empForm.disable();
    }
  }

createTable() {

   let excelData = document.getElementById('excel')["value"];
    console.log("exceldata",excelData);

    //split into rows
   let excelRow = excelData.split(String.fromCharCode(10));
   console.log("excelrow", excelRow);

   //split rows into columns
   for (let i = 0; i < excelRow.length; i++) {
     excelRow[i] = excelRow[i].split(String.fromCharCode(9));
     console.log("col",excelRow[i]);
     }
  for (let i = 0; i < excelRow.length - 1; i++) {
  for (let j = 0; j < excelRow[i].length; j++) {
       if (excelRow[i][j].length != 0) {
        this.list = excelRow[i][j];


        console.log("val",this.list);
        }


       }

     }

   }

emp.component. html

<textarea name="excel"  id="excel" rows="10" class="form-control"  [formControl]="excel" > </textarea>

        <button class="button accent small" (click)="createTable()" id="excel" >Enter</button>
      <table class="unstriped" cellpadding="0" cellspacing="0">


        <tr>
          <td>{{list}}</td>
          </tr>




      </table>