Spread sheet design in Angular 5

app.component.html

<div class="main">
  <div class="parent-container">
    <div class="row" *ngFor="let number of numberArray;let rowIndex = index;">
      <div [ngClass]="{'header' : rowIndex == 0 , 'input-field' : rowIndex > 0, 'first-col' : colIndex == 0 , 'highlight' : rowIndex == selectedRowIndex || colIndex == selectedColumnIndex}"
        *ngFor="let char of charArray;let colIndex = index;">
        <input *ngIf="rowIndex > 0 && colIndex > 0;else headertemplate" type="text" (focus)="onInputFocus(rowIndex, colIndex)">
        <ng-template #headertemplate>
          {{rowIndex == 0 ? char : number}}
        </ng-template>
      </div>
    </div>
  </div>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  charArray: Array<string>;
  numberArray: Array<string>;
  selectedColumnIndex: number;
  selectedRowIndex: number;
  totalNumberOfRows: number = 50;

  ngOnInit() {
    let chars: string = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    this.charArray = chars.split('');
    this.charArray.unshift(''); // push '' on first index because we need first column as blank

    this.numberArray = (<any>Array(this.totalNumberOfRows)).fill().map((x, i) => i + 1);
    this.numberArray.unshift(''); // push '' on first index because we need first column as blank

  }

  /**
   * 
   * @param rowIndex - it is row Index where I have focused on Input Field
   * @param colIndex  - it is column Index where I have focused on Input Field
   */
  onInputFocus(rowIndex: number, colIndex: number): void {
    this.selectedColumnIndex = colIndex;
    this.selectedRowIndex = rowIndex;
  }

}

style.scss

body {
  margin: 0;
}

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

.parent-container {
  display: flex;
  width: 100%;

  border-top: solid 1px #dedede;
  border-left: solid 1px #dedede;
  overflow-x: visible;
  flex-wrap: wrap;

  .row {
    display: flex;

    margin: 0;
    height: 1.5rem;

    .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: #F3F3F3;

      &.highlight {
        background-color: #dad5d5;
      }
    }

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

      input {
        width: 100%;
        padding: 0;
        border: none;
        min-width: 7rem;
      }
    }

    .first-col {
      min-width: 3rem;
      background-color: #F3F3F3;
      justify-content: center;
      align-items: center;
      position: -webkit-sticky;
      position: sticky;
      left: 0;

      &.highlight {
        background-color: #dad5d5;
      }

    }
  }
}