skip to content
BKB
Table of Contents

Welcome! In this series we will build Topic Viewer, a small Angular application for tracking subjects that you are learning.

This is not a copy-everything-at-once tutorial. We will build one feature at a time, pause to understand it, and check that it works before moving forward.

The finished Topic Viewer dashboard

What we are building

By the end, the application will let you:

  • view learning topics on a dashboard;
  • search and filter topics;
  • open a topic details page;
  • add, edit, complete, and delete topics;
  • keep data after refreshing the browser;
  • render useful HTML on the server; and
  • verify important behavior with tests.

You can inspect the completed project at barmao/topic-viewer.

barmao/topic-viewer
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
00K00KMIT

What you will learn

LessonAngular ideaWhat we add
1Components and signalsReactive text and a reusable child component
2RoutingDashboard, About, and topic detail pages
3Services and dependency injectionShared topic data and operations
4Signal stateDerived counts and browser persistence
5Reactive formsA validated Add Topic form
6SSR and hydrationServer-rendered HTML that becomes interactive
7Putting it togetherSearch, filtering, CRUD, styling, and tests

Before you begin

Install a current Node.js LTS release, then check it:

Terminal window
node --version
npm --version

Create the project with routing and server-side rendering enabled:

Terminal window
npx @angular/cli new topic-viewer --routing --ssr --style=css
cd topic-viewer
npm start

Open http://localhost:4200.

How each lesson works

Every lesson contains:

  1. A small goal.
  2. A short explanation of the Angular concept.
  3. Code for you to write.
  4. A prediction question.
  5. A visible checkpoint.
  6. Common errors and a small challenge.

Try the task before opening any hidden answer. The pause is part of the learning.

Ready?

Start with the basic building block of every Angular application: a component.

Series: Overview · Lesson 1: Components and signals