ItSolutionStuff.com

How To Get Client IP Address in Angular?

By Hardik Savani • May 2, 2024
Angular

In this example, i will let you know how to get local ip address in angular application. we can simply get client ip address in angular 8 application. we can get system ip address using api.ipify api service.

we can easily get client ip address in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

in this example i will create simple getIPAddress() and using this method i will fire api and get current system ip address. you can see bellow component code for getting client ip address in angular 8 application.

You can see bellow full example step by step.

Step 1: Import HttpClientModule

In this step, we need to import HttpClientModule to app.module.ts file. so let's import it as like bellow:

src/app/app.module.ts

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

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

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

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

HttpClientModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 2: Get IpAddress

In this component file, you need to write code for getting ip address as like bellow. so let's write code on your component file.

Component File Code

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

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

@Component({

selector: 'app-blog',

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

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

})

export class BlogComponent implements OnInit {

ipAddress = '';

constructor(private http:HttpClient) { }

ngOnInit() {

this.getIPAddress();

}

getIPAddress()

{

this.http.get("http://api.ipify.org/?format=json").subscribe((res:any)=>{

this.ipAddress = res.ip;

});

}

}

Step 3: Display in View File

Here, in html file we will just print ipAddress. So you can copy bellow code:

HTML File Code

<p>{{ ipAddress }}</p>

Now you can run your application and check it.

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Material Checkbox Example

Read Now →

Angular Radio Button On Change Event Example

Read Now →

Angular Select Dropdown with Reactive Form

Read Now →

Angular Get Active Route URL Example

Read Now →

Angular Service with Httpclient Example

Read Now →

Angular Form Validation no Whitespace Allowed Example

Read Now →

Angular Get Parameters from URL Route Example

Read Now →

How to Get Query String from URL in Angular?

Read Now →

Angular Http Post Request Example

Read Now →

Angular Get Current Route Name Example

Read Now →

How to Get Current URL in Angular?

Read Now →

Angular Change Date Format in Component Example

Read Now →

Angular Font Awesome - How to install font awesome in Angular 9/8?

Read Now →