PUBLIC QUESTION PREVIEW

Angular interview questions

Components, directives, services, RxJS, dependency injection, Angular CLI, and NgRx.

Showing 12 of 100 source questions. Sample answers are study material, not employer-specific hiring guidance.

How to work through this preview

Attempt each question before reading its answer. For a concept, give a definition and a concrete example. For code, state constraints, walk through a small input, and check complexity. For design, separate requirements from assumptions and explain failure handling. Use real situations for behavioral answers.

QUESTION 1 / easy / conceptual

What is Angular and how does it differ from AngularJS?

Sample answer

Angular (v2+) is a TypeScript-based, component-driven front-end framework maintained by Google. AngularJS (v1.x) was JavaScript-based and used an MVC pattern with two-way data binding via $scope and dirty checking. Key differences: Angular uses TypeScript, a hierarchical component tree, RxJS for async, and AOT compilation. AngularJS used $scope, controllers, and a digest cycle. Angular is a complete rewrite — not a version upgrade.

Hints to guide your next attempt

Think about TypeScript vs JavaScript
Component-based vs MVC

Source tags: angular / angularjs / basics / typescript

QUESTION 2 / easy / conceptual

Explain Angular's application architecture — modules, components, and services.

Sample answer

Angular apps are organized into NgModules which group related components, directives, pipes, and services. Every app has a root AppModule. Components are the UI building blocks — each has a TypeScript class, an HTML template, and CSS styles. Services hold business logic and data-fetching code and are injected into components via Dependency Injection. Routing connects URL paths to components. This separation of concerns keeps code maintainable and testable.

Hints to guide your next attempt

NgModule groups related code
Components handle UI
Services handle business logic

Source tags: architecture / modules / components / services

QUESTION 3 / medium / conceptual

What is AOT (Ahead-of-Time) compilation vs JIT (Just-in-Time) compilation in Angular?

Sample answer

JIT compiles the Angular templates in the browser at runtime — useful during development because it supports hot reload. AOT compiles templates at build time, producing smaller bundles, faster rendering, and earlier detection of template errors. AOT is the default for production builds (`ng build`). With AOT, the Angular compiler is not shipped in the bundle, significantly reducing the payload. Template errors caught at compile time rather than runtime is a major safety benefit.

Hints to guide your next attempt

When does compilation happen?
Performance implications

Source tags: aot / jit / compilation / performance

QUESTION 4 / easy / conceptual

What is NgModule? Explain the purpose of declarations, imports, providers, and bootstrap.

Sample answer

NgModule is a decorator that defines a compilation context for components. Its key metadata: declarations — components, directives, and pipes that belong to this module; imports — other modules whose exported items this module needs (e.g. BrowserModule, FormsModule); providers — services to register with the DI system at this module's scope; bootstrap — the root component Angular should render when the app starts (only in AppModule). Shared modules export reusable declarations for other modules to import.

Hints to guide your next attempt

Each property has a distinct role
declarations vs imports

Source tags: ngmodule / declarations / imports / providers / bootstrap

QUESTION 5 / easy / conceptual

What are decorators in Angular? Name and explain the most commonly used ones.

Sample answer

Decorators are TypeScript features that attach metadata to classes, methods, or properties. Common Angular decorators: @Component — marks a class as a component with template and style metadata; @NgModule — marks a module; @Injectable — marks a service as injectable; @Input/@Output — marks component properties for parent communication; @Directive — marks a directive; @Pipe — marks a pipe; @HostListener — listens to DOM events on the host element; @ViewChild/@ContentChild — queries DOM or child components. They are processed by the Angular compiler to wire up the framework.

Hints to guide your next attempt

Decorators are TypeScript metadata annotations
Think class, property, and parameter decorators

Source tags: decorators / component / injectable / input / output

QUESTION 6 / medium / conceptual

Explain Angular lifecycle hooks and their execution order.

Sample answer

Angular calls lifecycle hooks in this order: constructor (DI setup, not a hook) → ngOnChanges (called whenever @Input values change, before ngOnInit) → ngOnInit (called once after first ngOnChanges; ideal for data fetching) → ngDoCheck (every change detection cycle) → ngAfterContentInit (after ng-content projection) → ngAfterContentChecked → ngAfterViewInit (after component's view and child views are initialized) → ngAfterViewChecked → ngOnDestroy (just before component is destroyed; clean up subscriptions here). ngOnChanges only fires if the component has @Input bindings.

Hints to guide your next attempt

8 lifecycle hooks total
constructor comes before hooks

Source tags: lifecycle / hooks / ngoninit / ngondestroy / ngonchanges

QUESTION 7 / easy / coding

Write a minimal Angular component that displays a counter with increment and decrement buttons.

Sample answer

@Component({ selector: "app-counter", template: ` <div> <button (click)="decrement()">-</button> <span>{{ count }}</span> <button (click)="increment()">+</button> </div> ` }) export class CounterComponent { count = 0; increment() { this.count++; } decrement() { this.count--; } }

Hints to guide your next attempt

Use a class property for count
Bind button clicks to methods

Source tags: component / event-binding / interpolation / beginner

QUESTION 8 / easy / coding

Write a component that uses ngOnInit to fetch a list of users from a service and display them.

Sample answer

@Component({ selector: "app-users", template: ` <ul> <li *ngFor="let user of users">{{ user.name }}</li> </ul> ` }) export class UsersComponent implements OnInit { users: User[] = []; constructor(private userService: UserService) {} ngOnInit() { this.userService.getUsers().subscribe(data => this.users = data); } }

Hints to guide your next attempt

Inject service in constructor
Subscribe in ngOnInit

Source tags: ngoninit / service / http / ngfor

QUESTION 9 / easy / conceptual

What is the Angular CLI? List 5 essential commands and what they do.

Sample answer

Angular CLI is a command-line tool for scaffolding, building, and maintaining Angular apps. Key commands: `ng new my-app` — creates a new Angular project with workspace configuration; `ng serve` — starts the dev server with hot reload on localhost:4200; `ng generate component name` (or `ng g c`) — creates a component with all 4 files; `ng build --configuration production` — AOT-compiles and optimizes the app for production; `ng test` — runs unit tests via Karma/Jasmine; `ng lint` — runs ESLint across the project.

Hints to guide your next attempt

ng generate, ng serve, ng build...

Source tags: cli / ng-serve / ng-build / ng-generate

QUESTION 10 / medium / conceptual

What is the difference between a feature module and a shared module in Angular?

Sample answer

A feature module groups all code for a specific application feature — components, services, routes — and is often lazy-loaded. For example, a UserModule or OrderModule. A shared module contains reusable declarations (components, pipes, directives) and imports of commonly needed Angular modules (CommonModule, ReactiveFormsModule) that multiple feature modules need. You export everything from SharedModule and import it wherever needed. Services should generally not be provided in SharedModule to avoid multiple instances when the module is imported by lazy-loaded modules.

Hints to guide your next attempt

Feature module is for a feature domain
Shared module is for reusables

Source tags: modules / feature-module / shared-module / lazy-loading

QUESTION 11 / easy / conceptual

What are the 4 types of data binding in Angular? Explain each with syntax.

Sample answer

1. Interpolation: {{ expression }} — renders a component property value in the template. 2. Property binding: [property]="value" — sets a DOM property from a component value, e.g. [disabled]="isLoading". 3. Event binding: (event)="handler()" — listens to DOM events and calls a component method, e.g. (click)="save()". 4. Two-way binding: [(ngModel)]="prop" — combines property and event binding; updates the component when the user types and updates the DOM when the property changes. Requires FormsModule. Under the hood, [(x)] is shorthand for [x]="val" (xChange)="val=$event".

Hints to guide your next attempt

Interpolation, property, event, two-way

Source tags: data-binding / interpolation / property-binding / event-binding / two-way

QUESTION 12 / easy / coding

Write a component that demonstrates property binding, event binding, and two-way binding together.

Sample answer

@Component({ selector: "app-binding-demo", template: ` <input [placeholder]="hint" (focus)="onFocus()" [(ngModel)]="name" /> <p>Hello, {{ name }}!</p> <button [disabled]="!name" (click)="clear()">Clear</button> ` }) export class BindingDemoComponent { hint = "Enter your name"; name = ""; onFocus() { console.log("focused"); } clear() { this.name = ""; } }

Hints to guide your next attempt

Use [value], (input), and [(ngModel)] in one template

Source tags: property-binding / event-binding / two-way / ngmodel

Check understanding, not recognition

Can you explain the answer without reading it?
Can you show when the approach fails or needs a different assumption?
Can you connect the concept to a real project, task, or decision you have made?
Can you distinguish a simplified interview example from a production requirement?

A LITTLE MORE CLARITY

Frequently asked questions

How many Angular questions are shown here?

This public preview shows 12 questions with the supplied answers from the app's 100-question Angular bank. Full interactive practice requires signing in.

Should I memorize the sample answers?

Use them as reference explanations, not a script or a guarantee of technical correctness for every environment. Explain your assumptions, validate code against your language and version, and discuss trade-offs. Behavioral answers should be built from your own experience.

What do hints and solution steps mean?

Hints identify ideas to consider before reading the answer. When the source question includes steps, they are shown as a separate walkthrough. Example capacities and design targets in a solution are assumptions for that exercise, not real system statistics.

BUILD YOUR NEXT OPPORTUNITY

Practice Angular actively.

Open Topic Practice