Building Reusable Components in Angular 2

 10 Reviews Add a review

Published November 2017

Learn how to build better interfaces, faster with reusable Angular 2 components by building a neat weather widget!

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 Creating a Real-World Angular 2 App: Modules, Routing and Components.

This is part three of a seven part series. Get the full benefit by completing them in order:

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

  • How to create and style Angular components

  • How to get data, like location, from the user’s browser

  • How to turn that data into useful template output

  • How to reuse components in other apps
Meet your instructor
Jess Rascal

Jess Rascal is a product manager by day, a web and iOS developer the rest of the time that his brain is active.

Lesson 1: Web APIs/HTTP - Reusable Angular Weather Component
Introduction to the App 2:40
Creating the Weather Component 12:28
Creating the Weather Component Template 7:43
Styling the Weather Component 6:22
Creating the Weather Component (Services) 12:33
An Introduction to Dependency Injection 13:19
Getting the User's Geographical Location 11:11
Signing Up for (Weather Data Web API) 4:22
Introduction to Observables (ReactiveX (RXJS) Library) 6:22
Introduction to JSONP Get Requests (HTTP/JSONP) 3:11
Getting the Weather Data (HTTP/JSONP) 18:57
Converting the Location Method to an Observable 14:43
Creating the Weather Model Class 3:33
Introduction to the Component Lifecycle 2:45
Subscribing to the Weather Data Observable (ngOnInit) 11:22
Displaying the Weather Data in the Template 2:53
Formatting the Weather Data on the Template (Pipes) 7:15
Converting the Wind Value (Custom Pipes) 11:58
Converting the Temperature Value (Custom Pipes) 9:34
Getting a Google Maps API Key 5:15
Getting the Location Name Using Reverse Geocoding (Google Maps API) 15:49
Displaying the Location on the Component 3:12
Allowing the Changing of the Data Units 11:57
Adding the Javascript Icon Library (Skycons) 3:49
Adding the Animated Weather Icons 10:32
Configuring the Weather Based Colors 9:20
Changing the Component Colors Based on the Weather (ngStyle) 13:31
Hiding the Component Content Until the Data is Available 7:56
Adding a Loading Indicator 6:15
Final Tweaks 20:13
Reusing the Component in Another App 13:42
Exercise Challenge 3:34

Leave a Review