Top Angular Basic Interview Questions

Got an Angular interview coming up? Whether you're new to Angular or brushing up before your Angular interview, this post is for you.

This post is part of our comprehensive Angular Interview Questions and Answers Guide, covering fundamental Angular concepts about - components, services, data binding, routing - and a few modern essentials like Signals and standalone components.

If you're looking for Angular basic interview questions or preparing for Angular interview questions for freshers, you're in the right place.

Let's jump in.

Top 20 Angular basic interview questions and answers

1. What is Angular?

Angular is a modern, open-source framework developed by Google using TypeScript that allows developers to build dynamic, modern single-page web applications.

It provides:

• Modularity via NgModules
• Reusable UI components
• Two-way data binding
• Dependency injection for clean architecture
• Routing for single-page navigation

2. What are Components in Angular?

Angular components are the core building blocks of any Angular application. Each component manages a specific section of the user interface called a view.

A component is made up of three key parts:

• Template - defines the HTML structure
• Class - written in TypeScript, holds data and logic
• Metadata - defined using @Component, links the class with its template, selector, and styles

Components are self-contained, reusable, and testable, forming a tree of nested components that make up the entire application.

Code example:

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

@Component({
  selector: 'app-welcome',
  template: `<h2>Welcome, {{ name }}!</h2>`,
  styles: [
    `
      h2 {
        color: #1976d2;
      }
    `,
  ],
})
export class WelcomeComponent {
  name = 'Angular Developer';
}

Common follow-up: What's the difference between a component's template and templateUrl?

3. What is a Module in Angular?

NgModule is a class decorated with @NgModule that defines an Angular module - a container grouping related components, directives, pipes, and services into a cohesive unit.

It helps:

• Organize the app into logical sections
• Configure the compiler and dependency injector
• Control visibility of declarations across modules

Key properties in @NgModule include:

• declarations - components, directives, and pipes in this module
• imports - other modules to use their features
• providers - services available for dependency injection
• exports - elements made available to other modules

Code example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome.component';

@NgModule({
  declarations: [AppComponent, WelcomeComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Since Angular 14, standalone components can work without NgModules, but modules remain useful for organizing imports and providing services.

4. What is Data Binding in Angular?

Data binding in Angular connects the component's data with the template (view), keeping them in sync. It lets you display values, respond to user input, and update the UI automatically.

There are two main types:

1. One-way data binding

Data flows in one direction - either from component → view or view → component.

• Interpolation: {{ value }} - shows data
• Property Binding: [property]="value" - binds DOM properties
• Event Binding: (event)="handler()" - listens to user actions

<h3>{{ title }}</h3>
<!-- Interpolation -->
<img [src]="imageUrl" />
<!-- Property binding -->
<button (click)="onClick()">Click</button>
<!-- Event binding -->

2. Two-way data binding

Data flows both ways - updates in the view reflect in the component and vice versa.

Uses the [(ngModel)] directive (requires FormsModule).

<input [(ngModel)]="username" />
<p>Hello, {{ username }}!</p>

export class AppComponent {
  title = 'Data Binding Example';
  imageUrl = 'logo.png';
  username = '';
  onClick() {
    alert(`Hello ${this.username || 'Angular Dev'}!`);
  }
}

5. What is a Directive in Angular?

Directives in Angular are classes that add behavior to elements. They let you manipulate the DOM, change appearance, or modify structure.

Types of directives:

• Component directives - have a template; act as custom elements.
• Structural directives - modify DOM layout. Prefixed with *. Examples: *ngIf, *ngFor.
• Attribute directives - change element appearance or behavior. Examples: NgClass, NgStyle.

Code example:

<!-- Component Directive -->
<app-greeting [name]="userName"></app-greeting>

<!-- Structural Directive -->
<div *ngIf="isVisible">Visible content</div>

<!-- Attribute Directive -->
<div [ngClass]="{'highlight': isHighlighted}">Styled content</div>

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  userName = 'Nitesh';
  isVisible = true;
  isHighlighted = false;
}

// Child Component (Component Directive)
@Component({
  selector: 'app-greeting',
  template: `<p>Hello, {{ name }}!</p>`,
})
export class GreetingComponent {
  name = '';
}

6. What is a Service in Angular?

A Service is a class decorated with @Injectable() that contains business logic and data operations shared across multiple components.

Key features:

• Singleton pattern - one instance shared app-wide
• Dependency injection - injected into components via constructor
• Separation of concerns - keeps business logic out of components

Common uses:

• API calls and HTTP requests
• Data sharing between components
• Business logic and calculations

Code example:

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('/api/data');
  }
}

Usage in component:

export class MyComponent {
  constructor(private dataService: DataService) {}

  loadData() {
    this.dataService.getData().subscribe((data) => {
      // Handle data
    });
  }
}

Common follow-up: What's the difference between providedIn: 'root' and adding a service to the providers array in a module?

7. What is Dependency Injection in Angular?

Dependency Injection (DI) is a design pattern where Angular automatically provides dependencies (like services) to components instead of components creating them manually.

Key benefits:

• Loose coupling - components don't create their own dependencies
• Testability - easy to mock dependencies for testing
• Reusability - same service instance shared across components

How it works:

1. Register services using @Injectable() and providedIn
2. Inject dependencies via constructor parameters
3. Angular's injector creates and manages instances

Code example:

// Service
@Injectable({
  providedIn: 'root', // Makes the service a singleton available throughout the app
})
export class AuthService {
  isLoggedIn(): boolean {
    return true;
  }
}

// Component
export class HeaderComponent {
  constructor(private authService: AuthService) {
    // authService is now an instance provided by Angular's DI
  }

  checkAuth() {
    return this.authService.isLoggedIn();
  }
}

Angular creates the AuthService instance automatically and injects it into any component that needs it.

Common follow-up: What are the benefits of using Dependency Injection?

8. What is TypeScript and why does Angular use it?

TypeScript is a superset of JavaScript that adds static typing and modern features. Angular is built with TypeScript by default.

Benefits for Angular:

• Type safety - catch errors at compile time
• Better IDE support - autocomplete, refactoring
• Object-oriented features - classes, interfaces, decorators
• Modern JavaScript features - async/await, modules

Example:

interface User {
  id: number;
  name: string;
  email: string;
}

export class UserComponent {
  user: User = {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com',
  };
}

9. What is Angular Router?

Angular Router enables navigation between different views/components in a single-page application.

Key concepts:

• Routes - map URLs to components
• Router outlet - placeholder for routed components
• Navigation - programmatic and declarative routing

Basic setup:

// app-routing.module.ts
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

<!-- app.component.html -->
<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

10. What are Angular Pipes?

Pipes transform data in templates without changing the original data. They're used for formatting display values.

Built-in pipes:

• DatePipe - format dates
• CurrencyPipe - format currency
• UpperCasePipe - convert to uppercase
• JsonPipe - display objects as JSON

Usage:

<p>{{ today | date:'short' }}</p>
<p>{{ price | currency:'USD' }}</p>
<p>{{ name | uppercase }}</p>
<p>{{ user | json }}</p>

Custom pipe example:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Usage: <p>{{ 'Angular' | reverse }}</p> outputs "ralugnA"

11. What are Angular Lifecycle Hooks?

Lifecycle hooks are methods that Angular calls at specific moments in a component's lifecycle.

Common hooks:

• ngOnInit - after component initialization
• ngOnDestroy - before component destruction
• ngOnChanges - when input properties change
• ngAfterViewInit - after view initialization

Example:

export class MyComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component initialized');
  }

  ngOnDestroy() {
    console.log('Component destroyed');
    // Cleanup subscriptions
  }
}

Common follow-up: When should you use ngOnDestroy to clean up resources?

12. What is Event Binding in Angular?

Event binding listens to DOM events and responds to user actions like clicks, key presses, or mouse movements.

Syntax: (event)="handler()"

Examples:

<button (click)="onClick()">Click me</button>
<input (keyup)="onKeyUp($event)" />
<div (mouseenter)="onMouseEnter()">Hover me</div>

export class MyComponent {
  onClick() {
    console.log('Button clicked!');
  }

  onKeyUp(event: any) {
    console.log('Key pressed:', event.target.value);
  }

  onMouseEnter() {
    console.log('Mouse entered!');
  }
}

13. What is Property Binding in Angular?

Property binding sets DOM element properties dynamically using component data.

Syntax: [property]="expression"

Examples:

<img [src]="imageUrl" [alt]="imageAlt" />
<button [disabled]="isDisabled">Submit</button>
<div [class.active]="isActive">Content</div>
<input [value]="inputValue" />

export class MyComponent {
  imageUrl = 'logo.png';
  imageAlt = 'Company Logo';
  isDisabled = false;
  isActive = true;
  inputValue = 'Default text';
}

14. What is Interpolation in Angular?

Interpolation displays component data in templates using double curly braces {{ }}.

Features:

• Data display - show component properties
• Expression evaluation - simple calculations
• Method calls - display method results

Examples:

<h1>{{ title }}</h1>
<p>Welcome, {{ user.name }}!</p>
<p>Total: {{ price * quantity }}</p>
<p>Current time: {{ getCurrentTime() }}</p>

export class MyComponent {
  title = 'My App';
  user = { name: 'John' };
  price = 10;
  quantity = 2;

  getCurrentTime() {
    return new Date().toLocaleTimeString();
  }
}

15. What are Signals in Angular?

Signals (introduced in Angular 16) are a reactive primitive for managing state and change detection. They provide a simpler, more performant way to handle reactive data.

Key features:

• Fine-grained reactivity - only updates what changes
• Better performance - optimized change detection
• Simpler syntax - easier to read and write
• Computed values - automatically derived from other signals

Basic usage:

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ doubleCount() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  // Create a signal
  count = signal(0);

  // Computed signal - automatically updates
  doubleCount = computed(() => this.count() * 2);

  increment() {
    // Update signal value
    this.count.update((value) => value + 1);
  }
}

Signals improve Angular's reactivity model and are the future direction of the framework.

16. What are Standalone Components in Angular?

Standalone components (introduced in Angular 14+) are components that don't require NgModules. They simplify Angular applications by allowing components to be self-contained.

Key benefits:

• No NgModule needed - components work independently
• Simpler imports - import dependencies directly in the component
• Better tree-shaking - smaller bundle sizes
• Modern Angular approach - recommended for new projects

Example:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h2>{{ userName }}</h2>
    <input [(ngModel)]="userName" />
  `,
})
export class UserComponent {
  userName = 'John';
}

17. What is Angular's new Control Flow Syntax?

Angular 17+ introduced a new built-in control flow syntax with @if, @for, and @switch to replace structural directives like *ngIf and *ngFor.

Key features:

• Better performance - optimized by the compiler
• Cleaner syntax - more readable and intuitive
• Type-safe - better TypeScript support
• Built-in - no imports needed

Examples:

<!-- Conditional rendering with @if -->
@if (isLoggedIn) {
<p>Welcome back!</p>
} @else {
<p>Please log in</p>
}

<!-- Loop with @for -->
@for (user of users; track user.id) {
<div>{{ user.name }}</div>
} @empty {
<p>No users found</p>
}

<!-- Switch statement -->
@switch (status) { @case ('pending') { <span>Pending...</span> } @case
('complete') { <span>Done!</span> } @default { <span>Unknown</span> } }

export class MyComponent {
  isLoggedIn = true;
  users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ];
  status = 'pending';
}

18. What is Angular Forms?

Angular Forms handle user input, validation, and form submission. There are two approaches:

Template-driven forms:

• Simpler syntax using directives
• Good for basic forms
• Uses FormsModule

Reactive forms:

• More control and flexibility
• Better for complex forms
• Uses ReactiveFormsModule

Template-driven example:

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <input name="username" [(ngModel)]="user.username" required />
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

export class MyComponent {
  user = { username: '' };

  onSubmit(form: any) {
    if (form.valid) {
      console.log(this.user);
    }
  }
}

Reactive forms example:

import { FormBuilder, Validators } from '@angular/forms';

export class MyComponent {
  userForm = this.fb.group({
    username: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

19. What are @Input and @Output decorators?

@Input and @Output decorators enable communication between parent and child components.

@Input - passes data from parent to child:

// Child Component
export class ChildComponent {
  @Input() userName: string = '';
}

<!-- Parent Template -->
<app-child [userName]="parentName"></app-child>

@Output - sends events from child to parent:

// Child Component
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  sendMessage() {
    this.notify.emit('Hello from child!');
  }
}

<!-- Parent Template -->
<app-child (notify)="handleMessage($event)"></app-child>

// Parent Component
handleMessage(message: string) {
console.log(message);
}

20. What are Observables in Angular?

Observables are a key part of Angular's reactive programming approach, used extensively for handling asynchronous operations.

Key concepts:

• Stream of data - emit values over time
• Lazy - don't execute until subscribed
• Used in Angular - HTTP requests, event handling, routing
• RxJS library - provides operators for transforming data

Basic example:

import { Observable } from 'rxjs';

export class DataComponent {
  constructor(private http: HttpClient) {}

  getData(): void {
    // HTTP returns an Observable
    this.http.get('/api/users').subscribe({
      next: (data) => console.log(data),
      error: (error) => console.error(error),
      complete: () => console.log('Request completed'),
    });
  }
}

Common RxJS operators: map, filter, switchMap, debounceTime

Remember: Always unsubscribe from Observables in ngOnDestroy to prevent memory leaks (except for HTTP requests which auto-complete).

Common beginner mistakes in Angular interviews

Avoid these common pitfalls that can cost you in interviews:

1. Confusing Components and Modules

• Mistake: Saying "components and modules are the same thing"
• Reality: Components control views; modules organize and group components, services, and other features.

2. Not understanding change detection

• Mistake: Not knowing when Angular updates the view
• Reality: Angular uses zone.js to detect changes. Modern Angular uses Signals for more efficient reactivity.

3. Forgetting to unsubscribe from Observables

• Mistake: Creating subscriptions without cleaning them up
• Reality: Always unsubscribe in ngOnDestroy to prevent memory leaks (except HTTP calls).

// ❌ Bad
ngOnInit() {
this.dataService.getData().subscribe(data => this.data = data);
}

// ✅ Good
subscription: Subscription;

ngOnInit() {
this.subscription = this.dataService.getData().subscribe(data => this.data = data);
}

ngOnDestroy() {
this.subscription?.unsubscribe();
}

4. Using wrong binding syntax

• Mistake: Mixing up [], (), and {{}} syntax
• Reality:
• {{ }} for interpolation
• [property] for property binding
• (event) for event binding
• [(ngModel)] for two-way binding

5. Not knowing the difference between providedIn: 'root' and providers[]

• Mistake: Unable to explain where services are registered
• Reality: providedIn: 'root' creates app-wide singleton; providers[] creates instance per module/component.

6. Ignoring modern Angular features

• Mistake: Only knowing old syntax like *ngIf and *ngFor
• Reality: Angular 17+ uses @if, @for, and standalone components are now standard.

7. Not understanding the component lifecycle

• Mistake: Putting initialization logic in the constructor
• Reality: Use ngOnInit for initialization, constructor only for dependency injection.

Quick concept recap

Here's a rapid-fire review of key concepts:

Before your interview

• ✅ Practice explaining each concept in 2-3 sentences
• ✅ Write code examples for components, services, and data binding
• ✅ Build a small app to demonstrate understanding
• ✅ Review your code and be ready to discuss design decisions
• ✅ Know the why - understand reasoning behind Angular patterns

Remember, every Angular developer started exactly where you are now. The fact that you're here preparing shows you're already ahead of the curve. Take a deep breath, trust in the work you've put in, and let your passion for learning shine through in your interview. You've got this! 🚀

Ready to practice with real Angular interview questions?

Level up your Angular interview prep with our carefully curated collection of Angular interview questions at GreatFrontEnd. Practice real UI questions from top tech companies and compare your approach with official solutions from experts.