Angular Interview Questions and Answers

Angular is a TypeScript framework from Google for building single-page applications. It has routing, forms, an HTTP client, dependency injection and a CLI built in.

Main building blocks:

• Components: a class, a template and styles that control a piece of UI.
• Directives: add behaviour to elements (*ngIf, [ngClass], custom ones).
• Services: reusable logic and data access, shared through dependency injection.
• Pipes: transform values in templates (date, async).
• Router: maps URLs to components.
• Modules or standalone components: group what a piece of the app needs.

Unlike React, which is a view library, Angular is opinionated and gives you the full toolkit.

What they are checking: Whether you see Angular as a complete framework and can name its parts

A component is a directive that has its own template. A directive has no template and only changes the behaviour or appearance of an existing element.

• Component: @Component, has a template, owns a view, appears as its own tag.
• Attribute directive: changes look or behaviour of its host, for example [ngClass] or a custom highlight directive.
• Structural directive: changes the DOM layout by adding or removing elements, for example *ngIf, *ngFor.

@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  constructor(el: ElementRef<HTMLElement>) {
    el.nativeElement.style.background = 'yellow';
  }
}

What they are checking: Whether you know a component is a directive with a view

A standalone component lists its own dependencies in its imports array. An NgModule groups declarations, imports and providers for a set of components. New code should use standalone components. They are the default since Angular 19 and fully supported in Angular 18.

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [NgOptimizedImage, RouterLink],
  template: `<a routerLink="/users">Users</a>`,
})
export class UserCardComponent {}

Benefits: less repeated setup code, no module to keep in sync, easier lazy loading with loadComponent, and better tree-shaking. App bootstrap uses bootstrapApplication(AppComponent, appConfig) with providers such as provideRouter and provideHttpClient. Old NgModule code still works and can be migrated gradually.

What they are checking: Whether you are current with the standalone-first direction of Angular

Angular has four forms of binding between the component class and the template.

Two-way binding is just a property binding plus an event binding: [(x)]="v" expands to [x]="v" (xChange)="v=$event". With signals you can build two-way inputs using model().

What they are checking: Whether you can name and distinguish the binding syntaxes

Pipes transform a value inside a template, for example {{ price | currency }}. A pure pipe runs only when its input reference changes. An impure pipe runs on every change detection cycle.

• Pure (default): cheap, gives the same output for the same input, safe for formatting.
• Impure (pure: false): re-evaluated constantly, so it can be slow. The built-in async pipe is impure by design because it must watch a stream.

@Pipe({ name: 'initials', standalone: true })
export class InitialsPipe implements PipeTransform {
  transform(name: string): string {
    return name.split(' ').map(p => p[0]).join('').toUpperCase();
  }
}

Pitfall: a pure pipe will not notice an array mutated in place, because the reference is the same.

What they are checking: Whether you understand when pipes re-run and the cost of impure pipes

A service is a class that holds shared logic or state. Dependency injection (DI) is how Angular creates it and gives it to the classes that need it. So you do not call new yourself.

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  getUsers() { return this.http.get<User[]>('/api/users'); }
}

@Component({ selector: 'app-users', standalone: true, template: '' })
export class UsersComponent {
  private users = inject(UserService);
}

providedIn: 'root' registers a single app-wide instance that is tree-shakable. DI makes code easy to test because you can replace a service with a mock in the providers.

What they are checking: Whether you understand DI as a design benefit and not just syntax

The main hooks, in order:

1. constructor: class created, only DI wiring.
2. ngOnChanges: when an @Input changes (before init and on every change).
3. ngOnInit: once, after the first inputs are set; put initialisation and first data load here.
4. ngDoCheck: every change detection run, for custom checks.
5. ngAfterContentInit and ngAfterContentChecked: projected content is ready.
6. ngAfterViewInit and ngAfterViewChecked: the component view and children are ready (@ViewChild is available).
7. ngOnDestroy: cleanup before removal, unsubscribe and clear timers.

Newer code can also use afterNextRender and afterRender for DOM work that must run in the browser only.

What they are checking: Whether you know the order and what each hook is for

The constructor is a TypeScript feature. It runs when the class is created, and it should only set up dependencies. ngOnInit is an Angular hook. It runs after inputs are set, so it is the place for starting logic.

• In the constructor, @Input values are not set yet.
• ngOnInit runs once, after the first ngOnChanges.
• Keep constructors free of HTTP calls and side effects; this also makes unit tests simpler.

export class DetailComponent implements OnInit {
  @Input() id!: string;
  constructor(private api: ApiService) {}   // id is undefined here
  ngOnInit() { this.api.load(this.id).subscribe(); } // id is set
}

What they are checking: Whether you separate object construction from Angular initialisation

A Promise is a single future value, and it starts running at once. An Observable is a stream of zero or more values over time, and it does nothing until you subscribe.

A Subject is both an observable and an observer. It multicasts values to current subscribers. BehaviorSubject also holds a current value and gives it to new subscribers immediately. ReplaySubject replays a number of past values.

The Angular Router maps URL paths to components and renders them in a <router-outlet>. Routes are defined in a Routes array and registered with provideRouter.

Lazy loading downloads a part of the app only when the user goes to it. This makes the first bundle smaller and the first load faster.

Template-driven forms define the form in the HTML with ngModel. They are simple and quick. Reactive forms define the form model in the TypeScript class with FormGroup and FormControl. This is clearer, easier to test, and grows better.

Use @Input/@Output for parent and child, a shared service for unrelated components, and the router for page-to-page data.

Structural directives change the DOM structure by adding or removing elements (*ngIf, *ngFor, *ngSwitch). Angular 17 introduced built-in control flow blocks that replace them in templates and need no imports.

It tells Angular how to identify each item in a list. Then Angular can reuse existing DOM nodes instead of deleting and creating them again when the array changes.

All three are Angular helpers that do not appear as real elements, but each does something different.

AOT (ahead-of-time) compiles templates and TypeScript to JavaScript at build time. JIT compiles them in the browser at run time. AOT is the default in modern Angular.

Default change detection checks every component in the tree after any event, timer or HTTP response that Zone.js sees. OnPush checks a component only when something specific changes, which cuts work a lot in large trees.

An OnPush component is re-checked when:

• an @Input reference changes (not a mutation of the same object),
• an event handler in its own template fires,
• an async pipe emits or a signal read in the template changes,
• you call markForCheck() explicitly.

@Component({
  selector: 'app-row',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `{{ user().name }}`,
})
export class RowComponent { user = input.required<User>(); }

Use OnPush by default for presentational components, combined with immutable updates and signals or observables.

What they are checking: Whether you understand what triggers checks and how to keep data flow predictable

A signal is a value that tells its users when it changes. So Angular knows exactly which views depend on which data. They were introduced to enable precise updates, simpler state code, and a path away from Zone.js.

const count = signal(0);
const double = computed(() => count() * 2);
count.set(2);          // double() is 4
count.update(n => n + 1);

Key points:

• Read by calling the function: count().
• computed is lazy, memoised and read-only.
• effect runs side effects when dependencies change.
• Signal inputs (input()), model(), and signal queries (viewChild()) are available in Angular 17.1 to 18+.
• Signals work well with OnPush because the template registers the dependency.

What they are checking: Whether you grasp the reactivity model, not only the syntax

All four map each source value to an inner observable and flatten the results; they differ in how they handle overlapping inner observables.

An interceptor sits between the app and the network. It can read or change every HTTP request and response. Typical uses are attaching auth tokens, global error handling, logging, loading indicators and retry.

Make sure every long-lived subscription ends when the component is destroyed. The cleanest options are the async pipe, takeUntilDestroyed, or toSignal.

computed makes a new value from other signals and has no side effects. But effect runs code with side effects whenever the signals it reads change.

Guards decide whether navigation is allowed, and resolvers fetch data before the route activates. Since Angular 15 guards are plain functions that use inject().

A sync validator is a function that takes an AbstractControl and returns null when valid, or an error object when invalid. An async validator returns an observable or promise of the same.

inject() gets a dependency from the current injection context, such as a constructor, a field start value, a factory or a functional guard. You do not need constructor parameters. Angular resolves it by walking up a hierarchy of injectors.

Zone.js patches async APIs (timers, events, promises, XHR) so Angular knows when to run change detection. Zoneless means Angular learns about changes from signals, markForCheck, events and the async pipe instead. So Zone.js can be removed.

Start with signal-based services for local and feature state. Add NgRx (or NgRx SignalStore) when many features share complex state and you need a strict flow, devtools and managed side effects.

Set up TestBed with the standalone component and a fake provider for the service. Then check the drawn output and the calls.

ng-content projects markup from a parent into a component's template. ViewChild queries elements in the component's own template. ContentChild queries elements that were projected into it.

@defer loads part of a template and its dependencies later, when a trigger fires. Angular puts that code into a separate chunk automatically.

Server-side rendering (SSR) renders the page HTML on the server, so users and search crawlers get content immediately. Hydration then reuses that server DOM in the browser instead of rebuilding it.

markForCheck() marks a component and its parents to be checked in the next change detection cycle. You need this with OnPush. detectChanges() runs change detection on that component's view right now, synchronously.

Implement ControlValueAccessor and register it with the NG_VALUE_ACCESSOR token. Then the forms API can read and write the component's value.

First measure with the Angular DevTools profiler and the Chrome Performance tab. Then reduce what is drawn and what is checked.

This pattern usually means leaked subscriptions, listeners or detached DOM. Confirm it with a heap comparison, then fix the code that owns them.

Use a form control stream with debounce, removal of repeated values and switchMap. Handle loading and errors without breaking the stream.

Measure first (Lighthouse, ng build --stats-json with a bundle analyser), then cut what ships and defer the rest.

Catch 401 responses and refresh the token once. Hold the other failed requests until the refresh finishes. Then retry them with the new token.

It happens in development mode. A binding's value changes after Angular has already checked it in the same cycle. Usually a child or a lifecycle hook changes parent state during the check.

Use a reactive form and drive the dependent controls from the parent control's valueChanges. Reset the children when the parent changes.

Check that the template is told something changed. OnPush only refreshes when an input reference changes, on template events, on async pipe or signal updates, or on markForCheck.

Migrate step by step, because NgModules and standalone components work together. Use the schematic to do most of the routine work.

Put the shared state in a service that both components inject. Expose it as a read-only signal or observable. Neither component should know about the other.