'앵귤러'에 해당하는 글 1건

Angular2 :: User Input (유저 입력)

MEAN stack/Angular2 2016. 12. 8. 03:50


1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';
 
  onClickMe() {
    this.clickMessage = '클릭 이벤트 입니다';
  }
}
cs


단순 클릭 이벤트이다


돌아가는 사이클은 클릭 버튼을 누르면 {{clickMessage}} 를 보여준다 


결과

 




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Component({
  selector: 'key-up1',
  template: `
    <input (keyup)="onKey($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v1 {
  values = '';
 
 
  onKey(event:any) {
    this.values += event.target.value + ' | ';
  }
  
}
cs


유저입력값을 가져옵니다


돌아가는 사이클은 유저의 키입력을 $event 를 이용해 가져온후 event.target.value 를 통해 값을 가져온다


결과

 



1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';
@Component({
  selector: 'loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }
 
cs


위의 keyup 과의 차이점은 #box 라는 식별자를 주고 <p> 태그 안의 값을 #box 의 value 값을 보여준다

단, 빈값의 경우에는 값이 보여지지 않는데 이경우는 value 값을 가져와 | 넣어주면 동작한다


 결과

 



1
2
3
4
5
6
7
8
9
10
11
12
@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}
 
cs



값을 입력후 엔터키를 입력된 값을 가져오거나 보여줄수있다. 편한점은 별다른 이벤트없이 keyup.enter 만 이용하면 끝



 결과

 


여기에서 만약 엔터키를 입력하지않고 저장이 되게 하고싶다면  blur event 를 이용해보자

위의 예제에서  (blur)="update(box.value)" 이것만 추가시켜주면된다




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Component({
  selector: 'little-tour',
  template: `
    <input #newHero
      (keyup.enter)="addHero(newHero.value)"
      (blur)="addHero(newHero.value); newHero.value='' ">
 
    <button (click)=addHero(newHero.value)>Add</button>
    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
  `
})
export class LittleTourComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  addHero(newHero: string) {
    if (newHero) {
      this.heroes.push(newHero);
    }
  }
}
cs

이 예제는 위에서 배운것을 종합한예제이다 살펴보면 blur 이벤트를 살펴보면 자바스크립트는 2개의 동작을 하게된다

첫째로 addHero 이벤트를 동작시킨다

둘쨰로 <input #newHero> 인풋값을 클리어시켜준다


 결과

 




'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
Angular2 :: Add Module 1 (모듈 추가)  (0) 2017.01.10
Angular2 :: Template Syntax(템플릿)  (1) 2016.12.17
WRITTEN BY
내가달이다
,