hsunny study blog

인터폴레이션으로 값을 표시하기 이중 중괄호로 감싼 표현 방법 {{ }} // src/app/app.component.ts currentCustomer = 'Maria'; Current customer: {{ currentCustomer }} 위의 경우에서 화면에 출력되는 값은 `Current customer: Maria`이다. 이미지의 속성 값으로 넣는 것도 가능하다. // src.app/app.component.html 템플릿 표현 인터폴레이션 표현으로 해결하기 앵귤러는 {{ }} 안을 먼저 평가한 뒤에 결과물을 string 형태로 변경한다. The sum of 1 + 1 is {{1 + 1}}. 메서드를 호출하는 것도 가능하다. The sum of 1 + 1 is not {{1 + 1 + getVal..

IONIC에서 기본적으로 제공하는 range 값은 정수형입니다. ion-range로 소수점을 조절할 경우가 필요할 수 있는데요, 이러한 경우에 유용하게 사용할 수 있습니다. 사용예 min, max: range의 최솟값, 최댓값 pin: 사용자가 설정한 값이 노출되도록(손가락을 왔다 갔다 하면 현재 내가 선택한 값이 뭔지 보입니다.) step: 조절되는 값 (여기서는 0.5씩 조절합니다) _ngModel: weight의 기본값으로 설정하기 위해서 사용 changedValue: 사용자가 변경하는 대로 weight의 값을 변경하기 위해서 사용 float-range 컴포넌트를 위와 같이 사용할 수 있습니다. 그렇다면 float-range 컴포넌트는 어떻게 만들어야 할까요? FloatRangeComponent 1..

템플릿 참조 변수(#) 란 템플릿 요소 내에 있는 DOM 요소를 참조합니다. 또한 directive ( component를 포함하는 ), 요소, TemplateRef 또는 웹 컴포넌트를 참조할 수도 있습니다. 사용예 위와 같이 사용한 값은 아래와 같이 활용할 수 있습니다. Call 특징 1. 템플릿 참조변수 (#phone) 는 input 변수 (let phone)와는 다릅니다. 2. 참조 변수의 범위는 전체 템플릿입니다. 따라서 하나의 템플릿 안에서 템플릿 참조변수명은 두개 이상 사용되어선 안됩니다. 3. # 대신에 ref-를 사용하는 것도 가능합니다. 더 자세한 설명은 공식사이트를 확인해주세요. https://angular.io/guide/template-syntax#template-reference-..

서버의 통신을 받고 Component에 데이터를 뿌려 화면의 초기화를 진행합니다. 초기 셋팅이 완료된 화면에서 사용자의 액션에 따라 데이터의 값과 화면의 UI가 변경되어야 하는 경우(동기화)가 있습니다. 변경에 따른 이벤트를 단순히 EventEmmiter 를 이용한 Output 과 Input 만으로 Parent와 Child Component 간의 데이터 처리를 하는데에는 한계가 있었습니다. angular change detection 를 구글링 하면 여러 해결 방법들이 나옵니다. ngZone , onChange() life cycle, DoCheck() life cycle, ChangeDetectionStrategy 등이 Change Detection 방법입니다. 찾아보면서 학습한 내용을 공유합니다. :..

pluck 각 객체에 지정된 중첩 속성에 매핑합니다. (말이 어려우니 예제로 보면) pluck(...properties: string[]): OperatorFunction 가족 정보를 출력하는 family Observable이 있습니다. 이 중에서 role에 해당하는 값만 뽑아서 반환하고 싶다면, pluck를 이용해서 아래와 같이 코드를 짤 수 있습니다. return result = family$.pipe( pluck('role') ); result를 구독(subscribe)해야 원하는 값을 받을 수 있습니다. result.subscribe(val => console.log(`역할: ${val}`)); 이렇게 하면 val로 'role'에 해당하는 값들이 걸러져서 출력됩니다. 역할: 엄마 역할: 아빠 역할..