Angular13 Angular_material - Basic progress-spinner 사용법 안녕하세요. 이번에는 Material 의 spinner 사용법에 대해 알아보겠습니다. 공식문서를 확인해봐도 자세히 잘 나와있습니다. 저는 스피너를 적용할 때에는 SDK를 사용하여 구현하는데요. 이유는 딱히 없지만, 컨트롤하기 편해서 그런것 같습니다. 일단 spinner란 것은 로딩화면처럼 뱅글뱅글 돌아가는 것을 뜻하는데요. 이렇게 뱅글뱅글 돌아갑니다. Angular 프로젝트 생성과 Material install은 skip하고 넘어가도록 하겠습니다. 프로젝트 생성과 Material install을 모르시는 분들은 아래 링크를 먼저 진행해주세요. https://le-piee.tistory.com/73?category=938531 1. Module Import App.module.ts 파일에 사용하려는 모듈을.. 2020. 7. 18. 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. Angular - Visual Studio Code 디버깅 설정 코딩을하면서 디버깅과 테스트를 많이 하게되는데 Visual Studio code에서 Angular프로젝트를 디버깅하는 방법에 대해 알려드리겠습니다. 1.확장 설치 2.launch.json 파일 만들기 3. json파일 작성 포트번호는 자신의 포트에 맞게 변경 4. 프로젝트 빌드 5. 디버깅 6. 확인 부록 자신이 원하는 부분이 중단점을 찍어가며 확인하면 됩니다. 2020. 5. 23. 이전 1 2 3 4 다음
