A deep dive into building an Angular directive that uses mat-checkbox to dynamically enable/disable Angular Material form controls. Covers dynamically creating MatCheckbox via ViewContainerRef, accessing NgControl via @ContentChild, handling mat-form-field, mat-radio-group, and the problematic mat-slider. Highlights a timing issue with mat-slider where ctrl.control is undefined in ngAfterContentInit, causing the checkbox state to not reflect programmatic disable calls, with a setTimeout hack as a temporary workaround.
Table of contents
Recap our goals Copy link Link copied!Replacing plain checkbox with fancy mat-checkbox : nice, but... Copy link Link copied!How it should be: <mat-form-field> Copy link Link copied!Outside <mat-form-field> things start to branch Copy link Link copied!The sore point: <mat-slider> Copy link Link copied!Conclusions Copy link Link copied!Sort: