I have created an HTML file where I aim to automatically fill in the DISTRICT, STATE, and CITY fields once a user enters the PIN CODE. The data will be fetched using an API.
The API link is:
<div class="cardParts5">
<div class="cardTitle">
Communication Address
</div>
<div class="addressContainer">
<div class="field1">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>Pin Code*</mat-label>
<input matInput maxlength="6" [(ngModel)]="pinCode" name="pinCode">
<button (click)="getAdd(pinCode)">home</button>
</mat-form-field>
</div>
<div class="field2">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>State*</mat-label>
<input matInput>
</mat-form-field>
</div>
<div class="field3">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>District*</mat-label>
<input matInput>
</mat-form-field>
</div>
<div class="field4">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>City/Village*</mat-label>
<input matInput>
</mat-form-field>
</div>
</div>
</div>
This snippet of code belongs in my component.ts file:
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-final-pay',
templateUrl: './final-pay.component.html',
styleUrls: ['./final-pay.component.css']
})
export class FinalPayComponent implements OnInit {
pinDetails:any;
finalAddress:any;
public pinCode = '';
constructor( private httpClient: HttpClient ) { }
ngOnInit(): void { }
getAdd(pinCode){
this.http.get(`https://api.postalpincode.in/pincode/${pinCode}`).subscribe((val)=>{
this.pinDetails = JSON.stringify(val);
this.finalAddress = JSON.parse(this.pinDetails);
console.log(this.finalAddress);
});
}
If you have any insights on how to resolve the issue of handling the API response in the finalAddress variable, please provide your guidance. Thank you!