Building Reusable Components in Angular 2

Building Reusable Components in Angular 2

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

Course details

4.6∙12 Ratings6 reviews
Published
November 2017
Videos
32
Duration
4h 48m
Happy students
1000
Take this course

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:

Course Instructor

Jess Rascal

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.

Course Outline

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

Reviews
4.6

11 total

7
4
0
0
0