ng2-daum-address - npm install ng2-daum-address --save 설치
app.module.ts에 import시키키
import { NgDaumAddressModule } from 'ng2-daum-address';//다음주소
imports: [
KakaoMapsModule
],
html에 작성
<!-- Zip-Code -->
<div class="col-md-8">
<h5>우편번호 <i class="fa fa-asterisk" data-tip-content="우편번호"></i></h5>
<input class="zip-input" type="text" [(ngModel)]="zip" value="{{zip}}" >
<btn-daum-address (result)="setDaumAddressApi($event)" [options]="daumAddressOptions" ></btn-daum-address>
</div>
<!-- Address -->
<div class="col-md-12">
<h5>주소 <i class="fa fa-asterisk" data-tip-content="주소"></i></h5>
<input type="text" [(ngModel)]="address">
</div>
<!-- City -->
<div class="col-md-12">
<h5>나머지 주소</h5>
<input type="text" [(ngModel)]="addressdetail" #myInput (click)="addrFocus()">
</div>
ts파일에 작성
//다음 주소
daumAddressOptions = {
class: ['button']
};
//다음주소 반환
setDaumAddressApi(data){
console.log(data)
// 여기로 주소값이 반환
this.zip = data.zip; //우편번호
this.address = data.addr; // 주소
this.myInput.nativeElement.click();
}
//주소 검색 후 나머지 주소 포커스
addrFocus(){
this.myInput.nativeElement.focus();
}