All questions
Showing of 89What are the main building blocks of an Angular application?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The main building blocks of an Angular application are:
- Modules: Containers that group related components, services, and other code
- Components: Control views (HTML templates) and contain application logic
- Services: Provide specific functionality not directly related to views
- Directives: Add behavior to elements in the DOM
- Pipes: Transform displayed data
- Guards: Control navigation and access to routes
- Interceptors: Intercept HTTP requests/responses
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is TypeScript and why does Angular use it?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
TypeScript is a superset of JavaScript that adds static typing and other features. Angular uses TypeScript because:
- Type Safety: Catches errors at compile time rather than runtime
- Better IDE Support: Enhanced autocomplete, refactoring, and navigation
- Object-Oriented Programming: Supports classes, interfaces, and inheritance
- Modern JavaScript Features: Supports ES6+ features while maintaining backward compatibility
- Better Maintainability: Makes large codebases easier to manage
- Enhanced Debugging: Better error messages and debugging experience
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is the difference between a framework and a library? Is Angular a framework or library?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Library: A collection of functions that you call from your code. You control the flow and decide when to use the library.
Framework: Provides the structure and flow control. The framework calls your code (Inversion of Control).
Angular is a framework because:
- It provides the application structure and architecture
- Controls the application flow through its component lifecycle
- Uses dependency injection to manage object creation
- Provides routing, forms, HTTP client, and other built-in features
- Follows specific conventions and patterns
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is a component in Angular? How do you create one?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
A component in Angular controls a part of the screen called a view. It consists of:
- Component Class: Contains the application logic (TypeScript)
- Template: Defines the view (HTML)
- Styles: Define the appearance (CSS)
- Metadata: Tells Angular how to process the class (Decorators)
Creating a component:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: '<h1>{{title}}</h1>',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
title = 'Hello World';
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is the purpose of the @Component decorator?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The @Component decorator is metadata that tells Angular how to process a class. It provides configuration options:
- selector: CSS selector that identifies the component in templates
- template/templateUrl: HTML template for the component
- styles/styleUrls: CSS styles for the component
- providers: Services available to the component
- viewProviders: Services available to the component's view
- encapsulation: View encapsulation strategy
- changeDetection: Change detection strategy
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
Explain the difference between template and templateUrl
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
template: Defines the HTML template inline within the component decorator:
@Component({
selector: 'app-example',
template: '<h1>{{title}}</h1><p>Inline template</p>'
})
templateUrl: Points to an external HTML file:
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
Use template for simple, short templates and templateUrl for complex templates that benefit from syntax highlighting and better organization.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are the different types of data binding in Angular?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Angular supports four types of data binding:
1. Interpolation (One-way: Component to Template):
<h1>{{title}}</h1>
2. Property Binding (One-way: Component to Template):
<img [src]="imageUrl">
<button [disabled]="isDisabled">
3. Event Binding (One-way: Template to Component):
<button (click)="onClick()">Click me</button>
4. Two-way Binding:
<input [(ngModel)]="username">
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
Explain the difference between interpolation and property binding
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Interpolation converts component property values to strings and embeds them in HTML:
<h1>Welcome {{userName}}</h1>
<img src="{{imageUrl}}">
Property Binding sets element properties to component property values:
<h1 [textContent]="userName"></h1>
<img [src]="imageUrl">
Key Differences:
- Interpolation is limited to string values; property binding can handle any type
- Property binding is more secure as it prevents script injection
- Use property binding for non-string properties like boolean, number, or object
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is event binding and how do you pass data with events?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Event binding listens to and responds to user actions like clicks, key presses, and mouse movements.
Basic Event Binding:
<button (click)="onClick()">Click me</button>
<input (keyup)="onKeyUp()">
Passing Event Data:
<input (keyup)="onKeyUp($event)">
<button (click)="onClick($event)">Click</button>
Component Method:
onKeyUp(event: any): void {
console.log(event.target.value);
}
onClick(event: Event): void {
console.log('Button clicked');
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are directives in Angular? What are the different types?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Directives are classes that add additional behavior to elements in Angular applications. There are three types:
1. Component Directives: Components with templates
2. Structural Directives: Change DOM layout by adding/removing elements
3. Attribute Directives: Change appearance or behavior of elements
Examples:
<!-- Structural Directives -->
<div *ngIf="condition">Content</div>
<li *ngFor="let item of items">{{item}}</li>
<!-- Attribute Directives -->
<div [ngClass]="cssClass">Content</div>
<div [ngStyle]="styleObject">Content</div>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
Explain *ngIf,*ngFor, and *ngSwitch directives
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
*ngIf: Conditionally includes or excludes an element from the DOM:
<div *ngIf="isVisible">This will show conditionally</div>
<div *ngIf="user; else noUser">Welcome {{user.name}}</div>
<ng-template #noUser>Please log in</ng-template>
*ngFor: Repeats an element for each item in a collection:
<li *ngFor="let item of items; index as i; trackBy: trackByFn">
{{i}}: {{item.name}}
</li>
*ngSwitch: Conditionally displays one element from several possibilities:
<div [ngSwitch]="condition">
<p *ngSwitchCase="'A'">Case A</p>
<p *ngSwitchCase="'B'">Case B</p>
<p *ngSwitchDefault>Default case</p>
</div>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is a service in Angular and when would you use one?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
A service is a class with a specific purpose that provides functionality not directly related to views. Services are used for:
- Data sharing between components
- Business logic that shouldn't be in components
- External communication (HTTP requests)
- Utility functions and helpers
- State management
Creating a service:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string[] = [];
getData(): string[] {
return this.data;
}
addData(item: string): void {
this.data.push(item);
}
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you inject one service into another?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Services can depend on other services through constructor injection:
@Injectable({
providedIn: 'root'
})
export class LoggerService {
log(message: string): void {
console.log(message);
}
}
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private logger: LoggerService) {}
getData(): any[] {
this.logger.log('Getting data...');
return [];
}
}
Important: Avoid circular dependencies where Service A depends on Service B and Service B depends on Service A.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is Angular Router and how do you configure routes?
What is FormBuilder and why would you use it?
How do you make HTTP requests in Angular?
When would you use ngOnChanges vs ngOnInit?
What are pipes in Angular and how do you use them?
What is Angular CLI and what are its main features?
Explain the Angular architecture and its key components
What is component communication and what are the different ways to achieve it?
What are lifecycle hooks? Name the most commonly used ones
What is two-way data binding and how does it work?
How do you handle form input and validation with data binding?
What is the difference between ngIf and hidden?
How do you create a custom directive?
What are structural directives and how do they work?
What is Dependency Injection and how does it work in Angular?
What are the different ways to provide a service in Angular?
What is the difference between providedIn: 'root' and registering in providers array?
What are route parameters and how do you access them?
What are query parameters and how do they differ from route parameters?
What are route guards and what types are available?
How do you implement lazy loading in Angular?
What are the differences between template-driven and reactive forms?
How do you implement form validation in Angular?
How do you create custom validators?
How do you handle HTTP errors in Angular?
What are HTTP interceptors and how do you use them?
How do you implement request and response transformation?
How do you handle loading states during HTTP requests?
What are Observables and why does Angular use them?
What is the difference between Observable and Promise?
How do you handle subscription management to prevent memory leaks?
What are the most commonly used RxJS operators?
Explain the complete component lifecycle and when each hook is called
How do you detect changes in child components from parent?
What is the purpose of ngAfterViewInit and ngAfterContentInit?
How do you properly clean up resources in ngOnDestroy?
How do you create a custom pipe?
What is the difference between pure and impure pipes?
How do you handle asynchronous data with pipes?
Can you create a pipe that filters an array? Is it recommended?
How do you unit test Angular components?
How do you test services with dependencies?
How do you test components with inputs and outputs?
How do you test Angular applications end-to-end?
How do you customize the Angular CLI build process?
How do you configure different environments in Angular CLI?
What is Angular Ivy and what are its benefits?
What are standalone components in Angular?
How do you implement content projection with multiple slots?
How do you handle dynamic forms in Angular?
How do you handle multiple HTTP requests with different patterns?
How does Angular's change detection work?
What are the different change detection strategies?
When and how would you manually trigger change detection?
What is Zone.js and how does it relate to change detection?
How can you optimize change detection performance?
How do you test HTTP interceptors?
What are the best practices for testing Angular applications?
What are the main performance bottlenecks in Angular applications?
What is OnPush change detection strategy and when should you use it?
How do you optimize large lists and implement virtual scrolling?
What are some techniques for reducing bundle size?
What is Angular Universal and how does it work?
What are Angular Elements and how do you create them?
How do you implement internationalization (i18n) in Angular?
What are Angular Schematics and how do you create custom ones?
How do you implement micro-frontends with Angular?
What are the main security considerations in Angular applications?
How do you implement authentication and authorization in Angular?
How do you secure HTTP communications?
How do you handle sensitive data in Angular applications?
What are Angular's built-in security features?
How do you create and use Angular CLI schematics?
What are Angular CLI builders and how do you create custom ones?
How do you implement server-side rendering (SSR) with Angular Universal?
What are signals in Angular?
This answer is part of Pro.
The full written answer, with the trade-offs and follow-ups an interviewer will probe.
No matches
Try a different filter or search term.
Angular cheatsheet
- Angular Basics01
- Components02
- Templates & Data Binding03
- Directives04
- Services & Dependency Injection05
- Routing06
- Forms07
- HTTP & Observables08
- Lifecycle Hooks09
- Change Detection10
- Pipes11
- RxJS Operators12
- + 5 more inside
- + 11 more inside
76 of 89 Angular answers are in Pro.
Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.
- Full answers + code
- AI explanations, simpler or deeper
- 1,000 AI credits / month
- Cancel anytime
Change topic
Pick a different technology or stack. Your current topic stays put until you choose a new one.
MEAN
MongoDB, Express, Angular, Node.jsMERN
MongoDB, Express, React, Node.jsDjango
Python Full-Stack DevelopmentRuby on Rails
Convention over ConfigurationServerless on AWS
Serverless Architecture on AWSInterviewers also test these - they're common to every stack, whichever one you picked above.
Flutter Mobile
Flutter Cross-Platform Mobile DevelopmentInterviewers also test these - they're common to every stack, whichever one you picked above.
Spring Boot
Enterprise Java Development.NET
Microsoft EcosystemVue
Vue.js, Vite, TypeScript, Tailwind, Node.jsGo Backend
Golang, gRPC, PostgreSQL, Redis, RabbitMQInterviewers also test these - they're common to every stack, whichever one you picked above.
FastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDInterviewers also test these - they're common to every stack, whichever one you picked above.
AI Engineer
LLMs, RAG, Agents, EvalsAI-Powered Developer
Claude Code, Copilot, Agentic WorkflowsCore SWE Interview Prep
Data structures, algorithms, OS, concurrency, networking, gitInterviewers also test these - they're common to every stack, whichever one you picked above.
Interviewers also test these - they're common to every stack, whichever one you picked above.