显示/隐藏-按钮上的内容单击

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.

Answer 1

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

Answer 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;
}

Answer 3

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