How to create a weather Widget in Angular | Open Weather API | For Beginners

foreign in today's video we are going to create a small application a weather API in angular so let us start I have created a folder weather app angular and inside that I am going to create a new project that is NG new weather okay so I have selected the CSS page as uh I have selected the style sheet as CSS here and I'm going to create my project now the project has been created let us just run this and see so we will type NG server okay foreign the project is running and now let us go to the Local Host uh four two double zero that is the port number so let us go to this uh let us just click on this URL and see what is happening now let us create a new service for that I am typing n g g s Service weather so this will create a weather service for us so NG space g space s that is the short form for service weather now once a service is created we have we are going to use the open Weather API for that you have to go to the site for open Weather API and you have to log in with your account foreign so I already have an account here so with my credentials I'm logging into the weather API website and here you can go to the current weather data API and this is the site and once your account is created the an API key will be generated so let us use a URL which if you scroll down you can see a URL where you can give the city name and uh the API key then you will get the weather of that City at that time so that is how it works now we are going to use the same URL here that is we are going to give the input as City and we are going to find the weather of that City at that particular time so let us start inside the service class that is Weather Service we are we first we will write the API key that we has and we are going to create a get weather method and so we are giving the city as the input and we we will uh copy the API call here so I am directly passing the URL and instead of the city I am passing the city variable here and for the API key whatever API key we have I'm going to pass that as well as well now we have to add the HTTP client module inside our app dot module class otherwise uh the HTTP will not be supported so now we will just run this and see so we have created the service so before running it we have to create a another component so I'm going to create another component called weather so NGC weather and there will be three files one is a HTML file another is a typescript file and another is a CSS file now if you go to the app modules and see you can see that the weather component is registered I am going to register my Weather Service as well so inside the weather component HTML file I am creating a form where we will take the input as a city so I am creating a text box placeholder will be an Intercity name and I'm creating an NG model with City so this is for two-way binding we are using NG model and we will create a button so as soon as you submit this button you will get the weather of taxity so that is the idea so once we click on the button the get weather method will be triggered so we have to create the same method in our typescript class of the same component now we are listing what all we need uh to be printed so if there is weather data we we will print the some of the weather properties so first we will complete the typescript class so I am creating a variable called City with type string and another variable weather data now inside the Constructor I am calling my Weather Service thank you now I am creating a weather a get weather method and I am calling the get weather method of my service class so I'm typing like what all parameters I need it or whatever properties like I I need the temperature humidity and the description of the weather in that particular City so I'm uh writing all of that here so all this comes from the weather API website and CSS I'm not giving anything for now now let us just run this application and see what happens so now when we click on the button we are getting the result so if I give Bangalore I am getting the temperature humidity and the description so if you see the API these are the properties that we get now let us try to add the CSS let us try to make our application more beautiful and add a little bit of CSS so inside my CSS page that is in the CSS part I'm adding the height and width and giving a color that is giving a box for this for the Deep container I am giving the these properties now let us just uh check if these are already applied no so let us see what is the yes so now uh the changes are being applied now let us adjust the height and width and we will change the background color it is not looking good now this is how reply how our application looks now let us add some font awesome icons so this is the uh command to add the font font awesome that is where I'm adding the NG add fond awesome here so this will add all the necessary um so it will ask us what type of icons do we want I'm adding the free solid icons so these are the icons that are added into our project now let us search for some icons like I wanted a sun and rain and Cloud Ike icon so I'll just type that so I I got one now let us add this into our component we need to add this inside the typescript file as well as the HTML file now I'm adding a temperature icon so since I have added the freeze all SVG icons I I get only that you can add even more if you want so near to my temperature uh near to that I am adding this temperature icon so now the icons are being added foreign for humidity let us see if we get something so I'll try to add this droplet slash icon for humidity I could not find anything else so I'll copy paste the same and add the change the name of droplet Slash and save this let us see if it is working fine yes we have completed our weather with get application in angular I hope you enjoyed watching this video please do try this out and if you have any doubts please uh Link in the comment section I'll reply to your doubts so if you like this please do support my Channel Please Subscribe and hit on the like button so that it encourages me do share this video with everyone thank you we'll be back with another exciting video next week till then bye bye

Channel: Web Genie

Views: 6,290

Keywords: Web Genie, web development for beginners, html css javascript angular, web development project ideas, weather app angular, open weather api, angular app for beginners, weather widget in angular

Id: vtXQUBBk928

Length: 14min 3sec (843 seconds)

Published: Sun Mar 26 2023