How to make material <input matInput> become readonly with custom directive? - html

Question

I want to make <input> which using material matInput to become readonly using my custom directive. The directive isControlReadonly will be used to set readonly based on security criteria. The problem is it works on <input> but has no effect on <input matInput>
So.. this first input works, the second doesn't:
<!-- this works -->
<input type="input" formControlName="test_field" isControlReadonly>
<!-- this doesn't works -->
<mat-form-field appearance="standard">
<mat-label>Name</mat-label>
<input matInput type="input" formControlName="customer_name" isControlReadonly>
</mat-form-field>
This is the directive:
import { Directive, ElementRef, OnInit, ViewChildren } from '#angular/core';
import { SecurityService } from './security.service';
#Directive({selector: '[isControlReadonly]'})
export class IsReadonlyDirective implements OnInit {
constructor(
private elementRef: ElementRef,
private securityService: SecurityService
) { }
ngOnInit(): void {
var ro = !this.securityService.user.canEdit
this.elementRef.nativeElement.setAttribute('readonly', ro)
}
Please help how to make that custom directive works with matInput?
Edit Note: I don't want to set readonly from reactive form since directive is much cleaner code. I don't want to add logic to my component, I want the logic in the directive since it is centralized and will be used on all forms.
Thanks

Answer 1

EDIT: provided disable solution before.
To make a input readonly move your logic to "ngAfterViewInit"
Here is a working example for your directive:
#Directive({selector: '[isControlReadonly]'})
export class IsReadonlyDirective implements OnInit, AfterViewInit {
constructor(
private elementRef: ElementRef,
private control: NgControl,
private securityService: SecurityService
) { }
ngAfterViewInit(): void {
var ro = !this.securityService.user.canEdit
this.elementRef.nativeElement.setAttribute('readonly', ro)
}
}

Answer 2

Your directive works fine for all kind of inputs but in case of mat-input, the readonly attribute is set by your directive is overridden by Angular Material's own readonly #Input.
Refer Mat-Input's source code here : Mat-Input Readonly #Input for more info
So what you can do is get your code execution of setting attribute out of the stack and hand it over to event loop. This way your code shall be executed after Angular's manipulations. And the most common way to accomplish that is setTimeout with 0 sec delay
setTimeout(() => {
this.elementRef.nativeElement.setAttribute('readonly', ro)
});
Here is a working BLITZ