Interview Prep: Junior (50 Q)

50 questions covering the Angular fundamentals interviewers ask junior candidates. Each answer explains the why, not just the what.

Components & Templates

1. What is a component in Angular?

A component is the fundamental building block of an Angular app. It has three parts: a TypeScript class (logic), an HTML template (view), and optional CSS styles. The @Component decorator wires them together and defines the HTML selector used to embed the component.

2. What does the selector property in @Component do?

It defines the HTML tag name used to include the component in a parent template. selector: 'app-user-card' means you use <app-user-card /> in HTML.

3. What is standalone: true in a component?

Standalone components (Angular 14+) don't need an NgModule. They declare their own imports directly in the @Component decorator. This is the modern default in Angular 17+.

4. What are the four types of data binding in Angular?

• Interpolation {{ value }} — render data in the template
• Property binding [property]="value" — bind a DOM property to a class field
• Event binding (event)="handler()" — listen to DOM events
• Two-way binding [(ngModel)]="value" — sync input value with a class field (requires FormsModule)

5. What is the difference between property binding and interpolation?

Interpolation converts the value to a string and inserts it into the template: <p>{{ name }}</p>. Property binding sets a DOM property to the value directly: <img [src]="imageUrl" />. Use property binding when the target is a non-string property (e.g., [disabled], [hidden], [value]).

6. What is @Input() and how is it used?

@Input() decorates a component property to make it receivable from a parent component via property binding. The parent passes data down: <app-child [title]="myTitle" />. The child declares @Input() title!: string.

7. What is @Output() and EventEmitter?

@Output() decorates a property of type EventEmitter to allow a child component to send events up to its parent. The child calls this.myEvent.emit(data), and the parent listens: (myEvent)="onMyEvent($event)".

8. What is the Angular component lifecycle?

Key lifecycle hooks in order: ngOnChanges → ngOnInit → ngDoCheck → ngAfterViewInit → ngOnDestroy. The most commonly used are:

• ngOnInit — fetch data, subscribe to observables
• ngOnChanges — react to input changes
• ngOnDestroy — unsubscribe, cleanup

9. What is <ng-content> used for?

Content projection. It lets a parent component inject HTML into a child component's template — similar to React's children or Vue's slots.

10. What are template reference variables?

#refName on a template element gives you a reference to it. You can pass it to methods: <input #search />, <button (click)="go(search.value)">Search</button>.

Directives & Pipes

11. What is the difference between structural and attribute directives?

Structural directives change the DOM structure — they add or remove elements (*ngIf, *ngFor, *ngSwitch). Attribute directives change the appearance or behavior of existing elements ([ngClass], [ngStyle], custom directives).

12. How does *ngIf work?

It conditionally includes or excludes an element from the DOM. When the expression is falsy, the element and all its children are removed from the DOM entirely (not just hidden). Angular 17+ uses @if/@else syntax.

13. Why should you use trackBy with *ngFor?

Without trackBy, Angular destroys and recreates all DOM elements when the array changes. With trackBy, Angular identifies elements by a unique key and only re-renders elements that actually changed — much better for performance.

14. What does the async pipe do?

It subscribes to an Observable or Promise and returns the latest emitted value. When the component is destroyed, it automatically unsubscribes — preventing memory leaks. This is the preferred way to consume Observables in templates.

15. How do you create a custom pipe?

Create a class decorated with @Pipe({ name: 'myPipe', standalone: true }) implementing PipeTransform. Implement the transform(value, ...args) method. Import it in the component where you use it.

16. What is the difference between a pure and impure pipe?

A pure pipe (default) only re-runs when the input reference changes. An impure pipe (pure: false) re-runs on every change detection cycle. Impure pipes are expensive — avoid them for filtering/sorting large arrays.

Services & DI

17. What is a service in Angular?

A class decorated with @Injectable that provides shared logic, data access, or state across components. Services follow the single responsibility principle — a UserService handles users, AuthService handles authentication, etc.

18. What does providedIn: 'root' mean?

It registers the service with the root injector, creating a single shared instance (singleton) available anywhere in the app. It's also tree-shakeable — if nothing injects the service, it won't be bundled.

19. What is dependency injection in Angular?

Angular's DI system automatically instantiates services and injects them where requested. You don't call new UserService() — Angular creates and manages the instance for you, based on the providers configuration.

20. What is the difference between constructor injection and inject()?

Both inject a service into a class. inject() (Angular 14+) is the modern approach — it requires no constructor and can be called at field initialization time. Constructor injection is the classic approach and still valid.

21. Can components have their own service instance?

Yes. Add the service to the component's providers array: providers: [MyService]. This creates a new instance scoped to that component and its children, independent of the app-wide singleton.

Routing

22. What is the Angular Router?

The built-in routing library that maps URLs to components, manages navigation history, supports route parameters, guards, and lazy loading.

23. What is <router-outlet>?

A placeholder component that renders the component matched by the current URL. When the user navigates to /users, the UsersComponent renders inside <router-outlet>.

24. How do you read a route parameter?

Inject ActivatedRoute and call this.route.snapshot.paramMap.get('paramName'). For params that change without navigation, subscribe to this.route.paramMap.

25. What is the difference between routerLink and router.navigate()?

routerLink is used in templates for declarative navigation. router.navigate() is used in TypeScript code for programmatic navigation (e.g., after a form submission).

26. What is a route guard?

A function (CanActivateFn) that runs before a route is activated. Returns true to allow navigation, false or a UrlTree to redirect. Used to protect authenticated routes, check permissions, or confirm unsaved changes.

27. What is lazy loading in routing?

Splitting the app into feature bundles that are only downloaded when the user navigates to that route. Uses loadChildren or loadComponent in the route definition. Significantly reduces initial bundle size.

Forms

28. What is the difference between template-driven and reactive forms?

Template-driven forms are simpler — the form model is defined in the HTML using ngModel. Reactive forms define the model in the TypeScript class using FormBuilder/FormGroup/FormControl — they are more powerful, testable, and preferred for complex forms.

29. How do you validate a reactive form control?

Pass validators as the second argument: ['', [Validators.required, Validators.email]]. Check control.valid, control.invalid, and control.errors in the template to show error messages.

30. What does form.markAllAsTouched() do?

Marks all controls as "touched" so validation error messages appear. Useful in the submit handler to show all errors at once when the user submits an incomplete form.

Modules & Setup

31. What is NgModule?

A class decorated with @NgModule that groups related components, directives, and pipes. In modern Angular (17+), standalone components replace NgModules for most use cases, but you'll encounter NgModules in older codebases.

32. What is CommonModule?

Exports common directives like *ngIf, *ngFor, NgClass, NgStyle, and pipes like AsyncPipe, DatePipe. In standalone components you import it or import only what you need.

33. What is the purpose of angular.json?

The CLI configuration file. It defines build options, serve options, test options, and file replacements for environments (dev vs. prod). You rarely edit it manually.

34. How do you run an Angular app in production mode?

ng build creates a production build in dist/. It enables Ahead-of-Time (AOT) compilation, tree-shaking, and minification by default.

35. What is AOT compilation?

Ahead-of-Time compilation converts Angular templates and components to JavaScript during the build, rather than at runtime. It produces faster startup, smaller bundles, and catches template errors at build time.

HTTP & RxJS Basics

36. How do you make HTTP GET requests in Angular?

Inject HttpClient and call this.http.get<T>(url). It returns an Observable. Subscribe to it in the component or use the async pipe in the template.

37. What is an Observable?

An Observable is a stream that can emit zero or more values over time, then complete or error. HTTP calls are Observables — they emit one value (the response) and complete.

38. How do you unsubscribe from an Observable to prevent memory leaks?

Three approaches: (1) Use the async pipe — it auto-unsubscribes. (2) Store the subscription and call .unsubscribe() in ngOnDestroy. (3) Use takeUntilDestroyed(destroyRef) operator (Angular 16+).

39. What does switchMap do?

It maps each emission to an inner Observable and cancels the previous inner Observable when a new value arrives. This makes it ideal for search-as-you-type — if the user types while a search is in flight, the old request is cancelled.

40. What is an HTTP interceptor?

A function that intercepts every HTTP request and response. Used for adding auth headers, logging, retry logic, and global error handling.

Miscellaneous

41. What is change detection in Angular?

The mechanism Angular uses to detect changes in component data and update the DOM. The default strategy checks every component on every browser event. OnPush optimizes this by only checking when inputs change or events fire within the component.

42. What is ChangeDetectionStrategy.OnPush?

An optimization that tells Angular to only re-check this component when its @Input() references change, an event fires in the component, or an Observable emits via async pipe. It requires immutable data patterns.

43. What are Angular Signals?

A reactive primitive (Angular 16+) — a wrapper around a value that tracks who reads it and notifies them when it changes. Simpler than Observables for local state. signal(), computed(), effect().

44. What is ViewChild?

A decorator that gives you a reference to a child component, directive, or DOM element from the parent class. Available after ngAfterViewInit.

45. What is content projection?

The ability to pass HTML from a parent component into a child component's template via <ng-content>. The child defines where projected content appears; the parent provides the actual content.

46. What is ngOnChanges called with?

A SimpleChanges object mapping input property names to SimpleChange objects. Each SimpleChange has previousValue, currentValue, and firstChange.

47. What is a resolver?

A ResolveFn that pre-fetches data before a route activates. The resolved data is available in route.snapshot.data. It prevents components from rendering before their required data is ready.

48. What is the difference between pathMatch: 'full' and pathMatch: 'prefix'?

'full' matches only when the entire URL matches the path. 'prefix' (default) matches when the URL starts with the path. Always use pathMatch: 'full' when redirecting from the empty path ''.

49. What is ng-template?

A virtual element that Angular doesn't render in the DOM by itself. Used as a template reference (#name) passed to *ngIf else, *ngFor, or ng-container. Also used by structural directives internally.

50. What does this.form.value return?

A plain JavaScript object with the current values of all controls in the form. For typed forms (Angular 14+), it returns a properly typed object matching your FormGroup structure.

Quick Study Guide

Must know cold:
  Four binding types (interpolation, property, event, two-way)
  @Input / @Output lifecycle
  ngOnInit vs ngOnDestroy
  Service + DI + providedIn: 'root'
  Route params, guards, lazy loading
  Reactive forms + validators
  Observable + async pipe + unsubscription
  switchMap vs mergeMap
  OnPush change detection