hsunny study blog

@angular/core 안에 존재하는 API로 DOM 속성을 호스트 바인딩 속성으로 표시하고 구성 메타데이터를 제공하는 데코레이터이다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 검사하고 바인딩이 변경되면 디렉티브의 호스트 요소를 업데이트한다. 사용 ngModel 디렉티브가 있는 DOM 요소에 valid와 invalid 속성을 설정하는 디렉티브 @Directive({selector: '[ngModel]'}) class NgModelStatus { constructor(public control: NgModel) {} @HostBinding('class.valid') get valid() { return this.control.valid; } @HostBinding('class.inv..

이벤트 바인딩 passive 이벤트 바인딩 Angular는 passive 이벤트 리스터를 지원한다. 아래대로 따라하면 스크롤 이벤트를 passive하게 사용가능하다. 1. src 폴더 하위에 zone-flags.ts 파일을 만든다. 2. 아래 코드를 파일에 추가한다. (window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];​ 3. src/polyfilles.ts 파일에 zone.js 를 import 하기 전에 새로만든 파일인 zone-flag.ts 를 import 한다. import './zone-flags'; import 'zone.js'; // Included with Angular CLI.​ 위 과정을 모두 마치면 scroll 이벤트를 위한 이..

문자열, 통화, 일자와 같은 데이터를 원하는 형태로 바꾸기 위하여 파이프를 사용한다. Angula는 기본 파이프를 제공하며 이외에 데이터를 변환하는 로직이 별도로 필요하면 커스텀 파이프를 만들어서 사용할 수 있다. 템플릿에 파이프 사용하기 1. 문자열 바인딩 문법({{}}) 안에 작성한다. 2. 표현식의 오른쪽에 파이프(|)를 적고 파이프 이름을 적는다. Wait for it... {{ greeting | async }} 파라미터와 체이닝 파이프로 데이터를 변경하기 파라미터 사용 파이프의 결과물을 조정하기 위해 추가적인 파라미터를 사용할 수 있다. 추가적인 파라미터를 사용하기 위해서는 콜론(:)을 붙여서 전달할 값을 작성하면 된다. 아래 예제는 CurrencyPipe 를 사용하는 예이다. 더보기 Curr..

인터폴레이션으로 값을 표시하기 이중 중괄호로 감싼 표현 방법 {{ }} // 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..

템플릿 참조 변수(#) 란 템플릿 요소 내에 있는 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 방법입니다. 찾아보면서 학습한 내용을 공유합니다. :..

http 통신을 위해 사용했던 @angular/http 는Deprecated in favor of @angular/common/http.@angular/common/http를 위해 deprecate 되었습니다.*새로운 API는 Angular 4.3.0 이상의 버전에서 사용 가능합니다. 새로운 API는 아래와 같이 개선되었습니다. 1. JSON 포맷 형식의 데이터를 object 형식으로 자동 변환해줍니다. 2. HttpClient 가 리턴하는 객체의 타입을 지정할 수 있습니다. 3. 요청을 보내거나 받을 때, 이벤트를 발생시킬 수 있습니다. 4. Header 설정을 위한 syntax가 간결합니다. 5. HTTP 인터셉터가 추가되었습니다. HTTP 요청에 인증토큰헤더를 추가할 수 있습니다. HttpClien..