Angular Cheatsheet

# Create a new, standalone-based Angular application
ng new my-app --standalone

# Serve the application
ng serve

# Generate a new standalone component
ng generate component my-component --standalone
# shorthand: ng g c my-component --standalone

# Generate a new service
ng generate service my-service

# Build for production
ng build

// main.ts - Bootstrapping a standalone application
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes) // Provide router configuration
  ]
}).catch(err => console.error(err));

// app.component.ts - A standalone root component
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet], // Import other components/modules here
  template: `<router-outlet></router-outlet>`
})
export class AppComponent { }

<!-- Interpolation -->
<h1>{{ title }}</h1>

<!-- Property Binding -->
<img [src]="imageUrl">

<!-- Event Binding -->
<button (click)="onSave()">Save</button>

<!-- Two-way Binding (requires FormsModule or ReactiveFormsModule) -->
<!-- To use, add `imports: [FormsModule]` to your @Component -->
<input [(ngModel)]="username">

<!-- @if: New built-in conditional flow (Angular 17+) -->
@if (isLoggedIn) {
  <div>Welcome, user!</div>
} @else {
  <div>Please log in.</div>
}

<!-- @for: New built-in loop (Angular 17+) -->
<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
</ul>

<!-- [ngClass] and [ngStyle] remain the same -->
<div [ngClass]="{ 'active': isActive }">...</div>
<div [ngStyle]="{ 'color': 'blue' }">...</div>

// --- Parent Component ---
// <app-child [data]="parentData()" (dataChange)="onDataChange($event)"></app-child>

// --- Child Component (child.component.ts) ---
import { Component, input, output } from '@angular/core'; // New v17.1 imports

@Component({
  selector: 'app-child',
  standalone: true,
  template: `<button (click)="sendData()">Send Data</button>`
})
export class ChildComponent {
  // New signal-based inputs (v17.1+)
  data = input<string>(); // Required input
  optionalData = input<string>('default value'); // Optional

  // New output syntax
  dataChange = output<string>();

  sendData() {
    this.dataChange.emit('Data from child');
  }
}

import { Injectable, inject } from '@angular/core';

// A service is just a class, @Injectable is good practice
@Injectable({ providedIn: 'root' })
export class MyDataService {
  getData() { return ['data1', 'data2']; }
}

// --- Component using the service ---
import { Component } from '@angular/core';
import { MyDataService } from './my-data.service';

@Component({ /* ... */ })
export class MyComponent {
  // Use the modern `inject` function for DI
  private dataService = inject(MyDataService);

  constructor() {
    const data = this.dataService.getData();
  }
}

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    title: 'Home Page'
  },
  {
    path: 'about',
    // Lazy load a standalone component
    loadComponent: () => import('./about/about.component').then(m => m.AboutComponent),
    title: 'About Us'
  }
];

// --- In a component template ---
// <a routerLink="/">Home</a>
// <a routerLink="/about">About</a>

// 1. Provide the HTTP client in main.ts
// import { provideHttpClient } from '@angular/common/http';
// bootstrapApplication(AppComponent, {
//   providers: [provideHttpClient()]
// });

// 2. Inject and use HttpClient in a service or component
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private http = inject(HttpClient);
  private apiUrl = 'https://api.example.com/data';

  getData(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}