Angular에서 자식 컴포넌트 세터로 데이터 전달하기

부모 컴포넌트의 데이터가 private 속성의 세터(setter)로 전달되도록 만들 수 있습니다. 예제를 통해 살펴봅시다. private 속성에 세터와 게터가 있다고 가정해 보겠습니다:

app/user/user.component.tsclass UserComponent {
  private _name: string = '';
  
  set name(name: string) {
    if (name.length < 3) {
      this._name = name;
    } else {
      console.log('error');
    }
  }
  
  get age() {
    return this._userAge;
  }
}

예를 들어, 전달된 데이터의 유효성을 검사하는 나이(age) 세터를 구현해 보겠습니다. 또한 사용자 속성을 출력하기 위한 게터도 만들겠습니다:

app/user/user.component.tsclass UserComponent {
  private _name: string = '';
  
  @Input()
  set name(name: string) {
    if (name.length > 3) {
      this._name = name;
    } else {
      console.log('error');
    }
  }
  
  get name() {
    return this._name;
  }
}

이제 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해 보겠습니다:

app/app.component.html<user-data name="john"></user-data>

그리고 자식 컴포넌트에서 전달된 이름을 화면에 출력하겠습니다:

app/user/user.component.html<p>{{ name }}</p>