Beginner Angular Interview Questions and Answers

Core Angular is a full-featured, opinionated frontend framework built and maintained by Google. Written in TypeScript, it provides everything needed for large-scale web applications: routing, forms, HTTP client, animations, and state management patterns — all in one package.

Problems Angular solves:

• Structure at scale — Angular enforces a consistent architecture (modules, components, services, guards) that scales well across large teams and long-lived projects.
• Type safety — Built-in TypeScript support catches errors at compile time, not at runtime.
• Two-way data binding — Keeps UI and business logic in sync automatically without manual DOM manipulation.
• Dependency Injection — Provides a powerful DI system for managing services and testability.
• Batteries included — Routing, HTTP, forms, animations, i18n, testing utilities — all official and integrated.

Angular is commonly compared to React and Vue. Unlike React (a library), Angular is a complete framework. It is popular for enterprise applications where consistency and tooling are critical.

TypeScript Angular was rewritten in TypeScript from AngularJS (v1) and makes TypeScript a first-class requirement. TypeScript is a superset of JavaScript that adds static type checking.

Benefits for Angular development:

• Early error detection — Catch type errors, missing properties, and API mismatches at compile time before they reach users.
• IDE intelligence — Autocompletion, inline documentation, and refactoring tools work accurately with typed code.
• Decorators — Angular’s @Component, @Injectable, @NgModule decorators are a TypeScript feature.
• Interfaces and generics — Model API responses and component inputs with precision.
• Refactoring safety — Renaming a service method updates all callers automatically in a typed codebase.

// TypeScript catches this at compile time — JS wouldn't
interface User { id: number; name: string; }
const user: User = { id: 1, name: 'Alice' };
console.log(user.email); // ❌ Error: Property 'email' does not exist

Core A Component is the fundamental UI building block in Angular. Every piece of the UI — a button, a navbar, a page — is a component. Each component controls a patch of the screen and consists of three parts:

• Template — the HTML defining the view
• Class — the TypeScript code containing properties and methods
• Styles — scoped CSS for this component

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',          // HTML tag name
  template: `<h1>Hello, {{ name }}!</h1>`,  // inline template
  styles: [`h1 { color: #dd0031; }`]
})
export class GreetingComponent {
  name = 'Angular';
}

The @Component decorator tells Angular that this class is a component and provides metadata: the CSS selector used to insert it (app-greeting), the template HTML, and the styles. Use templateUrl and styleUrls to reference external files instead of inline strings.

Core An NgModule is a class decorated with @NgModule that groups related components, directives, pipes, and services into a cohesive functional block. Every Angular app has at least one root module (AppModule).

@NgModule({
  declarations: [AppComponent, NavbarComponent, UserCardComponent], // components/directives/pipes that belong here
  imports:      [BrowserModule, RouterModule, HttpClientModule],     // other modules this module needs
  providers:    [UserService, AuthGuard],                            // services registered here
  exports:      [NavbarComponent],                                   // make these available to other modules
  bootstrap:    [AppComponent]                                       // root component to launch (AppModule only)
})
export class AppModule {}

Key rules:

• A component must be declared in exactly ONE module
• To use a component from another module, that module must export it and you must import the module
• Angular 14+ introduced Standalone Components which can opt out of NgModules entirely

Data Binding Angular supports four types of data binding between the component class and the template:

• Interpolation {{ }} — renders component property values as text in the template (one-way: class → template)
  <p>Welcome, {{ username }}</p>
• Property binding [property] — sets a DOM/component property from a class expression (one-way: class → template)
  <img [src]="imageUrl">
• Event binding (event) — listens to DOM events and calls a class method (one-way: template → class)
  <button (click)="save()">Save</button>
• Two-way binding [(ngModel)] — syncs a form element value with a class property in both directions
  <input [(ngModel)]="username">

Two-way binding is shorthand for property binding + event binding combined: [(ngModel)] is syntactic sugar for [ngModel]="value" (ngModelChange)="value=$event". It requires FormsModule in your module.

Directives Directives extend HTML with new behaviour. There are three types:

• Component directives — Components are directives with a template. Every component is technically a directive.
• Structural directives — Change the DOM structure by adding, removing, or repeating elements. Prefixed with *.
  • *ngIf="condition" — add/remove element from DOM
  • *ngFor="let item of items" — repeat element for each item
  • *ngSwitch — switch between multiple templates
• Attribute directives — Change the appearance or behaviour of an existing element without altering the DOM structure.
  • [ngClass]="{'active': isActive}" — add/remove CSS classes
  • [ngStyle]="{'color': textColor}" — apply inline styles
  • Custom directives like [appHighlight]

Services A Service is a class that handles business logic, data fetching, or shared state — anything that shouldn’t live inside a component. Components should be thin: they display data and respond to user events, nothing more.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })  // auto-registered as a singleton
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

Why services are essential:

• Code reuse — one service can be injected into many components
• Separation of concerns — keeps components focused on the UI
• Testability — services are easy to mock in unit tests
• Shared state — a singleton service can share data between sibling components without prop drilling

DI Dependency Injection is a design pattern where a class receives its dependencies from an external source rather than creating them itself. Angular has a built-in hierarchical DI system.

// Without DI — component creates its own dependency (hard to test, tightly coupled)
class UserComponent {
  service = new UserService(); // ❌
}

// With DI — Angular injects the dependency (testable, loosely coupled)
@Component({ ... })
class UserComponent {
  constructor(private userService: UserService) {} // ✅ Angular injects this
}

How Angular DI works:

• Services are registered as providers — in @Injectable({ providedIn: 'root' }) (singleton), in a module’s providers array, or in a component’s providers array (new instance per component)
• Angular’s injector maintains a registry of providers and creates/caches instances
• When a component needs a service, Angular looks up the injector hierarchy and provides the correct instance

Tooling The Angular CLI (Command Line Interface) is the official tool for creating, building, testing, and maintaining Angular applications. It automates boilerplate generation and follows Angular best practices.

# Create a new project
ng new my-app --routing --style=scss

# Generate items
ng generate component features/user-list   # or: ng g c
ng generate service core/auth              # or: ng g s
ng generate module features/orders         # or: ng g m
ng generate pipe shared/currency-format    # or: ng g p
ng generate guard core/auth                # or: ng g guard

# Development server with hot reload
ng serve --open

# Production build (AOT, minification, tree-shaking)
ng build --configuration=production

# Run unit tests (Karma + Jasmine by default)
ng test

# Run end-to-end tests
ng e2e

The CLI uses schematics under the hood — code generation templates that can be extended by libraries (e.g., Angular Material: ng add @angular/material).

Lifecycle Angular calls lifecycle hook methods on components and directives at specific moments during creation, update, and destruction.

• ngOnChanges — fires when an @Input() property changes. First hook called. Receives a SimpleChanges object with previous and current values.
• ngOnInit — fires once after the first ngOnChanges. Best place for initialisation logic and data fetching. More reliable than the constructor.
• ngDoCheck — fires on every change detection cycle. Used for custom change detection logic.
• ngAfterViewInit — fires once after the component’s view (and child views) are fully initialised. Use for DOM manipulation via @ViewChild.
• ngOnDestroy — fires just before the component is destroyed. Critical for cleanup: unsubscribe from Observables, clear timers, remove event listeners.

The most used in practice are ngOnInit (setup) and ngOnDestroy (cleanup). The constructor should only be used for DI — all initialisation logic goes in ngOnInit.

Communication @Input() and @Output() are the standard mechanism for parent-child component communication.

// CHILD component
@Component({ selector: 'app-product-card', template: `
  <div>{{ product.name }} — £{{ product.price }}</div>
  <button (click)="addToCart()">Add</button>
`})
export class ProductCardComponent {
  @Input() product!: Product;                     // receives data FROM parent
  @Output() cartAdded = new EventEmitter<Product>(); // sends events TO parent

  addToCart() { this.cartAdded.emit(this.product); }
}

// PARENT template
<app-product-card
  [product]="selectedProduct"              // passes data DOWN via @Input
  (cartAdded)="onCartAdded($event)">       // listens UP via @Output
</app-product-card>

EventEmitter is an RxJS Subject under the hood. The parent handles the emitted event via event binding. For deeper communication between non-parent/child components, use a shared service with a Subject or BehaviorSubject.

Pipes A Pipe transforms data in a template before displaying it. Pipes are used with the | character in templates and can be chained.

<p>{{ price | currency:'GBP' }}</p>           <!-- £1,234.56 -->
<p>{{ today | date:'dd/MM/yyyy' }}</p>        <!-- 16/04/2026 -->
<p>{{ title | uppercase }}</p>               <!-- ANGULAR PIPES -->
<p>{{ title | lowercase }}</p>               <!-- angular pipes -->
<p>{{ user | json }}</p>                      <!-- { "id": 1, ... } -->
<p>{{ ratio | percent:'1.0-2' }}</p>         <!-- 87.50% -->
<p>{{ longText | slice:0:100 }}</p>          <!-- first 100 chars -->
<p>{{ obs$ | async }}</p>                     <!-- subscribes to Observable -->

Pure vs Impure pipes: Pure pipes (default) only re-execute when the input reference changes — very efficient. Impure pipes re-execute on every change detection cycle. The async pipe is impure and also handles unsubscription automatically.

Routing Angular Router handles client-side navigation between views without full page reloads. It maps URL paths to components.

// app-routing.module.ts
const routes: Routes = [
  { path: '',            component: HomeComponent },
  { path: 'products',    component: ProductListComponent },
  { path: 'products/:id',component: ProductDetailComponent },
  { path: 'admin',       loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '**',          component: NotFoundComponent }  // wildcard — must be last
];

@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
export class AppRoutingModule {}

<!-- app.component.html -->
<nav>
  <a routerLink="/"         routerLinkActive="active">Home</a>
  <a routerLink="/products" routerLinkActive="active">Products</a>
</nav>
<router-outlet></router-outlet>  <!-- routed component renders here -->

Access route parameters with ActivatedRoute: this.route.snapshot.params['id'] or this.route.params.subscribe(p => ...) for reactive updates. Navigate programmatically with this.router.navigate(['/products', id]).

HTTP HttpClient is Angular’s built-in module for making HTTP requests. It returns RxJS Observables (not Promises), enabling powerful operators for transformation, error handling, and cancellation.

// 1. Import HttpClientModule in AppModule (or provideHttpClient() in Angular 15+)
// 2. Inject HttpClient in a service

@Injectable({ providedIn: 'root' })
export class ProductService {
  private apiUrl = 'https://api.example.com/products';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }

  createProduct(product: Product): Observable<Product> {
    return this.http.post<Product>(this.apiUrl, product);
  }
}

// In a component
ngOnInit() {
  this.productService.getProducts().subscribe({
    next: products => this.products = products,
    error: err => this.error = err.message,
    complete: () => this.loading = false
  });
}

Forms

Template-driven forms (uses FormsModule):

• Logic is in the template using ngModel, ngForm, required, etc.
• Angular creates the form model implicitly
• Simpler for basic forms; harder to test and less flexible for complex validation

<form #f="ngForm" (ngSubmit)="submit(f)">
  <input name="email" ngModel required email>
</form>

Reactive forms (uses ReactiveFormsModule):

• Form model is created in the component class using FormControl, FormGroup, FormBuilder
• More explicit, fully testable, and scales to complex forms
• The recommended approach for most Angular applications

form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(8)]]
});

Directives

<!-- *ngIf — REMOVES element from DOM when false -->
<div *ngIf="isLoggedIn">Welcome back!</div>
<div *ngIf="isLoggedIn; else loginBlock">Welcome!</div>
<ng-template #loginBlock><p>Please log in.</p></ng-template>

<!-- [hidden] — HIDES element with CSS display:none but keeps it in DOM -->
<div [hidden]="!isLoggedIn">Welcome back!</div>

Key difference:

• *ngIf="false" — element is removed from the DOM. Child components are destroyed and their lifecycle hooks run. No memory used.
• [hidden]="true" — element stays in the DOM (just invisible). Child components remain alive and use memory. Use when you need fast toggle without destroying state.

Use *ngIf for content that won’t be shown often. Use [hidden] for frequently toggled elements where you want to preserve their state.

Directives *ngFor iterates over a collection and renders a template for each item.

<ul>
  <li *ngFor="let user of users; let i = index; let last = last">
    {{ i + 1 }}. {{ user.name }} {{ last ? '(last)' : '' }}
  </li>
</ul>

Available exported values: index, first, last, even, odd, count.

trackBy — performance optimisation: By default, Angular re-renders the entire list when the array reference changes. trackBy tells Angular how to identify items so it only re-renders changed items:

<li *ngFor="let user of users; trackBy: trackById">{{ user.name }}</li>

// Component
trackById(index: number, user: User): number { return user.id; }

Without trackBy, replacing the entire array causes Angular to destroy and recreate all DOM nodes. With trackBy, Angular reuses DOM nodes for unchanged items — critical for large or frequently updated lists.

Lifecycle

• Constructor — called by JavaScript when the class is instantiated. At this point, Angular has not yet set input properties (@Input() values are undefined). Only use for Dependency Injection — injecting services via the constructor signature.
• ngOnInit — called by Angular after it has set all input properties. Use for all initialisation logic: fetch data, subscribe to observables, set up derived values from inputs.

export class UserProfileComponent implements OnInit {
  @Input() userId!: number;
  user: User | null = null;

  constructor(private userService: UserService) {
    // userId is undefined here — don't use @Input values
  }

  ngOnInit(): void {
    // userId is now set — safe to use
    this.userService.getUser(this.userId).subscribe(u => this.user = u);
  }
}

RxJS The async pipe subscribes to an Observable or Promise and returns its latest value. When the component is destroyed, it automatically unsubscribes — preventing memory leaks.

<!-- Using async pipe — clean, no manual subscribe/unsubscribe -->
<div *ngIf="users$ | async as users; else loading">
  <li *ngFor="let user of users">{{ user.name }}</li>
</div>
<ng-template #loading><p>Loading...</p></ng-template>

Without async pipe — error-prone:

// Must manually unsubscribe or risk memory leaks
ngOnInit() { this.sub = this.users$.subscribe(u => this.users = u); }
ngOnDestroy() { this.sub.unsubscribe(); }

The async pipe also triggers change detection when a new value arrives, which is particularly important when using OnPush change detection strategy.

Styles ViewEncapsulation controls how Angular scopes CSS styles to a component so they don’t bleed into other components.

• Emulated (default) — Angular adds unique attribute selectors (_ngcontent-xxx) to CSS rules and component elements, emulating Shadow DOM without native browser support. Styles are scoped to the component.
• ShadowDom — uses the native browser Shadow DOM API. True CSS isolation. Can’t be styled from outside without CSS custom properties.
• None — no encapsulation. Styles are global and can affect other components. Useful for global base styles or third-party component overrides.

@Component({
  selector: 'app-card',
  template: `<div class="card">...</div>`,
  styles: [`.card { border: 1px solid red; }`],
  encapsulation: ViewEncapsulation.Emulated  // default
})

Patterns <ng-content> is Angular’s equivalent of React’s children prop — it allows a component to render content that is passed in by the parent. This is called content projection.

// Reusable card component
@Component({ selector: 'app-card', template: `
  <div class="card">
    <div class="card-header"><ng-content select="[card-title]"></ng-content></div>
    <div class="card-body"><ng-content></ng-content></div>
  </div>
`})
export class CardComponent {}

// Parent usage — passes content into the card
<app-card>
  <h2 card-title>User Profile</h2>
  <p>This goes into the default ng-content slot.</p>
</app-card>

The select attribute on <ng-content> uses CSS-selector syntax to allow multiple named slots (multi-slot content projection). This pattern is widely used in UI component libraries.

RxJS

• Promise — resolves once with a single value. Eager (starts immediately). Cannot be cancelled. Native JavaScript.
• Observable — can emit zero, one, or many values over time. Lazy (starts only when subscribed). Can be cancelled by unsubscribing. Part of RxJS.

// Promise — resolves once
const p = fetch('/api/users').then(r => r.json());
// Can't cancel, can't retry, no transformation operators

// Observable — lazy, cancellable, composable
const obs$ = this.http.get<User[]>('/api/users').pipe(
  retry(3),           // retry on error
  debounceTime(300),  // wait 300ms
  catchError(err => of([]))  // handle error
);

In Angular, HttpClient returns Observables. You can convert to a Promise with .toPromise() or firstValueFrom() if needed. For HTTP (single response), both work. Observables are essential for WebSockets, real-time data, and streams.