after a big update from angular 8 to angular 14 I encounter a problem with the [hidden] property. The [hidden] is not working anymore and the material checkbox is always visible.
The follwoing code is:
<mat-checkbox [hidden]="true" color="primary" style="color:#787676"
[(ngModel)]="msgIsChecked" name="vip">
{{'hello'}}</mat-checkbox>
The imports are: BrowserAnimationsModule, MatCheckboxModule, ReactiveFormsModule,...... Obviously "true" is only for testing. But still with this true or false the checkbox does not change its behaviour.
Stackblitz Link : https://stackblitz.com/edit/angular-kgqcxt?file=package.json,src%2Fapp%2Fapp.component.html
I'm not sure if this was a bug in Angular versions below 12 or 13 but I also encountered the same issue after upgrading. I had a bunch of [hidden] attributes that stopped working and had to switch them to *ngIf.
The reason I'm unsure if it was a bug is because [hidden] is an html attribute acts like display: none. If the element has a different display property like display: flex it will override [hidden].
In my opinion changing them to *ngIf was the correct thing to do. I also ended up reading around some articles and it was suggested that you should not use [hidden] with Angular 2+.
Another workaround that should also work in this case is to add the following to your stylesheet:
mat-checkbox[hidden] {
display: none;
]