ng2-daum-address
앵귤러4를 위한 다음 주소 검색
설치
yarn add ng2-daum-address1.1.1버전부터 안정적으로 사용하실 수 있습니다. 1.1.3버전부터 앵귤러4를 이용하셔야합니다.
사용법
NgDaumAddressModule를 app.module.ts에 임포트:
import { NgDaumAddressModule } from 'ng2-daum-address';
@NgModule({
...
imports: [
...
NgDaumAddressModule,
],
})
export class AppModule { }템플릿에서 btn-daum-address 컴포넌트를 아래처럼 추가:
<btn-daum-address
(result)="setDaumAddressApi($event)"
[options]="daumAddressOptions"
></btn-daum-address>가져온 컴포넌트.ts 에서 설정:
daumAddressOptions = {
class: ['btn', 'btn-primary']
};
setDaumAddressApi(data){
// 여기로 주소값이 반환
console.log(data);
}popup형태가 아닐 경우 아래의 Element를 ParentComponent에 넣어야합니다.
layer
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div
id="layer"
style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;"
>
<img
src="//t1.daumcdn.net/localimg/localimages/07/postcode/320/close.png"
id="btnCloseLayer"
style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1"
alt="닫기 버튼"
/>
</div>inline
<div
id="wrap"
style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"
>
<img
src="//t1.daumcdn.net/localimg/localimages/07/postcode/320/close.png"
id="btnFoldWrap"
style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1"
alt="접기 버튼"
/>
</div>옵션
- type?: String => layer|inline|popup (default popup)
- target?: String => layer, inline 타입시 embed할 요소의 ID값 (위 소스에서 layer, wrap)
- width?: Number => layer 타입시 가로크기
- height?: Number => layer 타입시 세로크기
- border?: Number => layer 타입시 테두리 크기
- class?: Array|String => 클래스 부여
- debug?: boolean => 디버깅 모드
자세한 예제는 여기서 확인 가능합니다.