model() 시그널 입력

시그널과 양방향 바인딩

model 입력 선언하기

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

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

부모에서 바인딩하기

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

model 값 읽기

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

model에 쓰기

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

필수 model 입력

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

export class FieldComponent {
  value = model.required<string>();
}

템플릿에서 model 사용하기

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

수동 출력 선언 불필요

model과 input 비교

// read-only:
label = input("");

// two-way writable:
value = model("");

model을 사용하는 카운터

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

model을 사용할 때

빠른 확인

복습