プログラムでdivを垂直方向にサイズ変更

Question

私はAngular4 +を使用しています。

divをプログラムで垂直方向にサイズ変更したかったのです。私はそれを行うためのヒントはありません。どこから始めるべきかわからない。それを達成する方法。 jqueryの使用に興味はありません。角度を使ってこれを達成するためのアイデアや解決策。

.textarea { 
 
    min-height: 150px; 
 
    border:1px solid #ddd; 
 
    padding:15px; 
 
    position:relative; 
 
} 
 

 
.textarea::before{ 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: -15px; 
 
    cursor: s-resize; 
 
    height: 9px; 
 
    width: 100%; 
 
    border-top: 1px solid #f1f1f1; 
 
    overflow: hidden; 
 
    background-color: #eff0f1; 
 
    background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'); 
 
    background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'),none; 
 
    background-position: 210px -364px; 
 
    background-size: initial; 
 
    background-repeat: no-repeat; 
 
}

<div class="textarea"contenteditable="true"> 
 
    this is a text area 
 
</div>

stackblitz https://stackblitz.com/edit/angular-text-resizable

Answer 1

ディレクティブ

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[resizer]' 
}) 
export class NgxResizerDirective implements OnInit { 

    height: number; 
    oldY = 0; 
    grabber = false; 

    constructor(private el: ElementRef) { } 

    @HostListener('document:mousemove', ['$event']) 
    onMouseMove(event: MouseEvent) { 

    if (!this.grabber) { 
     return; 
    } 

    this.resizer(event.clientY - this.oldY); 
    this.oldY = event.clientY; 
    } 

    @HostListener('document:mouseup', ['$event']) 
    onMouseUp(event: MouseEvent) { 
    this.grabber = false; 
    } 

    resizer(offsetY: number) { 
    this.height += offsetY; 
    this.el.nativeElement.parentNode.style.height = this.height + "px"; 
    } 

    @HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) { 
    this.grabber = true; 
    this.oldY = event.clientY; 
    event.preventDefault(); 
    } 

    ngOnInit() { 
    this.height = parseInt(this.el.nativeElement.parentNode.offsetHeight); 
    } 

} 

HTML

<div class="textarea"contenteditable="true"> 
    this is a text area 
    <div resizer></div> 
</div> 

実施例https://stackblitz.com/edit/angular-text-v-resizable

Answer 2

ngStyleトリックを行う必要があります。

heightは、コンポーネント内の変数である

<div class="textarea"contenteditable="true" [ngStyle]="{'height.px': height}"> 
this is a text area 
</div> 

：

@Component(...) 
export class Component { 
    height = 500; 
}