Toggling the visibility of div class with Angular

Question

I am trying to change the visibility of a CSS class .handle to 'hidden' after a button has been clicked. I tried to just insert a modified class by doing [ngClass]="'handle.hidden'" after the button has been toggled but this didn't work.

HTML File

<div class="expand-collapse">
 <button class="button-text title-text" (click)="toggleButton()">
  <span class="minimize"></span>
---> <div [ngClass]="'handle.hidden'"></div>
 </button>
</div>

CSS File

.handle {
    height: 25px !important;
    position: relative;
}

.handle.hidden {
    visibility: hidden;
}

.handle.visible {
    visibility: visible;
}

[The documentation](https://angular.io/api/common/NgClass#description) seems to imply that if you want to add multiple classes they should be space-separated. — Heretic Monkey, Jul 30 '19 at 18:58
Possible duplicate of [Adding multiple class using ng-class](https://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class) — Heretic Monkey, Jul 30 '19 at 19:02

score 1 · Answer 1 · answered Jul 30 '19 at 19:32

The problems is with the class name used in your ngClass binding. It must be:

<div [ngClass]="'handle hidden'"></div>

Or:

<div [ngClass]="{'handle': true, 'hidden': true}"></div>

In html code attribute class with value handle hidden match in css file as rule .handle.hidden

Sorry my english

score 1 · Answer 2 · answered Jul 30 '19 at 19:36

Try this:

ngOnInit() {
   this.hidden = false;
}

toggleButton() {
   this.hidden = !this.hidden;
}

<div class="expand-collapse">
 <button class="button-text title-text" (click)="toggleButton()">
  <span class="minimize"></span>
   <div class="handle" [ngClass]="{'hidden': hidden}"></div>
 </button>
</div>

.handle {
    height: 25px !important;
    position: relative;
    &.hidden {
       visibility: hidden;
    }
}

No need to add class visible, as it's visible by default.

score 1 · Answer 3 · answered Jul 30 '19 at 19:54

I would say there are two approaches. First is the conditional [ngClass] which means, in your toggleClass() function you are toggling the value of a boolean, like this.divIsVisible = !this.divIsVisible, then

<div class="handle" [ngClass]="divIsVisible ? 'visible' : 'hidden'"></div>

The second one is applying the *ngIf structural directory on the div, then

<div class="handle" *ngIf="divIsVisible"></div>

Also note that, *ngIf entirely removes the div from the DOM, while the visibility only hides it, but it's still on the page.

score 0 · Answer 4 · answered Jul 30 '19 at 20:01

this is easier using class directives, just add the handle class normally if it's supposed to always be there and then:

<div class="handle" [class.hidden]="isHidden"></div>

where isHidden is your component variable that gets toggled. A "visible" class is redundant as it will become invisible / visible just by adding and removing the hidden class

Isaac Kbn · Answer 5 · 2019-07-30T20:33:01.043

0

All you need is to add the hidden class conditionally while keeping track of the display status.

<button (click)="isHidden = !isHidden">
<div [class.hidden]="isHidden"></div>

In your .ts file, add and initialize isHidden:boolean.

edited Jul 30 '19 at 20:33

answered Jul 30 '19 at 20:20

Isaac Kbn

91
1
3

Toggling the visibility of div class with Angular

5 Answers5