ngx-datatable은 엥귤러에서 사용하는 테이블 라이브러리이다. 이 라이브러리는 여러가지 기능을 제공하여 테이블을 만들 때 유용하게 사용할 수 있다. 테마와 스타일은 물론 높이와 각종 이벤트, 정렬, 필터, 페이징 등 다양한 기능을 커스터마이징을 할 수 있어 활용범위가 높다. 예시 headerHeight , rowHeight, footerHeight 에서 테이블의 높이를 정의할 수 있다. row , columns 로 행과 열의 데이터를 기입할 수 있다. 이 때 열 데이터 역시 커스텀 할 수 있다. columns 예시 this.columns = [ {prop: "salesPeriod", name: "기간", minWidth: 75, cellClass: "cellCenter"}, {prop: "name..
해당 연습 예시 코드는 JAVA , Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 기반이 될 예시코드 // api를 통해 정보를 받아오는 예시코드 this.rest.searchCode(this.cond).subscribe(result => { this.rslt = result; // 반복문을 통해 rslt 객체의 각 요소를 반영한다. for (const item of this.result) { // 정보를 받아와 cond List에 정보를 push한다. 예시코드 this.listCond.noList.push(1); this.listCond.noList.push(1); this.listCond.noList.push(2); this.listCond.noList.push(3..
해당 연습, 예시 코드는 JAVA, Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음. 슬라이더 이미지 표현에 용이한 Swiper을 앵귤러,타입스크립트(자바스크립트) 환경에서 사용할 수 있기에 간단히 알아보았다. Swiper 라이브러리를 설치하여 사용할 수 있다. 라이브러리 설치 문서 Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 자세한 내용은 해당 문서에서 여러가지 설치 방법이 나와있다. npm이 설치되어있다면 가장 간단하게 터미널에서 ..
해당 연습, 예시 코드는 JAVA , Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 자바스크립트(타입스크립트) 기반의 라이브러리로 다운로드를 하는 파일의 양이 크더라도 클라이언트 측에서 처리할 필요가 없기 때문에 조금 더 좋은 성능을 보이고, 서버에서 파일이 생성되기 때문에 일관성과 신뢰성이 뛰어나다. 반대로 말하면 서버에서 파일이 생성되기에 서버의 처리 부하가 증가하거나 한다면 다운로드 시간이 오래걸릴 수 있다. 자바에서는 리스트 객체에 해당 엑셀 다운로드에 사용될 정보를 저장하는 방식으로 간단하게 구현하였다. Controller @PostMapping("/excelDown") public ResponseEntity postExcelDown(@RequestBody E..
해당 연습, 예시 코드는 JAVA , Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 ngbPopover 는 앵귤러 부트스트랩 라이브러리에서 제공하는 디렉티브 이다. 마우스 오버, 클릭 등의 이벤트가 발생했을 때 팝오버를 생성하는데 사용한다. 주로 테이블에 표기해야할 정보가 너무 많을 때 비슷한 데이터, 혹은 중복되는 데이터들을 팝오버 내용에 집어넣는 방식으로 많이 사용했다. 보기에도 깔끔해보이기 때문에 미적인 용도로 사용하는 경우도 있다. Html // 팝오버가 대상 요소의 시작부분에 표시되도록 지정 {{item.pc|currency:'KRW': ''}}원 placement 는 ngbPopover 디렉티브의 속성 중 하나이다 이 속성의 역할은 팝오버가 표시될 위치를 정..
해당 코드에서는 NgbModal 을 사용했다. Angular에서 NgbModal을 사용하려면 @ng-bootstrap/ng-bootstrap 라이브러리를 설치해야 한다. npm이 설치되어 있다는 전제하에 터미널에 npm install @ng-bootstrap/ng-bootstrap 를 입력하면 설치할 수 있다. ts파일에 모달 오픈을 위한 기본 설정을 했다. import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; constructor(private modalService: NgbModal) 버튼부분 // rsltList 가 없을 경우 반품 신청버튼 disable 반품신청 openModal(modalInfo) { // modalInfo 모달을 열고 size부분에는 모..
