How To Get Client IP Address in 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 and angular 9 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…

Add a Comment