클래스를 바인딩 할 때는 [ngClass]를 사용한다. page1.ts 에 다음과 같이 변수가 선언되어있다고 하자. let type1 = 'p'; page1.html 에서는 보통 [ngClass]=" type1=='p' ? 'prev' : ' ' " 또는 [ngClass]="{'prev' : type1=='p' }" 이런 방법으로 사용했는데, 아래와 같이 여러가지 변수에 대응하게 하는 것도 가능하다. 두 번째 예시와 방법은 동일하다. 변수가 let type2='f'; 이렇게 하나가 더 추가되었을 때, [ngClass]=" { 'prev' : type1=='p', 'first' : type2== 'f'} " 이렇게 사용하여 각자 다른 변수에 대해 다른 클래스가 바인딩 되도록 할 수 있다. 물론 동일한 변수..

이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다. https://angular.io/tutorial 이전 글에 이어서 진행되는 내용입니다. 2020/07/29 - [개발 일지] - [Angular 4/vscode] 3. 컴포넌트, 서비스 생성 [Angular 4/vscode] 3. 컴포넌트, 서비스 생성 이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다. https://angular.io/tutorial 이전 글에 이어서 진행되는 내용입니다. 2020/07/26 - esaek.tistory.com 1. 단방향 바인딩 ts 파일에 작성해둔 변수 예시입니다. // src/app/..

이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다. https://angular.io/tutorial 이전 글에 이어서 진행되는 내용입니다. 2020/07/26 - [개발 일지] - [Angular 4/vscode] 2. 프로젝트 생성 및 구동 [Angular 4/vscode] 2. 프로젝트 생성 및 구동 이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다. https://angular.io/tutorial 이전 글에 이어서 진행되는 내용입니다. 2020/07/26 - esaek.tistory.com 1. 컴포넌트 생성 컴포넌트는 ng generate component 컴포넌트이..

이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다. https://angular.io/tutorial 이전 글에 이어서 진행되는 내용입니다. 2020/07/26 - [개발 일지] - [Angular 4/vscode] 1. 설치 [Angular 4/vscode] 설치 이번에 Angular 4를 이용한 프로젝트에 참여하게 되었습니다. 기초 개념을 공부하기 위해 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 했으며, 복습 개념으로 간단하게 정리했습�� esaek.tistory.com 1. 프로젝트 생성 프로젝트는 아래와 같이 ng new 프로젝트이름 을 입력하여 생성할 수 있습니다. 또한 라우터를 추가로 설치할지, CSS 파일의 포맷은..