SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial

The home for developers

Track your course progress, manage projects, and find your dream job - all in one place.

Start Your Free Trial

7 Day Free Trial. Cancel Anytime.

SitePoint Premium

  • Access to 700+ courses
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools
  • Library/
  • Video courses/
  • Building Reusable Components in Angular 2
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:
  • Creating Your First Angular 2 App
  • Building a Task Card App with Angular 2
  • Building Reusable Components in Angular 2
  • Creating a Real-World Angular 2 App: Modules, Routing and Components
  • Building a Realtime Firebase Database
  • Creating a Real-World Angular 2 App: Creating a Form
  • Creating a Real-World Angular 2 App: Methods, Tables and Listeners

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

Course details

4.6∙12 Ratings6 reviews

Published
November 2017
Videos
32
Duration
4h 48m
Happy students
1000

Take this course
SitePoint

Stuff we do

  • Premium
  • Newsletters
  • Learning paths
  • Library
  • Forums

Contact

  • Contact us
  • FAQ
  • Publish your book
  • Write an article
  • Advertise

About

  • Our Story
  • Corporate Memberships
  • Start free trial
  • Login

Connect

  • RSS
  • Facebook
  • Twitter (X)
  • Instagram

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Terms of usePrivacy policy