Building a Task Card App with Angular 2

Lesson 1, Step 1: Task Card App Introduction

Courses Outline

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