如何绑定按钮以基于单击显示和隐藏

Question

I have a list of headers (titles) and each has paragraphs... I created a list for this so that it has a button with icon on the right. when the button is clicked , show the paragraph and when clicked again it should hide it back.

on the first click its shown but I don't know how to hide it back when its clicked again.

so far I have done something like this:

.html:

<ion-list no-lines>
  <button ion-item (click)="itemClicked()">
    <h2>About {{details.company.data.company_name_en}}</h2>
     <ion-icon name="ios-arrow-down" item-right></ion-icon>
  </button>
  <div [style.visibility]= "toggoleShowHide">
    <p dir="auto" >
      {{details.company_profile}}
    </p>
  </div>
</ion-list>

.ts:

itemClicked(){
this.toggoleShowHide= 'visible';
}

Also , the space for the <div> tags are also not hidden.....And if someone can please suggest how to animate this properly..... when clicked the list should expand with the content inside , and then contract when clicked again.

Answer 1

For animations you can check out The Guide for Angular Animations

where you use animations to your component and can apply different styles to your animation.

With animations you can use [@triggerName] (name it as you want) to attach the animation to elements, and this is triggered by your click event. Then in your component you add the logic in animations , so it could look something like this:

  animations: [
    trigger('openClose', [
      state('collapsed, void',
        style({ height:"0px"})),
      state('expanded',
        style({ height:"*" })),
      transition("collapsed <=> expanded", [
        animate(500, style({ height: '250px'})),
        animate(500)
      ])
    ])
  ]

Here in this example we toggle the state between collapsed and expanded and apply styles and timing for openClose . The above code does nothing special animation-wise. But that's where you come in and can apply whatever style you want!

Here is a simple working example:

Plunker

Answer 2

You can use the [hidden]="true/false" directive

ts :

this.toggoleShowHide = true;

itemClicked(){
  this.toggoleShowHide = !this.toggoleShowHide;
}

html:

<div [hidden]= "toggoleShowHide">
    <p dir="auto" >
      {{details.company_profile}}
    </p>
  </div>

Answer 3

This can be handled in html itself

<ion-list no-lines>
 <button ion-button clear item-end class="roundButton" (click)="viewType = !viewType">
  <h2>About {{details.company.data.company_name_en}}</h2>
   <ion-icon name="ios-arrow-down" item-right></ion-icon>
 </button>
 <ion-item *ngIf="viewType">
  <ion-input type="text" value=""></ion-input>
 </ion-item>
</ion-list>