Building a Task Card App with Angular 2

Building a Task Card App with Angular 2

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

Course details

4.4∙16 Ratings8 reviews
Published
November 2017
Videos
24
Duration
2h 55m
Happy students
1100
Take this course

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:

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

Reviews
4.4

14 total

8
6
0
0
0