mat-input attr.disable not picking up initial value

Question

I'm trying to enable/disable mat-inputs based on the value of an object's property.

In my component, I'm subscribing to an observable in my service that will return all my applications with a disabled flag set to true by default to signal that my fields should be disabled. I am successfully getting my applications without issue.

In my view, I have a table that displays the applications and a couple mat-inputs per row which should either be enabled or disabled depending on the application.disabled flag, which is driven by a mat-checkbox (click) event.

My issue is that upon populating my table, none of the mat-input are disabled and only become disabled once the checkbox is checked once and unchecked, then the row behaves normally.

How do I get my default disabled state to propagate across all fields but also maintain the functionality of enabling/disabling based on my object's disabled property value?

application.viewmodel.ts

import { ApplicationDto } from '../models';

export class ApplicationViewModel {

    disabled: boolean;
    application: ApplicationDto;

    constructor(
        disabled?: boolean,
        application?: ApplicationDto
    ) {
        this.disabled = disabled || false;
        this.application = application || null;
    }
}

application.service.ts

export class ApplicationService {

    private currentApplicationsSubject = new BehaviorSubject<ApplicationViewModel[]>([]);

    get currentApplications$(): Observable<ApplicationViewModel[]> {
        return this.currentApplicationsSubject.asObservable();
    }

    constructor(private http: HttpClient) { }

    // Fetch all applications
    fetchApplications(): void {
        this.http.get<ResponseDto<CollectionDto<ApplicationDto>>>
            (location.origin + '/api/application').pipe(
            map((response: ResponseDto<CollectionDto<ApplicationDto>>) 
                => response.response.collection)
        ).subscribe(
            (dtos: ApplicationDto[]) => {
                let viewModels: ApplicationViewModel[] = [];
                dtos.forEach(dto => viewModels.push(new ApplicationViewModel(true, dto)));
                this.currentApplicationsSubject.next(viewModels);
            }
        );
    }
}

application.component.ts

// Datasource
dataSource = new MatTableDataSource<ApplicationViewModel>();

// Get and set currentApplications BehaviorSubject from web request
this.applicationService.fetchApplications();

// Observable subscription
this.service.currentApplications$.subscribe(
    (applications: ApplicationViewModel[]) => this.dataSource.data = applications
);

// Disabled state changer
changeRowState(application: ApplicationViewModel) {
    application.disabled = !application.disabled;
}

application.component.html

<table mat-table fxFlex="grow" [dataSource]="dataSource">
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>Select</th>
        <td mat-cell *matCellDef="let application">
            <mat-checkbox 
                (click)="$event.stopPropagation(); changeRowState(application);"
                (change)="$event ? selection.toggle(application) : null"
                [checked]="selection.isSelected(application)">
            </mat-checkbox>
        </td>
    </ng-container>
    <ng-container matColumnDef="field">
        <th mat-header-cell *matHeaderCellDef>Field</th>
        <td mat-cell *matCellDef="let application">
            <input 
                matInput 
                placeholder="Field" 
                [attr.disabled]="application?.disabled ? '' : null" 
                required />
        </td>
    </ng-container>
...

Answer 1

use it directly

[disabled]="application?.disabled ? '' : null"