범데이의 개발노트 📄

로드할 컴포넌트와 선택적인 config object를 파라미터로 주어 open 메서드를 호출하면 다이얼로그가 열린다. 이 open 메서드는 MatDialogRef의 인스턴스로 반환된다. let dialogRef = dialog.open(UserProfileComponent, { height: '400px', width: '600px', }); MatDialogRef는 열린 다이얼로그를 조작할 수 있게 제공한다. 이는 dialog를 닫고 다이얼로그가 닫혔을때 알림을 받을수 있도록 사용할 수 있다. 모든 알림 Observables는 다이얼로그가 닫힐때 발생된다. dialogRef.afterClosed().subscribe(result => { console.log(`Dialog result: ${result..

1. EventEmitter란? @angular/core EventEmitter @Output 디렉티브와 함께 컴포넌트 내에서 사용하여 사용자 정의 이벤트를 동기식 또는 비동기식으로 내보내는 역할을 하고, 해당 인스턴스를 구독하여 해당 이벤트에 대한 핸들러를 등록한다. class EventEmitter extends Subject { constructor(isAsync?: boolean): EventEmitter emit(value?: T): void subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription } 2. 사용 예제 먼저, 아래와 같이 "processStart", "..

1. 설치환경 본 문서는 다음과 같은 환경을 기준으로 작성되었다. 1) 운영체제 : 우분투18.04 버전 2) 사용자 계정 권한 : 관리자. 관리자 계정이 아닌경우 각 명령어 앞에 "sudo" 를 포함해서 실행. 2. 사전 조건 Angular 버전 v9.0.7 를 설치하기 위해서는 NodeJS(v10.13.0 이상)와 NPM(v6.11.0 이상)이 설치되어있어야 한다. 다음은 NodeJS와 NPM 설치를 설명한다. 1) NodeJS 설치 Angular공식 문서(https://angular.io/guide/setup-local) 에는 node 10.13.0 버전 이상 버전 사용을 요구 하고 있고, 본 문서에서는 12.16.1 LTS(Long Term Support) 버전을 설치하는 것을 기준으로 한다. 가..

div의 클래스에 (level != '1' || !isCreate) 라는 조건을 주어 참이면 'active disalbed', 거짓이면 'active' 를 먹일 수 있다. 혹은 'disabled' 만 따로떼어내어 [class.disabled] 이런식으로 조건을 검사하여 참일 시에만 적용할 수도 있다. public level: number = 1; public isCreate: boolean = true; (관련 ts 변수)

1. 개요 퍼블리싱 업체로부터 jquery 소스를 받았는데, 분명 함께받은 html 웹페이지에서는 jquery가 작동 했으나, 정작 진행중인 프로젝트에 반영을 하니 적용되질 않았다. $(document).ready(function(){ $('.selectbox .active').click(function(){ //...Some codes... }); }); 2. 해결 그래서 무엇이 원인인지 찾아보니, Angular의 기본적인 특성과, Life cycle에 관련이 있다는것을 깨달았다. Angular는 SPA(Single Page Application)으로, 처음 웹 페이지를 켰을때 document가 ready되고, 이 시점에 바인딩 대상 DOM이 ("selectbox", "active") 가 존재하지 않고..