분류 전체보기137 앵귤러 기초(Angular basic) 11.양방향 바인딩(Two-way Binding) 프로퍼티 바인딩, 이벤트 바인딩에 이어 양방향 바인딩에 대해 알아보겠습니다 이번 포스트는 아래 내용을 다루고 있습니다. 양방향 바인딩 사용법 FormsModule 양방향 바인딩 input 요소와 같은 유저 입력 HTML 요소를 사용할 때 화면에서 먼저 컴포넌트의 프로퍼티의 값을 보여주고 유저가 입력할 때 해당 프로퍼티를 업데이트 해야 될 경우가 많이 생깁니다. 위의 예제를 살펴봅시다. 필터 값을 입력 받는 input요소가 있습니다. 이 input요소에는 전에 입력한 값이 있었다면 input에 표시하고, 유저가 입력을 했을때 쪽에 입력된 필터 텍스트 값을 다시 한번 출력 하고 싶습니다. (이번 포스트에는 다루지는 않지만 차후에 필터의 텍스트로 테이블을 필터링 하려고 합니다.) 어떻게 이 처리를 원활 하게.. 2022. 1. 21. 앵귤러 기초(Angular basic) 10.이벤트 바인딩(event binding) 유저의 행동에 대해 대응할 수 있게 해주는 이벤트 바인딩에 대해 알아보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 이벤트바인딩 표준 이벤트 찾는 법 이벤트바인딩 지난 포스트에서 알아본 모든 데이터 바인딩은 컴포넌트에서 템플릿까지의 단방향 바인딩 이였습니다. 그러나 사용자가 버튼을 클릭할 때처럼 사용자의 동작에 대응하기 위해 다른 방법으로 정보를 보내야 할 필요가 있습니다. 컴포넌트는 이벤트 바인딩을 사용하면 유저의 작업을 수신이 가능하고, 이벤트 바인딩을 통해 이벤트를 구성 요소의 메소드에 연결할 수 있습니다. 아래 코드는HTML 버튼 요소에 이벤트 바인딩을 해 놓은 상태 입니다. 버튼의 click 이벤트를 컴포넌트의 toggleImg 메소드에 바인딩한다고 해석 할 수 있습니다. 유저가 버.. 2022. 1. 20. 앵귤러 기초(Angular basic) 9.프로퍼티 바인딩(property binding) 데이터 바인딩의 프로퍼티 바인딩에 대해 알아 보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 다양한 바인딩(프로퍼티 바인딩, 이벤트 바인딩, 양방향바인딩) 프로퍼티 바인딩 프로퍼티 바인딩과 보간(interpolation)의 비교 다양한 바인딩 앵귤러의 데이터바인딩을 이용하면 단순히 컴포넌트의 프로퍼티를 화면에 표시 하는것 이상의 많은 일을 할 수 있습니다. 1.프로퍼티바인딩 웹에서는 인터렉티브한 사용자 경험을 제공하기 위해서 필요에 따라 화면의 분위기과 느낌 혹은 출력 값 등을 변경해야 할 필요가 있습니다. 앵귤러에서는 컴포넌트의 프로퍼티를 DOM element에 바인딩하여 필요에 따라 느낌과 모양을 변경할 수 있습니다. 예를 들어 데이터 값에 따라 요소 색상 또는 스타일을 변경하거나, 사용.. 2022. 1. 19. 앵귤러 기초(Angular basic) 8.ngFor 구조지시문 ngFor에 대해 알아보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. ngFor 사용법 for in 과 for of 차이점 ngFor 사용법 ngFor를 사용하면 반복 가능한 목록의 각 항목에 대해 DOM 트리를 각각 반복 처리 할 수 있습니다. 일단 하나의 항목을 표시하는 html을 정의하고 Angular에게 해당 블록을 반복해 표시하도록 ngFor를 사용해야 합니다. 예를 들어, 영화 데이터의 배열을 출력하고 싶다고 가정해 보겠습니다. 해야 할 일은 먼저 하나의 테이블 행과 하위 테이블 데이터 요소를 정의하는 것입입니다. 그런 다음 *ngFor를 이용하여 해당 테이블 행 요소와 하위 항목이 영화목록(movies)을 각각 영화 데이터 대해 반복시킵니다. 여기서 let 키워드를 .. 2022. 1. 18. 이전 1 ··· 29 30 31 32 33 34 35 다음
