tree2 angular - tree(2) 이동 및 이벤트 감지 안녕하세요. 저번시간에 angular-tree-component를 이용해서 트리구조를 표현하는 것을 알아봤는데요. 이번시간에는 Drog&Drop 기능을 넣어서 트리구조 변경을하고, 그 변경을 감지하여 값을 가져오는 것을 해보겠습니다. 1.HTML 작성 (moveNode)가 노드 이동을 감지하며, 트리의 노드가 변경이 되면, 연결되어있는 함수를 실행 시킴과 동시에 이벤트를 같이 전송합니다. 2. component.ts 파일 작성 import { Component } from '@angular/core'; import { ITreeState, ITreeOptions} from 'angular-tree-component'; @Component({ selector: 'app-root', templateUrl: .. 2020. 6. 7. Angular - tree구조 구현 및 표현 안녕하세요. 조직도 등을 구현을 하려고 할 때, 트리구조를 표현해야 하는 것들이 있습니다. 1 ㄴ 1 ㄴ1 ㄴ2 ㄴ 2 쉽게 설명하면 이런 구조입니다. Angular에서는 라이브러리를 이용해서 쉽게 구현 할 수 있는데요. 한번 같이 해보겠습니다. 기본적으로 NPM과 Angular가 설치가 되어있어야 합니다. 제 버전은 이렇습니다. 1. 프로젝트 생성 ng new treeApp 2. 라이브러리 설치 npm install --save angular-tree-component 3. CSS 플러그인 @import '~angular-tree-component/dist/angular-tree-component.css'; /* styles.css에 붙혀넣으시면 됩니다 */ 4. App.Module 작성 주석으로 표시.. 2020. 6. 5. 이전 1 다음
