분류 전체보기143 앵귤러 기초(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. 앵귤러 기초(Angular basic) 7.Structural Directive, ngIf 구조지시문(structural Directive)에 대해 알아보고, 구조지시문인 ngIf를 사용해 보겠습니다 이번 포스트에서는 아래의 내용을 다루고 있습니다. Directive종류 구조 지시문(Structural Directive) ngIf란 Directive Directive는 html을 강화하고 확장하는데 사용하는 custom html 요소(element) 혹은 속성(attribute)라고 생각할 수 있습니다. 우리는 directive를 만들어서 사용하거나, angular가 제공 해주는 내장 지시문을 사용할 수 있습니다. 두 종류의 Directive custom directive(커스텀 지시문) Built-In directive(내장 지시문) 이전 포스트에서는 아래와 같이 component를 만들고 .. 2022. 1. 17. 앵귤러 기초(Angular basic) 6.바인딩, Interpolation(보간) 바인딩의 개념 그리고 보간에 대해 알아보겠습니다. 이번 포스트에서는 아래의 내용을 다루고 있습니다. 바인딩이란 Interpolation(보간)이란 Binding(바인딩) 이란 Angular에서 바인딩은 컴포넌트 클래스와 해당 템플릿 간의 의사소통을 하고 데이터 전달하는 것을 의미합니다. 예를 들어 클래스의 값을 템플릿에 제공하여 표시할 수 있으며, 템플릿에서는 이벤트를 발생시켜 사용자 작업이나 입력값을 다시 클래스에 전달합니다. 바인딩 구문은 항상 템플릿에 정의 됩니다. Angular에서는 여러 종류의 바인딩을 제공하는데, 그중 interpolation(보간)에 대해 알아보겠습니다. Interpolation(보간) 템플릿에서는 보간을 의미하는 이중 중괄호는 쉽게 볼 수 있습니다. 위 예제의 페이지 제목은.. 2022. 1. 16. 이전 1 ··· 31 32 33 34 35 36 다음
