Как я могу создать div с максимизировать и минимизировать функциональность, используя angular

Question

Как я могу создать div с функциями максимизации и минимизации, используя angular. По умолчанию имеется значок максимизации, при нажатии этой кнопки элемент div должен быть развернут, а значок должен быть изменен для минимизации. при щелчке на значке минимизации значок должен быть свернут, а значок развернут для увеличения.

Answer 1

Определите переменную toogle в вашем ts

toogle:boolean=false;

И

<button (click)="toogle=!toogle"><span>{{toogle?'v':'^'}}</span></button>
<div class="div" [style.height]="toogle?'10rem':'20rem'">
  lorem ipsum
</div>

Вы также можете использовать [style.min-height]

Обновить Вы также можете

<div class="div" [style.height]="toogle?'1.5rem':'100vh'">
  <button (click)="toogle=!toogle"><span>{{toogle?'v':'^'}}</span>
  </button>
  lorem ipsum
</div>

Обновить 2 Если мы определили два стиля в .ts

  toogle:boolean=true;
  minimize= {height:'1.5rem',position:'fixed',bottom:0,overflow:'hidden'}
  maximize={height:'100vh'}

Мы можем использовать:

<div class="div" 
    [ngStyle]="toogle?minimize:maximize">
  <button (click)="toogle=!toogle"><span>{{toogle?'v':'^'}}</span></button>lorem ipsum
</div>