Todo List (Standalone Component with ngFor)

easy

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 PressureBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use the Question Library first, then move into a concrete Study Plan before targeted Company Prep.

Browse Angular interview questions Open Question Library Open 30-day foundations study plan Open Company Prep Open Angular Framework Prep Guide

Files

Select a file

No preview yet. Click “Rebuild preview”.