Practical Accumulation

1. 이 포스트는 모듈 내에서 또 다른 라우터를 설정하는 방법에 관한 내용이다. 2. Semantic UI의 가로 Tab을 작성하는 것으로 설명한다. 3. 작성 순서 3-1 Tab 컴포넌트를 작성한다. 3-2 tab ui를 작성한다. 3-3 각 tab 메뉴를 선택했을 때 보여질 컴포넌트를 생성한다. 3-4 routing-module.ts에 라이팅 테이블을 작성한다. 4. Tab 컴포넌트 생성 및 ui 작성하기 4-1 Tab 컴포넌트를 작성한다. 4-2 컴포넌트 template을 작성한다. 4-2-1 첫번째 부분은 메뉴로 4개의 컬럼 크기로 구성되어 있고 3개의 메뉴 항목이 있다. 4-2-2 각 메뉴는 각기 다른 url로 이동시킨다. 4-2-3 여기서 주의해야할 점이 있는데, routerLink는 linu..

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..

0. 이 포스트는 아래의 v2의 클라이언트 구현의 상품 검색기능에 대한 내용이다. 1. 서버에서 이미 상품검색 기능을 추가되어 있다. 이 기능을 활용하는 서비스 메소드를 작성한다. 1-1 기존에 있는 getProducts메소드는 더 이상 사용되지 않기 때문에 이것을 검색용으로 변경한다. 1-2 product-service.ts에서 아래처럼 수정한다. getProuductsByName(keyword: string): Observable { const targetUrl = `${this.baseUrl}/products/search/findByNameContaining?keyword=${ keyword }` return this.getProductList(targetUrl) } 2. 이제 product-sea..