User clicks button
    → event fires inside Zone
    → zone.js patches the event
    → Angular gets notified
    → Change detection runs
    → DOM updates

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/assets"],
            "styles": ["src/styles.css"],
            "scripts": [],
            "outputPath": "dist/my-app"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
                }
              ],
              "optimization": true
            }
          }
        }
      }
    }
  }
}

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

ng generate component pages/user-profile
# shorthand:
ng g c pages/user-profile

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  templateUrl: './user-profile.component.html',
  styleUrl: './user-profile.component.css'
})
export class UserProfileComponent {
  username = 'John Doe';
}

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [CommonModule],
  template: `<h1>{{ title }}</h1>`,
  styles: [`h1 { color: red; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeroComponent {
  title = 'Superman';
}

<!-- parent.component.html -->
<app-hero></app-hero>
<app-user-profile [userId]="123"></app-user-profile>

@Component({
  imports: [HeroComponent, UserProfileComponent],
  ...
})
export class ParentComponent {}

{ path: 'hero', component: HeroComponent }

<!-- layout.html -->
<router-outlet></router-outlet>

@NgModule({
  declarations: [HeroComponent],
  imports: [CommonModule],
})
export class HeroModule {}

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [CommonModule],
  template: `...`
})
export class HeroComponent {}

@Component({
  selector: 'app-badge',
  standalone: true,
  template: `
    <span class="badge" [class]="color">{{ label }}</span>
  `,
  styles: [`
    .badge { padding: 4px 8px; border-radius: 4px; color: white; }
    .primary { background: blue; }
    .danger  { background: red; }
  `]
})
export class BadgeComponent {
  label = 'New';
  color = 'primary';
}

Constructor → ngOnChanges → ngOnInit → ngDoCheck
    → ngAfterContentInit → ngAfterContentChecked
    → ngAfterViewInit → ngAfterViewChecked
    → (repeat on changes)
    → ngOnDestroy

export class MyComponent implements OnInit, OnDestroy {
  ngOnInit() { /* runs once after component is created */ }
  ngOnDestroy() { /* runs before component is destroyed */ }
}

ngOnInit(): void {
  this.userService.getUser(this.userId).subscribe(user => {
    this.user = user;
  });
}

@ViewChild('myCanvas') canvasRef!: ElementRef;

ngAfterViewInit(): void {
  // Safe to access DOM here — view is fully rendered
  const ctx = this.canvasRef.nativeElement.getContext('2d');
  ctx.fillRect(10, 10, 100, 100);
}

private subscription!: Subscription;

ngOnInit() {
  this.subscription = this.dataService.data$.subscribe(d => this.data = d);
}

ngOnDestroy() {
  this.subscription.unsubscribe();  // Prevent memory leaks
  clearInterval(this.timer);
}

export class DashboardComponent implements OnInit, OnDestroy {
  stats: Stats[] = [];
  private autoRefresh!: Subscription;

  ngOnInit(): void {
    this.loadStats();
    this.autoRefresh = interval(30000).subscribe(() => this.loadStats());
  }

  private loadStats(): void {
    this.statsService.get().subscribe(s => this.stats = s);
  }

  ngOnDestroy(): void {
    this.autoRefresh.unsubscribe(); // Stop polling when user leaves page
  }
}

export class UserComponent implements OnInit {
  @Input() userId!: number;

  // Only inject services here
  constructor(private userService: UserService) {}

  // Use @Input() values and run business logic here
  ngOnInit(): void {
    this.userService.getById(this.userId).subscribe(u => this.user = u);
  }
}

export class AppComponent {
  username = 'Alice';
  today = new Date();
}

<p>Hello, {{ username }}!</p>
<p>Today: {{ today | date }}</p>

<input [value]="username" [placeholder]="'Enter ' + username">
<button [disabled]="isLoading">Save</button>
<div [class.active]="isActive"></div>
<img [src]="imageUrl" [alt]="imageAlt">

<!-- Component @Input binding -->
<app-user-card [user]="currentUser" [showAvatar]="true"></app-user-card>

<button (click)="saveUser()">Save</button>
<input (keyup)="onSearch($event)" (blur)="validate()">
<form (ngSubmit)="onSubmit()">...</form>

onSearch(event: Event): void {
  const term = (event.target as HTMLInputElement).value;
  this.filter(term);
}

@Component({
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="firstName" placeholder="First name">
    <p>Hello, {{ firstName }}!</p>
  `
})
export class FormComponent {
  firstName = '';
}

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <input formControlName="firstName">
      <small *ngIf="form.get('firstName')?.invalid">Required</small>
      <button type="submit">Submit</button>
    </form>
  `
})
export class ReactiveFormComponent implements OnInit {
  form!: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      firstName: new FormControl('', [Validators.required, Validators.minLength(2)])
    });
  }

  submit() {
    console.log(this.form.value);
  }
}

// counter.component.ts
@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">{{ value }}</button>`
})
export class CounterComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>(); // must end with "Change"

  increment() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

<!-- parent.html -->
<app-counter [(value)]="count"></app-counter>
<p>Count: {{ count }}</p>

@if (isLoggedIn) {
  <app-dashboard />
} @else {
  <app-login />
}

@for (user of users; track user.id) {
  <app-user-card [user]="user" />
} @empty {
  <p>No users found.</p>
}

@switch (role) {
  @case ('admin') { <app-admin-panel /> }
  @case ('user')  { <app-dashboard /> }
  @default        { <app-login /> }
}

@Directive({ selector: '[appHasRole]', standalone: true })
export class HasRoleDirective {
  constructor(
    private template: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private auth: AuthService
  ) {}

  @Input() set appHasRole(role: string) {
    if (this.auth.hasRole(role)) {
      this.viewContainer.createEmbeddedView(this.template);
    } else {
      this.viewContainer.clear();
    }
  }
}

<button *appHasRole="'admin'">Delete User</button>

<div [ngClass]="{ 'active': isActive, 'disabled': !isEnabled }">...</div>
<p [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">...</p>

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  @Input() appHighlight = 'yellow';

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background', this.appHighlight);
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'background');
  }
}

<p appHighlight="lightblue">Hover over me!</p>

<!-- Conditional rendering -->
@if (user.isAdmin) {
  <span class="badge bg-danger">Admin</span>
} @else if (user.isPremium) {
  <span class="badge bg-warning">Premium</span>
} @else {
  <span class="badge bg-secondary">User</span>
}

<!-- List rendering with empty state -->
@for (product of products; track product.id) {
  <app-product-card [product]="product" />
} @empty {
  <p class="text-muted">No products available.</p>
}

<!-- Deferred / lazy rendering -->
@defer (on viewport) {
  <app-heavy-chart [data]="chartData" />
} @placeholder {
  <div class="skeleton-chart"></div>
} @loading (minimum 500ms) {
  <app-spinner />
}

Signal value changes → Angular is notified → Only affected UI parts re-render

// Regular variable — zone.js must catch the change
name = 'Alice';
changeName() { this.name = 'Bob'; }

// Signal — Angular always knows when it changes
name = signal('Alice');
changeName() { this.name.set('Bob'); }

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

export class CounterComponent {
  // Writable signal
  count = signal(0);

  // Signal with explicit type
  user = signal<User | null>(null);

  // Computed signal (derived, read-only)
  doubleCount = computed(() => this.count() * 2);
  isLoggedIn  = computed(() => this.user() !== null);
}

// In TypeScript
console.log(this.count());      // 0
console.log(this.user()?.name); // 'Alice'

<!-- In template -->
<p>Count: {{ count() }}</p>
<p>Double: {{ doubleCount() }}</p>

@if (user()) {
  <p>Welcome, {{ user()!.name }}</p>
}

count = signal(0);

// set() — replaces the value entirely
this.count.set(10);

// update() — transforms based on current value
this.count.update(current => current + 1);
this.count.update(n => n * 2);

// Object signals — immutable update
user = signal<User>({ name: 'Alice', age: 25 });
this.user.update(u => ({ ...u, age: 26 }));

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ count() }}</p>`
})
export class SignalComponent {
  count = signal(0);

  constructor() {
    // effect() runs side effects whenever tracked signals change
    effect(() => {
      console.log('Count changed:', this.count());
      localStorage.setItem('count', String(this.count()));
    });
  }
}

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()]
});

import { signal, linkedSignal } from '@angular/core';

selectedCategory = signal<string>('electronics');

// Resets to default item whenever selectedCategory changes
selectedItem = linkedSignal(() => {
  const category = this.selectedCategory();
  return this.getDefaultItem(category);
});

changeCategory(cat: string) {
  this.selectedCategory.set(cat); // selectedItem auto-resets
}

overrideItem(item: Item) {
  this.selectedItem.set(item); // manual override still works
}

filter      = signal('');
currentPage = linkedSignal(() => {
  this.filter(); // track filter dependency
  return 1;      // reset to page 1 whenever filter changes
});

URL changes → Router matches path → Component renders in <router-outlet>

// app.routes.ts
export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },

  // Eager-loaded
  { path: 'home', component: HomeComponent },

  // Lazy-loaded (better performance)
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./pages/dashboard/dashboard.component').then(m => m.DashboardComponent)
  },

  // Protected with guard
  {
    path: 'admin',
    loadComponent: () =>
      import('./pages/admin/admin.component').then(m => m.AdminComponent),
    canActivate: [authGuard]
  },

  // Route parameter
  { path: 'users/:id', component: UserDetailComponent },

  // Wildcard 404
  { path: '**', redirectTo: '/home' }
];

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

<!-- layout.component.html -->
<nav>...</nav>
<main>
  <router-outlet></router-outlet>
</main>
<footer>...</footer>

<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

export class LoginComponent {
  private router = inject(Router);
  private activatedRoute = inject(ActivatedRoute);

  onLoginSuccess(): void {
    // Absolute path string
    this.router.navigateByUrl('/dashboard');

    // Array of path segments
    this.router.navigate(['/users', userId]);

    // With query params
    this.router.navigate(['/cases'], { queryParams: { status: 'open' } });

    // Relative navigation
    this.router.navigate(['../profile'], { relativeTo: this.activatedRoute });
  }
}

<a routerLink="/home">Home</a>

<!-- Dynamic path -->
<a [routerLink]="['/users', user.id]">View Profile</a>

<!-- Query params -->
<a [routerLink]="['/cases']" [queryParams]="{ status: 'open' }">Open Cases</a>

<!-- Active class -->
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>

<!-- Exact match -->
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>

<p>{{ today | date:'mediumDate' }}</p>        <!-- Apr 29, 2026 -->
<p>{{ price | currency:'USD' }}</p>           <!-- $1,234.56 -->
<p>{{ 0.75 | percent }}</p>                   <!-- 75% -->
<p>{{ name | uppercase }}</p>                 <!-- ALICE -->
<p>{{ longText | slice:0:100 }}...</p>        <!-- first 100 chars -->
<p>{{ user | json }}</p>                      <!-- { "name": "Alice" } -->
<p>{{ items$ | async }}</p>                   <!-- unwraps Observable -->

// pipes/truncate.pipe.ts
@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, maxLength = 100, suffix = '...'): string {
    if (!value) return '';
    return value.length > maxLength
      ? value.substring(0, maxLength) + suffix
      : value;
  }
}

<p>{{ description | truncate:50 }}</p>
<p>{{ longTitle | truncate:20:'...' }}</p>

@Pipe({ name: 'statusLabel', standalone: true })
export class StatusLabelPipe implements PipeTransform {
  transform(status: string): string {
    const labels: Record<string, string> = {
      'in-progress': 'In Progress',
      'review': 'Under Review',
      'completed': 'Done',
      'draft': 'Draft'
    };
    return labels[status] ?? status;
  }
}

<span class="badge">{{ caseStatus | statusLabel }}</span>

import { resource, signal } from '@angular/core';
import { firstValueFrom } from 'rxjs';

export class UserListComponent {
  private http = inject(HttpClient);

  searchTerm = signal('');

  usersResource = resource({
    request: () => ({ search: this.searchTerm() }),
    loader: ({ request }) =>
      firstValueFrom(
        this.http.get<User[]>(`/api/users?q=${request.search}`)
      )
  });
}

@if (usersResource.isLoading()) {
  <app-spinner />
} @else if (usersResource.error()) {
  <p class="error">{{ usersResource.error() }}</p>
} @else {
  @for (user of usersResource.value(); track user.id) {
    <app-user-card [user]="user" />
  }
}

<button (click)="usersResource.reload()">Refresh</button>

// user-card.component.ts (child)
@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
      <button (click)="onEdit()">Edit</button>
    </div>
  `
})
export class UserCardComponent {
  @Input({ required: true }) user!: User;
  @Input() showActions = true;
  @Output() editClicked = new EventEmitter<User>();

  onEdit() {
    this.editClicked.emit(this.user);
  }
}

<!-- parent.component.html -->
<app-user-card
  [user]="currentUser"
  [showActions]="isAdmin"
  (editClicked)="onUserEdit($event)">
</app-user-card>

// parent.component.ts
onUserEdit(user: User): void {
  this.router.navigate(['/users', user.id, 'edit']);
}

export class UserCardComponent {
  user = input.required<User>();
  showActions = input(true);
  editClicked = output<User>();

  onEdit() {
    this.editClicked.emit(this.user());
  }
}

npm install -g @angular/cli
ng new my-project   # works from any directory

# Install locally per project
npm install @angular/cli --save-dev

# Run using npx or npm scripts
npx ng serve
npm run start

{
  "scripts": {
    "start": "ng serve",
    "build": "ng build"
  },
  "devDependencies": {
    "@angular/cli": "^19.0.0"
  }
}

npm run start  # always uses the local Angular CLI version

// Without RxJS — callback hell
getUser(id, (user) => {
  getOrders(user.id, (orders) => {
    getDetails(orders[0].id, (details) => { /* deeply nested */ });
  });
});

// With RxJS — readable pipeline
this.userService.getUser(id).pipe(
  switchMap(user   => this.orderService.getOrders(user.id)),
  switchMap(orders => this.orderService.getDetails(orders[0].id))
).subscribe(details => this.details = details);

import { Observable } from 'rxjs';

// Creating an Observable
const counter$ = new Observable<number>(subscriber => {
  let count = 0;
  const id = setInterval(() => {
    subscriber.next(count++);
    if (count > 5) {
      subscriber.complete();
      clearInterval(id);
    }
  }, 1000);
});

// Subscribing
const sub = counter$.subscribe({
  next:     value => console.log('Value:', value),   // 0, 1, 2, 3, 4, 5
  error:    err   => console.error('Error:', err),
  complete: ()    => console.log('Done!')
});

// Always unsubscribe to prevent memory leaks
sub.unsubscribe();

this.searchControl.valueChanges.pipe(
  debounceTime(300),                    // Wait for user to stop typing
  filter(term => term.length > 2),      // Skip short queries
  switchMap(term =>                      // Cancel previous, start new request
    this.searchService.search(term)
  ),
  catchError(err => {                    // Handle errors gracefully
    this.error = err.message;
    return of([]);
  })
).subscribe(results => this.results = results);

// Promise — fires immediately
const promise = fetch('/api/user').then(r => r.json());

// Observable — lazy, cancelable
const user$ = this.http.get<User>('/api/user');
// Nothing happens until subscribe:
const sub = user$.subscribe(user => console.log(user));
sub.unsubscribe(); // can cancel mid-flight

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor])
    )
  ]
};

// auth.guard.ts
export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn()
    ? true
    : router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } });
};

// unsaved-changes.guard.ts
export const unsavedChangesGuard: CanDeactivateFn<EditFormComponent> = (component) => {
  if (component.hasUnsavedChanges()) {
    return confirm('You have unsaved changes. Leave anyway?');
  }
  return true;
};

// Wiring in routes
export const routes: Routes = [
  {
    path: 'profile/edit',
    component: EditProfileComponent,
    canActivate: [authGuard],
    canDeactivate: [unsavedChangesGuard]
  }
];

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(): boolean | UrlTree {
    return this.auth.isLoggedIn()
      ? true
      : this.router.createUrlTree(['/login']);
  }
}

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.createUrlTree(['/login']);
};

export abstract class BaseAuthGuard {
  protected auth = inject(AuthService);
  protected router = inject(Router);

  protected redirectToLogin(): UrlTree {
    return this.router.createUrlTree(['/login']);
  }
}

@Injectable({ providedIn: 'root' })
export class AdminGuard extends BaseAuthGuard implements CanActivate {
  canActivate(): boolean | UrlTree {
    return this.auth.isAdmin() ? true : this.redirectToLogin();
  }
}

@Injectable({ providedIn: 'root' })
export class NavigationHistoryGuard implements CanActivate {
  private history: string[] = [];  // stateful

  canActivate(route: ActivatedRouteSnapshot): boolean {
    this.history.push(route.url.join('/'));
    return true;
  }

  getHistory(): string[] { return this.history; }
}

@Injectable({ providedIn: 'root' })
export class FeatureFlagGuard implements CanActivate {
  constructor(
    private flags: FeatureFlagService,
    private config: AppConfigService,
    private analytics: AnalyticsService
  ) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const feature = route.data['feature'];
    this.analytics.track('route-guard-check', feature);
    return this.flags.isEnabled(feature) && this.config.isAllowed(feature);
  }
}

Need shared logic across guards?       → Class
Need to store state inside the guard?  → Class
Complex multi-service dependency?      → Class
Simple auth check?                     → Function
Single service check?                  → Function
New project (Angular 15+)?             → Function (default)

// auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
  // Private signal — not persisted, not accessible from outside
  private accessToken = signal<string | null>(null);
  private userRole    = signal<string | null>(null);

  setTokens(accessToken: string, role: string): void {
    this.accessToken.set(accessToken);
    this.userRole.set(role);
    // Never do: localStorage.setItem('token', accessToken)
  }

  getAccessToken(): string | null { return this.accessToken(); }

  isLoggedIn = computed(() => this.accessToken() !== null);
  role       = computed(() => this.userRole());

  logout(): void {
    this.accessToken.set(null);
    this.userRole.set(null);
  }
}

// auth.interceptor.ts — attaches token from memory to every request
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const auth  = inject(AuthService);
  const token = auth.getAccessToken();

  if (token) {
    req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  }
  return next(req);
};