Angular2 :: Template Syntax(템플릿)

간단하게 템플릿 에 대해 살펴보려고한다

<p>The sum of 1 + 1 is {{1 + 1}}</p>

HTML <P> 태그안에 1+1 값을 실행하면

결과는 2 를 도출할것이다

<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

함수 안의 값을 살펴보자

{{ 1 + 1 + getval() }}

무슨값이 나올까?? 

실행을 해보면 결과값으로 4가 나온다  getval() 값은 앞서 1+1 의 결과값인 2를 가져온다 

확인을 해보면 

TwoWayBinding

도대체 앵귤러가 양방향 바인딩바인딩하길레 궁금해서 도큐먼트를 찾아보고 공부한걸 적어보려한다

AppComponent.html

 
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
</div>
 

Sizer-Component.html

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'my-sizer',
  template: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();
  dec() { this.resize(-1); }
  inc() { this.resize(+1); }
  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

my-sizer  에 폰트 사이즈값을 입력받아준다 기본값 : 14px

14라는 값을 sizer-componenet 에서 받은후 fontsize 값을 변경해주는것이다

예로, bigger 버튼을 클릭하게되면 this.resize(+1) 함수가 실행되고

resize 함수에서 사이즈값을 맞춰주고

this.sizeChange.emit(this.size)  을 실행해준다

$event 라는 변수는 Sizer-Component.sizechange 을 포함한다 왜냐? 

변수 선언쪽을 확인해보자

  @Input()  size: number | string;                                             //입력받은값  ex) 12,14,16

   

  @Output() sizeChange = new EventEmitter<number>();     //size change 를 해주는 이벤트생성 

       <number>는 (this.size) 값 이다

앵귤러는 $event 값을 AppComponent.fontsizePx 에 값을 할당해준다

실행결과를 살펴보자 

첫번째 예제)  

AppComponent.html

(sizeChange)="$event"

두번째 예제)

AppComponent.html

(sizeChange)="fontSizePx=$event"