Introduction to
Angular

# Install the CLI globally
npm install -g @angular/cli

# Create a new project
ng new my-app --style=scss --routing

# Serve with live reload
ng serve --open

# Generate artifacts
ng generate component features/dashboard
ng generate service core/auth
ng generate pipe shared/truncate
ng generate guard auth/role

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

@Component({
  selector: 'app-hero-card',
  standalone: true,
  template: `
    <div class="hero-card">
      <h2>{{ hero.name }}</h2>
      <p>Power: {{ hero.power }}</p>
      <button (click)="onSelect()">
        Select
      </button>
    </div>
  `,
  styles: [`
    .hero-card {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 1rem;
    }
  `]
})
export class HeroCardComponent {
  hero = { name: 'Windstorm', power: 'Weather' };

  onSelect() {
    console.log(`Selected: ${this.hero.name}`);
  }
}

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

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

  // Computed (read-only, auto-tracked)
  double = computed(() => this.count() * 2);

  constructor() {
    // Side-effect that re-runs on change
    effect(() => {
      console.log('Count changed:', this.count());
    });
  }

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

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

@Injectable({ providedIn: 'root' })
export class HeroService {
  private http = inject(HttpClient);
  private apiUrl = '/api/heroes';

  getAll() {
    return this.http.get<Hero[]>(this.apiUrl);
  }

  getById(id: number) {
    return this.http.get<Hero>(
      `${this.apiUrl}/${id}`
    );
  }

  create(hero: Partial<Hero>) {
    return this.http.post<Hero>(
      this.apiUrl, hero
    );
  }
}

// Usage in a component
@Component({ /* ... */ })
export class HeroListComponent {
  private heroService = inject(HeroService);
  heroes = signal<Hero[]>([]);

  ngOnInit() {
    this.heroService.getAll().subscribe(
      data => this.heroes.set(data)
    );
  }
}

import { Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Subject, switchMap, debounceTime,
         distinctUntilChanged, catchError,
         of } from 'rxjs';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <input (input)="onSearch($event)">
    @for (hero of results$ | async;
          track hero.id) {
      <p>{{ hero.name }}</p>
    }
  `
})
export class SearchComponent {
  private search$ = new Subject<string>();
  private heroService = inject(HeroService);

  results$ = this.search$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term =>
      this.heroService.search(term).pipe(
        catchError(() => of([]))
      )
    )
  );

  onSearch(e: Event) {
    const val = (e.target as HTMLInputElement).value;
    this.search$.next(val);
  }
}

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

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  {
    path: 'heroes',
    loadComponent: () =>
      import('./heroes/list.component')
        .then(m => m.HeroListComponent),
  },
  {
    path: 'heroes/:id',
    loadComponent: () =>
      import('./heroes/detail.component')
        .then(m => m.HeroDetailComponent),
    resolve: { hero: heroResolver },
    canActivate: [authGuard],
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes')
        .then(m => m.ADMIN_ROUTES),
    canMatch: [adminGuard],
  },
  { path: '**', component: NotFoundComponent },
];

// app.config.ts — provide HttpClient
import { provideHttpClient, withInterceptors }
  from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor])
    ),
  ]
};

// auth.interceptor.ts
export const authInterceptor: HttpInterceptorFn =
  (req, next) => {
    const token = inject(AuthService).getToken();
    if (token) {
      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    return next(req).pipe(
      catchError(err => {
        if (err.status === 401) {
          inject(Router).navigate(['/login']);
        }
        return throwError(() => err);
      })
    );
  };

// standalone component
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    CommonModule,
    RouterLink,
    HeroCardComponent,
    TruncatePipe
  ],
  template: `
    @for (hero of heroes(); track hero.id) {
      <app-hero-card [hero]="hero" />
    }
    <a routerLink="/settings">Settings</a>
  `
})
export class DashboardComponent {
  heroes = signal<Hero[]>([]);
}

// bootstrap without NgModule
// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([authInterceptor])
    ),
    provideAnimationsAsync(),
  ]
});