Angular Interview Questions and Answers: 60 Questions from Easy to Hard

// app.config.ts (Angular 18, experimental)
export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
  ],
};
// also remove "zone.js" from polyfills in angular.json

const skills = signal<string[]>(['Angular']);
const count = computed(() => skills().length);
count();                          // 1

skills().push('RxJS');            // in-place mutation
skills.set(skills());             // same reference: ignored
count();                          // still 1 (cached)

skills.update(s => [...s, 'NgRx']);
count();                          // 3

export class SearchComponent {
  private jobs = inject(JobService);
  term = signal('');

  results = toSignal(
    toObservable(this.term).pipe(
      debounceTime(300),
      switchMap(t => this.jobs.search(t)),
    ),
    { initialValue: [] as Job[] },
  );
}

@Injectable({ providedIn: 'root' })
export class ShortlistStore {
  private readonly _ids = signal<number[]>([]);
  readonly ids = this._ids.asReadonly();
  readonly count = computed(() => this._ids().length);

  toggle(id: number) {
    this._ids.update(list => list.includes(id)
      ? list.filter(x => x !== id)
      : [...list, id]);
  }
}

export interface AppConfig { apiUrl: string; pageSize: number; }
export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: APP_CONFIG,
      useValue: { apiUrl: '/api', pageSize: 20 } },
    { provide: ErrorHandler, useClass: AppErrorHandler },
    {
      provide: Logger,                 // an abstract class as token
      useFactory: () => isDevMode()
        ? new ConsoleLogger()
        : new RemoteLogger(inject(HttpClient)),
    },
  ],
};
// usage: private config = inject(APP_CONFIG);

export const refreshInterceptor: HttpInterceptorFn = (req, next) => {
  const auth = inject(AuthService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status !== 401 || req.url.includes('/auth/refresh')) {
        return throwError(() => err);
      }
      // refreshToken() returns one shared in-flight call
      return auth.refreshToken().pipe(
        switchMap(token => next(req.clone({
          setHeaders: { Authorization: `Bearer ${token}` },
        }))),
      );
    }),
  );
};

export const routes: Routes = [
  {
    path: 'dashboard',
    canMatch: [() => inject(AuthService).isEmployer()],
    loadComponent: () => import('./employer/dashboard.component')
      .then(m => m.EmployerDashboardComponent),
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./seeker/dashboard.component')
      .then(m => m.SeekerDashboardComponent),
  },
];

// angular.json -> configurations.production
"budgets": [
  { "type": "initial",
    "maximumWarning": "500kB", "maximumError": "1MB" },
  { "type": "anyComponentStyle",
    "maximumWarning": "4kB", "maximumError": "8kB" }
]

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

<!-- runs on every check, for every row -->
<li>{{ formatExperience(job) }}</li>

<!-- pure pipe: runs only when its arguments change -->
<li>{{ job.minYears | yearsRange: job.maxYears }}</li>

<!-- computed signal: cached until jobs() changes -->
<p>{{ totalOpenings() }} openings</p>

@Component({
  selector: 'app-star-rating',
  standalone: true,
  template: `
    @for (s of stars; track s) {
      <button type="button" [class.on]="value >= s"
        [disabled]="disabled" (click)="pick(s)">*</button>
    }`,
  providers: [{ provide: NG_VALUE_ACCESSOR, multi: true,
    useExisting: forwardRef(() => StarRatingComponent) }],
})
export class StarRatingComponent implements ControlValueAccessor {
  stars = [1, 2, 3, 4, 5];
  value = 0;
  disabled = false;
  private onChange = (v: number) => {};
  private onTouched = () => {};

  writeValue(v: number) { this.value = v ?? 0; }
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
  registerOnTouched(fn: () => void) { this.onTouched = fn; }
  setDisabledState(d: boolean) { this.disabled = d; }

  pick(s: number) {
    this.value = s;
    this.onChange(s);
    this.onTouched();
  }
}

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

  readonly cities$ = this.http.get<City[]>('/api/cities').pipe(
    shareReplay({ bufferSize: 1, refCount: true }),
  );
}

// one-shot parallel load
forkJoin({
  profile: this.api.getProfile(),
  applications: this.api.getApplications(),
}).subscribe(({ profile, applications }) => { /* render */ });

// live filters: re-query on every change
combineLatest([this.city$, this.minExp$]).pipe(
  switchMap(([city, exp]) => this.api.search(city, exp)),
);

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withFetch()),
    provideClientHydration(withEventReplay()), // replay: Angular 18
  ],
};

export class ShortlistComponent {
  constructor() {
    afterNextRender(() => {
      // runs only in the browser, so localStorage is safe here
      this.restore(localStorage.getItem('shortlist'));
    });
  }
}

// safe: Angular sanitizes the HTML
// <div [innerHTML]="job.description"></div>

// dangerous on user content: switches sanitizing off
this.html = this.sanitizer.bypassSecurityTrustHtml(job.description);

// also bypasses Angular completely
this.el.nativeElement.innerHTML = job.description;

it('searches once after typing stops', fakeAsync(() => {
  const search = jasmine.createSpy('search').and.returnValue(of([]));
  TestBed.configureTestingModule({
    imports: [SearchComponent],
    providers: [{ provide: JobService, useValue: { search } }],
  });
  const fixture = TestBed.createComponent(SearchComponent);
  fixture.detectChanges();

  fixture.componentInstance.term.setValue('ang');
  tick(100);
  fixture.componentInstance.term.setValue('angular');
  tick(300);

  expect(search).toHaveBeenCalledOnceWith('angular');
}));

ng update @angular/core@17 @angular/cli@17
ng generate @angular/core:standalone
ng generate @angular/core:control-flow
ng test
ng update @angular/core@18 @angular/cli@18