Todo List (Standalone Component with ngFor)

intermediate

By FrontendAtlas Team · Updated Jan 30, 2026

Build a small todo list using an Angular standalone component. Allow users to add tasks, mark them as completed, and remove them. Use `*ngFor` to render the list and simple component state to drive the UI.

Standalone component setup with `standalone: true` Managing in-memory state in a component Rendering lists with `*ngFor` Using `[(ngModel)]` for simple form input binding Basic UX for add / toggle / remove actions

Requirements

Use a standalone Angular component as the root component.
Display a text input and an "Add" button for creating new todos.
Render the todo items in a list using `*ngFor`.
Each todo item should show a label and a checkbox to toggle completion.
Allow removing a single todo item from the list.
Optionally provide a "Clear completed" action to remove all completed todos.

Expected behavior

Typing a non-empty value and clicking "Add" appends a new todo to the list and clears the input.
Empty or whitespace-only values are ignored (no item is added).
Clicking a todo’s checkbox toggles its completed state.
Completed todos are visually distinguished (e.g. line-through).
Clicking a remove button deletes that specific todo.
If you implement "Clear completed", it removes only the completed todos.

Implementation notes

Keep everything in `AppComponent` (`src/app/app.component.ts` and `app.component.html`). No extra services or components are required.
Use a simple array of objects (e.g. `{ id, text, done }`) to store todos.
Use `*ngFor` to loop over the todo array in the template.
Use `[(ngModel)]` for the input binding and checkbox bindings (remember to import `FormsModule`).
Use click handlers like `(click)="addTask()"` and `(click)="removeTask(task)"` to modify the array.

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions Open Angular prep path

Files

Select a file

No preview yet. Click “Rebuild preview”.