Enable textbox if checkbox checked angular 6

Question

Trying to find a few examples on this, but all I seem to find are AngularJs examples.

Is it possible to enable my textbox when the checkbox in the same row is checked, without binding the checkbox to a boolean value, and binding that value to my `textbox', or without the need to write some Javascript?

<ng-container *ngIf="showRowTextBox">
    <td>
        <input type="text" placeholder="Enter text here" disabled onfocusout="onTextBoxFocusOut(row)"/>
    </td>
    <td>
        <input type="checkbox" />
    </td>
</ng-container>

For reference, here is the entire table layout:

<table *ngIf="hasData" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th #tableBody *ngFor="let column of columns">
                {{ column }}
            </th>
            <th *ngFor="let buttonColumnName of buttonColumnNames">
            </th>
            <ng-container *ngIf="showRowTextBox">
                <th>{{ textBoxColumnName }}</th>
                <th>{{ checkBoxColumnName }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of model">
            <ng-container *ngFor="let columnDataName of columnDataNames">
                <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
                    <ng-container *ngIf="modelConfig[columnDataName].isDate;">
                        {{ row[columnDataName] | date:'d MMM yyyy' }}
                    </ng-container>
                    <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
                        <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
                    </ng-container>
                    <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
                        {{ row[columnDataName] }}
                    </ng-container>
                </td>
            </ng-container>
            <td *ngFor="let buttonColumnName of buttonColumnNames">
                <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
            </td>
            <ng-container *ngIf="showRowTextBox">
                <td>
                    <input type="text" placeholder="Enter text here" disabled  onfocusout="onTextBoxFocusOut(row)"/>
                </td>
                <td>
                    <input type="checkbox"/>
                </td>
            </ng-container>
        </tr>
    </tbody>
</table>

Answer 1

You can bind the disabled property of the text input to the checkbox state with the help of a template reference variable . In order for the binding to work, the ngModel directive should also be applied to the checkbox.

<ng-container *ngIf="showRowTextBox">
  <td>
    <input type="text" [disabled]="!chkEnable.checked" ... />
  </td>
  <td>
    <input #chkEnable ngModel type="checkbox" />
  </td>
</ng-container>

See this stackblitz for a demo.