Show / Hide - Content on Button Click

Question

Hello fellow programmer,

im getting used to Angular 2, therefore Typescript, so have mercy with me.

I have 5 Buttons which should enable or Disable Content on Click, like a Sidemenu.

HTML - Code

  <li class="navigation-items"> 
    <button class="dropdown-header" (click)="onSelect(2)">Link 2</button> 
    <div *ngIf="DropdownVar == 2" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>

Typescript - Code

DropdownVar = 0;

onSelect(x){
 this.DropdownVar = x;
 console.log(x);
}

It seems that my var gets the propper value but my *ngif does not work. Is there a better way to handle my Problem?

Additional i would like to have a little animation for the Content which i want to show, but i guess css is the way to go.

http://stackoverflow.com/questions/35163009/angular-2-show-and-hide-an-element — Saeed, Apr 03 '17 at 09:29
http://stackoverflow.com/questions/39651890/angular-2-hide-parent-element-on-click-on-close-button — Saeed, Apr 03 '17 at 09:30
https://plnkr.co/edit/XmDiJX3NhcSptZco2II5?p=preview I just tried what you did and it's working (even though you really should use `===`) — YounesM, Apr 03 '17 at 09:52

score 5 · Accepted Answer · answered Apr 03 '17 at 09:34

5

You can directly do it with (click)="DropdownVar=2" , no need of onSelect method

 <li class="navigation-items"> 
        <button class="dropdown-header" (click)="DropdownVar=2">Link 2</button> 
        <div *ngIf="DropdownVar === 2" class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>

And use === instead of == in Angular2

answered Apr 03 '17 at 09:34

Vivek Doshi

56,649
12
110
122

How those this answer the question ? ngIf should work even with what OP did. Besides, yes, in javascript in general, you should use `===` instead of `==`. otherwise things like : `[-1,"chill",true] == "-1,chill,true"` are true – YounesM Apr 03 '17 at 09:38
Will you please try it with angular 2 ? and his the probelm is "It seems that my var gets the propper value but my *ngif does not work." – Vivek Doshi Apr 03 '17 at 09:40
Do i understand correctly that `===` also checks the var type? – sHamann Apr 03 '17 at 09:41
@VivekDoshi I'm not saying what you did doesn't work I'm just curious about why it works with `===` and not `==` – YounesM Apr 03 '17 at 09:43
In javascript, the operator '==' only check equality and '===' check type and equality , yes @YounesM – Vivek Doshi Apr 03 '17 at 09:44
And Angular is developed with typescript , so you should use === . – Vivek Doshi Apr 03 '17 at 09:45
@sHamann , yes , you understand correctly that === also checks the var type – Vivek Doshi Apr 03 '17 at 09:47
My pleasure , Will you please upvote the answer also please ? – Vivek Doshi Apr 03 '17 at 09:59

score 2 · Answer 2 · answered Apr 03 '17 at 09:41

2

you can use [hidden] instead ngIf

<li class="navigation-items"> 
<button class="dropdown-header" (click)="onSelect()">Link 2</button> 
<div  class="dropdown-content" [hidden]="IsHidden">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

In Component

IsHidden= true;

onSelect(){
 this.IsHidden= !this.IsHidden;
}

answered Apr 03 '17 at 09:41

Shiva Prasad

66
1
9

This is not a good answer, `[hidden]` hides the component (using css) while `ngIf` removes it completely from the DOM. That could not match what OP's trying to do. – YounesM Apr 03 '17 at 09:45

score 0 · Answer 3 · answered Aug 22 '19 at 09:49

you can use [hidden] instead ngIf

<li class="navigation-items"> 
    <button class="dropdown-header" (click)="onSelect()">Link 2</button> 
    <div  class="dropdown-content" [hidden]="IsHidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>

In Component

IsHidden= true;

onSelect(){
this.IsHidden=true;
 this.IsHidden= !this.IsHidden;
}

Show / Hide - Content on Button Click

3 Answers3

Linked