Top 25 Angular Interview Questions
Curated questions covering components, directives, services, RxJS, routing, forms, change detection, and Angular CLI.
What is Angular and what are its key features?
Angular is a TypeScript-based open-source front-end framework by Google. Key features: component-based architecture, two-way data binding, dependency injection, RxJS-based reactivity, Angular CLI, built-in routing, forms (template-driven and reactive), and ahead-of-time (AOT) compilation.
What is the difference between AngularJS and Angular?
- AngularJS (v1) — JavaScript-based MVC framework. Uses $scope, controllers, and directives.
- Angular (v2+) — TypeScript-based component framework. Completely rewritten with a component tree, modules, and RxJS.
- Angular has better performance, mobile support, and TypeScript integration.
What are Angular components?
Components are the building blocks of Angular apps. Each component has a TypeScript class (logic), an HTML template (view), and optional CSS styles. Decorated with @Component, they define a selector, template, and style.
@Component({
selector: "app-hello",
template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
name = "Angular";
}What is a module in Angular?
An NgModule groups related components, directives, pipes, and services. Every Angular app has a root AppModule. Feature modules help organise large apps. Decorated with @NgModule with declarations, imports, exports, and providers arrays.
What is data binding in Angular?
- Interpolation {{ }} — one-way, component to template.
- Property binding [prop]="value" — one-way, component to DOM.
- Event binding (event)="handler()" — one-way, DOM to component.
- Two-way binding [(ngModel)]="value" — combines property and event binding.
What are Angular directives?
- Component directives — directives with a template (components themselves).
- Structural directives — change DOM structure: *ngIf, *ngFor, *ngSwitch.
- Attribute directives — change appearance/behaviour: ngClass, ngStyle, custom directives.
<div *ngIf="isVisible">Visible</div>
<li *ngFor="let item of items">{{ item }}</li>
<div [ngClass]="{ active: isActive }">...</div>What is dependency injection in Angular?
Angular's DI system provides instances of services to components and other services. Services are registered in providers (module, component, or root). Angular creates and manages service instances, enabling loose coupling and testability.
@Injectable({ providedIn: "root" })
export class DataService {
getData() { return ["a", "b"]; }
}
@Component({ ... })
export class MyComponent {
constructor(private data: DataService) {}
}What is the difference between template-driven and reactive forms?
- Template-driven — form logic in the template using ngModel. Simple, less boilerplate, but harder to test.
- Reactive — form logic in the component class using FormGroup/FormControl. More explicit, testable, and scalable.
// Reactive form
this.form = new FormGroup({
email: new FormControl("", [Validators.required, Validators.email]),
password: new FormControl("", Validators.minLength(8)),
});What is RxJS and how is it used in Angular?
RxJS is a library for reactive programming using Observables. Angular uses it for HTTP requests (HttpClient returns Observables), event handling, routing events, and async data streams. Common operators: map, filter, switchMap, mergeMap, catchError, takeUntil.
What is the difference between Observable and Promise?
- Promise — handles a single async value; eager (executes immediately); not cancellable.
- Observable — handles a stream of values over time; lazy (executes on subscribe); cancellable; supports operators.
- Use Observables for HTTP, events, and streams; Promises for one-time async operations.
What is Angular routing?
Angular Router maps URL paths to components. Configured with RouterModule.forRoot(routes). Supports lazy loading, route guards, child routes, and route parameters.
const routes: Routes = [
{ path: "", component: HomeComponent },
{ path: "users/:id", component: UserComponent },
{ path: "admin", loadChildren: () => import("./admin/admin.module").then(m => m.AdminModule) },
];What are route guards in Angular?
- CanActivate — controls if a route can be activated.
- CanDeactivate — controls if a route can be left.
- CanLoad — controls if a lazy-loaded module can be loaded.
- Resolve — pre-fetches data before route activation.
What is change detection in Angular?
Change detection checks if component data has changed and updates the DOM. Default strategy checks all components on every event. OnPush strategy only checks when input references change or an Observable emits, improving performance.
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
...
})What are Angular pipes?
Pipes transform data in templates. Built-in pipes: date, currency, uppercase, lowercase, json, async, number, percent. Custom pipes implement PipeTransform interface.
{{ price | currency:"USD" }}
{{ date | date:"dd/MM/yyyy" }}
{{ observable$ | async }}What is the async pipe?
The async pipe subscribes to an Observable or Promise and returns the latest value. It automatically unsubscribes when the component is destroyed, preventing memory leaks.
// Component
users$ = this.userService.getUsers();
// Template
<ul>
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
</ul>What is lazy loading in Angular?
Lazy loading loads feature modules only when their route is first accessed, reducing initial bundle size. Configured with loadChildren in the route definition using dynamic import().
What is the difference between ViewChild and ContentChild?
- @ViewChild — accesses a child component, directive, or DOM element defined in the component's own template.
- @ContentChild — accesses content projected into the component via
.
What is ng-content and content projection?
ng-content is a placeholder that allows a parent component to inject HTML content into a child component's template. Multiple named slots are supported with select attribute.
<!-- Card component template -->
<div class="card">
<ng-content select="[header]"></ng-content>
<ng-content></ng-content>
</div>
<!-- Usage -->
<app-card>
<h2 header>Title</h2>
<p>Body content</p>
</app-card>What are Angular lifecycle hooks?
- ngOnInit — after first ngOnChanges; component initialised.
- ngOnChanges — when input properties change.
- ngDoCheck — custom change detection.
- ngAfterViewInit — after component view initialised.
- ngOnDestroy — before component is destroyed; clean up subscriptions.
What is the HttpClient in Angular?
HttpClient is Angular's built-in HTTP service for making API calls. It returns Observables, supports interceptors, typed responses, and error handling.
this.http.get<User[]>("/api/users").pipe(
catchError(err => { console.error(err); return EMPTY; })
).subscribe(users => this.users = users);What are HTTP interceptors?
Interceptors intercept HTTP requests and responses globally. Used for adding auth tokens, logging, error handling, and loading indicators.
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const authReq = req.clone({ setHeaders: { Authorization: "Bearer token" } });
return next.handle(authReq);
}
}What is the difference between ngOnInit and constructor?
The constructor is called by JavaScript when the class is instantiated — use it only for DI. ngOnInit is called by Angular after input properties are set — use it for initialisation logic, API calls, and setup.
What is AOT compilation?
Ahead-of-Time (AOT) compilation compiles Angular templates and components at build time rather than at runtime. Benefits: faster rendering, smaller bundle size, earlier template error detection, and better security (no eval at runtime).
What is the difference between Subject, BehaviorSubject, and ReplaySubject?
- Subject — multicast Observable; no initial value; only emits to current subscribers.
- BehaviorSubject — requires initial value; emits current value to new subscribers.
- ReplaySubject — replays N previous values to new subscribers.
What is trackBy in *ngFor?
trackBy provides a function that returns a unique identifier for each item in a list. Angular uses it to track items and only re-render changed items instead of re-rendering the entire list, improving performance.
<li *ngFor="let user of users; trackBy: trackById">{{ user.name }}</li>
trackById(index: number, user: User) { return user.id; }