Study Note/Angular19 728x90 ionic 5 #Modal Controller 추가하여 사용하기 modal.page.ts 준비 import { Component, Input } from '@angular/core'; import { NavParams, ModalController } from '@ionic/angular'; @Component({ selector: 'app-modal', templateUrl: './modal.page.html', styleUrls: ['./modal.page.scss'] }) export class ModalPage { @Input() something1: string; @Input() something2: string; constructor(private navParams: NavParams, private modalCtrl: ModalController) { c.. 2019. 12. 3. 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. jqWidgets #jqxButton routerLink 2019. 11. 5. 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. 이전 1 2 다음
