Html – How to disable an input element based on a certain condition in Angular?

I’m creating a grid of input elements based on a numeric array called board. I need to conditionally disable certain elements based on their values. If board[i][j] holds a non-zero value, the corresponding input element should be initially disabled. However, even after entering a non-zero value into a previously non-disabled input element, I don’t want any other input elements to be disabled.

here is the code for creating grid of input elements:

<mat-grid-list [cols]="cols" rowHeight="50px" gutterSize="5px" rowHeight="1:1">
    @for (row of board; let i = $index; track i) {
        @for (num of row; let j = $index; track j) {
        <mat-grid-tile>
          <input type="number" inputmode="numeric" class="tile" [(ngModel)]="board[i][j]"
            [value]="board[i][j] === 0 ? '' : board[i][j]" 
            disabled="board[i][j] !== 0"
            (keydown)="tileKeyDown($event)">
        </mat-grid-tile>
        }
    }
  </mat-grid-list>

disabled="board[i][j] !== 0" this is disabling all input elements even if board[i][j] equals zero value.

[disabled]="board[i][j] !== 0 this working fine till i enter a non-zero value in a non-disabled input elements then they also are getting disabled which i don’t want.

How do i make certain input element disabled initially and later no element should be disabled if a value is entered in allowed input elements?