Interview Q&A

Short answer: Use Angular’s TestBed to create a testing module that declares the component.

Explain a bit more

Instantiate the component and its template for testing. Test component logic, DOM rendering, event handling, and bindings. Use Angular testing utilities like fixture.detectChanges() to update the view. Basic example: beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [MyComponent] }).compileComponents(); fixture = TestBed.createComponent(MyComponent);

Example code

component = fixture.componentInstance; fixture.detectChanges(); }); it('should create component', () => { expect(component).toBeTruthy(); });

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Modularize your code: Break your app into feature modules, shared modules, and core modules.

Explain a bit more

Follow Angular style guide: Use official Angular style recommendations for naming, folder structure, and coding conventions. Separate concerns: Keep components, services, directives, pipes, and models in separate folders. Use barrel files (index.ts): To simplify imports by exporting module contents centrally. Use services for business logic: Avoid placing complex logic inside components; delegate to services. Keep components small and focused: Each component should have a single responsibility. Consistent naming conventions: For files and classes (e.g., user.service.ts for services). Use interfaces for types: Define interfaces or models for data structures.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ng generate module admin --route admin --module app.module

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ng generate directive highlight

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Feature-based folder structure: Organize by features rather than by type.

Explain a bit more

/src/app /products /components /services /models products.module.ts /orders /shared /core Core module: For singleton services used app-wide (e.g., authentication, logging). Shared module: For shared components, pipes, and directives reused across the app. Lazy load feature modules: Load modules on demand to improve startup time. Use state management (e.g., NgRx) when app state becomes complex. Adopt consistent routing with child routes.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Jasmine: Testing framework for specs & assertions. Karma: Test runner to execute tests in browsers. Protractor (deprecated, but still used): E2E testing framework. Jest: Popular alternative to Jasmine for unit testing. ng-mocks: Helps mock Angular components, directives, pipes, and modules.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Directive Purpose routerLink Binds a component to a route routerLinkAct ive Applies CSS class when link's route is active ✅ Example: <a routerLink="/home" routerLinkActive="active-link">Home</a> active-link is applied when the current route is /home.

Explain a bit more

Angular? You define route parameters using : in the route path and extract them using ActivatedRoute. ✅ Defining Route: { path: 'product/:id', component: ProductDetailComponent } ✅ Navigating with params: <a [routerLink]="['/product', product.id]">View Details</a> Angular routing? Query params are passed using the URL (e.g., ?sort=price), and managed via the ActivatedRoute service. ✅ Add query params: this.router.navigate(['/products'], { queryParams: { sort: 'price' } }); ✅ Read query params: this.route.queryParams.subscribe(params => { console.log(params['sort']); }); in Angular? ActivatedRoute is a service that gives access to route-related data including: Route parameters Query parameters Route data Parent/child route info ✅ Example: constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.params.subscribe(params => { this.productId = params['id']; }); } Name the…

Example code

}
return true;
}
} { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] } ✅ Summary Table: Feature Purpose RouterModule Enables routing in Angular routerLink Binds HTML element to a route routerLinkAct ive Applies class when route is active ActivatedRout Provides access to route params/query params Lazy Loading Loads feature modules only when needed canActivate Route guard to block unauthorized access Query Params Used for filters, search, sort (/products?sort=price) Nested Routes Embeds child routes within parent route Forms in Angular

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: pp. Lazy load feature modules: Load modules on demand to improve startup time. Use state management (e.g., NgRx) when app state becomes complex. Adopt consistent routing with child routes.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Angular 9: Default usage of Ivy compiler and renderer.

Explain a bit more

Improved type checking in templates. Better build errors and debugging. Smaller bundle sizes. Later versions added: Strict typing for reactive forms. Improved Component harnesses for testing. Enhanced internationalization (i18n) support. Optional chaining and other TypeScript improvements. Standalone components (Angular 14+), simplifying module-less apps. Signals (Angular 16+) for reactive primitives.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Applications? Jasmine: Testing framework for specs & assertions. Karma: Test runner to execute tests in browsers. Protractor (deprecated, but still used): E2E testing framework. Jest: Popular alternative to Jasmine for unit testing. ng-mocks: Helps mock Angular components, directives, pipes, and modules.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ✅

Example code

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)"> <input name="username" ngModel required minlength="4" /> <button type="submit">Submit</button> </form> onSubmit(form: NgForm) { console.log(form.value); }

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: pplies CSS class when link's route is ctive ✅ Example: <a routerLink="/home" routerLinkActive="active-link">Home</a> ctive-link is applied when the current route is /home.

Explain a bit more

ngular? You define route parameters using : in the route path and extract them using ctivatedRoute. ✅ Defining Route: { path: 'product/:id', component: ProductDetailComponent } ✅ Navigating with params: <a [routerLink]="['/product', product.id]">View Details</a> ngular routing? Query params are passed using the URL (e.g., ?sort=price), and managed via the ctivatedRoute service. ✅ Add query params: this.router.navigate(['/products'], { queryParams: { sort: 'price' } }); ✅ Read query params: this.route.queryParams.subscribe(params => { console.log(params['sort']); }); in Angular? ctivatedRoute is a service that gives access to route-related data including: Route parameters… pplies CSS class…… }

Example code

return true;
}
} { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] } ✅ Summary Table: Feature Purpose RouterModule Enables routing in Angular routerLink Binds HTML element to a route routerLinkAct ive pplies class when route is active ctivatedRout Provides access to route params/query params Lazy Loading Loads feature modules only when needed canActivate Route guard to block unauthorized access Query Params Used for filters, search, sort (/products?sort=price) Nested Routes Embeds child routes within parent route Forms in Angular

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }

Example code

@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow';
}
}

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: An Angular application mainly consists of: Modules (NgModules) – containers for a cohesive block of code Components – control views (HTML + logic) Templates – HTML with Angular syntax Services – for business logic and reusable code Directives – modify the DOM Routing – navigation between views Real-Time Example: In a banking app: A LoginComponent A DashboardComponent A UserService to manage user data…

Explain a bit more

AppRoutingModule for navigation between login and dashboard

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Commonly done using: Login forms that send credentials to backend. Receive a token (usually JWT) to identify the user. Use Angular guards (like canActivate) to protect routes based on user roles. Store tokens securely (e.g., localStorage, sessionStorage, or cookies). Attach tokens to HTTP requests via HTTP Interceptors.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Common techniques: Use OnPush change detection. Implement trackBy in *ngFor. Use lazy loading for modules. Avoid heavy computations in templates. Use pure pipes for filtering/formatting. Use memoization to cache expensive function results. Detach change detector manually for rarely updated components. Use ngZone.runOutsideAngular() for non-Angular async operations.

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ✅

Example code

// app-routing.module.ts const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} The RouterModule is a built-in Angular module that provides routing directives, services, and configuration to manage navigation between views. ✅ Imports in App: import { RouterModule } from '@angular/router'; You use it with RouterModule.forRoot() (for root module) or RouterModule.forChild() (for feature modules with lazy loading). Angular? Routes are defined as an array of objects using the Routes type, and each route object maps a path to a component. ✅ Example: const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent }, { path: '**', component: NotFoundComponent } // wildcard route ]; Tools for Managing Routes: Route Guards Route Parameters Lazy Loading Query Params Nested Routes implemented? 🔸 Lazy Loading: Lazy loading is a technique to load feature modules only when needed, improving initial load performance. ✅ Implementation:

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: During the Sprint: Feedback is captured but doesn’t change the current Sprint scope.

Explain a bit more

Product Owner logs feedback in the Product Backlog. Team might discuss it in refinement sessions or plan to act on it in the next Sprint. Follow On: During Sprint Review: Stakeholders review the Increment. Discuss what’s useful, missing, or needs improvement. PO adjusts priorities accordingly. Example: After a demo, a stakeholder suggests a visual improvement to a dashboard. The team doesn't implement it immediately but adds it to the backlog and addresses it in the next Sprint.

Real-world example (ShopNest)

ShopNest team runs 2-week sprints. Daily standup is blockers-only, not a status novel.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Epics: Large, high-level features or initiatives that are too big for a single Sprint.

Explain a bit more

Broken down into User Stories for implementation. Relationship: Epic → Multiple User Stories → Tasks (optional) Example: Epic: “User Account Management” User Stories: As a user, I want to register with email. As a user, I want to log in with my credentials. As a user, I want to reset my password. Each of these stories can be completed in a separate Sprint and delivered incrementally.

Real-world example (ShopNest)

Agile for ShopNest means ship a thin checkout slice every sprint, get feedback, then improve—not a 6-month big-bang release.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Tips to make Sprint Reviews impactful: Invite the right stakeholders (not just managers).

Explain a bit more

Demonstrate working software, not just talk. Encourage interactive feedback — make it a conversation. Revisit progress toward the Product Goal. Align changes with business outcomes. Follow On: Real-World Example: In a Sprint Review for a booking app, stakeholders suggested that date filters were unintuitive. The team took this feedback and adjusted the UI in the next Sprint, improving user satisfaction.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: team felt retrospectives were repetitive. The Scrum Master tried a “Team Radar” activity to visualize team health across areas like collaboration and quality. This revealed deeper issues and sparked more meaningful discussions. Scrum Artifacts:

Real-world example (ShopNest)

Agile for ShopNest means ship a thin checkout slice every sprint, get feedback, then improve—not a 6-month big-bang release.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Alignment strategies: Define and communicate a clear Product Vision.

Explain a bit more

Use Sprint Goals that tie directly to business outcomes. Conduct Sprint Reviews with real stakeholders to validate direction. Use OKRs (Objectives & Key Results) at a program or portfolio level. Empower POs to make value-driven decisions, not just task prioritization. Example: If the business goal is to increase user retention, Sprint Goals focus on improving Follow On: onboarding UX and reducing churn. Sprint Reviews showcase progress toward these objectives. Follow On:

Real-world example (ShopNest)

Agile for ShopNest means ship a thin checkout slice every sprint, get feedback, then improve—not a 6-month big-bang release.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Challenge How to Overcome Unclear roles Provide clear Scrum training; reinforce roles (PO, SM, Dev Team).

Explain a bit more

Lack of stakeholder engagement Involve them in Sprint Reviews, show working software regularly. Poor backlog refinement Schedule regular grooming sessions with the PO and team. Unrealistic expectations Educate stakeholders on sustainable pace and team velocity. Team silos Promote cross-skilling and shared ownership of work. Skipping retrospectives Prioritize continuous improvement by making retros engaging and action-focused. Micromanagement Empower teams to self-organize; educate managers on agile leadership. Follow On: Advanced Scrum & Scaling:

Real-world example (ShopNest)

Agile for ShopNest means ship a thin checkout slice every sprint, get feedback, then improve—not a 6-month big-bang release.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Best practices: Rotate formats to keep things fresh.

Explain a bit more

Foster psychological safety — no blaming. Use data and facts (velocity, defect rates) to ground discussions. Focus on 1-2 action items, not a wish list. Follow up — review actions in the next Retrospective. Popular formats: Start / Stop / Continue Mad / Sad / Glad 4Ls (Liked, Learned, Lacked, Longed for) Real-World Example: A team felt retrospectives were repetitive. The Scrum Master tried a “Team Radar” activity to visualize team health across areas like collaboration and quality. This revealed deeper issues and sparked more meaningful discussions. Scrum Artifacts:

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: These values create a strong foundation for effective teamwork: Commitment – Teams commit to goals and deliverables.

Explain a bit more

Courage – Members speak up about challenges and take initiative. Focus – Everyone stays aligned on Sprint goals. Openness – Honest communication about progress and problems. Respect – Valuing everyone's contribution fosters trust. Example: In a high-pressure release, a developer admits they’re falling behind. Instead of assigning blame, the team rallies to support — pair programming to stay on track. That’s Scrum values in action. Follow On: Scrum Ceremonies:

Real-world example (ShopNest)

Agile for ShopNest means ship a thin checkout slice every sprint, get feedback, then improve—not a 6-month big-bang release.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.