如何使用角度创建具有最大化和最小化功能的 div

Question

如何使用 Angular 创建一个具有最大化和最小化功能的 div。 默认情况下有一个最大化图标，单击该按钮时，div 应最大化，图标应更改为最小化。单击最小化图标时，它应该最小化并且图标恢复为最大化。

Answer 1

在你的 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>