Angular Package

Package Name: address-service-angular

What You Get:

• An Angular component for easy integration.
• A user-friendly form-like interface.
• Autocomplete functionality for the Address field.
• Automatic filling of address fields upon user selection.
• Modifiable fields for user data adjustments.ith a seamless experience to obtain addresses.

To preview the future appearance of the Angular Component, visit the following website: Address Service Angular Demo

Integration Steps:

1. Add Angular Material to your project:

   cmd

   ng add @angular/material

2. Install the required Axios library:

   cmd

   npm i axios

3. Install the address-service-angular package in your Angular project:

   cmd

   npm i address-service-angular

4. Import the AddressServiceAngularComponent in your Angular component:

   typescript

   import { AddressServiceAngularComponent } from 'address-service-angular';

5. Add the component to your Angular module imports:

   typescript

   @Component({
           imports: [RouterOutlet, AddressServiceAngularComponent],
   })

6. Add the component tag in your HTML file:

   HTML

   <lib-address-service-angular></lib-address-service-angular>

7. If you want to access/modify the selected adderess, then create a function and bind that function to component tag in HTML file like below.

   typescript

   <!-- Full Code -->
   import { Component } from '@angular/core';
   import { RouterOutlet } from '@angular/router';
   import { AddressServiceAngularComponent } from 'address-service-angular';
   
   @Component({
           selector: 'app-root',
           standalone: true,
           imports: [RouterOutlet,AddressServiceAngularComponent],
           templateUrl: './app.component.html',
           styleUrl: './app.component.css'
   })
   export class AppComponent {
           title = 'address-service';
           handleAddressChange(data: any) {
                   console.log('Received data from child:', data);
           }
   }
   HTML

   <lib-address-service-angular (onAddressChange)="handleAddressChange($event)"></lib-address-service-angular>