Practical Accumulation

1. 이 포스트는 bootstrap을 이용하여 수동으로 pagenation을 구현하는 내용이다. 1-1 사실 ng-bootstrap에서 pagenation 기능을 제공하므로 굳이 이렇게 구현할 필요는 없다. 2. component template 2-1 bootstrap 공식 홈페이지의 코드를 그대로 사용하였다. 복붙 2-2 중간에 ng-container가 나온는데, 이것은 li테그에 2개의 ng directive를 사용할 수 없기 때문이다. 2-3 [ngClass]에 지정할 class들은 getClass라는 별도의 메소드를 통하여 지정하고 있다. 2-3-1 메소드 내에서 여러 개의 if문으로 필요한 class들을 채워서 반환하는 테크닉은 표준적으로 사용된다. 2-3-2 ngFor의 let i=index..

1. 이 포스트는 Pipe를 생성하는 방법에 대한 내용이다. 2. 개발 방법 2-1 pipe 추가 2-2 app.module.ts에 추가 2-3 pipe.ts 작성 2-4 사용하기 3. Pipe추가하기 3-1 아래처럼 추가하면 convert.pipe.ts파일이 생성되고 내부에 클래스 template이 만들어 진다. $ ng generate pipe convert 3-2 기본적으로 만들어지는 template은 다음과 같다 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'convert' }) export class ConvertPipe implements PipeTransform { transform(value: unknown, .....

0. 이 포스트는 Angular의 많이 쓰는 파이프 몇 개를 언급한다. 0-1 아래 링크의 공홈에 가면 공통적으로 많이 쓰이는 built-in pipe이 나온다. Angular angular.io 1. DecimalPipe 1-1 숫자값을 지정된 포멧대로 표현해 준다. 1-2 지정은 digitsInfo에 패턴을 넣어준다. 포멧은 최소정수자리.최소소수자리수-최대소수점자리수 1-3 1.0-2 라고 지정하면 정수는 한자리 이상 표현되고 소수점은 2자리까지 표현된다. 1.0-3이 기본값이다. @Component({ selector: 'number-pipe', template: ` e (no formatting): {{e | number}} e (3.1-5): {{e | number:'3.1-5'}} e (4.5..

1. Angular는 Typescript를 사용하기 때문에 종종 일반 라이브러리를 npm으로 설치하면 사용하지 못하는 경우가 있다. 1-1 이럴 경우 @types/ 로 시작하는 라이브러리를 검색하여 추가하면 된다. 1-1-1 없을 수도 있다. 1-2 예를 들면 faker.js를 사용하려면 1-2-1 npm install faker.js --save 로 라이브러리를 설치하고 1-2-2 npm install @types/faker --save 추가로 설치한다. @types/faker은 faker의 typescript 정의가 담겨 있다.

0. 용어 정리 0-1 Component Template - 사용자에게 User Interface를 보여주는 HTML 형식의 코드 0-2 Component Class - 이벤트 발생시 처리를 위한 코드를 가지고 있다. 페이지에 대한 정보와 상태를 저장한다. 0-3 Property Binding - HTML element의 속성 값을 변경한다. Component Class의 속성과 메소드에 접근 가능하다. 0-4 Event Binding - HTML element에 이벤트 리스너(handler)를 설정한다. 0-5 Interpolation - Component Template내에 정보를 표시하기 위해서 사용한다. Component Class에 접근가능하다. 1. Angular는 객체지향 프로그래밍이라고 생..

0. Angular Cli 업데이트 0-0 Angular의 버전확인은 ng --version 0-1 @angular/cli 역시 npm 패키지 이므로 그냥 재설치 하면 된다. 0-2 global로 설치된 Angular의 버전을 올리고 싶은 경우 npm install -g @angular/cli 를 실행한다. 0-3 이미 생성된 프로젝트의 버전을 업데이트 하려면 // 업그레이트 명령 ng update @angular/cli @angular/core // Angular 8에서 업데이트 문제가 발생할 경우 // 에러 내용: Repository is not clean. Please commit or stash any changes before updating. ng update @angular/cli @angu..