How can I create a div with maximize and minimize functionality using angular

Question

How can I create a div with maximize and minimize functionality using angular. There is a maximize icon on default, on clicking that button the div should be maximize and icon should changed to minimize. on clicking minimize icon it should minimize and the icon reverted to maximize.

Answer 1

Define a variable toogle in your ts

toogle:boolean=false;

And

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

You can use also [style.min-height]

Update You can also

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

Update 2 If we defined two styles in .ts

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

We can use:

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