Angular의 데이터 바인딩

안녕하세요 여러분 👋, 초보자 시리즈의 두 번째 블로그에 오신 것을 환영합니다. 에 대한 놀라운 응답에 감사드립니다. 🙏🏽

지난 블로그에서 구성 요소에 대해 이야기했으며 오늘은 데이터 바인딩에 대한 기본 사항을 다룰 것입니다.

데이터 바인딩이란 무엇입니까?

데이터 바인딩은 구성 요소 클래스와 구성 요소 템플릿 간의 데이터 흐름입니다. 데이터 바인딩은 이미지 소스, 버튼 상태 또는 특정 사용자의 데이터와 같은 항목을 지정하는 데 사용됩니다.
데이터 흐름의 방향에 따라 세 가지 범주의 데이터 바인딩이 있습니다.

소스에서 보기로

보기에서 소스로

뷰에서 소스에서 뷰로의 양방향 시퀀스에서

데이터 바인딩 유형

데이터 바인딩은 세 가지 방법으로 수행할 수 있습니다.

보간 - 데이터 소스에서 보기 대상으로의 단방향 바인딩입니다. {{expressionname}} 구문을 사용합니다. 보간을 사용하여 데이터가 구성 요소 클래스에서
주형.

속성 바인딩 - Angular 속성 바인딩은 구성 요소 클래스의 속성으로 HTML 요소의 속성을 설정하는 데 사용됩니다. [propertyname] 구문을 사용합니다.

이벤트 바인딩 - 이벤트 바인딩은 키 입력, 마우스 이동, 클릭 및 터치와 같은 이벤트를 캡처한 다음 이에 대한 응답을 제공하는 데 도움이 됩니다. (eventname) 구문을 사용합니다.

양방향 바인딩이란 무엇입니까?

양방향 바인딩은 부모 구성 요소와 자식 구성 요소 간에 동시에 이벤트를 수신하고 값을 업데이트하는 데 도움이 됩니다. Angular에서는 Property-Binding과 Event-Binding을 결합하여 양방향 바인딩을 구현할 수 있습니다. Property-Binding의 [()] 및 Event-Binding의 []에서 파생된 () 구문을 사용합니다. Angular의 양방향 바인딩은 ngModel 을 사용하여 수행할 수 있습니다.

양방향 바인딩에 ngModel를 사용하는 예:

export class AppComponent {
eg = ‘Hello’;
}
<input type=”text” [(ngModel)]=’eg’ />
<h2>{{name}}</h2>

엔딩 노트

데이터 바인딩에 대한 내용입니다. 끝까지 읽어 주셔서 감사합니다.

내 학습 크레딧의 대부분은 다음에 사용됩니다.

Angular docs

and의 책

다음 기사에서 무엇을 다루기를 원하십니까? 아래 댓글로 알려주시거나 로 DM 주세요.