{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/angular-get-the-ip-address-of-the-user","result":{"data":{"markdownRemark":{"id":"0519878d-1223-5e59-a4c4-48adef1bfdb3","html":"

In this short blog post, I will show you how to get the ip address of the user.

\n
_I'm using v5 for this tutorial. If you are using v2/v4, just replace the HttpClient with just Http._
\n

Here it goes:

\n
import { Component } from '@angular/core';\nimport {HttpClient} from '@angular/common/http';\n@Component({\n  selector: 'my-app',\n  templateUrl: './app.component.html',\n  styleUrls: [ './app.component.css' ]\n})\nexport class AppComponent  {\n  ipAddress:any;\n  constructor(private http: HttpClient){\n    this.http.get('https://jsonip.com')\n    .subscribe( data => {\n      this.ipAddress = data.ip;\n    })\n  }\n}
\n

This should work now. Though the code editor is telling me that this line

\n

this.ipAddress = data.ip;

\n

is wrong.

\n

Looking at the official docs for the http client, I need to tell the httpclient what the type response will be so  I will create an interface with just a ip property of string.

\n
interface ItemsResponse {\nip: string;\n}
\n

And add it like this

\n
this.http.get<ItemsResponse>('https://jsonip.com')
\n

That’s it.

\n

Thanks for reading.

\n

Here’s the stackblitz demo

","fields":{"slug":"posts/angular-get-the-ip-address-of-the-user","tagSlugs":["/tag/angular/"]},"frontmatter":{"date":"2017-11-27T01:27:27.000Z","description":"In this short blog post, I will show you how to get the ip address of the user.","tags":["angular"],"title":"Angular - Get the ip address of the user"}}},"pageContext":{"slug":"posts/angular-get-the-ip-address-of-the-user"}},"staticQueryHashes":["251939775","401334301","4072520377"]}