Modern Angular Development: My Practical Notes as a .NET Developer

src/
  app/
    features/
      products/
      orders/
      customers/
    shared/
      components/
      pipes/
      directives/
    core/
      services/
      interceptors/
      guards/
      models/

npm install -g @angular/cli@19
ng new loan-marketplace
cd loan-marketplace
ng serve

http://localhost:4200

index.html
  ↓
<app-root>
  ↓
main.ts
  ↓
bootstrapApplication(AppComponent, appConfig)
  ↓
AppComponent
  ↓
Router / child components

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

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

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

export interface LoanApplication {
  id: number;
  applicantName: string;
  requestedAmount: number;
  status: 'Submitted' | 'Approved' | 'Rejected';
  submittedAt: string;
}

public sealed record LoanApplicationDto(
    int Id,
    string ApplicantName,
    decimal RequestedAmount,
    string Status,
    DateTime SubmittedAt);

const amount: number = '100000'; // compile-time error

const amount: number = 100000;

type LoanStatus = 'Submitted' | 'Approved' | 'Rejected' | 'UnderReview';

interface LoanApplication {
  id: number;
  applicantName: string;
  requestedAmount: number;
  status: LoanStatus;
}

status: 'Apprved'

const brokerName = application.broker?.name;

const pageSize = userPreference.pageSize ?? 20;

export interface PagedResult<T> {
  items: T[];
  totalCount: number;
  pageNumber: number;
  pageSize: number;
}

const result: PagedResult<LoanApplication> = {
  items: [],
  totalCount: 0,
  pageNumber: 1,
  pageSize: 20
};

unknown

function handleError(error: unknown): string {
  if (error instanceof Error) {
    return error.message;
  }

  return 'Unexpected error';
}

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

@Component({
  selector: 'app-loan-list',
  imports: [],
  templateUrl: './loan-list.component.html',
  styleUrl: './loan-list.component.css'
})
export class LoanListComponent {
  title = 'Loan Applications';
}

<h1>{{ title }}</h1>

<app-loan-list></app-loan-list>

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

interface LoanApplication {
  id: number;
  applicantName: string;
  requestedAmount: number;
  status: 'Submitted' | 'Approved' | 'Rejected';
}

@Component({
  selector: 'app-loan-list',
  templateUrl: './loan-list.component.html',
  styleUrl: './loan-list.component.css'
})
export class LoanListComponent {
  loans: LoanApplication[] = [
    {
      id: 1,
      applicantName: 'Sarah Khan',
      requestedAmount: 250000,
      status: 'Submitted'
    },
    {
      id: 2,
      applicantName: 'David Green',
      requestedAmount: 500000,
      status: 'Approved'
    }
  ];

  selectedLoan?: LoanApplication;

  selectLoan(loan: LoanApplication): void {
    this.selectedLoan = loan;
  }
}

<h1>Loan Applications</h1>

@if (loans.length > 0) {
  <ul>
    @for (loan of loans; track loan.id) {
      <li (click)="selectLoan(loan)">
        {{ loan.applicantName }} - {{ loan.requestedAmount }}
      </li>
    }
  </ul>
} @else {
  <p>No loan applications found.</p>
}

@if (selectedLoan) {
  <p>
    Selected:
    <strong>{{ selectedLoan.applicantName }}</strong>
  </p>
}

@for (loan of loans; track $index) {

@for (loan of loans; track loan.id) {

<h1>{{ title }}</h1>

<button [disabled]="isSaving">Save</button>

<span [class.approved]="loan.status === 'Approved'">
  {{ loan.status }}
</span>

<div [style.width.px]="progress"></div>

<button (click)="approveLoan(loan.id)">Approve</button>

<input [(ngModel)]="searchText" />

<app-loan-detail
  [loan]="selectedLoan"
  (approved)="onLoanApproved($event)">
</app-loan-detail>

import { Component, input, output } from '@angular/core';

interface LoanApplication {
  id: number;
  applicantName: string;
  requestedAmount: number;
  status: string;
}

@Component({
  selector: 'app-loan-detail',
  templateUrl: './loan-detail.component.html'
})
export class LoanDetailComponent {
  loan = input.required<LoanApplication>();

  approved = output<number>();

  approve(): void {
    this.approved.emit(this.loan().id);
  }
}

<h2>{{ loan().applicantName }}</h2>
<p>Amount: {{ loan().requestedAmount }}</p>
<p>Status: {{ loan().status }}</p>

<button (click)="approve()">Approve</button>

onLoanApproved(loanId: number): void {
  console.log('Loan approved:', loanId);
}

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-loan-list',
  templateUrl: './loan-list.component.html'
})
export class LoanListComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    console.log('Component initialized');
  }

  ngOnDestroy(): void {
    console.log('Component destroyed');
  }
}

import { ChangeDetectionStrategy, Component, input } from '@angular/core';

@Component({
  selector: 'app-loan-card',
  templateUrl: './loan-card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoanCardComponent {
  loan = input.required<LoanApplication>();
}

this.loans.push(newLoan);

this.loans = [...this.loans, newLoan];

<p>{{ loan.requestedAmount | currency:'USD' }}</p>
<p>{{ loan.submittedAt | date:'mediumDate' }}</p>
<p>{{ loan.status | lowercase }}</p>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'statusLabel'
})
export class StatusLabelPipe implements PipeTransform {
  transform(value: string): string {
    switch (value) {
      case 'Submitted':
        return 'Awaiting Review';
      case 'Approved':
        return 'Approved by Credit Team';
      case 'Rejected':
        return 'Rejected';
      default:
        return 'Unknown Status';
    }
  }
}

<span>{{ loan.status | statusLabel }}</span>

import { Directive, ElementRef, HostListener, inject } from '@angular/core';

@Directive({
  selector: '[appHighlightRisk]'
})
export class HighlightRiskDirective {
  private el = inject(ElementRef<HTMLElement>);

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.el.nativeElement.style.backgroundColor = '#fff3cd';
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

<tr appHighlightRisk>
  <td>High-risk loan</td>
</tr>

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

export interface LoanApplication {
  id: number;
  applicantName: string;
  requestedAmount: number;
  status: string;
}

@Injectable({
  providedIn: 'root'
})
export class LoanService {
  private http = inject(HttpClient);

  getLoans(): Observable<LoanApplication[]> {
    return this.http.get<LoanApplication[]>('/api/loans');
  }

  approveLoan(id: number): Observable<void> {
    return this.http.post<void>(`/api/loans/${id}/approve`, {});
  }
}

import { Component, inject } from '@angular/core';
import { LoanService, LoanApplication } from './loan.service';

@Component({
  selector: 'app-loan-list',
  templateUrl: './loan-list.component.html'
})
export class LoanListComponent {
  private loanService = inject(LoanService);

  loans$ = this.loanService.getLoans();
}

@if (loans$ | async; as loans) {
  @for (loan of loans; track loan.id) {
    <p>{{ loan.applicantName }} - {{ loan.status }}</p>
  }
}

loans$ = this.loanService.getLoans();

@if (loans$ | async; as loans) {
  @for (loan of loans; track loan.id) {
    <p>{{ loan.applicantName }}</p>
  }
}

this.loanService.getLoans().subscribe(loans => {
  this.loans = loans;
});

import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs';

searchResults$ = this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.loanService.searchLoans(term ?? ''))
);

this.route.params.subscribe(params => {
  this.loanService.getLoan(params['id']).subscribe(loan => {
    this.loan = loan;
  });
});

loan$ = this.route.params.pipe(
  switchMap(params => this.loanService.getLoan(params['id']))
);

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

@Component({
  selector: 'app-loan-summary',
  templateUrl: './loan-summary.component.html'
})
export class LoanSummaryComponent {
  loans = signal<LoanApplication[]>([]);

  approvedLoans = computed(() =>
    this.loans().filter(x => x.status === 'Approved')
  );

  totalApprovedAmount = computed(() =>
    this.approvedLoans()
      .reduce((total, loan) => total + loan.requestedAmount, 0)
  );

  addLoan(loan: LoanApplication): void {
    this.loans.update(current => [...current, loan]);
  }
}

<p>Total loans: {{ loans().length }}</p>
<p>Approved loans: {{ approvedLoans().length }}</p>
<p>Total approved amount: {{ totalApprovedAmount() | currency:'USD' }}</p>

this.loans()

set()
update()

this.loans.set([]);
this.loans.update(current => [...current, newLoan]);

@Injectable({
  providedIn: 'root'
})
export class LoanApiService {
  private http = inject(HttpClient);

  getLoans(): Observable<LoanApplication[]> {
    return this.http.get<LoanApplication[]>('/api/loans');
  }

  createLoan(request: CreateLoanRequest): Observable<LoanApplication> {
    return this.http.post<LoanApplication>('/api/loans', request);
  }

  updateLoanAmount(id: number, amount: number): Observable<void> {
    return this.http.patch<void>(`/api/loans/${id}`, { amount });
  }

  deleteLoan(id: number): Observable<void> {
    return this.http.delete<void>(`/api/loans/${id}`);
  }
}

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('access_token');

  if (!token) {
    return next(req);
  }

  const secureRequest = req.clone({
    setHeaders: {
      Authorization: `Bearer ${token}`
    }
  });

  return next(secureRequest);
};

provideHttpClient(
  withInterceptors([authInterceptor])
)

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'loans',
    pathMatch: 'full'
  },
  {
    path: 'loans',
    loadComponent: () =>
      import('./features/loans/loan-list.component')
        .then(m => m.LoanListComponent)
  },
  {
    path: 'loans/:id',
    loadComponent: () =>
      import('./features/loans/loan-detail.component')
        .then(m => m.LoanDetailComponent)
  }
];

import { ActivatedRoute } from '@angular/router';
import { inject } from '@angular/core';
import { switchMap } from 'rxjs';

export class LoanDetailComponent {
  private route = inject(ActivatedRoute);
  private loanService = inject(LoanService);

  loan$ = this.route.paramMap.pipe(
    switchMap(params => {
      const id = Number(params.get('id'));
      return this.loanService.getLoan(id);
    })
  );
}

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

export const adminGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.hasRole('Admin')) {
    return true;
  }

  return router.createUrlTree(['/access-denied']);
};

{
  path: 'admin',
  canActivate: [adminGuard],
  loadComponent: () =>
    import('./features/admin/admin-dashboard.component')
      .then(m => m.AdminDashboardComponent)
}

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-create-loan',
  imports: [ReactiveFormsModule],
  templateUrl: './create-loan.component.html'
})
export class CreateLoanComponent {
  private fb = inject(FormBuilder);
  private loanService = inject(LoanService);

  form = this.fb.group({
    applicantName: ['', [Validators.required, Validators.minLength(3)]],
    requestedAmount: [0, [Validators.required, Validators.min(1000)]],
    email: ['', [Validators.required, Validators.email]]
  });

  save(): void {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }

    const request = this.form.getRawValue();

    this.loanService.createLoan({
      applicantName: request.applicantName!,
      requestedAmount: request.requestedAmount!,
      email: request.email!
    }).subscribe();
  }
}

<form [formGroup]="form" (ngSubmit)="save()">
  <label>Applicant Name</label>
  <input formControlName="applicantName" />

  @if (form.controls.applicantName.touched &&
       form.controls.applicantName.hasError('required')) {
    <p class="error">Applicant name is required.</p>
  }

  <label>Requested Amount</label>
  <input type="number" formControlName="requestedAmount" />

  @if (form.controls.requestedAmount.hasError('min')) {
    <p class="error">Minimum amount is $1,000.</p>
  }

  <button type="submit">Submit</button>
</form>

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

export function sensibleLoanAmount(control: AbstractControl): ValidationErrors | null {
  const amount = control.value;

  if (amount > 1_000_000) {
    return { tooLarge: true };
  }

  return null;
}

getLoans(): Observable<LoanApplication[]> {
  return this.http.get<LoanApplication[]>('/api/loans').pipe(
    catchError(error => {
      console.error('Failed to load loans', error);
      return of([]);
    })
  );
}

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

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    console.error('Global Angular error:', error);

    // In real app:
    // send to Application Insights, Sentry, Elastic, etc.
  }
}

{
  provide: ErrorHandler,
  useClass: GlobalErrorHandler
}

export const unauthorizedInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);

  return next(req).pipe(
    catchError(error => {
      if (error.status === 401) {
        router.navigate(['/login']);
      }

      return throwError(() => error);
    })
  );
};

ng add @angular/material

displayedColumns = ['applicantName', 'requestedAmount', 'status', 'actions'];

<table mat-table [dataSource]="loans">
  <ng-container matColumnDef="applicantName">
    <th mat-header-cell *matHeaderCellDef>Applicant</th>
    <td mat-cell *matCellDef="let loan">{{ loan.applicantName }}</td>
  </ng-container>

  <ng-container matColumnDef="requestedAmount">
    <th mat-header-cell *matHeaderCellDef>Amount</th>
    <td mat-cell *matCellDef="let loan">
      {{ loan.requestedAmount | currency:'USD' }}
    </td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef>Status</th>
    <td mat-cell *matCellDef="let loan">{{ loan.status }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

const dialogRef = this.dialog.open(ConfirmDialogComponent, {
  data: {
    title: 'Approve loan?',
    message: 'Are you sure you want to approve this application?'
  }
});

dialogRef.afterClosed().subscribe(result => {
  if (result === true) {
    this.approveLoan();
  }
});

describe('LoanStatusPipe', () => {
  it('should format Submitted status', () => {
    const pipe = new StatusLabelPipe();

    expect(pipe.transform('Submitted')).toBe('Awaiting Review');
  });
});

describe('LoanCardComponent', () => {
  it('should display applicant name', () => {
    TestBed.configureTestingModule({
      imports: [LoanCardComponent]
    });

    const fixture = TestBed.createComponent(LoanCardComponent);

    fixture.componentRef.setInput('loan', {
      id: 1,
      applicantName: 'Sarah Khan',
      requestedAmount: 250000,
      status: 'Submitted'
    });

    fixture.detectChanges();

    expect(fixture.nativeElement.textContent)
      .toContain('Sarah Khan');
  });
});

it('should emit approved event', () => {
  const fixture = TestBed.createComponent(LoanDetailComponent);
  const component = fixture.componentInstance;

  spyOn(component.approved, 'emit');

  fixture.componentRef.setInput('loan', {
    id: 1,
    applicantName: 'Sarah Khan',
    requestedAmount: 250000,
    status: 'Submitted'
  });

  fixture.detectChanges();

  fixture.nativeElement.querySelector('button').click();

  expect(component.approved.emit).toHaveBeenCalledWith(1);
});

ng build

@defer {
  <app-heavy-loan-chart></app-heavy-loan-chart>
} @placeholder {
  <p>Chart will load shortly...</p>
} @loading {
  <p>Loading chart...</p>
}

/loans?status=Submitted&page=1     approval queue
/loans/:loanId                     read-only detail
/loans/:loanId/review              editable review form

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'loans',
    loadChildren: () =>
      import('./features/loans/loans.routes').then(m => m.LOAN_ROUTES),
  },
  { path: '', pathMatch: 'full', redirectTo: 'loans' },
];

export const LOAN_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./pages/loan-queue.page').then(m => m.LoanQueuePage),
  },
  {
    path: ':loanId',
    loadComponent: () =>
      import('./pages/loan-detail.page').then(m => m.LoanDetailPage),
  },
  {
    path: ':loanId/review',
    canActivate: [canReviewLoan],
    loadComponent: () =>
      import('./pages/loan-review.page').then(m => m.LoanReviewPage),
  },
];

@Component({
  selector: 'app-loan-card',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <article>
      <h2><a [routerLink]="['/loans', loan().id]">{{ loan().applicantName }}</a></h2>
      <p>{{ loan().requestedAmount | currency: loan().currency }}</p>
      <p>Status: {{ loan().status }}</p>
      <button type="button" (click)="review.emit(loan().id)">
        Review application
      </button>
    </article>
  `,
  imports: [CurrencyPipe, RouterLink],
})
export class LoanCard {
  readonly loan = input.required<LoanSummary>();
  readonly review = output<string>();
}

. Extract when a unit has meaningful behaviour, reuse, accessibility responsibility, visual isolation or independent testing value.

Junior: Is a “smart versus dumb” rule still useful with signals?

>

Senior: The vocabulary is less important than ownership. Keep remote orchestration and route knowledge near the feature boundary; make reusable UI contracts explicit.

23. Signals for synchronous UI state

Signals work naturally for local state and derived values:

export class LoanQueuePage {
  readonly loans = input.required<readonly LoanSummary[]>();
  readonly selectedIds = signal<ReadonlySet<string>>(new Set());

  readonly selectedCount = computed(() => this.selectedIds().size);

  toggle(id: string): void {
    this.selectedIds.update(current => {
      const next = new Set(current);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }
}

Create a new Set instead of mutating the current one; the signal needs an update and immutable ownership makes debugging clearer.

Use computed for derivation. Do not use effect to copy one signal into another:

// Avoid redundant state.
effect(() => this.filtered.set(this.filterLoans(this.loans(), this.status())));

// Prefer derivation.
readonly filtered = computed(() => this.filterLoans(this.loans(), this.status()));

Angular effects are for synchronising with imperative/external systems, with care around lifecycle. Business events such as “approve clicked” belong in methods/workflow services, not an effect watching a boolean.

24. RxJS for time and multi-event asynchronous flow

Search, HTTP cancellation, retries and composed event streams remain strong RxJS use cases:

readonly searchResults = toSignal(
  toObservable(this.searchTerm).pipe(
    map(value => value.trim()),
    debounceTime(250),
    distinctUntilChanged(),
    switchMap(term => term.length < 2
      ? of<readonly LoanSummary[]>([])
      : this.loansApi.search(term).pipe(
          catchError(error => {
            this.searchError.set(toUiError(error));
            return of([]);
          }),
        )),
  ),
  { initialValue: [] },
);

toSignal subscribes immediately, so construction can trigger effects. Create it in an injection context and understand cleanup. Do not call toSignal repeatedly in a getter or template.

switchMap unsubscribes from the previous search when a new term arrives. That prevents stale UI for cancellable HTTP. The server may still receive work; GET is safe, while write commands need idempotency rather than switch-based cancellation.

Use takeUntilDestroyed for imperative subscriptions tied to an Angular owner. Prefer async pipe or signal interop where possible. Every subscription needs a lifecycle.

25. One HTTP client service with runtime schemas

TypeScript interfaces do not validate JSON. Treat response bodies as unknown and parse them with a schema/decoder.

@Injectable({ providedIn: 'root' })
export class LoansApi {
  private readonly http = inject(HttpClient);

  getLoan(id: string): Observable<LoanDetail> {
    return this.http.get<unknown>(`/api/v1/loans/${encodeURIComponent(id)}`).pipe(
      map(body => loanDetailSchema.parse(body)),
    );
  }

  approve(command: ApproveLoanCommand): Observable<LoanDetail> {
    return this.http.post<unknown>(
      `/api/v1/loans/${encodeURIComponent(command.loanId)}/approval`,
      command,
      { headers: { 'Idempotency-Key': command.operationId } },
    ).pipe(map(body => loanDetailSchema.parse(body)));
  }
}

Generated clients from OpenAPI can reduce drift but still need runtime behaviour for incompatible servers and sensible error mapping. Keep API DTOs separate from view models and form state.

Centralise base URL, credentials, deadlines, correlation and error translation through appropriate providers/interceptors. Do not hide business retries inside a generic interceptor.

26. Functional interceptors and authentication boundaries

An interceptor can add a correlation header or credentials according to architecture:

export const correlationInterceptor: HttpInterceptorFn = (request, next) => {
  const correlationId = crypto.randomUUID();
  return next(request.clone({
    setHeaders: { 'X-Correlation-ID': correlationId },
  }));
};

Treat incoming server trace headers as diagnostics, not authority. Avoid leaking correlation or auth headers to third-party URLs; scope interceptors/clients carefully.

For cookie sessions, use HTTPS, HTTP-only Secure cookies and CSRF protection for state-changing requests. For OIDC/OAuth browser flows, use a reviewed library and Authorization Code with PKCE or a backend-for-frontend design. Do not invent refresh-token storage.

Several requests can discover session expiry together. Coordinate refresh in one auth service so one refresh occurs and waiters reuse it. Prevent interceptor recursion and infinite retry. On logout, clear protected in-memory and persisted application state.

Route guards cannot protect API data. Every endpoint checks identity, tenant and resource permission.

27. URL as the approval queue source of truth

Shareable filters should be query parameters. The page derives a typed query:

const route = inject(ActivatedRoute);

readonly query = toSignal(
  route.queryParamMap.pipe(
    map(params => ({
      status: parseStatus(params.get('status')),
      page: parsePositiveInt(params.get('page'), 1),
      search: (params.get('search') ?? '').trim(),
    })),
    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
  ),
  { requireSync: true },
);

For production code, use a stable comparison or canonical key instead of JSON.stringify when property/order semantics can change.

Inputs navigate:

updateStatus(status: LoanStatusFilter): void {
  void this.router.navigate([], {
    relativeTo: this.route,
    queryParams: { status, page: 1 },
    queryParamsHandling: 'merge',
  });
}

Do not separately update a filter signal and the URL, creating two writable truths. The route changes; derived query drives loading. Browser back/forward now works.

28. Server state and race-safe loading

A resource abstraction, feature store or RxJS service can own loading. Whichever is chosen, represent query identity and reject stale results.

type LoadState<T> =
  | { kind: 'idle' }
  | { kind: 'loading'; requestId: string; previous?: T }
  | { kind: 'loaded'; value: T; receivedAt: number }
  | { kind: 'failed'; error: UiError; previous?: T };

Preserving previous data can prevent layout jumps during refetch, but label refreshing and avoid presenting stale data as current after a security/identity change.

If query A begins, then B, A must not overwrite B when it returns last. switchMap helps; request identity at the state boundary protects against future non-cancellable sources.

Cache keys include tenant/session scope and all filters. Clear protected cache on logout. A cached version does not remove server optimistic concurrency.

29. Reactive Forms for a stable enterprise baseline

Typed Reactive Forms remain appropriate for complex existing applications:

type LoanReviewForm = {
  decision: FormControl<'Approve' | 'Refer' | null>;
  notes: FormControl<string>;
  expectedVersion: FormControl<number>;
};

readonly form = new FormGroup<LoanReviewForm>({
  decision: new FormControl(null, { nonNullable: false, validators: [Validators.required] }),
  notes: new FormControl('', { nonNullable: true, validators: [Validators.maxLength(1000)] }),
  expectedVersion: new FormControl(0, { nonNullable: true }),
});

Do not put expected version in an editable visible control just because it is in the form type. It may belong in component workflow state or a disabled/hidden controlled field. The server never trusts it beyond conflict detection.

Map form values into an explicit command. Avoid sending getRawValue() directly when it contains presentation/internal fields.

Use synchronous validators for client-checkable format. Async validation is not final business authorisation and can race. The submit endpoint repeats authoritative validation.

30. Signal Forms as a deliberate newer option

For an Angular v21+ application that has evaluated the stability/support fit, Signal Forms provides a writable signal model, a field tree and schema-based validation.

Conceptually:

readonly model = signal({
  decision: '' as '' | 'Approve' | 'Refer',
  notes: '',
});

readonly reviewForm = form(this.model, path => {
  required(path.decision);
  maxLength(path.notes, 1000);
});

Use exact imports/APIs matching the installed Angular version; the library evolves. Current documentation says Signal Forms require Angular v21 or higher.

Signal Forms can test most schema logic without rendering, while DOM-bound behaviour still needs component tests. Existing reactive forms and third-party controls may use compatibility bridges during migration. Do not mix systems without a clear source of truth.

Junior: Is Signal Forms automatically better because it is typed and reactive?

>

Senior: It may reduce boilerplate in a signal-first app. Reactive Forms have mature integrations and team knowledge. Compare required controls, async validation, testability and support guarantees.

31. Submit workflow with idempotency and conflict

Create one operation ID per user submission attempt and reuse it for network retry:

async submit(): Promise<void> {
  if (this.form.invalid || this.submission().kind === 'submitting') {
    this.form.markAllAsTouched();
    return;
  }

  const operationId = crypto.randomUUID();
  const command = mapReviewCommand(this.form.getRawValue(), operationId, this.loan());
  this.submission.set({ kind: 'submitting', operationId });

  try {
    const updated = await firstValueFrom(this.api.approve(command));
    this.loan.set(updated);
    this.submission.set({ kind: 'succeeded' });
  } catch (error: unknown) {
    this.submission.set({ kind: 'failed', error: toUiError(error) });
  }
}

Using firstValueFrom is acceptable when the observable emits once and completes; preserve cancellation/lifecycle if the component can be destroyed mid-request. An RxJS workflow may fit better.

On 409, keep the user’s notes, fetch current server state and show which fields/status changed. Do not automatically retry an approval based on stale evidence. The API enforces version atomically.

Disable duplicate click for experience; server idempotency handles retries and other clients.

32. Accessible form and error flow

Every input needs a visible label. Associate hint/error text using IDs and aria-describedby. Display errors after touched/submission according to a consistent policy. Provide an error summary that links to invalid fields and move focus there after failed submit.

Use aria-live carefully for submission status. Do not announce every keystroke validation. Keep focus stable during server refresh and dialogs.

Buttons need clear names and types. A Cancel control that navigates should often be a link; a button triggers an action. Confirmation dialogs must trap/restore focus and support Escape when safe.

Angular Material can provide accessible primitives, but correct labels, dialog content and workflow remain application responsibilities. Test keyboard and screen reader, not only harness APIs.

33. Deferrable views based on user priority

The review form and evidence summary are core. A historical chart is secondary:

<app-loan-review-form />

@defer (on viewport) {
  <app-loan-history-chart [loanId]="loanId()" />
} @placeholder (minimum 300ms) {
  <section aria-label="Loan history chart placeholder">
    <p>History chart will load when visible.</p>
  </section>
} @error {
  <p role="status">The chart is unavailable. The review form still works.</p>
}

Deferred code should not be required for the primary action. Reserve layout space to reduce CLS. Measure chunk size and trigger behaviour; deferring dozens of tiny blocks can create request overhead.

Do not hide essential SEO content or consent behind interaction without understanding rendering. SSR, hydration and incremental hydration are deployment choices to test end to end.

34. SSR and hydration: choose per route

Public marketing and insight pages benefit from prerendering/SSR for first HTML and discoverability. An authenticated loan workspace may be client-rendered or SSR depending on performance and security needs.

Server rendering means browser globals such as window, document, local storage and certain libraries are unavailable during server execution. Guard platform-specific code or defer it to browser lifecycle; better, isolate it behind an injectable abstraction.

Hydration reuses server-rendered DOM. Server and client output must agree. Time, randomness, locale and browser-only state can cause mismatches. Transfer safe fetched data where appropriate rather than immediately duplicating requests.

Current Angular documentation describes incremental hydration as building on SSR and hydration and integrating with deferrable views. Validate exact defaults and opt-outs for the project version. Do not enable it only because the setting exists; measure initial JavaScript, interaction and layout.

Never embed sensitive user data into public-cacheable HTML. Configure CDN/proxy cache rules and response variation precisely.

35. Zoneless and change detection migrations

Modern Angular can operate with zoneless change detection in supported versions/configurations. Signals, template event listeners, AsyncPipe and explicit notification mechanisms help Angular know when to update.

Do not remove Zone.js from a large application without auditing third-party components, manual async callbacks and tests. Run official migrations/guidance and compare behaviour under real user events, timers, websockets and library integrations.

OnPush is not a universal performance switch that repairs mutable state. It makes notification/reference discipline important. Signals can notify consumers, but mutating a nested object without updating the signal still creates stale UI.

Profile change detection and rendering. Avoid manual detectChanges scattered through production code; it often hides ownership mistakes.

36. Error boundaries in Angular terms

Angular’s global ErrorHandler can report unexpected errors, but expected API failures belong in feature state with user recovery. Do not treat a 409 conflict as an uncaught exception.

Provide route/page-level fallback for failed lazy chunks or data loads. A reload may recover a chunk mismatch after deployment, but avoid infinite reload loops. Preserve unsaved form data when safe.

An HTTP interceptor can translate infrastructure error shape, but feature code decides what a conflict or validation error means. Central “show toast for every error” creates duplicate/noisy messages and can expose unsafe server text.

Log release, route template, trace ID and safe error category. Do not send form values, access tokens or full response bodies to telemetry.

37. Testing the component contract

Test a reusable component through inputs, DOM and outputs:

it('emits the loan id when review is requested', async () => {
  await TestBed.configureTestingModule({ imports: [LoanCard] }).compileComponents();
  const fixture = TestBed.createComponent(LoanCard);
  const emitted: string[] = [];

  fixture.componentRef.setInput('loan', loanSummaryFixture({ id: 'ln_test_42' }));
  fixture.componentInstance.review.subscribe(id => emitted.push(id));
  fixture.detectChanges();

  fixture.nativeElement
    .querySelector('button')
    .dispatchEvent(new MouseEvent('click', { bubbles: true }));

  expect(emitted).toEqual(['ln_test_42']);
});

Use queries by role/label in user-oriented test tools where available. Component harnesses protect Material interactions from DOM details. Do not assert private signal fields when the rendered/issued contract is sufficient.

Form schema rules can be tested in isolation; focus and error associations require DOM tests. Router tests verify URL changes and guards. HTTP tests assert method, URL, headers and response parsing.

At least one integration path should combine real providers/state with a network mock so mocks do not hide wiring.

38. Testing races and cancellation

Use a controlled HTTP mock to return query B before query A. Assert B remains visible. Trigger approval A, then a newer operation B, then fail A; assert the old failure does not roll back B.

Avoid wall-clock sleeps. Use controllable subjects or test schedulers for RxJS timing. Test effect/subscription teardown by destroying the fixture and asserting no later UI mutation or external call.

End-to-end tests cover refresh, back/forward, deep link, expired session, server validation, conflict and retry. Use synthetic tenants and never production financial data.

39. Frontend security review

Angular template interpolation escapes text. Bypassing sanitisation or binding untrusted HTML requires serious review. Never trust a rich-text/API field because it came from your server; stored content can be malicious.

Content Security Policy reduces script-injection impact when configured correctly. Avoid unsafe inline/eval allowances where possible and use nonces/hashes according to hosting/SSR architecture. Test third-party libraries.

Do not place secrets in environment replacement or JavaScript bundles. Browser configuration is public. Tokens in local/session storage are accessible to injected script; assess cookie/BFF alternatives.

Prevent open redirects by allow-listing internal destinations rather than navigating to arbitrary query-string URLs. Avoid exposing resource existence through route behaviour beyond API policy.

Dependencies and build tooling are supply-chain boundaries. Lock versions, review updates, scan, minimise packages and build from trusted CI.

40. Performance from route to rendered rows

Measure bundle/chunk size, LCP, CLS, INP, route-load duration, API/cache time, change-detection cost and long tasks. Lighthouse/lab tools are useful; field data shows real devices/networks.

Use lazy routes, deferrable views and image optimisation where evidence points. Virtualise very large lists rather than rendering thousands of rows. Paginate server data. Track rows by stable ID:

@for (loan of loans(); track loan.id) {
  <app-loan-card [loan]="loan" />
}

Avoid calling expensive methods in templates. Use computed selectors/pipes with appropriate purity. But do not memoise everything before profiling.

Bundle budgets in angular.json should fail CI on unintended growth. Inspect source maps/bundle analysis and assign large dependency ownership.

41. Deployment compatibility and stale chunks

Browsers can hold old HTML referencing old chunk names while a deployment removes those chunks. Use atomic versioned asset deployment, long immutable caching for hashed assets and short/no-cache for HTML. Retain prior assets through the rollout window where hosting permits it.

Frontend and API versions overlap. Additive API changes come first; frontend adopts later; removals happen after old clients age out. Runtime response schemas make incompatibility visible.

Include release version in telemetry and a safe endpoint/header. If a lazy chunk fails after deploy, offer one controlled refresh and record the mismatch. Do not loop.

Source maps help diagnosis but may expose source; upload privately to error tooling or configure access according to policy.

42. Incident clinic: wrong loan flashes after navigation

The underwriter moves from loan A to B. B’s response returns first, then A’s slow response overwrites detail state.

Inspect route-param stream, request cancellation and state ownership. A component that imperatively subscribes on each param change without cancelling creates the race.

Use switchMap from param ID to API request and/or compare request/loan ID before committing state. Keep selected ID in the route, not a separately mutated service field.

Junior: Can we clear detail to null before every request?

>

Senior: That changes the visual symptom, not the winner rule. Ensure only the current ID’s result can update current detail; then choose whether to retain previous content during loading.

Add a deterministic test returning A last. Instrument requested/returned/current IDs safely. Do not log applicant data.

43. Incident clinic: memory rises on every route visit

Common causes are subscriptions not torn down, event listeners, timers, cached feature state, charts retaining DOM, or services provided at root when their data should be route-scoped.

Reproduce repeated navigation, take heap snapshots and inspect retainers. Do not assume Angular change detection is the leak. A root service intentionally lives for the app; moving per-loan cache into it can retain every detail.

Use takeUntilDestroyed, async pipe, signal lifecycle and component cleanup. Remove external widget/listener in destruction. Bound caches and clear sensitive state on logout.

Keep a navigation memory regression test or performance scenario for the discovered pattern.

44. Operational telemetry for the Angular workspace

Record route template, navigation/load duration, API outcome category, web vitals, error category, release and server trace ID. Avoid raw URL parameters when they contain resource IDs/search terms; normalise route templates and redact.

Sample normal traces and retain representative errors under privacy policy. Session replay can capture financial data and must be reviewed, redacted and access-controlled—or disabled.

Dashboards connect frontend symptoms to API/dependency signals. A slow route may be chunk download, authentication refresh, API queue, database query or rendering. Correlation and release annotations prevent guessing.

45. Code-review checklist for modern Angular

• Does each state value have one owner: URL, form, local signal or server cache?
• Are inputs immutable and outputs meaningful intent?
• Is derived state computed rather than copied by effects?
• Does every observable/subscription have lifecycle ownership?
• Are HTTP bodies runtime-validated?
• Are auth headers/credentials scoped to trusted origins?
• Does the API, not the guard, enforce resource authorisation?
• Are writes idempotent and versioned for concurrency?
• Does the form preserve values and expose accessible errors?
• Can stale requests overwrite current route state?
• Are SSR/browser-only behaviours isolated?
• Do lazy/deferred choices protect the primary task?
• Are sensitive values absent from browser storage and telemetry?
• Are bundle, rendering and field performance measured?
• Can old frontend/API versions coexist during deployment?

Trace one click through output, workflow, HTTP, server response, state and DOM. If the path depends on a hidden subscription or duplicated signal, simplify it.

46. Exercises for the developer I am mentoring

Exercise one: classify state

Take the loan workspace and assign every value to URL, local signal, form, API cache or server. Remove one duplicate. Refresh and use browser back/forward to prove behaviour.

Exercise two: remove an effect

Find an effect copying or deriving signals. Replace it with computed or an event method. Verify no stale intermediate render remains.

Exercise three: race route loads

Return loan B before A and A last. Prove B remains rendered. Destroy the component mid-request and prove cleanup.

Exercise four: test conflict

Submit expected version seven after another user creates version eight. Preserve notes, show current server state and require deliberate resubmission.

Exercise five: accessible failure

Return field and global errors. Move focus to the summary, link errors to inputs, announce status and complete the form using keyboard only.

Exercise six: deployment mismatch

Serve old HTML/API combinations and remove a lazy chunk in a controlled environment. Implement one safe refresh and prove it cannot loop.

47. Cross-links for the wider learning path

Continue with Angular NgRx Reducer Pattern when shared workflows justify event/reducer structure. Use Designing Complex UI with Components for deeper component boundaries, HTTP and Web APIs from First Principles for caching/idempotency/concurrency, and Web Security for Full-Stack Developers for browser/API threats. How to Investigate Slow Angular, ASP.NET Core and SQL Server Applications follows performance evidence across every layer.

These guides meet at one principle: Angular owns the user-interface model; the URL owns navigation truth; the API owns authority and durable business state; observability connects them when reality differs from expectation.

48. Choose feature state without creating rival stores

The queue needs shared list/detail cache and loading state. Options include a focused service with signals/RxJS, NgRx Signal Store, classic NgRx Store or another approved server-state abstraction. Start from coordination:

@Injectable()
export class LoansFeatureState {
  private readonly api = inject(LoansApi);
  private readonly loansState = signal<LoadState<readonly LoanSummary[]>>({ kind: 'idle' });

  readonly loans = computed(() =>
    this.loansState().kind === 'loaded' ? this.loansState().value : []);
  readonly loading = computed(() => this.loansState().kind === 'loading');

  load(query: LoanQuery): void {
    // A real implementation adds request identity/cancellation and safe errors.
  }
}

Provide it at the feature route/page if its cache should end with that owner. providedIn: 'root' is convenient but means application lifetime; it can retain sensitive or stale entity data across navigation and identity change.

If classic NgRx already governs approval workflows, use it rather than creating a second service store. If only one page needs a list and form, NgRx may add unnecessary ceremony. Document team criteria.

Junior: Can components read the service’s writable signals directly?

>

Senior: Expose readonly state and meaningful commands. If every component can call .set, ownership becomes informal global mutation.

Do not copy API state into a component signal just for convenience. Select or expose it. Local edit state remains in the form until submission.

49. Design the queue table as an accessible capability

Enterprise grids easily become inaccessible collections of clickable cells. Start with semantic table markup when the data is tabular. Provide column headers, caption or accessible name, sortable-button labels and row actions with the applicant/loan context.

<table aria-describedby="queue-summary">
  <caption>Submitted loan applications</caption>
  <thead>
    <tr>
      <th scope="col">
        <button type="button" (click)="sortBy('updatedAt')">
          Updated
          <span class="visually-hidden">{{ sortDescription() }}</span>
        </button>
      </th>
      <th scope="col">Applicant</th>
      <th scope="col">Amount</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    @for (loan of loans(); track loan.id) {
      <tr>
        <td>{{ loan.updatedAt | date:'medium' }}</td>
        <td>{{ loan.applicantName }}</td>
        <td>{{ loan.amount | currency:loan.currency }}</td>
        <td><a [routerLink]="[loan.id]">Review {{ loan.applicantName }}</a></td>
      </tr>
    } @empty {
      <tr><td colspan="4">No applications match these filters.</td></tr>
    }
  </tbody>
</table>

Sorting navigates to URL state or updates the authoritative query. aria-sort belongs on the active header according to semantics. A visual arrow alone is insufficient.

Responsive design should not destroy label/value relationships. On narrow screens, a card layout may be better than horizontal scrolling, but preserve headings and actions. Test zoom, long translations and large text.

Virtual scrolling helps thousands of rows but complicates table semantics, focus and find-in-page. Prefer server pagination for business queues; virtualise only after measuring and accessibility testing.

50. Dialogs, overlays and focus

An approval confirmation needs the exact application, action and consequence. When it opens, move focus inside; trap focus appropriately; close on Escape unless that would be unsafe; restore focus to the initiating control.

Do not let a stale dialog approve a new selection. Bind it to immutable loanId, expected version and proposed command. Recheck the current server version when executing.

Angular CDK/Material handles overlay mechanics, but the application still supplies title, description, accessible name and safe button order. Avoid generic “Are you sure?” text.

Approve application LN-1042?
This records the decision for version 7 and notifies downstream processing.
[Cancel] [Approve application]

If the command fails, keep or close the dialog according to recovery design and move focus to the error. Do not place server exception text directly into it.

51. Internationalisation and locale correctness

Amounts, dates and messages vary by locale. Use Angular formatting pipes with explicit currency and configured locale. Do not store formatted display strings in API DTOs when clients need raw semantic values.

Translation can expand text substantially. Components must not depend on English button width. Error contracts should carry stable codes/field paths; the frontend maps them to translated text where product design permits. Some regulated server messages may require approved server localisation.

Pluralisation, sentence order and gender cannot be solved by concatenating fragments. Use the project’s i18n message system and give translators context.

Time zones are business semantics. API timestamps should include an offset/UTC. “Application date” may be local to a jurisdiction. Convert at a defined boundary and test daylight-saving transitions. JavaScript Date parsing of date-only values can surprise; keep date-only contracts distinct from instants.

Right-to-left layouts require logical CSS properties and visual testing. Icons implying direction may need mirroring while brand icons do not.

52. Offline and unstable network behaviour

An authenticated approval workspace should not pretend it can safely approve offline unless the product has a full synchronisation design. It can retain unsaved local notes temporarily, show connection state and allow retry with the same operation ID.

Browser “online” status is only a hint; an API can fail while the network appears online. Drive authoritative status from requests. Avoid an infinite global retry loop.

If autosave is required, define debounce, version, operation ID, conflict and privacy/storage. Draft notes in browser storage may be sensitive and persist after logout; use approved encrypted/server draft storage or do not persist.

Service workers can cache application shells and public assets. Be extremely careful caching authenticated API responses. Version and invalidate caches during deployment and identity change.

53. Resolver versus component loading

Route resolvers can ensure data before activation, simplifying the component, but they delay navigation and need a loading/error experience at the router level. Component/resource loading renders the shell quickly and shows state inside the page.

Use resolvers for data genuinely required to decide or render the route, not every secondary panel. Ensure resolver HTTP is cancelled on abandoned navigation and errors map to a meaningful route outcome.

Junior: If a resolver loads the loan, should the component fetch it again for freshness?

>

Senior: No automatic duplicate. Transfer the resolved value into the feature’s state or consume it directly, then define an explicit revalidation policy.

Guards should not fetch large domain data simply to duplicate API authorisation. A lightweight entitlement may shape navigation, but the destination API remains secure.

54. Testing router and HTTP integration

Use Angular’s router testing facilities to navigate by URL and assert the rendered standalone component and parameters. Test invalid IDs, guard redirects, back/forward query changes and not-found outcomes.

HTTP tests should verify one request, method, URL, body and approved headers, then flush unknown/malformed responses:

it('sends expected version and operation id', () => {
  const command = approveCommandFixture();
  api.approve(command).subscribe();

  const request = httpTesting.expectOne(`/api/v1/loans/${command.loanId}/approval`);
  expect(request.request.method).toBe('POST');
  expect(request.request.headers.get('Idempotency-Key')).toBe(command.operationId);
  expect(request.request.body.expectedVersion).toBe(command.expectedVersion);

  request.flush(loanDetailWireFixture());
});

Do not unit-test HttpClient. Test the adapter’s contract. Add API consumer/producer contract tests in CI so a compatible mock cannot drift from the real backend.

Component tests should not call real HTTP. Full browser tests run against a controlled API/database for critical journeys. Each layer has a claim.

55. Testing SSR and hydration

Render public routes on the server and inspect meaningful HTML, title, canonical metadata and no browser-global error. Then hydrate in a real browser and verify interaction without mismatch warnings or duplicate requests.

Freeze or transfer time-dependent data. An SSR component that renders new Date() can differ milliseconds later on the client. Random IDs in markup also mismatch unless generated deterministically or transferred.

Test CSP in the deployed configuration, including nonces for required scripts/styles. Local development may not expose production policy failures.

For incremental hydration/@defer, click before hydration if event replay is expected, navigate and test keyboard focus. Measure whether the technique improves field metrics rather than only build size.

56. Incident clinic: login refresh loops forever

Every 401 triggers refresh. The refresh endpoint itself returns 401, and the interceptor intercepts it too. Requests recurse, UI flickers and API traffic spikes.

Immediate mitigation may disable the broken release or refresh path. Diagnose interceptor URL scoping, excluded auth endpoints, single-flight state and retry count.

The refresh workflow needs states:

authenticated
  -> refresh_in_progress (one request)
  -> authenticated (retry waiting eligible reads once)
  -> unauthenticated (clear protected state, redirect once)

Do not retry a non-idempotent command blindly after uncertain response. If the access token expired before acceptance, the server returns 401; if the connection failed after acceptance, operation ID protects retry. Treat cases deliberately.

Add tests with three simultaneous 401s, failed refresh and a refresh endpoint 401. Assert one refresh, one logout transition and no recursion.

57. Incident clinic: SSR leaks user-specific HTML through cache

A proxy caches an authenticated SSR response without varying correctly. Another user receives the first user’s loan name in initial HTML. This is a security incident.

Stop caching/SSR route, purge affected cache, identify scope and follow breach response. Then establish that authenticated pages use private/no-store policy or a safely partitioned cache design. Public pages and user pages need distinct hosting rules.

Do not rely on Angular hiding data after hydration; disclosure already occurred in HTML. Test response headers through the real CDN/proxy with two identities. Avoid placing sensitive data in transfer caches beyond its authorised response.

58. Architecture decision records for Angular choices

Record consequential decisions briefly:

Decision: Reactive Forms for loan review in the current application.
Context: Existing Angular application has mature custom controls and validators;
Signal Forms require a newer version and migration has not been validated.
Consequence: stable integrations and tests; more boilerplate than signal model.
Review: after Angular upgrade and custom-control compatibility proof.

Other records may cover state ownership, SSR route policy, authentication/BFF, component library, supported browsers and telemetry. Include alternatives and removal/review condition.

This prevents “modern Angular” becoming undocumented personal taste and helps the next upgrade distinguish deliberate constraints from accidents.

59. Production-readiness gate

Before pilot, demonstrate:

• project Angular/TypeScript versions and official migrations are recorded;
• route, local, form and server state have one source of truth;
• standalone feature providers have correct lifetimes;
• signal derivation is pure and RxJS workflows cancel/sequence correctly;
• API responses are runtime-validated and errors safely mapped;
• session, CSRF/CORS and resource authorisation are tested end to end;
• approval is idempotent and version-conflict aware;
• form/table/dialog meet keyboard and screen-reader requirements;
• public SSR/hydration and authenticated cache policy are tested;
• bundle budgets and real route performance meet thresholds;
• old assets/frontend and mixed API versions coexist during rollout;
• telemetry is correlated, redacted and useful for support;
• lazy-chunk, login, stale-response and API-failure runbooks exist;
• rollback restores a compatible asset/API/configuration set.

The gate allows the team to say why the workspace is ready rather than “ng build passed.”

60. A six-week mentoring sequence

Week one: components, templates, input/output, accessible native HTML. Build the card and queue using fixtures.

Week two: routes and URL-owned filters. Prove refresh and browser navigation. Add lazy feature boundaries.

Week three: signals for local/derived state and RxJS for search/HTTP. Force a stale-response race and fix it.

Week four: typed Reactive Form or an explicitly evaluated Signal Form. Implement server validation, idempotency and conflict UX.

Week five: testing across component, router, HTTP and browser boundaries. Add authentication/tenant security cases and accessibility review.

Week six: production build, SSR/prerender where appropriate, bundle/performance analysis, telemetry, canary and rollback rehearsal.

At each review, the junior explains state ownership, one async operator, one security boundary and one trace. They should be able to remove unnecessary code, not merely add framework features.

Junior: What makes somebody senior in Angular?

>

Senior: They can turn product behaviour into clear component and state boundaries, anticipate browser and network failure, protect accessibility and security, measure performance, and make upgrades without destabilising the application.

End the sequence with a code-reading exercise. Give the developer a feature they did not build and ask them to identify the route owner, provider lifetime, writable state, HTTP boundary, validation, security assumptions and loading/error path. They should point to evidence rather than infer from folder names.

Then make one small change: add a server-side filter, a new validation reason or a delayed response. Count how many places must change and whether tests explain the contract. If the feature requires editing unrelated components or duplicating state, use the exercise to improve its boundary.

The strongest Angular code is often pleasantly unremarkable. A semantic template renders a typed view model. User events call named methods. Synchronous derivation uses computed state. Time-dependent I/O uses a visible stream/resource workflow. The API owns authority. Tests interact through contracts. Deployment keeps old and new versions compatible.

That simplicity is earned through decisions. It lets the framework provide structure without allowing framework features to become the architecture. The team can then adopt Signal Forms, zoneless change detection or incremental hydration when evidence supports them, while the user journey and security contract remain stable.

Finally, always keep the complete upgrade path visible. Record deprecated APIs, third-party blockers, browser support, bundle baselines and the official migration command used. Run migrations in a focused branch, inspect every automated edit, and separate required compatibility work from optional refactoring. A smaller reviewable upgrade is easier to test, canary and reverse than a framework update combined with a complete state and form rewrite.

What I want you to take away

Angular is a serious framework for serious frontend applications.

If I were mentoring you before an interview or a new Angular project, I would give you this chain:

Angular starts with the CLI and bootstraps from main.ts. The root component renders inside index.html. Components form a tree. Templates use interpolation, property binding, event binding and modern control flow. Data moves down through inputs, events move up through outputs. CSS can be encapsulated per component. Change detection updates the view, and OnPush plus immutability improves performance. Lifecycle hooks let us initialize, react to changes and clean up resources.

TypeScript gives Angular its strength: interfaces, types, generics, utility types and compile-time safety. Services hold reusable business or API logic, and dependency injection wires them into components. RxJS handles asynchronous streams. Signals provide modern reactive state. The HTTP client talks to backend APIs, while interceptors attach tokens or handle cross-cutting request logic. The router turns URLs into screens, supports parameters, guards, resolvers and lazy loading. Reactive forms handle serious business forms with validation and state tracking. Pipes transform display values. Directives attach behaviour. Angular Material accelerates enterprise UI. Testing protects components, services, pipes, forms, routes and guards. Production builds, SSR, hydration, deferrable views and Core Web Vitals move the developer from “it works locally” to “it performs in the real world.”

The mature interview answer is this:

“Angular is a full TypeScript application framework. The real skill is not just creating components; it is designing a maintainable component tree, managing data flow clearly, using services and dependency injection correctly, handling async workflows with RxJS, using signals for state, protecting routes and APIs, building reactive forms, testing behaviour, lazy-loading features, and optimizing the application for production.”

That is the level where Angular stops being “frontend syntax” and becomes proper software engineering.