Angular JS Interview questions: Coding Challenges

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = 'my-jwt-token';
  const cloned = req.clone({ 
    setHeaders: { Authorization: `Bearer ${token}` } 
  });
  return next(cloned);
};

this.searchControl.valueChanges.pipe(
  switchMap(term => this.http.get(`/api/search?q=${term}`))
).subscribe(results => console.log(results));

this.saveSubject.pipe(
  concatMap(data => this.http.post('/api/save', data))
).subscribe();

this.inputControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged()
).subscribe(val => console.log(val));

export function emailTakenValidator(api: ApiService): AsyncValidatorFn {
  return (ctrl) => api.checkEmail(ctrl.value).pipe(
    map(isTaken => isTaken ? { emailTaken: true } : null)
  );
}

@Component({
  selector: 'app-fast',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<p>{{ data.val }}</p>'
})
export class FastComp { @Input() data: any; }

export class ManualComp {
  private cdr = inject(ChangeDetectorRef);

  updateLocalData() {
    this.data.val = 'New';
    this.cdr.markForCheck(); 
  }
}

// In app.config.ts router setup:
provideRouter(routes, withComponentInputBinding())

// In UserComponent (URL: /user/42):
@Input() id!: string; // Automatically gets '42'

export const unsavedGuard: CanDeactivateFn<any> = (comp) => {
  if (comp.hasUnsavedChanges) {
    return confirm('Unsaved changes. Leave?');
  }
  return true;
};

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

export class CounterComp {
  count = signal(0);

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

export class CartComp {
  price = signal(100);
  tax = computed(() => this.price() * 0.2);
  total = computed(() => this.price() + this.tax());
}

export class LogComp {
  id = signal(1);
  
  constructor() {
    effect(() => {
      console.log('ID is now:', this.id());
    });
  }
}

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

export class UserCardComp {
  userId = input.required<number>();
  theme = input('light'); // Optional with default
}

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Scroll down to load chart...</div>
    }
  `
})
export class DashComp {}

@Component({
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CustomInput, multi: true }]
})
export class CustomInput implements ControlValueAccessor {
  value = '';
  onChange = (val: any) => {};
  
  writeValue(val: any) { this.value = val; }
  registerOnChange(fn: any) { this.onChange = fn; }
  registerOnTouched(fn: any) {}
}

export const API_URL = new InjectionToken<string>('API_URL');

// In app.config.ts
{ provide: API_URL, useValue: 'https://api.com' }

// In Service
private url = inject(API_URL);

const clicks$ = new Observable(sub => {
  const handler = (e: Event) => sub.next(e);
  document.addEventListener('click', handler);
  return () => document.removeEventListener('click', handler);
});

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.error('Global Catch:', error);
    // Post to Sentry/DataDog here
  }
}
// Provider: { provide: ErrorHandler, useClass: GlobalErrorHandler }

export class HostComp {
  private vcr = inject(ViewContainerRef);

  loadComp() {
    this.vcr.clear();
    const ref = this.vcr.createComponent(DynamicComp);
    ref.instance.data = 'Passed programmatically';
  }
}

import { toSignal } from '@angular/core/rxjs-interop';

export class DataComp {
  private data$ = this.http.get('/api/data');
  dataSig = toSignal(this.data$); 
}

import { toObservable } from '@angular/core/rxjs-interop';

export class RxjsBridgeComp {
  count = signal(0);
  count$ = toObservable(this.count);

  constructor() { 
    this.count$.subscribe(c => console.log(c)); 
  }
}

const cache = new Map<string, HttpResponse<any>>();

export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  if (cache.has(req.urlWithParams)) return of(cache.get(req.urlWithParams)!);
  
  return next(req).pipe(
    tap(res => { if (res instanceof HttpResponse) cache.set(req.urlWithParams, res); })
  );
};

export function trackByProp<T>(prop: keyof T): TrackByFunction<T> {
  return (_, item) => item[prop];
}

// Component: trackById = trackByProp('id');
// Template: *ngFor="let i of items; trackBy: trackById"

export function initApp(config: ConfigService) {
  return () => config.load(); // Returns Promise
}

// Providers:
{ provide: APP_INITIALIZER, useFactory: initApp, deps: [ConfigService], multi: true }

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

export class CheckboxComp {
  // Parent uses: [(checked)]="val"
  checked = model(false);

  toggle() {
    this.checked.update(v => !v);
  }
}

export class ScrollComp implements OnInit {
  private ngZone = inject(NgZone);

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      window.addEventListener('scroll', () => {
        // Heavy logic here
      });
    });
  }
}

this.ngZone.runOutsideAngular(() => {
  heavyApi((result) => {
    this.ngZone.run(() => {
      this.data = result; // UI updates now
    });
  });
});

import { isPlatformBrowser } from '@angular/common';

export class SsrComp {
  private platformId = inject(PLATFORM_ID);

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      window.localStorage.setItem('key', 'val');
    }
  }
}

export class DataSvc {
  private transferState = inject(TransferState);
  private KEY = makeStateKey<any>('MY_DATA');

  getData() {
    if (this.transferState.hasKey(this.KEY)) {
      return of(this.transferState.get(this.KEY, null));
    }
    return this.http.get('/api').pipe(
      tap(data => this.transferState.set(this.KEY, data))
    );
  }
}

export function LogTime() {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args: any[]) {
      console.time(key);
      const result = original.apply(this, args);
      console.timeEnd(key);
      return result;
    };
  };
}

// In app.config.ts
provideRouter(routes, withPreloading(PreloadAllModules))

@Injectable({ providedIn: 'root' })
export class FlaggedPreloadStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.['preload'] ? load() : of(null);
  }
}

// In main.ts
import { createCustomElement } from '@angular/elements';

createApplication(appConfig).then(appRef => {
  const el = createCustomElement(WidgetComp, { injector: appRef.injector });
  customElements.define('my-widget', el);
});

import { Injector, runInInjectionContext } from '@angular/core';

function executeLogic(injector: Injector) {
  runInInjectionContext(injector, () => {
    const service = inject(MyService);
    service.process();
  });
}

// ng generate web-worker my-worker
if (typeof Worker !== 'undefined') {
  const worker = new Worker(new URL('./app.worker', import.meta.url));
  
  worker.onmessage = ({ data }) => console.log('Result:', data);
  worker.postMessage('compute');
}

export class ThemeService {
  private doc = inject(DOCUMENT);

  setTheme(name: string) {
    let link = this.doc.getElementById('theme-css') as HTMLLinkElement;
    if (!link) {
      link = this.doc.createElement('link');
      link.id = 'theme-css'; link.rel = 'stylesheet';
      this.doc.head.appendChild(link);
    }
    link.href = `${name}.css`;
  }
}

// Providers:
{ provide: PLUGINS, useValue: PluginA, multi: true },
{ provide: PLUGINS, useValue: PluginB, multi: true }

// Consumer receives an array:
private plugins = inject(PLUGINS); // [PluginA, PluginB]

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

@Component({
  providers: [{ 
    provide: ParentToken, 
    useExisting: forwardRef(() => ChildClass) 
  }]
})
export class ChildClass {}

export class HtmlComp {
  private sanitizer = inject(DomSanitizer);
  safeHtml: SafeHtml;

  setHtml(dirtyHtml: string) {
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(dirtyHtml);
  }
}

import { config } from 'rxjs';

// Place in main.ts
config.onUnhandledError = (err) => {
  console.error('Missed by catchError:', err);
};

export function mobileMatch(url: UrlSegment[]) {
  if (window.innerWidth < 768 && url[0].path === 'dash') {
    return { consumed: url };
  }
  return null;
}
// Route config: { matcher: mobileMatch, component: MobileDashComp }

@ViewChild('tpl') tpl!: TemplateRef<any>;
private vcr = inject(ViewContainerRef);

extract() {
  const view = this.tpl.createEmbeddedView(null);
  // view.rootNodes[0] is the raw DOM element
}

<!-- Leaves it strictly as static HTML -->
@defer (hydrate never) {
  <heavy-static-footer />
}

export abstract class BaseComp {
  protected api = inject(ApiService); 
}

@Component({...})
export class ChildComp extends BaseComp {
  doWork() { this.api.get(); } // Clean inheritance
}

@Directive({
  selector: 'mat-button', // Hijacks Material Button
  standalone: true
})
export class ButtonOverrideDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.borderRadius = '8px';
  }
}

// In webpack.config.js
plugins: [
  new ModuleFederationPlugin({
    name: 'remoteApp',
    filename: 'remoteEntry.js',
    exposes: {
      './Widget': './src/app/widget.component.ts',
    },
    shared: { '@angular/core': { singleton: true } }
  })
]

import { signalStore, withState, withMethods } from '@ngrx/signals';

export const UserStore = signalStore(
  { providedIn: 'root' },
  withState({ users: [] }),
  withMethods(store => ({
    add(user) { patchState(store, { users: [...store.users(), user] }); }
  }))
);

@Component({
  selector: 'app-special-button',
  hostDirectives: [TooltipDirective, RippleDirective],
  template: '<button>Hover Me</button>'
})
export class SpecialBtnComp {}

export class SafeComp {
  private renderer = inject(Renderer2);
  private el = inject(ElementRef);

  modify() {
    this.renderer.addClass(this.el.nativeElement, 'safe-class');
  }
}

export class ChildComp implements OnInit {
  @Output() ready = new EventEmitter<boolean>();

  ngOnInit() {
    // Defers emit until current synchronous CD finishes
    Promise.resolve().then(() => this.ready.emit(true));
  }
}