Building a Task Card App with Angular 2

 9 Reviews Add a review

Published November 2017

Build your first interactive Angular application by building a Trello-style, card-based task manager!

In this course, we’ll be building a Trello-like task card app. By the end of this course, you’ll have a strong understanding of Angular 2 fundamentals and a task manager you can use in the real world.

This course builds on the Angular 2 basics we learned in Creating Your First Angular 2 App.

We’ll show you how to clone the skeleton project we created earlier using Git, and demonstrate Angular components in order to create our card UI. We’ll create the task model class and show you how to set up a data source and pull its information into our app. We’ll modify our data source using Angular forms, and refine the app logic using a range of techniques that’ll come in handy later.

Once you’ve completed this course, you’ll be ready to tackle advanced Angular 2 skills by building a reusable Weather Card component.

This is part two 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

  • Clone your skeleton project with Git

  • Start building interfaces with Angular components

  • How to build classes

  • How to set up a data source (and use its data)

  • Using Angular forms to modify data
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: Angular 2 Fundamentals - Task Card App
Free Task Card App Introduction 3:19
How to Clone the Skeleton Project 11:16
Creating the Card Component 16:22
Creating the Card's HTML Markup (External Template) 6:47
Styling the Card Component 2:56
Adding the Task Status Icon (Third Party Library) 11:28
Creating the Task Model Class 4:31
Creating the Properties for the Card Component (Input Properties) 4:17
Using the Task Property Data (Property Binding) 8:17
Creating the Task Data Source 8:30
Using the Data Source to Generate Tasks (ngFor) 10:07
Creating the Add Task Form 5:32
Styling the Add Task Form 8:57
Adding the Angular Form Syntax (Template Driven Form) 13:32
Creating the Add Task Method (TypeScript Methods) 10:17
Adding New Tasks to the Data Source (Event Binding) 4:40
Protecting the Data Source from Empty Tasks 6:35
Clearing the Input Field After Adding a Task 1:52
Marking Tasks as Complete/Not Complete 5:52
Styling the Completed Cards (Class Binding) 7:32
Setting the Task Status Label to Reflect the Status (ngIf) 5:41
NgIf Directive vs the Hidden Property 5:36
Final Tweaks 10:21
Exercise Challenge 1:31

Leave a Review