본문 바로가기

Study Note/Angular19

728x90
ionic 5 #ion-select close event 셀렉트박스 닫힘 이벤트 태그의 Events 중 닫힐 때마다 체크할 수 있는 이벤트가 존재하지 않아 해당 효과를 내도록 임의로 만든 소스를 공유합니다. 3depth로 이루어진 셀렉트박스를 연계하여 열리도록 한 소스입니다. 첫번째 셀렉트박스의 ionChange 이벤트에 해당 객체 focus 처리를 합니다. 그럼 ionFocus 이벤트가 다음 셀렉트 박스를 오픈시키는 것이죠. import { IonSelect } from '@ionic/angular'; ... @ViewChild('_categoryCCM') _categoryCCM: IonSelect; @ViewChild('_categoryCCS') _categoryCCS: IonSelect; ... onChangeA(): void { this._A.ionFocus; } onChan.. 2020. 7. 8.
Angular 8 #error:“moment” has no exported member 'default' Angular Material 의 Datepicker with custom formats 샘플 소스를 테스트 하는 중 발생한 에러이다. https://material.angular.io/components/datepicker/overview import {default as _rollupMoment} from 'moment'; 의 default 에서 빨간 밑줄이 그어지며 “moment” has no exported member 'default' 라는 에러가 출력되고 해결 방법은 아래와 같다. tsconfig.json파일의 "compilerOptions" 에 "allowSyntheticDefaultImports": true, 한 줄을 추가한다. 출처 : https://stackoverflow.com/que.. 2020. 5. 12.
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 #ExpressionChangedAfterItHasBeenCheckedError ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'display: none'. Current value: 'display: block'. 앵귤러에서 dom의 변화를 감지하도록 해야 해결된다. import { Component, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'sample', template: ` ` }) export class Sample{ public display = 'none'; constructor(private cdr: ChangeDetectorRef) {} present.. 2020. 4. 27.
ionic 5 #remove ion-item activated css event ion-item 태그의 클릭 이벤트 중 배경이 회색처리되는 현상을 지우기 위해 css style 을 직접 부여하였다. 참고사이트 : https://forum.ionicframework.com/t/ionic-4-remove-list-item-default-click-animations/161956 2020. 2. 17.
ionic 5 #이 시스템에서 스크립트를 실행할 수 없으므로... 에러해결 VSCode 의 터미널(Terminal)로 ionic serve 를 실행하려 하였으나 에러가 떴다. PS C:\vscode_workspace\imcha-app> ionic serve ionic : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\MING\AppData\Roaming\npm\ionic.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Polici es(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + ionic serve + ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException Windows PowerShell 의 보안 정책.. 2020. 1. 24.
Ionic 5 # [Android] Can not add task ': processDebugGoogleServices'as a task with that name already exists 개발환경 : ionic, android FCM 가이드를 따라 추가한 뒤 뜨는 에러 Can not add task ': processDebugGoogleServices'as a task with that name already exists 플러그인이 중복되어 나오는 에러였다. build.gradle 파일의 apply from 중 중복된 fcm 플러그인 소스를 주석처리하여 해결하였다. 참고 사이트 : https://cpoint-lab.co.jp/article/201808/5080/ 【Android】「Cannot add task ‘:processDebugGoogleServices’ as a task with that name already exists.」エラーの対処法 本日遭遇したエラーの対処法です。 状況はという.. 2020. 1. 16.
ionic 5 #staticInjectorError(AppModule)[UniqueDeviceID] ionic 의 unique-device-id 를 사용하고자 한 ts 파일에 import 하니 나온 에러.. staticInjectorError(AppModule)[UniqueDeviceID] app.module.ts 의 providers 에 추가하여 해결하였다. import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx'; @NgModule({ ... providers: [ ... UniqueDeviceID ], bootstrap: [AppComponent] }) export class AppModule {} https://ionicframework.com/docs/native/unique-device-id 2020. 1. 14.
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.
ionic 5 #keypress is not working in Android 안드로이드 폰에서 keypress 가 먹히지 않는 이슈를 발견하였다. 숫자/문자 입력 이벤트를 잡기 위해 keypress대신 ionInput 으로 사용하고 Backspace나 Enter 같은 이벤트를 잡기 위해 keyup을 사용하였다. ion-input 의 value를 유효성 체크하여 값을 비우거나 유지하는 이벤트는 onChange로 사용하였다. 추가 작성. ionic 의 input event 는 속도가 너무 느리다! 속도 개선을 위해 ion-input를 지우고 숫자 키패드를 ion-grid로 출력해 터치 이벤트를 잡아 변수에 담아두는 방식으로 교체했다. 2019. 12. 16.