Fetching User IP Address And Geolocation In Angular Application

hi everyone today we are going to discuss on fetching the user ip address and the user geolocation so we will use the angular sampler application where we are going to demo the fetching geo location and the fund ip address so this is my sample application i have already created i have created with the latest angular version that is angular 11 okay angular 11 so [Music] to fetch the user ip address to know the user public ip address there are lot of free apis are there to fetch the api in that i am going to use json jsonip.com so this is going to gives us our uh json public ip user ip this is my user ip if you want you can check for docs also by clicking here if you if you are facing any cross origin issues like that you can check here the documentation is simple and uh sample api documentation and it is free fully free api and there are a lot more others if you want you can google and use them as well here i am using the json ip so for that i am going to call my i am going to call this external api in my sample angular application for that first i need to import http client module so i am importing http client module to make the client api calls so import the module okay we have imported the http client module now i am going to use the existing app component.ts file only for this sample and also i am going to inject the http client within the app component only for demo purpose i am injecting here and for real time approach please make sure to write a separate file like app.con app.component.service.tx5 for demo purpose i am injecting here import from the retailer slash common slash http we are going to get http client okay inject into our constructor and here i am going to create a variable like user ip i want to store it in this variable once i receive the ip address so i am going to create a method like load user info okay in this i am going to invoke this jsonp api call for that i am going to write it is a simple get api call just copy the url and subscribe the response response that id okay make it any also capture the error just i will do console log here okay and i want to load this api in application load so i will use onit lifecycle so here i am going to call my api method so let me bind this data in my html right so let's check the output okay is my mistake not it is ip not id see now i got my ip address okay using this ip address we are going to fetch the user location for example this application is running in my local right using this ip address i am going to use another external api that's going to fetch my region address and everything local everything will be fetched from the that ip so for that i am going to use another api like ip stack okay this ip stack is is apa that brings me all the data required for the switching the api okay so you use the geo location can be you page from using this api call so for that you need to register and login here we have several different plans also like if you go for subscription plan you can find we have free plan also free plan is a 10 000 request per month so if you if your application is very small one the free one is might be enough if you want more requests per month or more functionalities are more secureness or more more additional futures along with that api you need to go for the subscription plan okay here i am going here i am using the free plan so this is my dashboard here this is my api go for documentation okay so this is the api format okay within the path we need to specify our ip address okay and here we need to pass the api key that is available in our dashboard so i am just copying this url let me prepare here only let url so this is our geolocation api okay here we need to pass our ip address dynamically and here we need to pass our uh what i can say our authentication key which is available on dashboard for that i am going to update this code as using pipe i will use rxj.js operator switch map operators switch map okay inside it this switch map what it will do it will uh change the observable change the observer nothing but here i am having two asynchronous call one is getting the ip address another one is getting the ga location right so after i p and after getting the ip address i want to invoke the my api apa ipstack.com api to get the fetch location so switch me up what it will do it will purchase the observer my first observer is jsnip where i will get the result result of my ip address once i got that result i switch map immediately switches the observable so instead of the switch map we need to return new observable so that result will be subscribed here so let me implement that logic which means map can read values from the first observable like this and inside of this i need to return a new observable nothing but a new api call okay see what we did here here our this is one observable okay our first api where it will return our ip address once i got ip address in the pipeline what i did i am switching the uh i'm switching to another observable okay see here my another observable will be this api call i will call here this api call i am also using the first observable value so finally i am capturing the this observable result okay so here i am going to use cut here okay and let make it dynamic ip address i can use string interpolation value dot ip and here i am going to paste my ip address they don't use mine i can i will reset later now when i will resetting it will reset sorry let me copy it after demo i will raise it if you use mine also won't work so please create your own okay instead of writing here we will write here itself okay change it to value and here i am going to console all my geolocation data object okay that's it i think we are done let's make it any and let's refresh the page so i am getting ap api call is working and if you go to console here i am getting some error i think okay i haven't passed the url here sorry so let's save again and refresh the page and go for console now you see here here is our api call okay these are all my locations let me refresh it again see on the project and your location and your ip address okay this city and ip address will be sometimes very okay nearest location will be taken so you can have everything here like code i am in andhra pradesh my act unzip code as well nearest zip code if possible or sometimes it will give accurate only sometimes it will purchase the nearest chip code okay and country so everything here languages so that's all about the using ip address and the tracking the geo location of the user so that's it i think this video has delivered some useful information to you all if you like my video please subscribe to my channel see you soon with new videos until then signing off

Channel: Naveen Bommidi Tech Seeker

Views: 6,797

Keywords:

Id: Kl96TLTqEzo

Length: 15min 42sec (942 seconds)

Published: Fri Dec 25 2020