LAB | Angular Directives

Introduction

In this lab, you'll continue exploring directives ngFor, ngClass, ngIf and ngStyle.

Let's begin!

Setup

• Fork this repo

• Clone this repo

• Open the LAB and start:

  $ cd lab-vue-basics
  $ npm install
  $ npm run dev

Submission

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin main

• Create a Pull Request so that your TAs can check your work.

Instructions

Create a simple todo-list application using Angular. Your application must:

1. Iteration 1 | Allow users to create new todos in the UI

2. Iteration 2 | Allow users to mark todos as complete changing its color to green

3. Iteration 3 | Allow users to mark todos as "postpone" which will temporarily remove them from the list

4. Iteration 4 | Allow users to delete todos from the UI

5. Iteration 5 | Add a clean button that will remove the completed todos

6. Iteration 6 | Add a restore button that will bring back all the postponed todos

7. Bonus - Iteration 7 | Add an edit option if you like or work on the styling

Sounds good? Let's get started!

Happy coding! ❤️