Angular —
Zero to Interview
Ready

// ─── Component decorator — connects everything ────────────
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-card',        // <app-user-card> in templates
  templateUrl: './user-card.html',   // separate HTML file
  styleUrls: ['./user-card.css'],    // component-scoped CSS
  standalone: true,                  // Angular 14+ — no NgModule needed
})
export class UserCardComponent implements OnInit {
  // @Input — receive data FROM parent
  @Input() name!: string;             // ! = definitely assigned (TypeScript)
  @Input() age = 0;                  // default value
  @Input({ required: true }) id!: string; // Angular 16+ required input

  // @Output — emit events TO parent (EventEmitter)
  @Output() selected = new EventEmitter<string>();

  isVisible = true;

  ngOnInit(): void {
    console.log(`Component ready: ${this.name}`);
  }

  selectUser(): void {
    this.selected.emit(this.id);  // notify parent
  }
}

// ─── Template (user-card.html) ────────────────────────────
<!-- Property binding: [] binds to component property -->
<!-- Event binding: () listens to DOM events -->
<!-- Two-way binding: [()] = property + event combined -->

<!-- New Angular 17+ Control Flow Syntax (replaces *ngIf, *ngFor) -->
@if (isVisible) {
  <div class="card">
    <h2>{{ name }}</h2>                     <!-- interpolation -->
    <p [class.adult]="age >= 18">{{age}}</p>  <!-- class binding -->
    <button (click)="selectUser()">Select</button> <!-- event binding -->
  </div>
}

@for (item of items; track item.id) {   <!-- track = key prop equivalent -->
  <app-item [data]="item" />
}

@switch (status) {
  @case ('active') { <span>Active</span> }
  @case ('idle') { <span>Idle</span> }
  @default { <span>Unknown</span> }
}

<!-- OLD way (still works, know both) -->
<div *ngIf="isVisible">...</div>
<li *ngFor="let item of items; trackBy: trackById">...</li>

// ─── Structural Directives — change DOM structure ─────────
// *ngIf, *ngFor, *ngSwitch (old syntax)
// @if, @for, @switch (Angular 17+ new syntax — preferred)

// ─── Attribute Directives — change element appearance ─────
// Built-in: ngClass, ngStyle
<div [ngClass]="{ 'active': isActive, 'error': hasError }"></div>
<div [ngStyle]="{ 'color': textColor, 'font-size': '14px' }"></div>

// ─── Custom Directive ─────────────────────────────────────
@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  @Input() appHighlight = 'yellow';   // directive input = selector name

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter')
  onMouseEnter() { this.el.nativeElement.style.background = this.appHighlight; }

  @HostListener('mouseleave')
  onMouseLeave() { this.el.nativeElement.style.background = ''; }
}
// Usage: <p appHighlight="cyan">Hover me</p>

// ─── NgModule approach (classic — still in most codebases) ─
@NgModule({
  declarations: [AppComponent, UserCardComponent], // components/directives/pipes
  imports: [BrowserModule, RouterModule, HttpClientModule],
  providers: [UserService],
  bootstrap: [AppComponent],                        // root component
})
export class AppModule {}

// ─── Standalone approach (Angular 14+ — modern, preferred) ─
@Component({
  selector: 'app-root',
  standalone: true,                              // no NgModule needed
  imports: [RouterOutlet, UserCardComponent, AsyncPipe], // import directly
  template: `<router-outlet />`,
})
export class AppComponent {}

// ─── Bootstrap standalone app (main.ts) ───────────────────
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations(),
  ]
});
// No AppModule! Providers registered directly.

// ─── Basic service with inject() (modern, preferred) ──────
@Injectable({ providedIn: 'root' })   // singleton across entire app
export class UserService {
  private http = inject(HttpClient);   // inject() — Angular 14+ modern way
  private router = inject(Router);

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

// ─── Old constructor injection (still valid) ───────────────
@Component({...})
export class AppComponent {
  constructor(private userService: UserService) {}  // constructor injection
}

// ─── Injection hierarchies ────────────────────────────────
// providedIn: 'root'   → ONE instance for entire app
// providers: [MyService] in component → new instance for that component subtree
// providers: [MyService] in module → shared within that module

// ─── InjectionToken — for non-class values ─────────────────
const API_URL = new InjectionToken<string>('API_URL');
// In providers: { provide: API_URL, useValue: 'https://api.example.com' }
const apiUrl = inject(API_URL);  // inject in component/service

// ─── Provider types ───────────────────────────────────────
// useClass:   { provide: Logger, useClass: ConsoleLogger }  — substitute class
// useValue:   { provide: API_URL, useValue: 'https://...' } — literal value
// useFactory: { provide: X, useFactory: () => new X() }     — factory function
// useExisting: { provide: A, useExisting: B }               — alias

export class MyComponent implements OnInit, OnDestroy, OnChanges {
  @Input() userId!: string;
  @ViewChild('myCanvas') canvas!: ElementRef;  // available in ngAfterViewInit

  private destroy$ = new Subject<void>();        // for unsubscribing
  private userService = inject(UserService);

  ngOnChanges(changes: SimpleChanges) {
    if (changes['userId']) {                       // input changed
      this.loadUser(changes['userId'].currentValue);
    }
  }

  ngOnInit() {
    this.userService.getUser(this.userId)
      .pipe(takeUntil(this.destroy$))              // auto-unsubscribe!
      .subscribe(user => this.user = user);
  }

  ngAfterViewInit() {
    const ctx = this.canvas.nativeElement.getContext('2d');  // DOM ready
  }

  ngOnDestroy() {
    this.destroy$.next();   // complete all takeUntil subscriptions
    this.destroy$.complete();
  }
}

import { inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable, catchError, map, retry, throwError } from 'rxjs';

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

  // GET with params
  getProducts(page = 1, limit = 20): Observable<Product[]> {
    const params = new HttpParams().set('page', page).set('limit', limit);
    return this.http.get<Product[]>(`${this.baseUrl}/products`, { params }).pipe(
      retry(2),                             // retry twice on failure
      catchError(this.handleError)           // centralized error handling
    );
  }

  // POST with typed body
  createProduct(product: Omit<Product, 'id'>): Observable<Product> {
    return this.http.post<Product>(`${this.baseUrl}/products`, product);
  }

  private handleError(err: HttpErrorResponse) {
    const msg = err.error?.message ?? err.statusText;
    return throwError(() => new Error(msg));
  }
}

// ─── HTTP Interceptor (Angular 15+) ───────────────────────
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next(authReq);
};
// Register: provideHttpClient(withInterceptors([authInterceptor]))

// ─── Route config (standalone app) ───────────────────────
export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user/:id', component: UserComponent },
  // Lazy loading — module loaded on demand
  {
    path: 'admin',
    loadChildren: () => import('./admin/routes').then(m => m.adminRoutes),
    canActivate: [authGuard],              // protect route
  },
  // Lazy standalone component
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent),
  },
  { path: '**', component: NotFoundComponent },
];

// ─── Functional Guard (Angular 15+ preferred) ─────────────
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) return true;
  router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
  return false;
};

// ─── Router hooks in component ────────────────────────────
export class UserComponent {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  userId = this.route.snapshot.paramMap.get('id');      // static
  userId$ = this.route.paramMap.pipe(map(p => p.get('id')));  // reactive

  navigate() { this.router.navigate(['/users']); }
}

import { FormBuilder, Validators, AbstractControl } from '@angular/forms';

export class LoginComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
    age: [null, [Validators.min(18), Validators.max(100)]],
  });

  // Typed access (Angular 14+ — typed forms)
  get email() { return this.form.get('email')!; }

  onSubmit() {
    if (this.form.invalid) return;
    console.log(this.form.value);      // { email: '...', password: '...' }
  }

  // ─── Custom validator ─────────────────────────────────────
  noSpaces(control: AbstractControl) {
    return control.value?.includes(' ') ? { noSpaces: true } : null;
  }

  // ─── Cross-field validator (group level) ──────────────────
  passwordMatch(group: AbstractControl) {
    const pass = group.get('password')?.value;
    const confirm = group.get('confirm')?.value;
    return pass === confirm ? null : { mismatch: true };
  }

  // ─── Dynamic FormArray (add/remove items) ─────────────────
  addressForm = this.fb.group({
    addresses: this.fb.array([])
  });
  get addresses() { return this.addressForm.get('addresses') as FormArray; }
  addAddress() { this.addresses.push(this.fb.group({ street: '', city: '' })); }
}

import {
  Observable, Subject, BehaviorSubject, combineLatest, forkJoin, merge,
  switchMap, mergeMap, concatMap, exhaustMap,
  debounceTime, throttleTime, distinctUntilChanged,
  takeUntil, take, filter, map, catchError, retry, shareReplay
} from 'rxjs';

// ─── Subjects ─────────────────────────────────────────────
// Subject:          multicast, no initial value, only future values
// BehaviorSubject:  multicast, has initial value, new subscribers get CURRENT
// ReplaySubject(n): multicast, replays last n values to new subscribers
// AsyncSubject:     emits ONLY the last value WHEN COMPLETED

const user$ = new BehaviorSubject<User | null>(null);
user$.next(loggedInUser);         // push new value
user$.getValue();                 // synchronously get current value

// ─── THE MOST IMPORTANT OPERATORS ─────────────────────────
// switchMap  — cancels previous inner observable when new outer value arrives
//              BEST for: search autocomplete, navigation
searchInput$.pipe(
  debounceTime(300),               // wait 300ms after last keystroke
  distinctUntilChanged(),           // only if value actually changed
  switchMap(query => this.api.search(query))  // cancel old request!
);

// concatMap — waits for previous to complete before next
//             BEST for: sequential API calls, form submissions
clicks$.pipe(concatMap(() => this.api.save()));  // save one at a time

// mergeMap  — runs all in parallel, results in any order
//             BEST for: parallel requests with no order dependency
ids$.pipe(mergeMap(id => this.api.getItem(id)));  // all at once

// exhaustMap — ignores new outer values while inner is still active
//              BEST for: login button (ignore double-click)
loginClicks$.pipe(exhaustMap(() => this.auth.login(creds)));  // ignore extra clicks

// ─── Combining observables ────────────────────────────────
combineLatest([user$, settings$]).pipe(          // emits when ANY changes
  map(([user, settings]) => ({ ...user, ...settings }))
);
forkJoin([api.getUsers(), api.getProducts()]);  // wait for ALL to complete

// ─── shareReplay — multicast + cache for late subscribers ──
readonly user$ = this.http.get('/api/me').pipe(shareReplay(1));
// Multiple async pipes → only ONE HTTP request!

import { createAction, createReducer, createEffect, createSelector,
         createFeatureSelector, props, on } from '@ngrx/store';
import { Actions, ofType } from '@ngrx/effects';

// ─── 1. Actions ───────────────────────────────────────────
export const loadUsers = createAction('[Users] Load Users');
export const loadUsersSuccess = createAction('[Users] Load Success',
  props<{ users: User[] }>());
export const loadUsersFailure = createAction('[Users] Load Failure',
  props<{ error: string }>());

// ─── 2. Reducer ───────────────────────────────────────────
const reducer = createReducer(
  { users: [] as User[], loading: false, error: null as string | null },
  on(loadUsers, state => ({ ...state, loading: true })),
  on(loadUsersSuccess, (state, { users }) => ({ ...state, loading: false, users })),
  on(loadUsersFailure, (state, { error }) => ({ ...state, loading: false, error })),
);

// ─── 3. Selectors ─────────────────────────────────────────
const selectUsersState = createFeatureSelector<UsersState>('users');
export const selectAllUsers = createSelector(selectUsersState, s => s.users);
export const selectLoading = createSelector(selectUsersState, s => s.loading);
// Selectors are MEMOIZED — only recompute when inputs change

// ─── 4. Effects (side effects) ────────────────────────────
@Injectable()
export class UsersEffects {
  private actions$ = inject(Actions);
  private userService = inject(UserService);

  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      switchMap(() => this.userService.getUsers().pipe(
        map(users => loadUsersSuccess({ users })),
        catchError(err => of(loadUsersFailure({ error: err.message })))
      ))
    )
  );
}

// ─── 5. In Component ──────────────────────────────────────
export class UsersComponent {
  private store = inject(Store);
  users$ = this.store.select(selectAllUsers);
  loading$ = this.store.select(selectLoading);

  loadUsers() { this.store.dispatch(loadUsers()); }
}

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

@Component({ ... })
export class CounterComponent {
  // ─── signal() — reactive value ────────────────────────────
  count = signal(0);                   // create signal with initial value

  count();                               // READ: call like a function
  this.count.set(5);                    // SET: replace value
  this.count.update(v => v + 1);       // UPDATE: based on previous value
  this.count.mutate(arr => arr.push(1)); // MUTATE: for objects/arrays

  // ─── computed() — derived signal (memoized) ───────────────
  doubled = computed(() => this.count() * 2);   // auto-recalculates
  isEven  = computed(() => this.count() % 2 === 0);

  // ─── effect() — side effects when signals change ──────────
  constructor() {
    effect(() => {
      console.log(`Count changed to ${this.count()}`);
      // auto-tracks all signals read inside this function
    });
  }

  // ─── Signal inputs (Angular 17.1+) — replaces @Input ──────
  name = input<string>('');           // signal-based @Input
  required = input.required<string>(); // required signal input
  // Usage: <app-user [name]="'Rahul'" />

  // ─── RxJS interop ─────────────────────────────────────────
  user$ = this.userService.getUser(1);         // Observable
  user = toSignal(user$, { initialValue: null }); // Observable → Signal

  countSignal = signal(0);
  count$ = toObservable(countSignal);              // Signal → Observable
}

// ─── In template — direct function call, NO async pipe needed
// <p>{{ count() }}</p>   (NOT {{ count | async }})
// <p>{{ doubled() }}</p>

@Component({
  selector: 'app-user-list',
  changeDetection: ChangeDetectionStrategy.OnPush, // ← key optimization
  template: `
    @for (user of users(); track user.id) {
      <app-user-item [user]="user" />
    }
  `,
})
export class UserListComponent {
  users = signal<User[]>([]); // signals work perfectly with OnPush

  // ─── Immutable updates for OnPush to detect change ────────
  // ❌ this.users.push(newUser)     — same reference, OnPush won't detect
  // ✅ this.users.update(u => [...u, newUser]) — new array reference

  private cdr = inject(ChangeDetectorRef);
  updateFromWebSocket(data: User[]) {
    this.users.set(data);      // signals handle this automatically
    // Without signals: this.cdr.markForCheck();
  }
}

// ─── Route-based lazy loading ─────────────────────────────
{ path: 'reports', loadComponent: () =>
  import('./reports.component').then(m => m.ReportsComponent) }

// ─── @defer — Angular 17+ declarative lazy loading ────────
// In template:
@defer (on viewport) {         <!-- load when enters viewport -->
  <app-heavy-chart />
} @loading {
  <app-skeleton />
} @error {
  <p>Failed to load chart</p>
} @placeholder {             <!-- shown before defer triggers -->
  <div>Chart will appear here</div>
}

// Defer triggers:
// on idle       — when browser is idle
// on viewport   — when element enters viewport
// on interaction — on click/hover
// on timer(5000) — after 5 seconds
// when condition — when expression is truthy

// ─── trackBy equivalent in @for ───────────────────────────
@for (item of items; track item.id) {  // track by unique property
  <app-item [data]="item" />
}

// ─── Pure Pipe — cached transformation ────────────────────
@Pipe({ name: 'filter', pure: true })  // only runs when INPUT changes
export class FilterPipe implements PipeTransform {
  transform(items: any[], search: string) {
    return items.filter(i => i.name.includes(search));
  }
}

// ─── Built-in Pipes (know all of these) ───────────────────
{{ 1234.56 | currency:'INR':'symbol':'1.2-2' }}  // ₹1,234.56
{{ today | date:'dd/MM/yyyy' }}                   // 25/02/2025
{{ text | uppercase }}{{ text | lowercase }}
{{ 0.75 | percent }}                               // 75%
{{ obj | json }}                                   // debug
{{ obs$ | async }}                                 // subscribe + unsubscribe
{{ items | slice:0:5 }}                            // first 5 items
{{ key | keyvalue }}                               // iterate object as {key,value}

// ─── Angular SSR (Angular Universal) ─────────────────────
// ng add @angular/ssr → adds server-side rendering
// Renders Angular on Node.js server, sends HTML to browser
// Benefits: SEO, faster LCP, better social sharing

// isPlatformBrowser check — run browser code only on client:
const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.getItem('token'); }  // safe!

// ─── Angular Testing ──────────────────────────────────────
describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserComponent, HttpClientTestingModule],
      providers: [{ provide: UserService, useValue: mockUserService }],
    }).compileComponents();

    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();               // trigger ngOnInit
  });

  it('should display user name', () => {
    component.user = { name: 'Rahul', id: '1' };
    fixture.detectChanges();
    const el = fixture.nativeElement.querySelector('h2');
    expect(el.textContent).toContain('Rahul');
  });
});