앵귤러 데코레이터

키입력 필터링
템플릿에서 keyup.enter라고 바인딩하면 엔터키가 입력되었을 떄만 이벤트 핸들러를 실행할 수 있습니다.

@Component({
  selector: 'app-key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}

getter setter
https://velog.io/@bigbrothershin/JavaScript-%EC%A0%91%EA%B7%BC%EC%9E%90-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0-getter-setter

디렉티브(Directive / 지시자)는 DOM의 모든 것(모양이나 동작 등)을 관리하기 위한 지시(명령)이다. HTML 요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시(directive)를 전달한다.

일반 클래스를 컴포넌트화하기 위해서는 @Component 데코레이터를 해당 클래스 바로 앞에서 호출하여 Angular에게 해당 클래스가 일반 클래스가 아니라 컴포넌트 클래스임을 알려야 한다. @Component 데코레이터는 자신의 바로 아래에 있는 클래스를 컴포넌트 클래스로 인식한다.

import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
  selector: 'app-countdown-parent-lv',
  template: `
  <h3>Countdown to Liftoff (via local variable)</h3>
  <button (click)="timer.start()">Start</button>
  <button (click)="timer.stop()">Stop</button>
  <div class="seconds">{{timer.seconds}}</div>
  <app-countdown-timer #timer></app-countdown-timer>
  `,
  styleUrls: ['../assets/demo.css']
})
export class CountdownLocalVarParentComponent { }

원래 부모 컴포넌트는 자식 컴포넌트의 seconds 프로퍼티나 start, stop 메소드에 직접 접근할 수 없습니다.
하지만 를 템플릿 지역 변수 #timer로 선언하면 이 변수를 사용해서 자식 컴포넌트에 접근할 수 있습니다. 이 템플릿 지역 변수는 자식 컴포넌트 자체를 가리키며, 템플릿 지역 변수를 선언한 후에는 부모 컴포넌트의 템플릿에서 자식 컴포넌트의 프로퍼티나 메소드에 자유롭게 접근할 수 있습니다.

@ViewChild() 로 자식 컴포넌트 접근하기
템플릿 지역 변수로 자식 컴포넌트에 접근하는 것은 문법도 간단하고 이해하기 쉽습니다. 하지만 이 방식은 부모 컴포넌트의 템플릿에서만 자식 컴포넌트에 접근할 수 있기 때문에 자유롭게 활용하기에는 제한이 있습니다. 부모 컴포넌트의 클래스에서는 자식 컴포넌트에 접근할 수 없기 때문입니다.

템플릿 지역 변수를 사용하는 방법은 부모 컴포넌트 클래스에서는 유효하지 않습니다. 그래서 부모 컴포넌트의 클래스에서는 자식 컴포넌트의 프로퍼티를 읽거나 메소드를 실행할 수 없습니다.

부모 컴포넌트의 클래스에서 자식 컴포넌트에 접근하려면 자식 컴포넌트에 ViewChild를 사용해서 부모 컴포넌트로 주입 해야 합니다.

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
selector: 'app-countdown-parent-vc',
template: `
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<app-countdown-timer></app-countdown-timer>
`,
styleUrls: ['../assets/demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {

@ViewChild(CountdownTimerComponent)
private timerComponent: CountdownTimerComponent;

seconds() { return 0; }

ngAfterViewInit() {
  // `seconds()` 메소드는 `CountdownTimerComponent.seconds`에서 다시 구현합니다.
  // 이 때 개발 모드에서 출력하는 단방향 바인딩 검사 에러를 방지하기 위해
  // 한 싸이클 기다려야 합니다.
  setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
}

start() { this.timerComponent.start(); }
stop() { this.timerComponent.stop(); }
}

데코레이터

클래스 데코레이터

• @Component : 일반 클래스를 컴포넌트화

• @NgModule : 개발해야될 컴포넌트 종류의 파일이 여러개가 되면 해당 파일을 관리할 부모같은 역할

  1. 모듈은 컴포넌트를 관리한다.
  2. 모듈은 여러개 존재 할 수 있으며 각각의 모듈은 각각 컴포넌트를 관리 한다.
  3. 메인 모듈이 존재하며, 메인 모듈은 imports를 통해 다른 모듈을 불러와 쓸 수 있다.
  4. 모듈에서 사용할 컴포넌트는 declaration에 추가해야 된다.
  5. 메인 모듈은 먼저 동작 할 메인 컴포넌트를 가질 수 있다. (bootstrap에서 선언)
  6. @Component 데코레이터에 선언된 selector는 다른 컴포넌트에서 사용 될 수 있다.
  7. @Component 데코레이터 속성에서 selector에 쓰여진 내용을 사용하고자 하는 컴포넌트의 *.html 파일에 테그형태로 입력하면 해당 컴포넌트가 생성 된다.
  8. 컴포넌트를 만드는 명령어 ng g component 이름

• @Directive : custom directive를 정의(ngStyle, ngIf같은) HTML에 Angular가 간섭할 부분을 표시한다

• @Injectable : : 자신의 아래에 정의된 클래스가 의존성 주입이 가능한(injectable) 클래스임을 나타낸다.

• @Pipe : 문자열, 통화, 일자와 같은 데이터를 원하는 형태로 화면에 표시

프로퍼티 데코레이터

• @Input : 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달
• @Output : 주로 이벤트를 바인딩할때.
  emit에서 내보낸 이벤트를 subscribe한데서 받는다
  자식 컴포넌트에서 외부로 이벤트를 보내려면 EventEmitter 타입으로 선언한 프로퍼티에 @Output() 데코레이터를 사용해서 출력 프로퍼티로 지정합니다.
• @ViewChild : 자식컴포넌트에서 사용된 변수나 메서드를 참조해서 사용하고싶을떄?
  템플릿변수로는 부모컴포넌트 템플릿에서만 자식 컴포넌트를 참조할 수 있지만, 뷰차일드를 사용하면 부모컴포넌트의 클래스에서 접근이 가능하다
  첫번째 인자에 컴포넌트 클래스를 정의하면 그 클래스와 매치되는 DOM요소를 찾고, 요소가 변경되면 해당 속성을 업데이트.
  템플릿의 요소에 # 을 붙여서 해당엘리먼트를 가져올 수 있다.
• @ViewChildren : 가져올게 여러개일때.
• @ContentChild
• @ContentChildren
• @HostBinding : 호스트엘리먼트에 있는 프로퍼티를 바꿀수 있다. (클래스 리스트와 같은) https://mingcoder.me/2018/07/23/Programming/Angular/angular-custom-directive/

메소드 데코레이터

• @HostListener : 인자로 넘긴 이벤트를 받아들이는 function 데코레이터다. Host element에서 해당 이벤트가 발생하면 연결된 functions을 실행한다.
  사용자 동작에 반응. onclick 같은 이벤트핸들러 같은 역할? 두번째인자는 파라미터, $event 예약어 => 여기에 해당하는 이벤트밸류를 실행하는 함수의 파라미터로 전달.

파라미터 데코레이터

• @Inject : 주입할 대상의 정보를 선언. 클래스 타입인경우 앵귤러가 타입정보를 추론하여 자동주입?