Frontend

Angular

A full TypeScript framework for large web apps: routing, forms, DI and tooling out of the box.

Official siteRepository

What it is

Angular is a full rewrite of AngularJS (2010) that Google released in 2016. Apps are written in TypeScript, and the framework offers official solutions for routing, forms, HTTP, testing and builds (Angular CLI).

The core: components, templates, dependency injection and RxJS for async streams. Newer versions added signals for reactive state, standalone components without NgModule, and a new control flow syntax (@if, @for).

It gives a single project structure, so it works well for large teams and long projects, especially in the enterprise. The price is a steeper learning curve than React or Vue.

Use it when

  • A large enterprise app with many teams and shared conventions.
  • You need forms, routing, DI and testing in one official set.
  • The team already knows TypeScript and OOP (Java, C#).

Avoid it when

  • A small site or landing page: the framework is too heavy.
  • A quick prototype where you want minimal ceremony.

Key concepts

Component
A class with a @Component decorator, a template and styles.
Dependency injection
Services are created and provided by the framework through inject() or the constructor.
Signals
Reactive values that update only the dependent parts of the UI.
RxJS Observables
Event streams for HTTP, forms and routes with operators like map and switchMap.
Angular CLI
Code generation, builds, tests and version upgrades with the ng command.

Example

A standalone component with a signal.

Cheat sheet

Angular cheat sheet
Command or codeWhat it does
ng new my-appCreates a project
ng serveStarts the dev server
ng generate component cardGenerates a component
ng generate service apiGenerates a service
ng buildProduction build
ng testRuns unit tests
count = signal(0)Reactive state with a signal
@if (ok) { ... } @else { ... }Condition in a template
@for (x of xs; track x.id) { }Loop in a template
http = inject(HttpClient)Gets a dependency with inject

How to learn it

  1. Learn TypeScript, because Angular is built on it.
  2. Take the Angular course on ShortLesson and create a project with the Angular CLI.
  3. Learn components, templates, data binding and the new control flow syntax.
  4. Study services and dependency injection.
  5. Meet signals for reactive state.
  6. Understand RxJS: Observable, pipe and the map and switchMap operators.
  7. Add routing, reactive forms and HttpClient.
  8. Write tests and build an app against an API.

Interview questions

  1. 1. What is dependency injection in Angular?

    The framework creates services and passes them to the components that request them. This makes testing easier (a service can be swapped) and separates code into layers.

  2. 2. How do signals differ from RxJS?

    A signal is a synchronous value that tracks dependencies and holds current state. An observable describes a stream over time. Signals suit UI state, RxJS suits async events.

  3. 3. What does the OnPush change detection strategy do?

    The component is checked only when its @Input changes, an event fires or a signal updates. That reduces checks and speeds up the app.

  4. 4. What is a standalone component?

    A component that does not need an NgModule: it declares its own dependencies in imports. In recent versions it is the default way.

Comparisons with this technology

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform