Spread sheet in Angular

app.component.html

<div class= "main"  #maindiv></div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('maindiv') maindiv;
  title = 'Welcome to demoone!';


  ngOnInit() {

    const div = document.createElement('div');
    div.className = 'parentcontainer';
    for (let i = 0; i < 50; i++) {
      const rowdiv = document.createElement('div');
      rowdiv.className = 'row';
      for (let j = 64; j < 91; j++) {
        const cdiv = document.createElement('div');
        if (i == 0) {
          cdiv.className = 'header';
          if (j == 64) {
            cdiv.className = 'header first-col';
            cdiv.innerHTML = '';
          } else {
            cdiv.innerHTML = String.fromCharCode(j);
          }
        } else {
          if (j == 64) {
            cdiv.className = 'input-field first-col';
            cdiv.innerHTML = i.toString();
          } else {
            const input = document.createElement('input');
            input.value = '';
            input.type = "text";
            cdiv.className = 'input-field';
            cdiv.appendChild(input);
          }

        }

        rowdiv.appendChild(cdiv);
      }

      div.appendChild(rowdiv);
    }

    this.maindiv.nativeElement.append(div)
  }
}

style.scss

/* You can add global styles to this file, and also import other style files */


.main {
  height: 100vh;
  width: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
}

.parentcontainer {
  display: flex;
  width: 100%;
  flex-direction: column;
  border-top: solid 1px #dedede;
  border-left: solid 1px #dedede;

  //overflow: auto;
  .row {
    display: flex; // border:solid 1px red;
    width: 100%;
    margin: 0rem;

    .header {
      width: 3.84%;
      display: inline-flex;
      justify-content: center;
      border-bottom: solid 1px #dedede;
      border-right: solid 1px #dedede;
      min-width: 7rem;
      background-color: lightgray;
    }

    .input-field {

      width: 3.84%;
      display: inline-flex;
      justify-content: flex-start;
      border-bottom: solid 1px #dedede;
      border-collapse: collapse;
      border-right: solid 1px #dedede;
      min-width: 7rem;
    }

    .first-col {
      min-width: 3rem;
      position: sticky;
      left: 0;
      background-color: lightgray;
    }
  }
}