pab-table.component.html

<mat-card-header class="mat-card-header-text-margin-0 bg-accent-light">
    <mat-card-title>
        {{ title }}
    </mat-card-title>
</mat-card-header>

<mat-card-content>

    <div id="pab-table-toolbar">
        <button type="button" id="edit-pab-table" mat-raised-button color="accent" [disabled]="! enableEditPabButton"
            (click)="showEditPab()">
            {{ uitextEditPabTable }}
        </button>

        <div class="hyd-window-btns">
            <span class="related-entity-title">
                {{ relatedEntityTitle }}
            </span>
            <mat-select id="add-many-children" [(value)]="childrenToAdd">
                <mat-option *ngFor="let i of addManyOptionsList" [value]="i">
                    {{ i }}
                </mat-option>
            </mat-select>
            <button type="button" mat-icon-button color="primary" [disabled]="! enableAddButton" (click)="onAddClick()"
                [title]="uitextAdd">
                <mat-icon>add_box</mat-icon>
            </button>
            <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton"
                (click)="onCopyClick()" [title]="uitextCopy">
                <mat-icon>content_copy</mat-icon>
            </button>
            |
            <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton"
                (click)="onRemoveClick()" [title]="uitextRemove">
                <mat-icon>delete</mat-icon>
            </button>
            <button type="button" mat-icon-button color="primary" [disabled]="! enableUpButton"
                (click)="onMoveUpClick()" [title]="uitextMoveUp">
                <mat-icon *ngIf="! selectionIsOneDevice">arrow_upward</mat-icon>
                <mat-icon *ngIf="selectionIsOneDevice">arrow_back</mat-icon>
            </button>
            <button type="button" mat-icon-button color="primary" [disabled]="! enableDownButton"
                (click)="onMoveDownClick()" [title]="uitextMoveDown">
                <mat-icon *ngIf="! selectionIsOneDevice">arrow_downward</mat-icon>
                <mat-icon *ngIf="selectionIsOneDevice">arrow_forward</mat-icon>
            </button>
            |
            <button type="button" mat-icon-button color="primary" (click)="exportAsSpreadsheet()"
                [title]="uitextExportAsSpreadsheet">
                <mat-icon color="primary">file_download</mat-icon>
            </button>
        </div>
    </div>


    <p-table id="geometry" [columns]="cols" [value]="rows" styleClass="p-datatable-striped" class="pab-data-table" responsiveLayout="scroll">

        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let h of headers" (click)="toggleSelection(h, $event)"
                    (mousedown)="preventCtrlClickBorder($event)" [attr.rowspan]="h.rowspan ? h.rowspan : null"
                    [attr.colspan]="h.colspan ? h.colspan : null" [class.selectable-cell]="isSelectable(h)"
                    [class.selected-cell]="isSelected(h)">

                    {{ h.title }}
                </th>
            </tr>
            <tr *ngFor="let col of columns">
                <th *ngFor="let cell of col.cells" (click)="toggleSelection(cell, $event)"
                    (mousedown)="preventCtrlClickBorder($event)" [class.selectable-cell]="isSelectable(cell)"
                    [class.selected-cell]="isSelected(cell)" [attr.rowspan]="rowSpan(cell)"
                    [attr.colspan]="colSpan(cell)" [title]="cellTitle(cell)">

                    {{ cell.title }}
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-row>
            <tr [class.selected-row]="isSelected(row)">
                <td *ngFor="let cell of row.cells" (click)="toggleSelection(cell, $event)"
                    (mousedown)="preventCtrlClickBorder($event)" [ngClass]="cell.class"
                    [class.editable-cell]="hasModel(cell)" [class.readonly-cell]="! hasModel(cell)"
                    [class.selectable-cell]="isSelectable(cell)"
                    [class.selected-cell]="isSelected(cell) && ! isSelected(row)" [class.invalid-cell]="isInvalid(cell)"
                    [class.select]="isSelect(cell)" [attr.rowspan]="rowSpan(cell)" [attr.colspan]="colSpan(cell)"
                    [title]="cellTitle(cell)">

                    <input matInput *ngIf="isNumberInput(cell)" type="text"  required 
                        [ngModel]="getCellValue(cell)"  (ngModelChange)="setCellValue(cell,$event)" 
                        (input)="inputValueChanged($event, cell)" (keypress) ="invalidNANInputValue($event)" 
                        pattern="^-?[0-9]*\.?[0-9]*$" inputmode="numeric"
                        >

                    <mat-select #selectWidget *ngIf="isSelect(cell)" [value]="cell.modelValue"
                        (selectionChange)="loiDebitSelected($event, cell)">

                        <mat-option *ngFor="let opt of cell.options" [value]="opt.value" [title]="opt.label">
                            {{ opt.label }}
                        </mat-option>
                    </mat-select>

                    <div *ngIf="isQA(cell)" class="qaFieldLineContainer">
                        <div class="qaLabel">
                            {{ cell.title }}
                        </div>
                        <param-field-line class="qaFieldLine" [param]="cell.model" (radio)="inputValueChanged($event, cell)"
                            (input)="inputValueChanged($event, cell)" [captureTabEvents]="false"
                            fixedPlaceHolder="">
                        </param-field-line>
                    </div>

                    <span *ngIf="! hasModel(cell)">{{ cellValue(cell) }}</span>
                </td>
            </tr>
        </ng-template>
    </p-table>

</mat-card-content>