Spin Up An Angular Application
This tutorial won't cover Angular install and setup. The Angular CLI will guide you through the steps to create a basic Angular application.
Once the app is up, navigate to the root folder and start the server.
Visit https://localhost:4200 in the browser to see the app up and running.
Set Up Your HTML File
Open app.component.html and remove all the HTML tags except the two outermost <div>s and the <style> tags. Replace everything with a single <p> tag inside the <div>s.
Import the Httpclientmodule
Angular has a built-in HTTP client for sending REST requests. We’ll use this observable based abstraction to send a request to the geolocation API endpoint. The endpoint will send a response with the IP address of the device that sent the request, along with geolocation data for that IP address.
In order to use the Httpclientmodule, import it into app.module.ts.
The service file emits object import service modules for the rest of the application to use. The Angular part of setup is done. We’re now ready to send a request to the AbstractAPI endpoint.
Get Started With AbstractAPI
Navigate to the geolocation API homepage and click the blue "Get Started" button.
Get the Authentication Information You Need
Copy the URL for the API endpoint and the API key into variables in your component file (app.component.ts.)
Get the Client IP Address
The function that will handle sending the request to the API will be called getGeolocationData. Write it underneath the component ngOnInit function and call the function inside ngOnInit.
Inside the callback function for the Http object import service we are logging the data we receive from the geolocation API.
Handle the API Response
Let’s display the user’s IP address, city, region, and country in the browser. There are many other optional properties on the response object that would be useful in a real application, but for now we won't worry about those.
Render the API Data
We’ll create three variables called ipAddress, city, country, and region inside the app.component.js file, and initialize them all as empty strings. You can put them just below the variables you created for the api key and URL.
Once the request comes back from the API, update these three variables with the values from the JSON object. Pull the values out inside your getGeolocationData function and assign them to the variables.
Add the Variables to the HTML Template
Next, we’ll render those variables inside the <p> tag we created in app.component.html. Remove the placeholder text you added and replace it with a string that interpolates the four variables.
Go back to https://localhost:4200 to see your string rendered in the browser.
Conclusion
There is no single correct approach to getting a user position object in Angular. This article explored one easy way to get a user’s IP address and geolocation data for that IP address in an Angular app. We used the AbstractAPI free Geolocation API endpoint to do this.
FAQs
How Do I Get Geolocation in Angular?
One way to get geolocation information in Angular is to use the browser’s built-in Geolocation API. This is a read-only API with ubiquitous browser support that gives you access to the local devices' geolocation data, which includes the latitude and longitude coordinates of the user’s current position. The information is attainable through a method called getCurrentPosition, which returns a Geolocation Position object with the coordinate points.
What is Navigator Geolocation?
Navigator Geolocation is an API that is built into the browser and gives your web application access to the latitude and longitude of the device’s current position. Through it, you can observe user position. The Navigator geolocation API can be accessed by any app running in the browser, and a user position geolocation token is returned through a method called getCurrentPosition.
How Do I Get Geolocation API?
The Geolocation API is accessible through the Navigator object in the browser. It has widespread browser support. Any application running in the browser can access the Navigator object globally.
