[Angular] 06. Components: Input Properties

 Angular 공식 문서를 실습하고 정리하는 글입니다.

 

입력 속성

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용된다.
• input 함수를 사용하여 컴포넌트가 받을 데이터를 선언한다.

import { Component, input } from '@angular/core';

@Component({
  selector: 'custom-slider',
  template: `<div>{{ value() }}</div>`,
})
export class CustomSlider {
  // 입력 속성 value 선언, 기본값을 0으로 설정
  value = input(0);
}

 

입력 속성의 사용

// CustomSlider 컴포넌트의 value 속성에 50 전달
<custom-slider [value]="50" />

 

입력 속성의 타입 지정

입력 속성의 기본값을 설정하면 TypeScript가 자동으로 타입을 추론한다.

@Component({/*...*/})
export class CustomSlider {
  // 자동으로 number 타입으로 추론
  value = input(0);
}

 

명시적으로 타입을 지정할 수도 있다.

@Component({/*...*/})
export class CustomSlider {
  value = input<number>();
}

 

필수 입력 속성

input.required 를 통해 입력 속성을 필수로 설정한다.

@Component({/*...*/})
export class CustomSlider {
  value = input.required<number>();
}

 

입력 속성 변환

입력 속성에 변환 함수를 적용해 값을 변환할 수 있다.

@Component({
  selector: 'custom-slider',
  template: `<div>{{ label() }}</div>`,
})
export class CustomSlider {
  // 'label' 입력 속성에 trimString 변환 함수 적용
  label = input('', { transform: trimString });
}

function trimString(value: string | undefined): string {
  return value?.trim() ?? '';
}

/* 사용 예 */
<custom-slider [label]="'  Hello World  '" />
	// 'Hello World' 반환

 

내장 변환 함수

import { Component, input, booleanAttribute, numberAttribute } from '@angular/core';

@Component({/*...*/})
export class CustomSlider {
  // 'disabled' 입력 속성을 boolean으로 변환
  disabled = input(false, { transform: booleanAttribute });

  // 'value' 입력 속성을 number로 변환
  value = input(0, { transform: numberAttribute });
}

 

입력 속성 별칭

입력 속성에 alias(별칭)을 지정하여 템플릿에서 다른 이름으로 사용 가능

@Component({/*...*/})
export class CustomSlider {
  // 'value' 입력 속성에 'sliderValue' 별칭 지정
  value = input(0, { alias: 'sliderValue' });
}

 

모델 입력 속성

[(value)]=”volume” 구문을 통해 CustomSlider의 value와 MediaControls의 volume을 동기화

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

@Component({
  selector: 'custom-slider',
  template: `<div>{{ value() }}</div>`,
})
export class CustomSlider {
  // 'value' 모델 입력 속성 선언
  value = model(0);

  increment() {
    // 모델 입력 속성 값을 업데이트
    this.value.update(oldValue => oldValue + 10);
  }
}

@Component({
  selector: 'media-controls',
  template: `<custom-slider [(value)]="volume" />`,
})
export class MediaControls {
  // 'volume' 신호 생성
  volume = signal(0);
}

 

@Input 데코레이터를 통한 입력 속성 선언

import { Component, Input } from '@angular/core';

@Component({
  selector: 'custom-slider',
  template: `<div>{{ value }}</div>`,
})
export class CustomSlider {
  // 'value' 입력 속성 선언
  @Input() value = 0;
}