Guides
Last updated
August 3, 2023

Angular Geolocation

Elizabeth (Lizzie) Shipton

Table of Contents:

Get your free
IP Geolocation
API key now
4.8 from 1,863 votes
See why the best developers build on Abstract
START FOR FREE
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
No credit card required

Geolocation—the process of determining user location through the information available on the internet—is incredibly useful in today’s world. Most apps, even those that you wouldn’t expect to need access to a user’s position directly, use geolocation in some form or another to track position.

In this article, we'll write a basic Angular app that will determine the user’s IP address and current location using the AbstractAPI Free Geolocation API.

Let’s send your first free
IP Geolocation
call
See why the best developers build on Abstract
Get your free api

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.



$ ng new geolocation-app

Once the app is up, navigate to the root folder and start the server.



$ cd geolocation-app

$ ng serve

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.








  

This is where we'll show our IP





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.



import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }


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.)



api_key = 'YOUR API KEY';

url = 'https://ipgeolocation.abstractapi.com/v1/?api_key=' + this.api_key;

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.



import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'geolocation-app';

api_key = 'YOUR API KEY';

url = 'https://ipgeolocation.abstractapi.com/v1/?api_key=' + this.api_key;



constructor(private http:HttpClient) { }



ngOnInit() {

this.getGeolocationData();

}



getGeolocationData()

{

this.http.get(this.url).subscribe((res:any)=>{

console.log(res.data)

});

}

}

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.





api_key = 'YOUR API KEY';

url = 'https://ipgeolocation.abstractapi.com/v1/?api_key=' + this.api_key;

ipAddress = ‘’;

city = ‘’;

region = ‘’;

country = ‘’;



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.



this.http.get(this.url).subscribe((res:any)=>{

this.ipAddress = res.data.ip_address;

this.city = res.data.city;

this.region = res.data.region;

this.country = res.data.country;

});

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.







  

Hello! Your IP address is: {{ipAddress}}. You live in {{city}} in {{region}}, {{country}}







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. 

Elizabeth (Lizzie) Shipton

Lizzie Shipton is an adept Full Stack Developer, skilled in JavaScript, React, Node.js, and GraphQL, with a talent for creating scalable, seamless web applications. Her expertise spans both frontend and backend development, ensuring innovative and efficient solutions.

Get your free
IP Geolocation
key now
See why the best developers build on Abstract
get started for free

Related Articles

Get your free
IP Geolocation
key now
4.8 from 1,863 votes
See why the best developers build on Abstract
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
No credit card required