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:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
  declarations: [
  imports: [
  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';
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
export class BlogComponent implements OnInit {
  ipAddress = '';
  constructor(private http:HttpClient) { }
  ngOnInit() {
      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