Building Reusable Components in Angular 2

4.5 Average User Rating
792 students have watched this


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

  • Last Updated Feb 2018
  • 1 Video Lessons
  • 4 hours 48 minutes
  • 792 Happy Students

About the course

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:

  • Last Updated Feb 2018
  • 1 Video Lessons
  • 4 hours 48 minutes
  • 792 Happy Students

Courses Outline

Lesson 1: Web APIs/HTTP - Reusable Angular Weather Component
Free
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 Forecast.io (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
  • Last Updated Feb 2018
  • 1 Video Lessons
  • 4 hours 48 minutes
  • 792 Happy Students