Как можно динамически установить элемент div (во время выполнения)

Question

Как я могу позволить элементу div появляться и исчезать? Например, если условие, подобное заданной c высоте предыдущего div, достигнуто, оно должно позволить появиться новому элементу div (2). Он также должен исчезнуть, если высота элемента div достигла минимальной высоты, и если я нажал клавишу Backspace.

<div id="invoice" class="create" fxLayout="row">
<div class="invoice-container">
    <div class="card">
        <textarea class="description">
    </textarea>
    </div>
    //This div should be shown in the DOM dynamically
    <div class="card" style="margin-top: 10px;">
        <textarea class="description">
      </textarea>
    </div>
</div>

Я поместил пример на стек стлиц: https://stackblitz.com/edit/angular-173u1h

Answer 1

Вы можете сделать это с помощью Viewchild и назначить функцию keyup для первой текстовой области следующим образом: demo

<textarea (keyup)="change($this)" #el1 [(ngModel)]="text1" class="description" > </textarea>

, а затем просто проверить с помощью высоты

  change(){
    var firsttext=this.text1.split(" ");
    var lastword=firsttext[firsttext.length-1];
    var height=this.el1.first.nativeElement.scrollHeight;
    var clientHeight=this.el1.first.nativeElement.clientHeight
    if(height>clientHeight){ 
         this.text1=this.text1.substr(0,this.text1.length-lastword.length);
         this.text2=lastword;
      this.el2.first.nativeElement.focus();
    }   
  }

Answer 2

Вы можете достичь этого с помощью *ngif, просто поместив эту директиву в div, который вы хотите показать и скрыть.

<div *ngif="your condition"> Your Content <\div>

В следующий раз, пожалуйста, не добавляйте свой код с изображением. Это легче читать.