Angular Project Tutorial - Build an Angular Weather App From Scratch - Open Weather API Tutorial

👉 Build Amazing Apps With ANGULAR and ASP.NET Core REST API

👉 Build ASP.NET Core Web API - Scratch To Finish

👉 ASP.NET Core Razor Pages - Scratch to Finish

In this video, we will build an Angular full-stack weather app with Angular 13 and we will use a public API from RapidAPI.COM to get live weather forecast values.

This will be an amazing tutorial in which you will learn how to call APIs from Angular and how to use services.

This is going to be an amazing Angular 13 tutorial in which you will build an Angular app from scratch.

In this Angular project, we will connect our Angular application to a Public API.

This video is also a great open weather api tutorial. We will connect the open weather api to our Angular application and will get live weather data for cities.

This can also be one of your angular beginner projects.

We will also use Angular forms to get the user input and search by city name.

We will use Angular 13 and Angular CLI to create a brand new Angular application.

Then we will create the HTML structure for our Angular Weather Application.

We will first use static values to create the Angular weather app and later on, we will use a Weather API from RapidAPI.com to get live values of weather for a city from this API.

We will create an Angular service to call the weather API from our Angular application.

We will also use Angular forms to get user inputs where the user will type in the city name in our Angular weather app and then based on the city name, we will fetch the weather data for the city from the weather API.

I hope you learn something from this angular 13 tutorial for beginners.

If you like this angular 13 project, do like this video and subscribe to my channel.

I hope to bring you more awesome content built with Angular.

#Angular #webdevelopment #fullstack

[SameerSaini]

If you like this video, please hit the 👍 button and subscribe to the channel to show your ❤️

[serenitytales]

for those who are trying to follow this tutorial and facing a problem since things changed from whe he made it.
Few points in here:
look for "Open Weather API" instead of the one in the video.
In weather service file, here is the method since the get method changed for this one so I modified it accordingly:

return this.http.get<WeatherData>(environment.weatherApiBaseUrl+'/city/'+cityName, {
headers: new HttpHeaders()
.set(environment.XRapidAPIHostHeaderName,
.set(environment.XRapidAPIKeyHeaderName, environment.XRapidAPIKeyHeaderValue),
});
}
Keep up the good work everyone 😁

[sabrinapyles]

Beautiful and clear! Had to use a different API (still from Rapid) as mentioned below, but still works like a charm as of this posting. Thank you!

[akshatpathak]

This project is so much crisp and Accurately explained, as a beginner this project teaches a lots of things, thanks a lot for such a beautiful tutorial.

[CalebeCopello]

For those struggling with the module part 24:17
start the project with the cli:
ng new my-app --no-standalone --routing

[tarunutkarsh]

I just completed this app! Solved all the new problems that everyone faced while developing. Really happy to have completed this amazing app against all odds. Thank you for sharing this with everyone!

[carlosilipo]

Tks for yr free videos. Carlo Brisbane Australia.

[ElevateLifeInspire]

Great project, can't wait to start. Thanks!!!

[kantanaik]

It's a great project. Please do some more projects on Angular. Waiting 😊

[varshanookarapu]

That was a really great tutorial, brushed up my concepts on css as well as angular .Thank you so much for the video tutorial

[AmeyChittar]

This was a wonderful, crisp and clear explaination of a small Angular application using which we can build more complex and robust applications. Nice tutorials and have subscribed. It would be great to see your videos if could do any simple beginner friendly Angular + Spring Boot tutorials based projects like this one. Thanks and cheers!

[niloferakb]

Awesome explanation, Thanks from India

[MarkosSanchezGt]

Thanks, for this tutorial, it was helpfully for me, you are great!! i am learning angular !!

[ederraadmin]

Thanks for this, easy to understand 👍

[DecentralEyes]

I'm from Nottingham United Kingdom and it is currently 11 degrees centigrade

[isahyusuf]

that's really great tutorial I really enjoyed it thank you so much Mr. sameer

[bejealex]

Nice!
I had to use other api because the open weather map was changed / moddified and it doesn't look like the one from tutorial anymore.
But it worked!
Thank you very much!

[AjithKumar-hykk]

Your video is good and easy to understand but the subscribe popup is hiding the content and it is frequent. Try to reduce or don't mess up with content.

[sagar]

Good tutorial. I am from Sonebharda(U.P)

[lonewolf]

Thank you for this! Super cool video! A+++