How To Get Client IP Address in Angular?

How To Get Client IP Address in Angular?

In this post we will give you information about How To Get Client IP Address in Angular?. Hear we will give you detail about How To Get Client IP Address in Angular?And how to use it also give you demo for it if it is necessary.

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…

Hope this code and post will helped you for implement How To Get Client IP Address in Angular?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

20  +    =  30

We accept paid advance and paid guest Posting on our Site : Contact US