사용자 지정 양방향 바인딩 속성

사용자 지정 양방향 바인딩

이름 지정 규칙

입력 선언하기

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

일치하는 출력 선언하기

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

업데이트 시 값 발생시키기

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

부모에서 바인딩하기

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

전체 입력/출력 예제

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

최신 model 방식

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

두 방식 비교

여러 양방향 속성

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

방식 선택하기

빠른 확인

복습