[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 3. data binding & Two-way data binding

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 3. Two-way data binding

이번엔 two-way data binding이다

지난시간 까지 작업했던 프로젝트에 계속 작업 하도록 한다

먼저 component를 생성 해보도록 할텐데

ng generate component twoway

로 생성하고

vsc에서 확인을 해보면 폴더가 들어가있다

cmd창을 보면 app.module.ts에 update가 발생했는데

TwowayComponent가 import되어진것을 확인 할 수 있다

그럼? 기존화면에 컴포넌트를 뿌려볼까?

app/app.component.html로 가서 <app-twoway></app-twoway>를 추가하면?

app/twoway/twoway.component.html의 내용을 가져와 아래와 같이 뿌려준다

twoway works! 가 보인다면 다음 단계로 넘어가도록 하자

app/twoway/twoway.component.ts 로 가서

greeting이라는 변수를 string으로 선언하고

constructor에 this.greering= "Hello App?"; 라고 Hello App?값을 넣어주도록 하자

다음은

app/twoway/twoway.component.html로 가서 좀 전에 만든 greeting을 출력하도록 하자

저장을 하면 바로 변경된 결과가 출력 될 것이다

이렇게 말이다

two-way data binding을 위해서 추가적으로 작업을 더 해보도록 하자

출력된 greeting을 조작해서 다이나믹하게 변하도록...... 그냥 알아보자

app/twoway/twoway.component.html을 아래와 같이

<input type="text" [(ngModel)] = "greeting"> 추가해주고

<p></p>역시 추가해주자

그러면?

요렇게 text에 변경되는 내용은 위쪽에 greeting변수에 대응하여 변경된다

자! 이번 시간은 여기까지! 하려고 했지만

위 처럼 안되는 사람들이 있을것이다

왜? ngModel에 대한 내용을 import하지 않았기 때문..

그럼 app/app.module.ts로 가서

3번째 15번째 줄을 보고 사용하던 프로젝트 파일에 수정을 하도록 하자

다 잘된다면 다음 포스팅으로 넘어 가도록 하자