In this course, you’ll build a weather widget that takes the user’s location from the browser, retrieves weather data for those coordinates from an API, and displays that information alongside the user’s location coordinates.

We’ll be building the widget as an Angular 2 component, and we’ll be designing it so that the result is highly reusable. 

Components provide a great way to save time and avoid duplication across codebases. They are the building blocks of Angular application user interfaces, and you’ll need to know how to make them well if you want to become an Angular developer.

When you’ve finished this course, move onto our capstone Angular 2 learning project Bugged Out — starting with <a href="https://www.sitepoint.com/premium/courses/creating-a-real-world-angular-2-app-modules-routing-and-components-2987">Creating a Real-World Angular 2 App: Modules, Routing and Components</a>.

This is part three of a seven part series. Get the full benefit by completing them in order:

<ul>
<li><a href="https://www.sitepoint.com/premium/courses/creating-your-first-angular-2-app-2985">Creating Your First Angular 2 App</a></li>
<li><a href="https://www.sitepoint.com/premium/courses/building-a-task-card-app-with-angular-2-2986">Building a Task Card App with Angular 2</a></li>
<li>Building Reusable Components in Angular 2</li>
<li><a href="https://www.sitepoint.com/premium/courses/creating-a-real-world-angular-2-app-modules-routing-and-components-2987">Creating a Real-World Angular 2 App: Modules, Routing and Components</a></li>
<li><a href="https://www.sitepoint.com/premium/courses/building-a-realtime-firebase-database-2989">Building a Realtime Firebase Database</a></li>
<li><a href="https://www.sitepoint.com/premium/courses/creating-a-real-world-angular-2-app-creating-a-form-2988">Creating a Real-World Angular 2 App: Creating a Form</a></li>
<li><a href="https://www.sitepoint.com/premium/courses/creating-a-real-world-angular-2-app-methods-tables-and-listeners-2990">Creating a Real-World Angular 2 App: Methods, Tables and Listeners
</a></li>
</ul>

Web APIs/HTTP - Reusable Angular Weather Component

JavaScript

Building Reusable Components in Angular 2

Description for Web APIs/HTTP - Reusable Angular Weather Component