Angular

Quick reference: Angular Cheatsheet

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google.

1. Setup & Basics

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

Project Structure

src/
├── app/          # Components, modules, services
├── assets/       # Static files
├── environments/ # Configs for dev/prod
├── index.html    # Main HTML
└── main.ts       # Bootstraps app

• Key Files (standalone apps, the default since v17):
  • main.ts → bootstrapApplication(App, appConfig)
  • app.config.ts → App-wide providers (provideRouter, provideHttpClient, ...)
  • app.routes.ts → Route definitions
  • app.ts (app.component.ts before v20) → Root component (@Component)
  • Legacy NgModule apps: app.module.ts → Root module (@NgModule)

2. Core Concepts

Components

@Component({
  selector: "app-example",
  templateUrl: "./example.component.html",
  styleUrls: ["./example.component.css"],
})
export class ExampleComponent {
  @Input() data: string;
  @Output() action = new EventEmitter();
}

Templates & Data Binding

• Interpolation: {{ value }}
• Property Binding: [property]="value"
• Event Binding: (event)="handler()"
• Two-Way Binding: [(ngModel)]="property" (Requires FormsModule)

Directives

• Structural:

  <div *ngIf="condition">Content</div>
  <div *ngFor="let item of items">{{ item }}</div>

  • Since v17 prefer built-in control flow (*ngIf/*ngFor/*ngSwitch are deprecated since v20):

  @if (condition) { <div>Content</div> } @else { <div>Empty</div> }
  @for (item of items; track item.id) { <div>{{ item.name }}</div> } @empty { <p>None</p> }

• Attribute:

  <div [ngClass]="{ 'active': isActive }"></div>

3. Services & Dependency Injection

@Injectable({ providedIn: "root" })
export class DataService {
  fetchData() {
    return this.http.get("/api/data");
  }
}

• Injecting Services:

  private dataService = inject(DataService); // preferred `inject()` function
  // or constructor injection:
  constructor(private dataService: DataService) {}

4. HTTP Client (RxJS Observables)

import { HttpClient } from "@angular/common/http";

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {}
  getData() {
    return this.http.get("url");
  }
}

• Subscribing:

  this.apiService.getData().subscribe((data) => console.log(data));

5. Routing

• Setup Routes: (app.routes.ts, registered with provideRouter(routes); app-routing.module.ts in NgModule apps)

  const routes: Routes = [
    { path: "", component: HomeComponent },
    { path: "about", component: AboutComponent },
  ];

• Router Outlet:

  <router-outlet></router-outlet>

• Navigation:

  this.router.navigate(["/about"]);

6. Forms

• Template-Driven Forms:

  <form #form="ngForm" (ngSubmit)="submit(form)">
    <input name="email" ngModel required />
  </form>

• Reactive Forms:

  form = new FormGroup({
    email: new FormControl("", [Validators.required]),
  });

7. State Management (Advanced)

• NgRx (Redux-like):
  • Actions, Reducers, Store, Effects

  npm install @ngrx/store @ngrx/effects

8. Performance & Optimization

• Lazy Loading:

  { path: 'admin', loadChildren: () => import('./admin/admin.routes') }
  { path: 'profile', loadComponent: () => import('./profile/profile').then(m => m.Profile) }

• Deferrable views: @defer (on viewport) { <heavy-cmp /> }
• Change Detection: OnPush strategy (the default for components since v22) + signals; zoneless is the default for new apps since v21
• AOT Compilation: on by default (ng build; the --prod flag was removed)

9. Testing

# Unit Tests (Vitest is the default for new projects since v21; Jasmine/Karma in older ones)
ng test

# E2E (Protractor is end-of-life; add Cypress/Playwright via `ng e2e`)
ng e2e

10. Deployment

ng build   # production configuration is the default
# Deploy `/dist` folder to hosting (Netlify, Vercel, Firebase, etc.)

Reference

• Angular Documentation
• Advanced Topics:
  • Micro-frontends (Module Federation)
  • Server-Side Rendering (@angular/ssr, formerly Angular Universal)
  • Web Components Integration