Get User Location In Angular | Geolocation API | Fix It With Ankit

hello everyone welcome to this video in this video we'll see how we can get user location in angular or using plain javascript so let's get started so there are two ways to get the user location the first one is using this api that is ipapi.com so let's start with this one so what i'll do is i'll just go back to the angular project and here inside source and then inside of app i'll go to appcomponent.ts and know what i'll do is i'll just create a service so i just type in ng e space s and then common which will create a common service for our api quotes i'll type in for no and now it is create so what we'll do is now we'll go to appmodule.ts and import a module that is http client mode now we'll have to import this module so what i'll do is i'll just import it http client module from at the rate angular slash common slash http now once this is done i'll just go back to the commonservice.ts and inside the constructor what i'll do is i'll just create a private property http of type http client and the http client got imported automatically so that is great so let's create a get location function so what i'll do is i'll just type in get location and then what i'll do is i'll just return this code that is this dot http.get and the url that we just saw what this code does is it just sends a get request to this api and then returns a response so what we'll do is we'll just copy the function name and we'll go back to the app component.ts now here what we'll do is we'll create a constructor and inside this constructor we'll get the instance of the common service so i'll just type in private service type common service now what i'll do is i'll just create a ngoninit function and also implement it in the class one in it and also import it from at the right angular pro now what i'll do is i'll just call the get location function from the common service here and here we can console log the response as well and also save it in a property so i'll just create a new property that says location of type any and we'll just add in the response to the location property now what we'll do is we'll go to the appcomponent.html so we don't need all of this so we'll just clear this let's type in h1 and we'll just type in current location [Music] and then in the paragraph tab we'll just type in the latitude which will be location.latitude and same for longitude [Music] and we can also get the city so location.city let's just save this and start our angular application so i'll just type in npm start to start the angular application so the angular application has been compiled successfully so let's go to the browser and check if it is working or not so i'll just go to a new tab and open localhost 4200 and here we can see we got the location that is latitude longitude and the city now if we go to our console we can see some errors right this is because the location property is set to undefined by default so what we can do is just add in null checkers here by adding in question mark before the dot so now if we save and we come here we see that we don't have any errors now inside the console we logged in the response here we also got the city country and country capital and other details as well so this is the advantage of this api that we get the ip address as well as the location of the use the next method is to use the navigator function of javascript so let's add that as well so i'll just go back to the code and here what we'll do is we'll create another variable location [Music] js of type any and here in the ngon in it what i'll do is i'll just type in navigator dot get location dot get current position and this will be a arrow function so what we'll get is we'll get the position property here let's console log it and also store it in the location js property now in the appcomponent.html what we'll do is we'll just replicate this the only disadvantage of this api is that we don't get any other parameters other than the latitude and the longitude so we'll just have to use that so i'll just change the location to location gs and save this and here what we'll do is we also get a position dot pods property that contains the latitude and longitude so we'll save that to the location.js property now we'll just save this and now let's go back and check it in the browser so now you can see we got a pop-up saying localhost 4200 wants to know your location this is because we are using the javascript navigator geolocation function now if i click on allow here we can see we got the latitude and longitude of the user so these were the two ways we can extract user location using angular or using plain javascript as well so if you got value from this video do hit the like button and for more such insightful content do subscribe to this channel thank you for watching [Music]

Channel: Fix It With Ankit

Views: 6,613

Keywords: geolocation, geolocation api, geolocation javascript, geolocation api javascript, geolocation api tutorial, html5 geolocation, javascript geolocation, ip geolocation, angular geolocation, angular user location, geolocation use in angular, geolocation in angular, html geolocation api, angular geolocation api, get user location javascript, angular location service, angular geolocation example, angular client location, user location, ip geolocation api, Fix it with ankit

Id: SRqAo0YAy2A

Length: 7min 38sec (458 seconds)

Published: Mon Sep 26 2022