프로그래밍124 앵귤러 기초(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. 앵귤러 기초(Angular basic) 5.템플릿, 컴포넌트 만들기 템플릿과 컴포넌트를 만들어보는 실습을 해보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 템플릿의 두 가지 작성법 bootstrap, fontawesome 설치 외부 라이브러리 글로벌 css설정 템플릿 만들기 컴포넌트 만들기 템플릿을 만드는 두 가지 방법 이전 포스트에선 AppComponet에 대한 인라인 템플릿을 만들었습니다. 위 예제는 Component의 메타데이터 에서 직접 템플릿을 정의 하고 이런 방식을 인라인 템플릿이라고 합니다. 하지만 이것이 componet에 대한 템플릿을 구축 할 수 있는 유일한 방법은 아닙니다. 템플릿을 작성한는 방법은 크게 두가지가 있습니다 인라인 템플릿 파일로 연결된 템플릿 1. 인라인 템플릿 메타데이터의 'template'속성을 사용하고 위와 같이 작은따옴.. 2022. 1. 16. 이전 1 ··· 27 28 29 30 31 다음
