angular9 728x90 Angular 8 #error: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation. error : (...) you must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation. (...) 원인 : CustomComponent 들을 공통모듈화 하고 shared module 에 import 하였더니 나온 오류이다. 원인은 CustomComponent 에 사용된 태그 중 Angular Material 태그가 사용됐었는데, CustomComponent 모듈에 import 해주지 않아 생긴 오류였다. 커스텀 컴포넌트 - InputMatDatepickerComponent 컴포넌트 모듈 - CustomC.. 2020. 5. 7. Angular 8 #does not exist on type 'GlobalEventHandlers' in angular 에러 does not exist on type 'GlobalEventHandlers' in angular does not exist on type 'GlobalEventHandlers' in angular 상황 html 파일의 iframe 태그에 ViewChild를 걸고 ts 파일에서 this.receiver.contentWindow 를 작성하였고 화면 출력시에 에러가 발생하였다. @ViewChild('myiframe') myiframe: HTMLElement; 해결 @ViewChild의 HTMLElement를 HTMLFrameElement 로 변경하니 해결되었다. HTML Element 에 따라 정확히 지정해두어야 오류가 나지 않는 것이다. @ViewChild('myiframe') myiframe: H.. 2019. 12. 19. Angular 8 #사각형 내 점 판별 알고리즘으로 클릭 이벤트 설정하기 영역 외 클릭일 경우 해당 div를 zIndex로 숨긴다. (경우에 따라 다른 방법 가능) IE에선 zIndex를 숫자로 인식하는 현상이 있어 .toString()을 사용하였다. ============= html ============= button ============= ts ============= @ViewChild("_buttonRectangle", {static: false}) _buttonRectangle: jqxButtonComponent; @HostListener("click", ["$event"]) onClick(e) { var point = {x: e.clientX, y: e.clientY}; // 사각형 영역 var rect = this._buttonRectangle.nativeEl.. 2019. 11. 18. Angular #Lifecycle sequence HookPurpose and Timing ngOnChanges() Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change. Angular가 데이터 바인딩 된 입력 속성을 설정할 때 응답합니다. 이 메소드는 현재 및 이전 특성 값의 SimpleChanges 오브젝트를 수신합니다. ngOnInit () 전에 호출되고 하나 이상의 데이터 바인딩 된 입력 속성이 변.. 2019. 10. 31. Angular #jqxRadioButton [groupName] is not working 1 2 type1 type2 jqxRadioButton 에 [groupName]을 주었는데 모든 버튼이 하나로 묶이는 현상이 생깁니다. 해결 방법을 찾다찾다 우연히 찾게된 놀라운 방법... I gave jqxRadioButton [groupName] and all the buttons are bundled together. Finding a solution Amazing way found by accident ... - html 파일 - 1 2 type1 type2 - ts 파일 - @ViewChildren('_type1 _type2') _types : jqxRadioButtonComponent; ... //this._types._results.find(result=>result.val()) //선택 값.. 2019. 10. 22. Angular #자주 쓰이는 다섯 syntax Angular's template 자주 쓰이는 다섯 syntax 반복문 *ngFor : 컬렉션의 각 항목에 대한 템플릿을 렌더링하는 구조적 지시문입니다. 지시문은 요소에 배치되며 복제 된 템플릿의 부모가됩니다. ex) {{ product.name }} : products의 갯수만큼 반복 출력 조건문 *ngIf : 부울로 강제 된 표현식의 값을 기반으로 템플릿을 조건부로 포함하는 구조적 지시문입니다. 식이 true로 평가되면 Angular는 then 절에 제공된 템플릿을 렌더링하고, false 또는 null 인 경우 선택적 else 절에 제공된 템플릿을 렌더링합니다. else 절의 기본 템플릿은 비어 있습니다. ex1) condition 이 true면 객체 출력, false면 미출력 Description:.. 2019. 9. 12. Angular #Angular, AngularJS 차이점 *2019-09-12 AM12:21 기준 Angular, AngularJS 차이점 비교 Angular TypeScript 기반 TypeScript는 ES6의 상위 세트이며 ES5와 호환됩니다. Angular는 람다 연산자, 반복자 또는 리플렉션 메커니즘과 같은 ES6의 이점이 있습니다. Angular에는 범위 또는 컨트롤러 개념이 없습니다. 그 대신 구성 요소의 계층 구조를 주요 아키텍처 개념으로 사용합니다. 구성 요소는 템플리트가있는 지시문입니다. 이는 사용자 인터페이스 구축에 사용되는 또 다른 라이브러리 인 ReactJS와 유사한 접근 방식입니다. Initial release: 2.0 / 14 September 2016; 2 years ago Stable release: 8.2.4 / 28 Augus.. 2019. 9. 12. Angular #Create My First Project 1. Create Angular Project ＊[my-first-project] 은 사용자 정의 프로젝트명이 들어갑니다. $ ng new [my-first-project] $ cd [my-first-project] 2. Builds and serves your app, rebuilding on file changes 앱을 빌드합니다. $ ng serve 3. localhost:4200 Web browser에서 빌드된 프로젝트의 첫 화면을 접속합니다. ng serve 참고 사이트(EN) : https://angular.io/cli/serve 2019. 9. 10. Angular #Angular CLI 설치 Angular CLI 란? Angular CLI는 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)입니다. 개발용 서버를 내장하고 있어 프로젝트 실행 동작을 확인할 수 있습니다. Angular CLI 설치하기 $ npm install -g @angular/cli ※ 유의사항 node.js의 버전이 angular cli의 버전과 맞지 않을 경우가 있습니다. 그럴 경우 node.js와 npm의 버전을 최신버전으로 맞추고 진행합니다. ※ node.js 최신버전 업데이트 1. 지웠다 다시 깝니다. (제일 쉽고 확실한 방법.. 2019. 9. 10. 728x90 이전 1 다음 728x90
