Angular

Full-featured TypeScript framework for enterprise applications.

When to Use

• Enterprise single-page applications
• Complex forms and validation
• Large team projects
• Applications requiring strong typing

Quick Start

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

@Component({
  selector: "app-root",
  standalone: true,
  template: `
    <h1>{{ title }}</h1>
    <button (click)="increment()">Count: {{ count }}</button>
  `,
})
export class AppComponent {
  title = "My App";
  count = 0;

  increment() {
    this.count++;
  }
}

Core Concepts

Components & Signals

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

@Component({
  selector: "app-counter",
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  constructor() {
    effect(() => console.log("Count changed:", this.count()));
  }

  increment() {
    this.count.update((c) => c + 1);
  }
}

Services & DI

import { Injectable, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({ providedIn: "root" })
export class UserService {
  private http = inject(HttpClient);

  getUsers() {
    return this.http.get<User[]>("/api/users");
  }

  getUser(id: string) {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

Common Patterns

Reactive Forms

import { ReactiveFormsModule, FormBuilder, Validators } from "@angular/forms";

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <input formControlName="password" type="password" />
      <button [disabled]="form.invalid">Submit</button>
    </form>
  `,
})
export class LoginComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ["", [Validators.required, Validators.email]],
    password: ["", [Validators.required, Validators.minLength(8)]],
  });

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

Best Practices

Do:

• Use standalone components
• Use signals for state
• Use inject() function
• Implement OnPush change detection

Don’t:

• Subscribe without unsubscribing
• Use any type
• Mutate inputs directly
• Put logic in templates

Troubleshooting

References

• Angular Documentation
• Angular Blog