Hi Dev,
In this article, i will let you know how to get ip address in angular 8 application. i will learn you to getting ip address in angular. we will get client ip address using angular code.
we will get client ip address using api.ipify.org api in angular 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.
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...
Do you like below Tutorials ?
- CRUD Laravel 7.x and 6.x Example
- Image Upload Laravel 7.x and 6.x Tutorial
- Laravel 7.x and 6.x Delete File from public folder example
- How to delete directory in Laravel 7.x and 6.x?
- How to create directory if not exists in Laravel 7.x and 6.x?
- Laravel 7.x and 6.x get all files in directory example
- Laravel 7.x and 6.x check file exists in folder example
- Ajax Autocomplete Textbox in Laravel 7.x and 6.x Example