math-keyboard.component.html

<ng-container *ngTemplateOutlet="preset === 'comparisonOperators' ?
  comparisonOperatorsTemplate :
  numbersTemplate">
</ng-container>

<ng-template #comparisonOperatorsTemplate>
  <div *ngFor="let row of comparisonOperators">
    <ng-container *ngFor="let key of row">
      <app-key [key]="key"></app-key>
    </ng-container>
  </div>
  <div class="clear-button-container">
    <button type="button"
            mat-mini-fab
            class="delete-characters"
            (click)="keyboardService.deleterCharacters()">
      <mat-icon>keyboard_backspace</mat-icon>
    </button>
  </div>
</ng-template>

<ng-template #numbersTemplate>
  <div *ngFor="let row of numbers; let last = last">
    <ng-container *ngFor="let key of row">
      <app-key [key]="key"></app-key>
      <button *ngIf="last"
              type="button"
              mat-mini-fab
              class="delete-characters"
              (click)="keyboardService.deleterCharacters()">
        <mat-icon>keyboard_backspace</mat-icon>
      </button>
    </ng-container>
  </div>
</ng-template>

<div *ngIf="preset === 'numbersAndOperators'" class="grid-layout">
  <ng-container *ngFor="let row of operators; let rowIndex = index ">
    <ng-container *ngFor="let key of row; let columnIndex = index">
      <app-key *ngIf="key !== '='"
               [key]="key"
               [style.grid-column-start]="columnIndex+1"
               [style.grid-column-end]="columnIndex+2"
               [style.grid-row-start]="rowIndex + 1"
               [style.grid-row-end]="rowIndex + 2">
      </app-key>
      <app-key *ngIf="key === '='"
               [key]="key"
               [big]="true"
               [style.grid-column-start]="3"
               [style.grid-column-end]="3"
               [style.grid-row-start]="1"
               [style.grid-row-end]="3">
      </app-key>
    </ng-container>
  </ng-container>
</div>