Angular update 8 to 14 makes [hidden] not working anymore-CodePudding

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/app/app.component.html

CodePudding user response：

You can hide checkbox from parent div.

<div [hidden]='isHidden'>
   <mat-checkbox> ... <mat-checkbox>
</div>

CodePudding user response：

You can try to focus it in other way, having a show variable in your ts that controls whether the mat-checkbox is visible/rendered:

<mat-checkbox *ngIf="show" color="primary" style="color:#787676"
                            [(ngModel)]="msgIsChecked" name="vip">
                            {{'hello'}}</mat-checkbox>

I have edited it successfully on your Stackblitz like this: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';

  isChkBoxShown = true;

  public toggleVisible ()  {
    this.isChkBoxShown = !this.isChkBoxShown;
  }
}

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>

<mat-checkbox *ngIf="isChkBoxShown"> test checkbox </mat-checkbox>
<br />
<br />
<br />
<br />
<button type="button" (click)="toggleVisible()">Toggle visible</button>

Please, have a look at it.