CODEWITHSUNDEEP
angularangular-material
Alexander
Alexander

Reputation: 13

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

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

Upvotes: 1

Views: 4579

Answers (5)

Ita
Ita

Reputation: 29

To anybody what to need help

Try detectChanges() of angular

https://angular.dev/api/core/ChangeDetectorRef

Upvotes: 0

Aymen Boumaiza
Aymen Boumaiza

Reputation: 1419

After migrate from Angular 14 to 16, [hidden] is not working anymore so to not changing it everywhere just add on your global css file this attribute to hide them again

*[hidden] {
    display: none !important;
}

Upvotes: 2

DrZoo
DrZoo

Reputation: 1697

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;
]

Upvotes: 6

JLq
JLq

Reputation: 90

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.

Upvotes: 0

ahmet g&#252;l
ahmet g&#252;l

Reputation: 203

You can hide checkbox from parent div.

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

Upvotes: 0

Related Questions