Building a Task Card App with Angular 2

4.4 Average Customer Rating

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

  • Published Date November 2017
  • 1 Video Lessons
  • 2 hours 55 minutes
  • 946 Happy Students

About the course

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:

  • Published Date November 2017
  • 1 Video Lessons
  • 2 hours 55 minutes
  • 946 Happy Students

Courses Outline

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
  • Published Date November 2017
  • 1 Video Lessons
  • 2 hours 55 minutes
  • 946 Happy Students