Angular Tutorial

Angular is a framework made by Google for building web applications. It gives you everything in one package: components, routing, forms, a way to talk to servers, and testing tools.

Angular is written in TypeScript and is popular in banks, large companies and enterprise software, where big teams need a clear structure. Many well-paid jobs ask for Angular skills.

This tutorial teaches modern Angular: standalone components, the new @if and @for template syntax, and signals for reactive data.

A First Look at Angular

Here is a small Angular component with a counter:

import { Component, signal } from "@angular/core";

@Component({
  selector: "app-counter",
  template: `
    <h1>Hello, Ali!</h1>
    <button (click)="add()">Clicked {{ count() }} times</button>
  `,
})
export class Counter {
  count = signal(0);

  add() {
    this.count.update((n) => n + 1);
  }
}

A component is a TypeScript class with a @Component decorator that describes its HTML template.

What You Will Learn

• What Angular is and how to create a project with the Angular CLI
• Standalone components and how they fit together
• Templates: interpolation, property binding, event binding and control flow
• Signals: signal, computed and effect
• Services and dependency injection with inject()
• Routing between pages

Exercises and Quiz

Every lesson ends with an exercise, and the last lesson is a quiz on the whole tutorial.

What to Learn After Angular

You should know JavaScript first, and learning TypeScript helps a lot. After Angular, learn Node.js for the back end. If you maintain old projects, see the separate AngularJS tutorial.