Updated for Angular 17+ — Simple, clear, and memorable explanations to help you ace your next interview.
Angular is a TypeScript-based web framework by Google for building single-page applications (SPAs). It offers two-way data binding, modular architecture, and reactive forms.
- Modules — organize the app into functional units.
- Components — define UI and logic.
- Templates — define the view (HTML).
- Services — reusable business logic.
- Directives & Pipes — modify DOM and data view.
A component controls a part of the screen (view) with:
- An HTML template
- A TypeScript class
- A CSS style file It’s the heart of any Angular app.
A module groups related components, directives, and services.
The root module is usually AppModule.
Data Binding connects HTML and TypeScript.
Types:
- Interpolation →
{{value}} - Property Binding →
[property]="value" - Event Binding →
(event)="handler()" - Two-way Binding →
[(ngModel)]="value"
It syncs data between the model and view in real-time using [(ngModel)].
Directives are instructions for the DOM.
- Structural (
*ngIf,*ngFor) - Attribute (
[ngClass],[ngStyle]) - Custom (user-defined)
Pipes transform displayed data — e.g., {{price | currency:'USD'}}.
DI provides required objects (services) automatically instead of manually creating them — improves modularity.
Services contain reusable business logic shared across components.
| AngularJS | Angular |
|---|---|
| JS-based | TypeScript-based |
| MVC pattern | Component-based |
| Dirty checking | Reactive change detection |
RxJS (Reactive Extensions for JS) handles asynchronous data streams using Observables.
An Observable emits data over time. You can subscribe to receive updates and unsubscribe to stop listening.
A Subject is both an Observable and an Observer — allows multicasting (multiple subscribers).
Angular tracks component data and updates the DOM automatically when data changes.
A template defines the HTML structure linked to a component.
Decorators add metadata — like:
@Component@NgModule@Injectable@Input,@Output
- @Input — receive data from parent.
- @Output — send events to parent.
A lifecycle hook that runs once after component initialization — best for fetching data or setup logic.
ngOnChangesngOnInitngDoCheckngAfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewCheckedngOnDestroy
Routing lets you navigate between views or components using the RouterModule.
const routes: Routes = [
{ path: 'home', component: HomeComponent },
];
@NgModule({ imports: [RouterModule.forRoot(routes)] })
export class AppRoutingModule {}Loading feature modules only when needed, improving performance.
Preloads lazy-loaded modules after app load for faster next navigation.
A command-line tool to create, build, test, and deploy Angular apps.
Example:
ng new app-name, ng serve, ng build
Guards protect routes:
CanActivateCanDeactivateCanLoadResolveCanActivateChild
Prevents unauthorized users from accessing routes.
Lifecycle hook to clean up subscriptions or timers before component destruction.
Ahead-Of-Time compiles HTML and TypeScript before the browser loads the app → faster startup.
Just-In-Time compiles in the browser during runtime — useful for development.
Ivy is Angular’s rendering engine improving speed, debugging, and bundle size.
Zone.js tracks asynchronous operations to trigger change detection automatically.
Forms managed using TypeScript code and Observables.
this.form = new FormGroup({
name: new FormControl(''),
});Forms created in HTML using directives like [(ngModel)].
| Reactive | Template-driven |
|---|---|
| Code-driven | HTML-driven |
| Scalable | Simple |
| Synchronous data | Two-way binding |
Directive for two-way data binding in template-driven forms.
A helper service to create forms easily:
this.form = this.fb.group({ name: [''] });- FormControl → represents a single input.
- FormGroup → collection of FormControls.
Used with @Output() to emit custom events from a child component.
@ViewChild accesses child components, DOM elements, or directives from the parent.
Placeholder in the template where routed components are displayed.
Directive to navigate between routes:
<a routerLink="/home">Home</a>
Technique to manage shared app data — often done using NgRx or RxJS BehaviorSubjects.
A reactive state management library using Redux pattern — helps manage large-scale app states.
An RxJS Subject that holds a current value and emits it to new subscribers.
Used in HTTP to modify requests or responses globally (e.g., add headers or handle errors).
Angular’s service to make HTTP requests easily (GET, POST, PUT, DELETE).
Automatically subscribes to Observables and unsubscribes on destroy:
{{ data$ | async }}
Used for content projection — embedding dynamic HTML into components.
A template that isn’t rendered until explicitly used with *ngIf or ngTemplateOutlet.
A logical container that doesn’t render an actual DOM element — helps group structural directives.
Used for safe DOM manipulations without direct access to the browser API.
Controls how component styles are scoped.
Emulated(default)ShadowDomNone
Directives that change DOM structure — e.g. *ngIf, *ngFor.
Improves performance by uniquely identifying list items:
*ngFor="let item of items; trackBy: trackByFn"
Used with Promises to handle asynchronous code more cleanly.
| Promise | Observable |
|---|---|
| Single value | Multiple values |
| Eager | Lazy |
| Not cancellable | Cancellable |
BehaviorSubject stores the latest value and emits it to new subscribers, while Subject does not.
forRoot()→ main app routing.forChild()→ feature module routing.
User-defined pipes to transform data:
@Pipe({name: 'capitalize'})
transform(value: string) { return value.toUpperCase(); }Creating components at runtime using ViewContainerRef and ComponentFactoryResolver.
Used to manually trigger or control change detection.
- Pure → executes only when input changes.
- Impure → executes on every change detection.
It holds dependencies, scripts, and project metadata.
TypeScript configuration file defining compiler options and paths.
Provides browser compatibility for older browsers.
Holds app configuration for dev or prod environments.
Main entry HTML file for Angular apps — bootstraps the root component.
Bootstraps the root Angular module using platformBrowserDynamic().bootstrapModule(AppModule).
Root module that declares components and imports other modules.
Blueprints used by CLI to generate files like components, services, modules, etc.
Animations built using Angular’s API (@angular/animations) for smooth transitions.
Renderer2is safer for DOM operations.ElementRefdirectly accesses DOM (avoid when possible).
Upcoming approach removing Zone.js, allowing manual control of change detection (Angular 18+ direction).
Introduced in Angular 14 — components that don’t require a module.
Signals are reactive primitives for state management — a simpler alternative to Observables.
Pre-renders the app on the server using Angular Universal for faster load and SEO.
Tool for enabling server-side rendering in Angular apps.
Builds modern and legacy bundles for different browsers automatically.
- ViewEngine → older rendering engine.
- Ivy → newer, faster, modular.
Progressive Web App — adds offline support, installability, and caching.
Script that runs in the background to enable offline support.
Used internally to create instances of Renderer2.
Listens to DOM events directly inside a component.
Binds class or style properties to host element.
Executes code inside Angular’s zone to trigger change detection.
A function that runs before app startup — useful for loading configs.
- Faster rendering
- Fewer runtime errors
- Smaller bundle size
Bundles all scripts, assets, and modules for production.
Used to enforce input rules:
Validators.required, Validators.minLength(5)User-defined rule for form validation:
function noSpace(control: FormControl) { ... }Pre-fetches data before loading a route.
93. What is the difference between ngIf and hidden?
*ngIfremoves the element from DOM.[hidden]just hides it via CSS.
Same as components (ngOnInit, ngOnDestroy, etc.)
Rendering strategy in Ivy that updates only changed nodes for better performance.
Splitting an app into smaller, independently deployable frontends.
Utility to configure and test components in isolation.
Default test runner for Angular unit tests.
(Deprecated) End-to-end testing tool, replaced by Cypress or Playwright.
Angular 18+ is focusing on signals, zone-less architecture, simpler reactivity, and better performance — making it even more developer-friendly.
Conclusion
Angular remains one of the most powerful frameworks for building scalable and reactive frontends. Master these 100 questions, and you’ll stand out in any interview with both clarity and confidence.