저작권 안내: 저작권자표시 Yes 상업적이용 No 컨텐츠변경 No

스프링5 입문

JSP 2.3

JPA 입문

DDD Start

인프런 객체 지향 입문 강의

'angular2'에 해당되는 글 1건

  1. 2016.08.30 앵귤러2 angular2-autosize를 이용한 textarea 자동 높이 조절

앵귤러2로 프로젝트를 진행하는 과정에서 입력한 내용에 따라 textarea의 높이를 자동으로 조절해주는 기능이 필요했다. 검색 결과 다음 디렉티브가 적당해 보여 적용을 했다.

  • https://github.com/stevepapa/angular2-autosize

angular2-autosize 디렉티브 사용법은 간단하다. 위 사이트에서 제공하는 샘플 코드처럼 템플릿에 autosize 디렉티브를 적용해주면 된다.


import {Component} from '@angular/core';

import {Autosize} from 'angular2-autosize';


@Component({

  template: `

    <textarea autosize >Hello, this is an example of Autosize in Angular2.</textarea>

  `,

  directives: [Autosize]

})

class App {


}


예제 사이트(https://stevepapa.com/angular2-autosize/)에서 <textarea>에 입력하면 자동으로 높이가 늘었다 줄었다하는 것을 할 수 있다. 



약간의 수정

angular2-autosize는 내용이 없을 경우 다음 그림처럼 textarea가 표시된다.



두 줄 정도 높이로 표시되는데, 내가 원하는 건 내용이 없거나 한 줄 분량인 경우 높이도 한 줄 높이로 맞춰지는 것이었다. 그래서 angular2-autosize의 코드(https://github.com/stevepapa/angular2-autosize/blob/master/src/autosize.directive.ts)를 다음과 같이 약간 수정했다. 추가한 부분을 굵게 표시했다.


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


@Directive({

    selector: 'textarea[autosize]'

})

export class Autosize {

    @HostListener('input',['$event.target'])

    onInput(textArea: HTMLTextAreaElement): void {

        this.adjust();

    }


    @Input("autosize") initValue:string;


    constructor(public element: ElementRef){

    }


    ngOnInit(): void{

        this.element.nativeElement.rows = 1;

        this.element.nativeElement.value = this.initValue;

        this.adjust();

    }

    adjust(): void{

        this.element.nativeElement.style.overflow = 'hidden';

        this.element.nativeElement.style.height = 'auto';

        this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";

    }

}


@Input을 이용해서 textarea에 보여줄 값을 초기화하도록 구현했다. 수정한 디렉티브의 사용은 다음과 같다.


<textarea class="form-control" cols="30" rows="1"

          [(ngModel)]="mytext"

          [autosize]="mytext"></textarea>


ngModel로 설정한 값과 연동하는 방법이 있을 것 같은데, angular2 자체를 아직 자세히 몰라 거기까진 진행하지 못했다.


실제 적용한 결과 화면은 다음과 같다.





Posted by 최범균 madvirus

댓글을 달아 주세요