Angular Best Practices

Best practices are habits that keep your project clean, fast, and easy to change. Code that works today may confuse a teammate next month. Good habits reduce that confusion. The most useful habits in plain language, grouped by the part of the project they improve.

The Tidy Workshop Idea

A carpenter keeps every tool in a labeled place. Finding a hammer takes seconds, and the next carpenter understands the system immediately. A tidy Angular project works the same way. Every file has a clear home, and every name tells its purpose.

src/app/
  |-- core/       one-time services (login, settings)
  |-- shared/     reusable parts (buttons, pipes)
  |-- features/
        |-- students/    one folder per feature
        |-- courses/

Organize by Feature

Group files by what they do for the visitor, and not by file type. A students folder should hold its components, services, and routes together. Developers then open one folder to change one feature. Large projects stay manageable this way.

Name Things Clearly

Follow the CLI naming style. Use lowercase words joined with hyphens for file names, such as student-list.component.ts. Use capital letters for class names, such as StudentListComponent. A reader can then guess the file from the class and the class from the file.

Keep Components Small

A component should handle one job. Split a long page into smaller components when you scroll more than a few screens. Small components are easier to read, reuse, and test. Move data loading and business rules into services so the component only shows information and reacts to clicks.

Prefer Signals and Standalone Components

Modern Angular favors signals for local data and standalone components for structure. New code in these styles needs less setup and gives clearer data flow. Convert old code gradually when you touch it.

Manage Subscriptions

Open subscriptions can keep running after a component closes. Prefer the async pipe in templates because it unsubscribes automatically. Use the takeUntilDestroyed operator when you must subscribe in code.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

this.dataService.getItems()
  .pipe(takeUntilDestroyed(this.destroyRef))
  .subscribe(items => this.items.set(items));

Use Strict Mode and Types

Turn on TypeScript strict mode in new projects. The compiler then catches more mistakes before visitors see them. Avoid the any type because it switches off checking. Describe your data with interfaces instead.

Use trackBy in Lists

When a list changes, Angular must decide which rows to rebuild. A unique key lets Angular reuse unchanged rows. The @for block requires a track expression for this reason.

@for (student of students(); track student.id) {
  <li>{{ student.name }}</li>
}

Load Features Lazily

Send visitors only the code they need now. Lazy loading downloads a feature when someone opens it. The first page appears faster, and visitors who never open a feature never download it.

Handle Errors Kindly

Every request can fail. Show a friendly message and a retry button, and avoid blank screens. Collect errors in one interceptor so the whole application behaves the same way.

Write Tests for Important Logic

Test the code that would hurt most if it broke, such as price calculations and login rules. A small set of reliable tests gives you confidence to change code later.

Practice Checklist

Practice Exercise

Open one of your earlier projects. Review it against the checklist above. Pick the three habits that your project lacks. Fix one habit per day, and run the application after each change to confirm that nothing broke.

Key Points

• Organize code by feature and name files consistently.
• Keep components small and move logic into services.
• Use strict types, signals, and the async pipe.
• Load features lazily and handle errors in one place.