angular

typescript
import { ApplicationConfig } from '@angular/core';
import {
  provideHttpClient,
  withInterceptors,
} from '@angular/common/http';
import { retryInterceptor } from './retry.interceptor';

Angular HttpInterceptor With Exponential Backoff and Jittered Retries

angular http-interceptor rxjs
by codesnips 3 tabs
typescript
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

function hasActualValue(control: AbstractControl | null): boolean {
  return !!control && control.value !== null && control.value !== '';
}

Cross-Field Password-Confirmation Validator for Angular Reactive Forms

angular reactive-forms validators
by codesnips 3 tabs
typescript
import { Injectable, computed, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private readonly activeRequests = signal(0);

Global Loading Spinner via In-Flight Request Tracking in an Angular HttpInterceptor

angular http-interceptor rxjs
by codesnips 4 tabs
typescript
import { Injectable, NgZone } from '@angular/core';
import { Observable, Subject } from 'rxjs';

export interface ObserverOptions {
  rootMargin?: string;
  threshold?: number | number[];

Lazy-Load Images with an Angular IntersectionObserver Directive

angular directive intersectionobserver
by codesnips 4 tabs
typescript
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';

export interface HasUnsavedChanges {
  canDeactivate(): boolean | Observable<boolean>;
}

Warn Users About Unsaved Changes With an Angular CanDeactivate Guard

angular routing guards
by codesnips 3 tabs
typescript
import { Injectable, signal, computed } from '@angular/core';

export interface CurrentUser {
  id: string;
  email: string;
  roles: string[];

Guarding a Lazy-Loaded Angular Admin Route with a Functional CanActivate Role Check

angular routing lazy-loading
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, shareReplay } from 'rxjs/operators';

export interface Project {

Cache and Deduplicate HTTP GET Requests with shareReplay in an Angular Service

angular rxjs caching
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

export interface SearchResult {

Debounced Typeahead Search in Angular with switchMap and Cancellation

angular rxjs typeahead
by codesnips 3 tabs
typescript
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

export interface ConfirmDialogData {
  title: string;
  message: string;

Reusable Angular Confirmation Dialog Service Returning an Observable of the User's Choice

angular rxjs observables
by codesnips 3 tabs
typescript
import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { FormsModule } from '@angular/forms';
import { Contact, ContactStore } from './contact.store';

@Component({

Virtual Scrolling a Long List in Angular with CDK and trackBy

angular virtual-scroll cdk
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, take } from 'rxjs/operators';

Sync Angular Reactive Form State to URL Query Params With a Route-Aware Service

angular reactive-forms router
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Injectable()
export class SignupFormService {
  readonly form: FormGroup;

Multi-Step Signup Wizard in Angular with a Shared FormGroup and Stepper Service

angular reactive-forms wizard
by codesnips 4 tabs