Angular에서 @Input() 사용

1. Angular의 @Input() 지시문
2. Angular 애플리케이션에서 @Input()을 사용하는 단계

이 기사는 사용자로부터 입력을 받아 프로그램에서 처리하기 위해 Angular에서 사용되는 함수인 Angular @Input()에 관한 모든 것입니다. 이 함수를 사용하여 파일을 읽고 외부 API에서 데이터를 가져올 수도 있습니다.

Angular의 @Input() 지시문

@Input() 지시문은 이름에서 알 수 있듯이 입력 필드에 사용됩니다. @Input()은 양식 필드와 텍스트 상자에서 사용자 입력을 캡처하는 데 가장 적합합니다.

사용자가 정보를 입력하면 필드 또는 텍스트 상자의 값이 자동으로 업데이트됩니다. 또한 다른 입력 및 ngModelOptions의 값을 수락하여 해당 값을 자동으로 업데이트합니다.

@Input() 지시문에는 type, name 및 value의 세 가지 속성이 있습니다.

• type 속성은 생성할 입력 필드 유형을 지정합니다.
• name 속성은 입력 필드의 ID를 지정하며 JavaScript 코드에서 이름으로 사용됩니다.
• 기본값이 설정되지 않은 텍스트 입력 필드를 생성하는 경우 value 속성이 필요합니다.

다음은 입력 필드의 유효한 유형 목록입니다.

• Text
• Password
• Email Address
• Number
• Date Picker (Date)
• Time Picker (Time)
• Range Slider (Range)
• Checkbox (Checkbox)

@Input()을 사용하려면 원하는 HTML 요소에 지시문으로 추가해야 합니다.

@Input()은 부모 구성 요소에서 자식 구성 요소로 데이터를 전송하는 데 사용되는 반면 @Output()은 자식 구성 요소에서 부모 구성 요소로 데이터를 전달하는 데 사용됩니다. @Input()의 대표적인 예는 사용자의 나이를 묻는 것입니다.

다음 코드는 사용자의 나이를 묻는 프롬프트를 표시한 다음 이를 age라는 변수에 할당하는 호출 함수에 반환합니다.

var age = Input("Please enter your age");

Angular 애플리케이션에서 @Input()을 사용하는 단계

Angular 애플리케이션에서 @Input()을 사용하는 세 단계가 있습니다.

타입스크립트 코드:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    isFocusStyle = false;
    type = 'INFO';
    onFocus() {
        this.isFocusStyle = true;
        this.type = 'INFO';
    }
    onEnter() {
        this.isFocusStyle = false;
        const input = document.querySelector('input');
    }
}

HTML 코드:

<h1>Example of Angular Input</h1>
<div class="input-wrapper" [ngClass]="{'focus-style': isFocusStyle}">
    <input type="test" placeholder=" Write " (focus)="onFocus()">
</div>

위에서 언급한 코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.