math-keyboard.component.html

<div *ngFor="let row of mainKeys; let last = last">
  <ng-container *ngFor="let key of row; let lastRowKey = last">
    <app-key
        [key]="key"
        [preset]="preset"
        [last]="!last && lastRowKey"
        [position]="position"
        (enterKey)="enterKey.emit($event)">
    </app-key>
    <span *ngIf="last && lastRowKey"
          [class.clear-button-container-floating-keyboard]="(
          preset === 'comparisonOperators' || preset === 'squareDashDot'
          ) && position === 'floating'"
          [class.clear-button-container-fixed-keyboard]="(
          preset === 'comparisonOperators' || preset === 'squareDashDot'
          ) && position !== 'floating'">
      <button type="button"
              mat-mini-fab
              [class]="position === 'floating' ? 'delete-characters-floating-keyboard' : 'delete-characters-fixed-keyboard'"
              (click)="deleteCharacter.emit()">
        <mat-icon>keyboard_backspace</mat-icon>
      </button>
    </span>
  </ng-container>
</div>

<div *ngIf="preset === 'numbersAndOperators' || preset === 'numbersAndBasicOperators'"
     class="grid-layout"
     [class.floating-3-column-grid-layout]="position === 'floating' && preset === 'numbersAndOperators'"
     [class.floating-2-column-grid-layout]="position === 'floating' && preset === 'numbersAndBasicOperators'"
     [class.fixed-3-column-grid-layout]="position !== 'floating' && preset === 'numbersAndOperators'"
     [class.fixed-2-column-grid-layout]="position !== 'floating' && preset === 'numbersAndBasicOperators'">
  <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"
               [position]="position"
               [style.grid-column-start]="columnIndex+1"
               [style.grid-column-end]="columnIndex+2"
               [style.grid-row-start]="rowIndex + 1"
               [style.grid-row-end]="rowIndex + 2"
               (enterKey)="enterKey.emit($event)">
      </app-key>
        <ng-container *ngIf="preset === 'numbersAndOperators'">
          <app-key *ngIf="key === '='"
                   [key]="key"
                   [position]="position"
                   [oval]="true"
                   [style.grid-column-start]="3"
                   [style.grid-column-end]="3"
                   [style.grid-row-start]="1"
                   [style.grid-row-end]="3"
                   (enterKey)="enterKey.emit($event)">
          </app-key>
        </ng-container>
      </ng-container>
    </ng-container>
</div>