angular21 앵귤러 기초(Angular basic) 12.파이프(pipe) 테이터를 적합한 포맷으로 만들어 주는 파이프에 대해 알아보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 파이프 종류 파이프 사용법 파이프 Angular의 데이터 바인딩을 이용하면 데이터를 쉽게 표시할 수 있습니다. 하지만 DB를 통해 수신받은 데이터가 화면의 표시에 적합한 형식이 아닌 경우도 있습니다. 파이프는 데이터가 화면에 출력하는 적합한 포멧이 아닐 경우 유용합니다. 그리고 바인딩된 프로퍼티를 표시하기 전에 변환하므로 프로퍼티 값을 사용자에게 더 친숙하거나 더 적합한 로케일(국가나 지역 문화에 의해 다른 언어나 단위, 표기 등, 혹은 사용자 환경)로 변경할 수 있습니다. 파이프 종류 Angular에는 date, number, decimal, percent, currency, upperc.. 2022. 1. 22. 앵귤러 기초(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) 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. 이전 1 2 3 4 5 6 다음
