전체 글302 반응형 폼(reactive form) 사용법 모음 1. FormControl을 단독으로 사용할 때 /* 컴포넌트 클래스 */ myControl = new FormControl(); 2. FormGroup /* 컴포넌트 클래스 */ myFormGroup = new FormGroup({ myControl: new FormControl(), mycontrol2: new FormControl() }) 3. 중첩된 FormGroup /* 컴포넌트 클래스 */ myFormGroup = new FormGroup({ formGroupA: new FormGroup({ myControlA: nwe FormControl(), myControlB: nwe FormControl() }), formGroupB: new FormGroup({ myControlC: nwe FormC.. 2023. 12. 19. HTML input element control 관련 // input type number에서만 보이는 위/아래 키 이벤트를 막아줄 수 있다. (숫자 조작 막음) // 자바스크립트없이, 사용자가 입력하는 string 값을 아래와 같이 oninput 이벤트 프로퍼티 안에서 정규식을 선언해 사용 가능하다! 2023. 12. 18. (기록용) 결합(combine/join)과 관련된 샘플 코드/상황 설명 1. mergeMap, forkJoin - Resolve를 통해 FOUC를 해결한 사례. 페이지에서 페이지로 이동할때 FOUC가 항상 발생한다. 페이지 랜딩 후 컴포넌트는 다양한 작업을 순차적으로 처리하는데 이때 초기값에 의한 초기상태가 사용자에게 잠시 비춰지게 된다. 불과 몇 밀리초에 불과하지만 상당히 거슬린다.프로젝트의 완성도가 낮아보이기도 한다.이를 해결하기 위해 앵귤러에서 제공하는 Resovlve를 사용했다.routerLink 또는 router.navigate 등, router로 이동할때 Resolve는 컴포넌트가 로드되기 전 필요한 작업들을 수행하는 것을 도와준다. Resolve를 사용해 미리 필요한 정보들을 받아온뒤 컴포넌트가 실행되기때문에 FOUC 상황을 피할 수 있다.즉, 컴포넌트가 로드.. 2023. 12. 8. RouterLink anchor scrolling. (fragment, anchorScrolling: enable) routerLink 또는 navigateUrl 등으로 이동 시 "fragment"를 사용해 페이지 랜딩 후 선택한 컨텐츠로 자연스럽게 스크롤 이동할 수 있는 방법이 있다. 1. 컴포넌트 템플릿 안에서는 RouterLink, 컴포넌트 클래스 안에서는 Rouer에서 제공하는 navigationUrl을 사용한다. 2. RouterLink로 이동경로(path)를 설정, fragment 프로퍼티추가해준다. 그리고 fragment에 특정값을 넣어준다. (fragment="targetElement") 3. 스크롤로 이동하고자하는 요소에 id 값을 fragment와 동일하게 해준다. 4. root 모듈에 RouterModule.forRoot 메서드에 2번째 인자로 anchorScrolling='enable'를 객체형태.. 2023. 12. 6. 컨텐츠 투사, content projection Content projection (컨텐츠 투사) "Content projection is a way to import HTML content from outside the component and insert that content into the component's template in a designated spot." 명함을 예로들어보자. 모든 정보를 담고있는 명함 종이를 Parent 컴포넌트라고 하자. 그리고 인적사항(이름/직함/이메일/주소/전화번호)이 적힌 부분은 Child 컴포넌트이다. 이름, 직함, 이메일, 주소, 전화번호는 각각 External Contents들이며 컴포넌트일 수도 있다. 이름 컴포넌트는 "김찬기", 직함 컴포넌트는 "사원", 이메일 컴포넌트는 "chanki@naver... 2023. 11. 23. routerLink로 이동 후 service에 저장된 Subject를 구독하지 않는 상황. (구독시점에 대한 이해) 흐름:1. my 컴포넌트 마운트, 서비스에 있는 Subject 변수에 값을 저장 →2. my컴포넌트에서 routerLink='./farms' 이동 →3. farms컴포넌트 init →4. share에 있는 Subject를 구독해 값을 받아오려 했으나 구독자체를 실행하지 않는 상황. 여기서 Subject는 'asObservable()'로 모든 컴포넌트가 같은 값을 받아볼 수 있도록 했다. // 서비스@Injectable({ providedIn: 'root'})export class UserFarmService { _userFarms = new Subject(); get userFarms$(): Observable { return this._userFarms.asObservable(); } .. 2023. 11. 23. 이전 1 ··· 4 5 6 7 8 9 10 ··· 51 다음
