Javascript 用jquery在angular（类型脚本）中通过单击和动画显示和隐藏表单

我需要创建一个显示和隐藏表单的按钮

我创建此表单：

 <button type="button" (click)="ShowAndHide()"
  class="AddCatBtn">show and hide </button>
<div class="AddCategory">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">Name : </label>
        <input type="email" class="form-control" id="inputEmail4">
      </div>
      </div>
    </div>

但是我对这个代码有问题：

1-我需要一次点击显示和隐藏，但在这段代码中，我应该双击工作显示和隐藏形式

2-我需要在加载表单时隐藏表单

3-我需要在这段代码中添加jquery动画来显示和隐藏：比如淡入和淡出

这是我的演示代码：

---

如何解决这些问题？？？？

如果你用Angular编写应用程序，让Angular来处理。不要用jQuery的方式直接操作DOM。 模板：

<button type="button" (click)="ShowAndHide()" class="AddCatBtn">show and hide </button>
<div class="AddCategory" [class.hidden]="divIsHidden">
   <!-- rest of code... -->

TS:

<button type="button" (click)="ShowAndHide()" class="AddCatBtn">show and hide </button>
<div class="AddCategory" [class.hidden]="divIsHidden">
   <!-- rest of code... -->

.hidden { visibility: hidden; }

public divIsHidden = false;

ShowAndHide() {
   this.divIsHidden = !this.divIsHidden;
}