Angular Coding Interview Questions for Experienced Developers (6+ Years) 2026

Past the scenario discussion, senior Angular interviews almost always move into a live coding round — writing a custom operator, fixing a change-detection bug, or building a small piece of infrastructure from scratch. Here are the 10 coding exercises that come up most often at the 6+ years level, each with a working solution. Want the discussion-style questions first? See the Scenario-Based Questions guide.

function retryWithBackoff<T>(maxRetries = 3, delayMs = 500) {
  return (source: Observable<T>) =>
    source.pipe(
      retryWhen(errors =>
        errors.pipe(
          scan((count, err) => {
            if (count >= maxRetries) throw err;
            return count + 1;
          }, 0),
          delayWhen(count => timer(delayMs * Math.pow(2, count)))
        )
      )
    );
}
// usage: this.http.get(url).pipe(retryWithBackoff(3, 500))

@Directive({ selector: '[appHasPermission]' })
export class HasPermissionDirective {
  @Input() set appHasPermission(role: string) {
    this.permissions.has(role)
      ? this.vcr.createEmbeddedView(this.tpl)
      : this.vcr.clear();
  }
  constructor(
    private tpl: TemplateRef<unknown>,
    private vcr: ViewContainerRef,
    private permissions: PermissionsService
  ) {}
}

fromEvent(inputEl, 'keyup').pipe(
  map((e: Event) => (e.target as HTMLInputElement).value),
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.api.search(term))
).subscribe(results => this.results = results);

function usernameTakenValidator(api: UserService): AsyncValidatorFn {
  return (control: AbstractControl) =>
    timer(300).pipe(
      switchMap(() => api.checkUsername(control.value)),
      map(isTaken => (isTaken ? { usernameTaken: true } : null))
    );
}
// usage: new FormControl('', [], [usernameTakenValidator(this.userService)])

// Before (bug): view never updates under OnPush
addItem(item: Item) {
  this.items.push(item);
}

// After (fixed): new reference triggers change detection
addItem(item: Item) {
  this.items = [...this.items, item];
}

@Pipe({ name: 'timeAgo', pure: true })
export class TimeAgoPipe implements PipeTransform {
  transform(value: string | Date): string {
    const seconds = Math.floor((Date.now() - new Date(value).getTime()) / 1000);
    if (seconds < 60) return `${seconds}s ago`;
    const minutes = Math.floor(seconds / 60);
    if (minutes < 60) return `${minutes}m ago`;
    const hours = Math.floor(minutes / 60);
    return hours < 24 ? `${hours}h ago` : `${Math.floor(hours / 24)}d ago`;
  }
}

export const LOGGERS = new InjectionToken<Logger[]>('LOGGERS');

@NgModule({
  providers: [
    { provide: LOGGERS, useClass: ConsoleLogger, multi: true },
    { provide: LOGGERS, useClass: RemoteLogger, multi: true },
  ],
})
export class LoggingModule {}

// consumer: constructor(@Inject(LOGGERS) private loggers: Logger[]) {}

export class TickerComponent {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    interval(1000)
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.tick++);
  }
}

<cdk-virtual-scroll-viewport itemSize="48" class="viewport">
  <div *cdkVirtualFor="let item of items; trackBy: trackById">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

@Injectable({ providedIn: 'root' })
export class Store<T> {
  private state$: BehaviorSubject<T>;
  constructor(initial: T) { this.state$ = new BehaviorSubject(initial); }

  select<K>(selector: (state: T) => K): Observable<K> {
    return this.state$.pipe(map(selector), distinctUntilChanged());
  }

  setState(patch: Partial<T>) {
    this.state$.next({ ...this.state$.value, ...patch });
  }
}