🚀 250+ Angular Interview Questions & Answers 2026
From Beginner to Architect • Full‑Stack Integration (ASP.NET Core, Java, PHP, Node.js) • Real‑World Scenarios • Hands‑On Labs
📑 Inside This Angular Power Guide (250+ Items)
🌟 Beginner Angular Questions (60)
Core fundamentals that every Angular developer must know.
Beginner 1. What is Angular and how does it differ from AngularJS?
Angular (2+) is a complete rewrite of AngularJS, using TypeScript, component‑based architecture, improved performance with change detection, and modular structure. AngularJS (1.x) uses JavaScript, controllers, and $scope.
Beginner 2. Explain the basic building blocks of an Angular application.
Modules (@NgModule), Components (with template, class, styles), Templates (HTML with Angular syntax), Directives, Services (dependency injection), Routing, and Pipes.
Beginner 3. What is a component? Write a simple one.
@Component({
selector: 'app-hello',
template: `Hello {{name}}
`
})
export class HelloComponent {
name = 'World';
}Beginner 4. What is data binding in Angular? Name the types.
Communication between component and template: Interpolation ({{value}}), Property binding ([property]="value"), Event binding ((event)="handler()"), Two‑way binding ([(ngModel)]).
Beginner 5. How to create a new Angular project using Angular CLI?
npm install -g @angular/cli
ng new my-app
cd my-app
ng serveBeginner 6. What is a directive? Differentiate between structural and attribute directives.
Directives add behavior to DOM elements. Structural (e.g., *ngIf, *ngFor) modify DOM layout by adding/removing elements. Attribute (e.g., [ngStyle], [ngClass]) change appearance or behavior of an existing element.
Beginner 7. How does *ngIf differ from [hidden]?
*ngIf adds/removes the element from DOM completely. [hidden] just sets CSS display:none, element still in DOM. *ngIf is better for performance when not needed.
Beginner 8. What is a service and how do you create one?
A class with a specific purpose (data access, logging). Usually marked with @Injectable(). Create via CLI: ng generate service data. Provided in root via providedIn: 'root'.
Beginner 9. Explain dependency injection (DI) in Angular.
DI allows a class to receive dependencies from an external source rather than creating them. Angular's injector provides instances. You inject a service in component constructor: constructor(private service: DataService) {}.
Beginner 10. What is the purpose of the @Injectable() decorator?
Marks a class as available to be injected. It is required for services that have their own dependencies, but recommended for all services.
Beginner 11. How do you define a route in Angular?
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'users/:id', component: UserComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];Beginner 12. What is the RouterOutlet directive?
Acts as a placeholder where the router renders the active component. In template: <router-outlet></router-outlet>.
Beginner 13. How do you pass parameters to a route?
// navigate
this.router.navigate(['/user', userId]);
// in component, get from ActivatedRoute:
this.route.paramMap.subscribe(params => { ... });Beginner 14. What is a pipe? Give examples of built‑in pipes.
Pipes transform data for display. Examples: DatePipe ({{ date | date:'short' }}), UpperCasePipe, CurrencyPipe, PercentPipe.
Beginner 15. How do you create a custom pipe?
@Pipe({ name: 'exclaim' })
export class ExclaimPipe implements PipeTransform {
transform(value: string): string { return value + '!'; }
}Beginner 16. What is Angular CLI and list common commands.
Command‑line interface tool. Commands: ng new, ng serve, ng generate component/service/module, ng build, ng test.
Beginner 17. Explain the lifecycle hooks of a component.
ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy. ngOnInit used for initialization, ngOnDestroy for cleanup.
Beginner 18. What is the difference between constructor and ngOnInit?
Constructor is a TypeScript feature, called when class is instantiated, used for DI. ngOnInit is an Angular lifecycle hook, called after data‑bound properties are initialized. Prefer ngOnInit for initialization logic.
Beginner 19. How to handle events like button click?
<button (click)="onSave()">Save</button>
// component: onSave() { ... }Beginner 20. What is ngModel and how to use it?
Two‑way data binding directive ([(ngModel)]="property"). Requires importing FormsModule.
Beginner 21. What is an Angular module? (@NgModule)
A class decorated with @NgModule that groups components, directives, pipes, and services. It defines compilation context. declarations, imports, providers, bootstrap.
Beginner 22. How to share data between components? (Parent to child, child to parent)
Parent→Child: @Input() property binding. Child→Parent: @Output() with EventEmitter. Also services for unrelated components.
Beginner 23. What are Angular forms? Types?
Template‑driven forms: Simple, mostly in template, ngModel. Reactive forms: More control, form model defined in component class using FormGroup, FormControl.
Beginner 24. How to make an HTTP GET request using HttpClient?
constructor(private http: HttpClient) {}
getData() { return this.http.get('/api/items'); }Beginner 25. What is an Observable and how does it differ from Promise?
Observables stream multiple values over time, are cancellable, and support operators (map, filter). Promises resolve a single value. Angular heavily uses RxJS Observables.
Beginner 26. How to subscribe to an Observable and avoid memory leaks?
const subscription = this.myObservable.subscribe(data => ...);
ngOnDestroy() { subscription.unsubscribe(); }
// or use async pipe in template: {{ myObservable | async }}Beginner 27. What is the async pipe?
Subscribes to an Observable or Promise in template and returns the latest value. Automatically unsubscribes when component destroyed.
Beginner 28. How do you add Bootstrap to an Angular project?
Install: npm install bootstrap. Add path to angular.json styles: "node_modules/bootstrap/dist/css/bootstrap.min.css".
Beginner 29. What is the purpose of the environment files?
Store environment‑specific settings (API URLs, keys). environment.ts for development, environment.prod.ts for production. Import environment to use.
Beginner 30. How to build and deploy an Angular application?
Run ng build --prod. Output is in dist/ folder. Deploy those static files to any web server (Nginx, IIS, Node.js).
Beginner 31. What is Angular Material?
Official UI component library implementing Material Design. Provides pre‑built components like mat-table, mat-dialog, etc. Install: ng add @angular/material.
Beginner 32. How to implement lazy loading in Angular?
Use loadChildren in routing: { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }. The module is loaded only when route is visited.
Beginner 33. What is a guard (route guard)? Give an example.
@Injectable()
export class AuthGuard implements CanActivate {
canActivate() { return this.auth.isLoggedIn(); }
}Beginner 34. How to handle errors in HTTP requests?
this.http.get(url).pipe(
catchError(error => { console.error(error); return throwError(() => error); })
);Beginner 35. What is @ViewChild and @ViewChildren?
Decorators to access a child component/directive/element from parent. @ViewChild('myDiv') static query.
Beginner 36. What is @ContentChild?
Access projected content (via <ng-content>).
Beginner 37. How to use ng-template and ng-container?
ng-template defines a template not rendered directly. ng-container is a grouping element that doesn't add extra DOM.
Beginner 38. Explain change detection strategy.
Default: checks all components. OnPush only checks when inputs change, events from component, or async pipe emits. Improves performance.
Beginner 39. What is the purpose of ngZone?
Angular zone monkey‑patches async APIs to trigger change detection. You can run code outside Angular with ngZone.runOutsideAngular().
Beginner 40. How to create a reusable component with inputs/outputs?
@Component({...})
export class AlertComponent {
@Input() type: string;
@Output() closed = new EventEmitter();
} Beginner 41. How to style components (ViewEncapsulation)?
Default ViewEncapsulation.Emulated (scoped styles). None (global styles), ShadowDom (native shadow DOM).
Beginner 42. How to add a global style?
Add to styles.css (or styles.scss) or include in angular.json styles array.
Beginner 43. What is the DomSanitizer?
Prevents XSS by sanitizing values. For safe HTML, use this.sanitizer.bypassSecurityTrustHtml(html) with caution.
Beginner 44. How to use Angular animations?
Import BrowserAnimationsModule, define triggers with trigger(), state(), transition(), bind in template [@fadeIn].
Beginner 45. What is the difference between forRoot and forChild?
forRoot provides services that should be singletons (root module). forChild used in feature modules (routing).
Beginner 46. How to optimize an Angular app (bundle size)?
Lazy loading, Ahead‑of‑Time (AOT) compilation, tree shaking, using providedIn: 'root', avoid heavy third‑party libs, compression.
Beginner 47. What is AOT compilation?
Pre‑compiles application at build time, resulting in faster rendering, smaller bundle, and early template error detection.
Beginner 48. How to use environment variables in Angular?
Use environment.ts and environment.prod.ts. During build, Angular replaces the file based on configuration. For dynamic config, fetch config from server on app load.
Beginner 49. What is the purpose of APP_INITIALIZER?
A function executed during app initialization, used to load configuration or perform checks before the app starts.
Beginner 50. How to create a multi‑language app (i18n)?
Use Angular built‑in i18n tools (mark text with i18n, extract, translate) or libraries like ngx-translate.
Beginner 51. What is the difference between BehaviorSubject, ReplaySubject, and Subject?
Subject no initial value. BehaviorSubject requires initial value, new subscribers get last emitted value. ReplaySubject replays many previous values.
Beginner 52. How to chain HTTP requests?
this.http.get(url1).pipe(
switchMap(data => this.http.get(url2 + data.id))
);Beginner 53. What is a resolver?
A service that pre‑fetches data before route activation, ensuring component gets data synchronously.
Beginner 54. How to handle page not found (404)?
Add a wildcard route { path: '**', component: PageNotFoundComponent } as last route.
Beginner 55. What is the difference between routerLink and router.navigate?
routerLink is directive used in template; router.navigate is imperative method in component class.
Beginner 56. How to add query parameters to a route?
this.router.navigate(['/products'], { queryParams: { category: 'books' } });Beginner 57. What is the HttpInterceptor?
Intercepts HTTP requests/responses to modify headers, handle errors, add tokens, etc.
Beginner 58. How to add a JWT token to every request using an interceptor?
intercept(req: HttpRequest<any>, next: HttpHandler) {
const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${this.auth.getToken()}` } });
return next.handle(authReq);
}Beginner 59. What is the title service in Angular?
Sets the browser tab title. this.titleService.setTitle('My Page');. New in Angular 14+ standalone.
Beginner 60. How to create a standalone component?
@Component({
standalone: true,
template: `...`
})
export class MyComponent {}🔵 Intermediate & Full‑Stack Integration (65)
Deeper Angular concepts and how to connect with backends like ASP.NET Core, Java, PHP, Node.js.
Intermediate 61. Explain RxJS operators like map, switchMap, mergeMap, concatMap.
map: transform emitted value. switchMap: switches to new inner observable, cancels previous. mergeMap: flattens inner observables concurrently. concatMap: queues inner observables sequentially.
Intermediate 62. How to implement a reactive form with validation?
this.form = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.minLength(6)]
});Intermediate 63. What is asyncValidator and when to use it?
Async validators return Observable/Promise for server‑side checks (e.g., username availability). Pass as third parameter in FormControl.
Intermediate 64. How to create a custom form control? (ControlValueAccessor)
Implement ControlValueAccessor to make a component act like a native form control. Methods: writeValue, registerOnChange, registerOnTouched.
Intermediate 65. Explain Angular’s change detection in depth.
Angular uses Zone.js to monkey‑patch async events and trigger change detection from root. It checks binding expressions and updates DOM. With OnPush, it skips subtree unless inputs change or event originates from component.
Intermediate 66. How to use ngRx for state management? Core concepts.
Store, Actions, Reducers, Selectors, Effects. Unidirectional data flow. @ngrx/store manages global state.
Intermediate 67. What are NgRx Effects and how do they work?
Effects listen for actions, perform side effects (HTTP calls), and dispatch new actions. Use createEffect and ofType.
Intermediate 68. How to handle pagination with Angular and backend?
Pass page number and size as query parameters to API. Backend returns paginated data with total count. Use MatPaginator or custom component.
Intermediate 69. How to implement file upload (multipart) with Angular and backend?
const formData = new FormData();
formData.append('file', file);
this.http.post('/api/upload', formData).subscribe();Intermediate 🔗 ASP.NET Core 70. How to set up Angular with ASP.NET Core Web API?
Create ASP.NET Core project with Angular template or separate projects. Configure CORS in backend, serve Angular from wwwroot or use proxy during development. Example: dotnet new angular.
Intermediate 🔗 ASP.NET Core 71. How to implement JWT authentication flow between Angular and ASP.NET Core?
Backend: Issue JWT on login. Angular: Store token (HttpOnly cookie or memory). Send token in Authorization header via interceptor. Backend validates token with AddJwtBearer. Protect API with [Authorize].
Intermediate 🔗 ASP.NET Core 72. How to handle CORS when Angular dev server (4200) calls ASP.NET Core (5000)?
// in Program.cs
builder.Services.AddCors(o => o.AddPolicy("AngularApp", p => p.WithOrigins("http://localhost:4200").AllowAnyHeader().AllowAnyMethod()));
app.UseCors("AngularApp");Intermediate 🔗 ASP.NET Core 73. How to use SignalR with Angular for real‑time updates?
Install @microsoft/signalr. In Angular service, create a HubConnection, listen for events, invoke methods. Backend: app.MapHub<ChatHub>("/chat"). Requires CORS and authentication if needed.
Intermediate 🔗 Java (Spring Boot) 74. How to connect Angular with Spring Boot REST API?
Spring Boot exposes REST endpoints. Angular uses HttpClient. Configure CORS in Spring Boot via @CrossOrigin or global config. For auth, use JWT similarly: Spring Security filter validates token.
Intermediate 🔗 Java 75. How to handle authentication with Angular and Spring Security (JWT)?
Spring Security: OncePerRequestFilter extracts JWT from header. Angular interceptor adds token. Store token on client (e.g., sessionStorage). Use same flow as ASP.NET Core.
Intermediate 🔗 PHP (Laravel) 76. How to integrate Angular with Laravel API?
Laravel provides API routes in routes/api.php. Use laravel/sanctum or Passport for API tokens. Angular sends Authorization: Bearer .... CORS handled via fruitcake/laravel-cors package.
Intermediate 🔗 PHP 77. How to upload file from Angular to Laravel?
Angular creates FormData, sends POST. Laravel controller: $request->file('avatar')->store('avatars');. Ensure CORS and CSRF token handling (for SPA, you may exclude from CSRF).
Intermediate 🔗 Node.js (Express) 78. How to build a full‑stack app with Angular and Express?
Express serves API. During development, proxy API calls via Angular CLI proxy (proxy.conf.json). For production, serve Angular build from Express’s static folder or separate hosts.
Intermediate 🔗 Node.js 79. How to implement GraphQL in Angular with Apollo Client?
import { Apollo } from 'apollo-angular';
this.apollo.watchQuery({ query: GET_ITEMS }).valueChanges.subscribe(...);Intermediate 80. How to handle OAuth2/OpenID Connect with Angular?
Use angular-oauth2-oidc library. Configure issuer, clientId. Implicit Flow or Authorization Code with PKCE. Redirect to identity provider, receive tokens, stored automatically.
Intermediate 81. How to implement an HTTP interceptor for refreshing tokens?
Intercept 401 errors, call refresh endpoint, store new token, retry original request with cloned header. Use catchError and switchMap.
Intermediate 82. What is Angular Universal (SSR)? Why use it?
Server‑side rendering for Angular. Improves SEO, initial load performance. Use @nguniversal/express-engine. Backend can be Node.js.
Intermediate 83. How to configure Angular Universal with ASP.NET Core?
Not typical; usually run Node server for SSR, or use Microsoft's SpaServices with SpaPrerendering. Alternatively, Angular Universal on separate Node server, API on ASP.NET Core.
Intermediate 84. What are Angular elements? (custom elements)
Angular components packaged as web components (custom elements). Use @angular/elements. They can be used outside Angular apps (e.g., in PHP, plain HTML).
Intermediate 85. How to build a micro‑frontend with Module Federation (Angular)?
Angular 14+ supports Webpack Module Federation. Expose modules from a shell app, load remote modules. Great for independent deployments.
Intermediate 86. How to share data between multiple Angular micro‑frontends?
Use a shared library with state (e.g., RxJS subject) passed through window or shared via global event bus. Or use backend as intermediary.
Intermediate 87. Explain tree‑shakable providers (providedIn).
@Injectable({ providedIn: 'root' }) registers service at root level; tree shaking can remove it if not used. Reduces bundle size.
Intermediate 88. How to create a dynamic component using ComponentFactoryResolver (older) vs ViewContainerRef.createComponent (new)?
In Angular 13+, ViewContainerRef.createComponent(MyComponent) is the streamlined API. No need for component factory resolver.
Intermediate 89. What is the difference between Renderer2 and direct DOM manipulation?
Renderer2 provides safe, platform‑agnostic API (supports server‑side rendering, web workers). Avoid direct DOM access.
Intermediate 90. How to implement infinite scroll with Angular?
Listen to scroll events, detect near bottom, load next page via service, append data. Use ngx-infinite-scroll library or manual with ScrollDispatcher from Angular CDK.
Intermediate 🤖 AI 91. How to integrate AI features (e.g., chatbot) in an Angular app?
Create a service that calls backend API (which in turn calls OpenAI). Stream responses with Server‑Sent Events or WebSocket. Display in component.
Intermediate 92. What is the Angular CDK? (Component Dev Kit)
Set of behavior primitives for building custom UI components (overlay, drag‑drop, virtual scrolling, a11y). Separate from Material design.
Intermediate 93. How to use virtual scrolling for large lists?
<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
<div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>Intermediate 94. What is a FormArray and when to use it?
Holds an array of FormControl or FormGroup for dynamic forms (add/remove items).
Intermediate 95. How to handle nested reactive forms?
this.form = this.fb.group({
address: this.fb.group({ street: '', city: '' })
});Intermediate 96. How to create a custom RxJS operator?
function filterEven() {
return function(source: Observable<number>) {
return source.pipe(filter(n => n % 2 === 0));
};
}Intermediate 97. What is shareReplay operator?
Multicasts source to multiple subscribers and replays last N emissions to late subscribers.
Intermediate 98. How to cancel a pending HTTP request when component destroys?
this.sub = this.http.get(url).subscribe();
// or using takeUntil(this.destroy$) pattern.Intermediate 99. What are Angular schematics?
Templates that generate or modify code (e.g., ng generate). Custom schematics can enforce standards.
Intermediate 100. How to configure a proxy for Angular dev server?
Create proxy.conf.json with paths mapping to backend. Run ng serve --proxy-config proxy.conf.json.
Intermediate 101. How to deploy an Angular app to IIS?
Build ng build --prod, copy dist to IIS site. Add URL Rewrite rule to web.config for HTML5 routing.
Intermediate 102. 🔗 PHP How to prevent CSRF attacks when Angular calls Laravel?
Laravel’s CSRF token must be sent in X-XSRF-TOKEN header. Angular can read token from cookie if set. For SPA, you may use token‑based auth and exclude CSRF from API routes.
Intermediate 103. 🔗 Java How to handle file download from Spring Boot and show progress in Angular?
Use HttpClient with responseType: 'blob' and reportProgress: true. Track HttpEventType.DownloadProgress.
Intermediate 104. What is the difference between merge and forkJoin in RxJS?
merge emits values as they arrive (flatten). forkJoin waits for all to complete and emits last values as array.
Intermediate 105. How to implement an Angular service worker (PWA)?
ng add @angular/pwa. Configures manifest, service worker for caching and offline support.
Intermediate 106. How to handle authentication with Okta in Angular?
Use @okta/okta-angular and @okta/okta-auth-js. Add an OktaAuthModule, configure. Routes protected by OktaAuthGuard.
Intermediate 107. How to implement role‑based authorization?
Backend includes roles in JWT. Angular decodes token, stores user roles, use *ngIf or directive to show/hide UI elements.
Intermediate 108. What is @ngneat/until-destroy?
Decorator that automatically unsubscribes subscriptions on ngOnDestroy, cleaner than manual.
Intermediate 109. How to create a multi‑step form (wizard)?
Use a single component with step index, or separate components with shared service. Validate each step before proceeding.
Intermediate 110. Explain the TransferState API for SSR.
Avoids duplicate HTTP calls by transferring server‑fetched data to client. Uses BrowserTransferStateModule.
Intermediate 111. How to create a custom structural directive?
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
@Input() set appUnless(condition: boolean) {
if (!condition) this.viewContainer.createEmbeddedView(this.templateRef);
else this.viewContainer.clear();
}
}Intermediate 112. What is the trackBy function in *ngFor?
Improves performance by tracking unique identifiers instead of object references when list changes. trackBy: trackById.
Intermediate 113. How to implement an Angular library?
ng generate library my-lib. Build, publish to npm. Use in apps via import.
Intermediate 114. What is NgZone and runOutsideAngular?
Execute code outside Angular's zone to avoid triggering change detection (improves performance for frequently firing events).
Intermediate 115. How to use @HostListener and @HostBinding?
Decorators to bind host element events and properties within directive/component. @HostListener('click'), @HostBinding('class.active').
Intermediate 116. How to create a draggable dialog with Angular CDK?
Use CdkDrag directive on dialog container, configure cdkDragHandle.
Intermediate 117. What is the Renderer2 used for?
Safe DOM manipulation (create, addClass, setStyle) that works across platforms (browser, web worker, server).
Intermediate 118. How to load external configuration before app bootstrap?
Use APP_INITIALIZER token to fetch config JSON and set it in a service, then bootstrap.
Intermediate 119. 🔗 ASP.NET Core How to implement server‑side pagination and sorting with Angular and ASP.NET Core?
Backend accepts ?page=1&pageSize=10&sortBy=name&order=asc. Angular service sends params, component updates MatTable dataSource.
Intermediate 120. What is the difference between ActivatedRoute snapshot and observable?
snapshot gives current state at component creation, not updated on same route reuse. paramMap observable emits changes.
Intermediate 121. How to use mergeMap for parallel HTTP requests?
of(userId).pipe(mergeMap(id => this.http.get(`/api/users/${id}`))); // concurrentIntermediate 122. How to implement a logout that invalidates session across tabs?
Use BroadcastChannel API or localStorage events. When token is cleared, notify other tabs to redirect to login.
Intermediate 123. How to create a high‑order mapping operator like exhaustMap?
exhaustMap ignores new source values while inner observable is active (used for login button).
Intermediate 124. What is the TestBed in Angular testing?
Configures and creates a testing module environment for unit tests, with mock dependencies.
Intermediate 125. How to test a component with async pipe and Observable?
Use fakeAsync or async, mock service, set up component, use fixture.whenStable().
🟣 Expert & Advanced Integration (55)
Expert 126. Deep dive into Angular change detection: markForCheck vs detectChanges.
markForCheck (OnPush) tells Angular to check the component and its ancestors on next cycle. detectChanges triggers check immediately on component and its children. Use wisely.
Expert 127. How to create a custom decorator for component metadata?
Use makeDecorator or use Angular’s ReflectiveInjector? In Angular, you can't easily add runtime decorators. Use @Component extension or wrapper.
Expert 128. Explain the Angular compiler (NGC) and Ivy renderer advantages.
Ivy is the new rendering engine. Features: smaller bundles, faster compilation, better debugging, improved tree shaking, and @defer blocks.
Expert 129. What are standalone components and how do they change modules?
Standalone components do not require @NgModule. They import dependencies directly. Simplifies architecture. Angular 15+.
Expert 130. How to implement a custom HttpBackend for testing or intercepting?
Provide a class implementing HttpBackend. Used by HttpClientTestingController.
Expert 131. 🔗 ASP.NET Core How to implement WebSocket communication in Angular with ASP.NET Core?
Use System.Net.WebSockets on server, WebSocket API in browser. Angular service wraps it with Observable.
Expert 132. 🔗 Java How to handle server‑side events (SSE) from Spring Boot in Angular?
Backend: @GetMapping(produces = MediaType.TEXT_EVENT_STREAM_VALUE). Angular: use EventSource API, wrap as Observable.
Expert 133. 🔗 PHP How to implement real‑time notifications with Angular and Laravel WebSockets?
Laravel Echo with laravel-websockets. Angular client: npm install laravel-echo pusher-js. Listen on channels.
Expert 134. How to achieve micro‑frontend communication with RxJS?
Use a shared event bus (RxJS Subject) exposed via a shared library or window custom events.
Expert 135. What is the Injector hierarchy and resolution modifiers (@Optional, @Self, @SkipSelf)?
Angular DI uses hierarchical injectors (Module, Component). @Self restricts to own injector only, @SkipSelf starts from parent, @Optional no error if missing.
Expert 136. How to create a custom LocationStrategy?
Implement LocationStrategy and provide it. Used for custom URL handling (e.g., hash‑based offline).
Expert 137. How to implement a plugin‑based architecture with Angular?
Use dynamic import, ComponentFactoryResolver (older) or ViewContainerRef.createComponent. Register plugins via configuration.
Expert 138. Explain Angular’s NgZone internals and zone.js patching.
zone.js monkey‑patches async APIs. Angular creates NgZone that forks a zone. It hooks into onMicrotaskEmpty to trigger change detection. Running outside Angular means using parent zone.
Expert 139. How to create a directive that lazy loads a module when visible (Intersection Observer)?
@Directive({ selector: '[appLazyLoad]' })
export class LazyLoadDirective implements AfterViewInit {
ngAfterViewInit() {
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) { this.loadModule(); observer.disconnect(); }
});
observer.observe(this.el.nativeElement);
}
}Expert 140. 🤖 AI How to integrate TensorFlow.js with Angular for on‑device ML?
Import TensorFlow.js, load model, run inference in a web worker to avoid UI blocking. Angular service manages model lifecycle.
Expert 141. How to handle complex state with NgRx Entity?
Use @ngrx/entity to manage collections (CRUD operations) with reducer helpers: adapter.addOne, adapter.updateOne.
Expert 142. What are @ngrx/component-store and when to use it?
Lightweight local state management for components. Good alternative to service with Subject. Provides selectors, updaters, effects.
Expert 143. How to implement an OIDC silent token refresh with angular-oauth2-oidc?
Configure useSilentRefresh. The library uses a hidden iframe to renew token, emitting new token via event.
Expert 144. How to secure Angular routes with multiple guards and resolve dependencies?
{ path: 'admin', canActivate: [AuthGuard, RoleGuard], resolve: { data: DataResolver } }.
Expert 145. How to create a custom HttpParameterCodec for URL encoding?
Implement HttpParameterCodec to encode query parameters. Provide via HttpParameterCodec token.
Expert 146. 🔗 ASP.NET Core How to use gRPC‑Web from Angular to call ASP.NET Core gRPC services?
Enable gRPC‑Web on server (app.UseGrpcWeb()). Angular uses @ngx-grpc or grpc-web to generate client. Communicate via binary over HTTP/1.1.
Expert 147. 🔗 Node.js How to set up an Angular app with NestJS (Node) and microservices?
NestJS provides REST/GraphQL APIs. Angular communicates with HttpClient. For microservices, use Nest’s microservice clients (TCP, Redis).
Expert 148. How to use Angular with Keycloak?
Use keycloak-angular and keycloak-js. Initialize Keycloak on app startup, protect routes with guard, get user profile.
Expert 149. What is the performance impact of using many pipes? How to improve?
Pure pipes are memoized (same input, cached). Impure pipes run on every CD. Prefer pure. Avoid complex logic in pipes.
Expert 150. How to implement a custom AsyncValidator that debounces server call?
return (control: AbstractControl) => control.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(value => this.service.check(value)),
map(result => result ? { taken: true } : null),
first()
);Expert 151. How to create an Angular schematic for scaffolding a module with CRUD?
Use @angular-devkit/schematics. Define Rule that generates files based on template.
Expert 152. What is the PLATFORM_ID token and how to detect server vs browser?
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
if (isPlatformBrowser(this.platformId)) { /* browser only */ }
}Expert 153. How to implement a custom DateAdapter for a different calendar?
Extend DateAdapter and provide. Used by Angular Material date picker.
Expert 154. Explain Angular’s EmbeddedViewRef and ComponentRef.
EmbeddedViewRef for templates; ComponentRef for components. Both have methods for interaction.
Expert 155. How to dynamically load and compile a module at runtime? (JIT in production, not recommended)
Angular dropped JIT in production. Use lazy loading instead. For dynamic components, use import() and create component.
Expert 156. How to implement a web worker for heavy computation and update UI?
Angular CLI generates worker: ng generate web-worker app. Post messages between main thread and worker. Wrap in Observable.
Expert 157. What is the ExpressionChangedAfterItHasBeenCheckedError? How to fix?
Occurs when value changes during change detection. Use setTimeout, ChangeDetectorRef.detectChanges(), or move logic to ngAfterViewInit.
Expert 158. How to use @defer blocks for lazy loading parts of template?
@defer (on viewport) {
<heavy-component />
} @placeholder {
<div>Loading...</div>
}Expert 159. How to build a custom Angular CLI builder?
Implement BuilderContext and define builder in builder.json. Used for custom build steps.
Expert 160. 🔗 PHP How to handle authentication with Laravel Sanctum and SPA (Angular)?
Sanctum provides cookie‑based SPA authentication. Angular sends credentials, Laravel returns cookie. Use withCredentials: true in HttpClient.
Expert 161. 🔗 Java How to implement OAuth2 login with Spring Boot and Angular using Authorization Code + PKCE?
Use angular-oauth2-oidc. Spring Boot as resource server, configure issuer. Angular initiates flow, receives code, exchanges for tokens.
Expert 162. How to create an Angular library that wraps an external JS library?
Install library, create Angular service that exposes its API, add types. Use @types if available.
Expert 163. What is the APP_BOOTSTRAP_LISTENER token?
Hook into bootstrap process, e.g., for logging, performance marks.
Expert 164. How to handle route reuse strategy to cache components?
Implement RouteReuseStrategy. Store and retrieve component handles. Useful for tabs.
Expert 165. How to implement a drag‑and‑drop file upload with progress?
Use Angular CDK drag‑drop for file zone, HttpClient with reportProgress: true. Show progress bar.
Expert 166. How to create a custom form control that integrates with Angular validation?
Implement ControlValueAccessor and Validator. Provide NG_VALUE_ACCESSOR and NG_VALIDATORS.
Expert 167. How to use Injector.create for dynamic dependency injection?
const injector = Injector.create({ providers: [{ provide: MyService, useClass: MyService }] });
const service = injector.get(MyService);Expert 168. How to profile Angular performance with Angular DevTools?
Install browser extension, record timeline, analyze change detection cycles, profiler shows component tree.
Expert 169. What is the difference between forkJoin and combineLatest?
combineLatest emits when any source emits (after all emit once). forkJoin emits only when all complete.
Expert 170. How to implement a complex animation that depends on scroll position?
Use @angular/animations with useAnimation and bind to scroll events, or use AnimationBuilder programmatically.
Expert 171. 🤖 AI How to use AI to optimize bundle size? (Angular build analysis)
Use webpack-bundle-analyzer or source-map-explorer. AI can suggest splitting modules based on usage patterns, but currently manual. Tools like @angular-builders/custom-webpack help.
Expert 172. How to handle memory leaks in Angular apps?
Unsubscribe subscriptions, clear timers, detach event listeners. Use takeUntil, async pipe, @ngneat/until-destroy.
Expert 173. What is the Host decorator in DI?
Restricts provider lookup to the host element and its component. Not commonly used.
Expert 174. How to create a dynamic table with sorting, filtering, pagination using Angular Material?
MatTableDataSource with MatSort, MatPaginator, custom filter predicate.
Expert 175. How to implement a custom RxJS scheduler?
Extend AsyncScheduler and override now() and schedule(). Rarely needed.
Expert 176. 🔗 ASP.NET Core How to set up Azure AD authentication with Angular and ASP.NET Core?
Backend: AddMicrosoftIdentityWebApi. Angular: MSAL Angular library. Configure MsalModule.
Expert 177. 🔗 Java How to handle file upload with multipart in Spring Boot and display progress in Angular?
Use HttpClient with reportProgress, Spring Boot controller @PostMapping(consumes = MediaType.MULTIPART_FORM_DATA). Track events.
Expert 178. How to use Angular with GraphQL code generation (graphql-codegen)?
Define .graphql files, run codegen to produce typed services. Use Apollo Angular.
Expert 179. How to create an interactive tutorial/tour in Angular (like intro.js)?
Create a service that uses CDK Overlay to highlight elements, with step management.
Expert 180. What are the new features in Angular 16/17 that are significant?
Angular Signals (preview), @defer blocks, esbuild build system, standalone component improvements, required inputs, Vite dev server.
🔴 Most Expert / Architecture (45)
Architect 181. How would you design a large‑scale enterprise Angular application?
Monorepo (Nx), modular structure, lazy loading, shared libraries, state management (NgRx), component store for local state, strict TypeScript, CI/CD, code generation.
Architect 182. Explain the concept of a shell application with micro‑frontends using Module Federation.
Shell loads remote modules defined in webpack.config.js. Each micro‑frontend is developed independently. Routing coordinates fragments.
Architect 183. How to manage shared dependencies in a micro‑frontend setup?
Use shared libraries and define shared dependencies in Module Federation config with strict versioning.
Architect 184. What is the role of an API Gateway in an Angular micro‑frontend architecture?
Aggregates backend microservices, handles authentication, routing. Frontend can use BFF pattern to tailor responses.
Architect 185. How to implement a custom Angular build system with Bazel?
Bazel for scalable monorepo builds. Use angular-bazel-example. Complex but powerful for large teams.
Architect 186. 🔗 ASP.NET Core Design a full‑stack solution with Angular, ASP.NET Core, and Azure Kubernetes Service.
Angular built as static files, served by nginx container. Backend APIs containerized. Deploy to AKS with ingress, use Azure AD for auth.
Architect 187. 🔗 Java How to implement a resilient communication between Angular and Spring Boot microservices (resilience4j)?
Angular calls gateway, which handles circuit breaking. Client‑side could use NgRx effects with retry logic, but main resilience on backend.
Architect 188. How to handle offline‑first applications with Angular and IndexedDB?
Service worker for caching, IndexedDB for data. Sync when online using background sync. Angular PWA library helps.
Architect 189. What is the difference between server‑side rendering and prerendering?
SSR renders each request dynamically. Prerendering generates static HTML at build time. Both improve SEO.
Architect 190. How to analyze and optimize Angular bundle size using webpack bundle analyzer?
Add stats.json with ng build --stats-json, run analyzer. Identify large dependencies, lazy load, tree shake.
Architect 191. How to implement a custom ESLint rule for Angular project conventions?
Use @angular-eslint and write a custom ESLint rule with AST traversal.
Architect 192. What are Angular Signals and how do they change change detection?
Signals are reactive primitives that track dependencies. Angular can use signal‑based change detection to be more efficient. In future, Zone.js might become optional.
Architect 193. How to create a custom Angular compiler transform?
Use ngc plugin system (Ivy) or TypeScript transformers. Rare but powerful for code generation.
Architect 194. How to implement a multi‑tenant Angular app?
Load tenant config at startup, theme based on tenant, use APP_INITIALIZER to set API endpoints and styles.
Architect 195. 🤖 AI How to integrate AI for automated UI testing in Angular?
Use tools like testcafe with AI extensions, or record tests with AI‑powered codeless tools. Custom: use ML to detect visual regressions.
Architect 196. How to design a plugin system where external Angular modules are loaded at runtime?
Define plugin interface, load remote UMD/ES modules, use Angular’s compiler (JIT) or pre‑compile and use dynamic import() with custom component resolver.
Architect 197. How to achieve zero‑downtime deployments for an Angular app?
Use CDN with atomic versioned folders, switch index.html via blue‑green deployment. Service worker caching must be carefully managed.
Architect 198. How to implement a custom UrlSerializer for complex URL handling?
Extend UrlSerializer and provide. Allows custom serialization/deserialization.
Architect 199. What are the best practices for securing Angular apps? (XSS, CSRF, CSP)
Angular’s sanitization, avoid bypassSecurityTrust, use CSP headers, implement CSRF token for state‑changing requests, HttpOnly cookies.
Architect 200. How to use Angular with WebAssembly for performance‑critical parts?
Compile Rust/C++ to WASM. Load WASM module in Angular. Call functions via JavaScript interop.
Architect 201. 🔗 PHP How to implement server‑side rendering for Angular with a PHP backend?
Use Angular Universal on a Node server, or use a headless browser (Puppeteer) on PHP server to prerender. Not typical; usually separate Node SSR.
Architect 202. 🔗 ASP.NET Core How to use Angular with Blazor components?
Not common. Angular is JS, Blazor is .NET. Could embed Angular as custom element in Blazor, or call Blazor from Angular via JS interop. Generally separate.
Architect 203. How to implement a global error handler in Angular?
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: any) { /* log, show notification */ }
}Architect 204. How to use ServiceWorker update and notify user to refresh?
Angular’s SwUpdate service detects new version. available.subscribe(() => if (confirm('New version')) location.reload());
Architect 205. How to create a dynamic dashboard with user‑customizable widgets?
Use dynamic component loading, save layout to backend (JSON). Use Angular CDK drag‑drop for resizing/reordering.
Architect 206. How to implement a feature flag system in Angular?
Fetch flags from config/api, use service with *ngIf="featureFlags.newFeature". Use directive to lazily load modules based on flag.
Architect 207. How to migrate a large AngularJS app to Angular incrementally?
Use ngUpgrade module. Run both frameworks side by side. Downgrade Angular components, upgrade AngularJS services.
Architect 208. What is the inject() function introduced in Angular 14?
Enables dependency injection in functions and classes without constructor. const service = inject(MyService); Used in functional guards, resolvers.
Architect 209. How to implement a real‑time collaborative editor in Angular (CRDT)?
Use Yjs or Automerge. Sync via WebSocket. Angular service manages document, component renders.
Architect 210. 🤖 AI How to build an AI‑powered code review assistant as Angular CLI plugin?
Create a builder or schematic that analyzes code with static analysis and uses OpenAI to suggest improvements.
Architect 211. How to use WebComponentTester for Angular elements?
Since Angular elements are standard custom elements, use tools like @web/test-runner. Or test via Angular Testbed with createCustomElement.
Architect 212. How to optimize Angular Universal for SEO and Core Web Vitals?
Optimize server rendering, minimize blocking requests, inline critical CSS, lazy load below‑the‑fold, use TransferState.
Architect 213. What are the trade‑offs between NgRx, Akita, and Elf for state management?
NgRx: Redux pattern, large ecosystem. Akita: OOP‑based, simpler. Elf: Lightweight, class‑based store. Pick based on team familiarity and complexity.
Architect 214. How to create a custom ViewEngine? (hypothetical)
Not possible in Angular; Ivy is the only engine. You can create a custom renderer using RendererFactory2 for custom platform.
Architect 215. How to implement a drag‑and‑drop form builder with JSON schema?
Generate JSON schema, render dynamic forms using reactive forms. Use Angular CDK drag‑drop to arrange fields.
Architect 216. How to profile and reduce main‑thread blocking in Angular?
Use Chrome DevTools Performance tab. Offload to web workers, use requestAnimationFrame for visual updates, avoid long tasks.
Architect 217. What is the future of Angular with Signals and fine‑grained reactivity?
Signals will allow more granular updates, similar to SolidJS. Angular team aims to remove Zone.js dependency, improving performance.
Architect 218. How to implement a custom ChangeDetectorRef for a detached component tree?
Use detach() and manually call detectChanges() when needed. For a tree, implement a service that coordinates.
Architect 219. How to use Angular with single-spa for micro‑frontends?
single‑spa wraps Angular app as a parcel. Use single-spa-angular to create lifecycle hooks.
Architect 220. 🔗 Java How to design an event‑driven architecture with Angular, Spring Boot, and Kafka?
Backend publishes events to Kafka. Angular listens to server‑sent events or WebSocket for live updates. Use NgRx effects to handle incoming streams.
Architect 221. How to implement an Angular CLI builder that runs a custom pre‑build step (e.g., generate API client)?
Create builder implementation that uses @angular-devkit/architect. Run generator script, then proceed with build.
Architect 222. How to handle authentication with multiple identity providers (Azure AD, Google) in Angular?
Use angular‑oauth2‑oidc with multiple configs. Route to correct provider based on login selection.
Architect 223. What are the challenges of using Angular with Content Security Policy (CSP) and how to solve?
Angular’s JIT is unsafe; use AOT. Avoid eval. Some libraries may require 'unsafe-inline'; use strict CSP with nonces/hashes.
Architect 224. How to build an accessible (a11y) Angular app?
Use Angular Material (built‑in a11y), semantic HTML, ARIA attributes, focus management, cdkTrapFocus, LiveAnnouncer.
Architect 225. How to implement a custom HttpInterceptor that caches GET requests using CacheStorage?
Intercept request, check cache, if hit return of(cached). On response, store in cache (using Cache API or localStorage).
💼 Full‑Stack Integration Scenarios (15)
reportProgress: true, displays progress bar. Backend streams to disk./login, Laravel returns cookie; subsequent requests with withCredentials: true. Use auth guard.@angular/google-maps, fetch marker data from Java API, display.@azure/msal-angular, configure MsalModule. Interceptor adds token. Backend validates with AddMicrosoftIdentityWebApi.*ngIf or structural directive.APP_INITIALIZER from PHP endpoint, then uses ngx-translate or built‑in i18n.🧪 Hands‑On Labs (10)
Lab 1: Build a full CRUD app with Angular and ASP.NET Core Web API.
Create ASP.NET Core API with EF Core, Angular service with HttpClient, component with forms, routing.
Lab 2: Implement JWT authentication between Angular and Spring Boot.
Spring Security config, login endpoint. Angular interceptor, login component, guard.
Lab 3: Create a real‑time notification system with Angular, Laravel, and Pusher.
Laravel broadcasting with Pusher, Angular uses laravel-echo. Display notifications.
Lab 4: Set up Angular Material table with server‑side pagination, sorting, filtering (Node.js API).
Express API with query params, Angular MatTableDataSource, handle events.
Lab 5: Deploy an Angular app to Azure Static Web Apps with a .NET Functions backend.
Create Angular app, add Azure Functions API, configure CI/CD via GitHub Actions.
Lab 6: Build a micro‑frontend shell with Module Federation (Angular 14+).
Create shell app and remote app, configure webpack.config.js, share dependencies.
Lab 7: Implement an Angular service worker and test offline functionality.
ng add @angular/pwa, build, serve with http‑server, go offline, see cached app.
Lab 8: 🤖 AI Integrate a sentiment analysis API in an Angular form (e.g., comment box).
Create service that calls backend API (which calls Azure Cognitive Services). Show sentiment as user types (debounced).
Lab 9: Create a custom Angular library and publish to npm.
ng generate library, implement component, build, npm publish.
Lab 10: End‑to‑end testing with Cypress for an Angular app.
Set up Cypress, write tests for login, form submission, navigation.
📝 Code‑Based Challenges (12)
Challenge 1: Write a custom pipe that truncates text to a given limit with ellipsis.
@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number = 50): string {
return value.length > limit ? value.substring(0, limit) + '...' : value;
}
}Challenge 2: Create a directive that changes background color on hover.
@Directive({ selector: '[appHover]' })
export class HoverDirective {
@HostListener('mouseenter') onEnter() { this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow'); }
@HostListener('mouseleave') onLeave() { this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor'); }
}Challenge 3: Implement a validator that checks if two passwords match.
export function matchValidator(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors.mustMatch) return;
if (control.value !== matchingControl.value) matchingControl.setErrors({ mustMatch: true });
else matchingControl.setErrors(null);
};
}Challenge 4: Build an HttpInterceptor that logs request and response time.
intercept(req: HttpRequest<any>, next: HttpHandler) {
const start = performance.now();
return next.handle(req).pipe(tap(() => console.log(`Request took ${performance.now() - start}ms`)));
}Challenge 5: Implement an RxJS operator that retries with exponential backoff.
function retryWithBackoff(maxRetries: number, delayMs: number) {
return (source: Observable<any>) => source.pipe(
retryWhen(errors => errors.pipe(
concatMap((error, i) => i < maxRetries ? of(error).pipe(delay(delayMs * Math.pow(2, i))) : throwError(error))
))
);
}Challenge 6: Create a dynamic component loader that shows a component based on string name.
const componentMap = { 'hello': HelloComponent };
const component = componentMap[name];
this.viewContainer.createComponent(component);Challenge 7: 🤖 AI Call OpenAI API from Angular (via backend) and stream response word by word.
Backend streams SSE. Angular uses EventSource or fetch with ReadableStream. Update text incrementally.
Challenge 8: Write a function that merges multiple Observables and emits an array of the latest values.
combineLatest([obs1, obs2]).pipe(map(([v1, v2]) => [v1, v2]));Challenge 9: Create a custom ControlValueAccessor for a star rating component.
Implement writeValue, registerOnChange, registerOnTouched. Provide NG_VALUE_ACCESSOR.
Challenge 10: Build an Angular route guard that checks for unsaved changes (canDeactivate).
export interface CanDeactivateComponent { canDeactivate: () => boolean | Observable<boolean>; }
@Injectable()
export class UnsavedGuard implements CanDeactivate<CanDeactivateComponent> {
canDeactivate(component: CanDeactivateComponent): boolean | Observable<boolean> {
return component.canDeactivate ? component.canDeactivate() : true;
}
}Challenge 11: Implement a directive that lazy loads an image when it enters viewport.
Use IntersectionObserver. @Directive({ selector: '[lazyLoad]' }), set src when visible.
Challenge 12: Write a service that stores and retrieves data from IndexedDB using ngx-indexed-db.
@Injectable()
export class OfflineService {
constructor(private dbService: NgxIndexedDBService) {}
addItem(item) { return this.dbService.add('store', item); }
getAll() { return this.dbService.getAll('store'); }
}
0 Comments
thanks for your comments!