How to conditionally set height in ionic?

Question

I would like to set height conditionally on my component, so that on click it will expand. But I am not able to figure it out that how to set height conditionally.

Html of my component:

<div class="elements-container">
  <div class="section-text-container">
    <ion-label class="heading-label">
      {{ item.name }}
    </ion-label>
    <ion-label class="label">{{ item.data }}</ion-label>
    <ion-label class="label" *ngIf="item.expanded === true">{{
      item.status
    }}</ion-label>
    <ion-label class="label" *ngIf="item.expanded === true">{{
      item.type
    }}</ion-label>
  </div>
  <ion-icon
    class="item-icon"
    name="chevron-down-outline"
    *ngIf="item.expanded === false"
  ></ion-icon>
  <ion-icon
    class="item-icon"
    name="chevron-up-outline"
    *ngIf="item.expanded === true"
  ></ion-icon>
</div>

css of my component:

.elements-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  background: white;
  margin: 0px 5vw 10px 5vw;
  border-radius: 25px;
  border-color: var(--ion-color-primaryBlackGradient);
  border-style: solid;
  border-width: 1px;
  width: 80vw;
  height:89px;
}
                  

If anyone knows then please share your thoughts.

Answer 1

It can be done in following ways:

• First remove height from elements-container css class.

• Then in html file of your component, change it like that:

  <div class="elements-container"
      [style.height]="item.expanded === true ? '150px' : '89px'">