Interview Q&A

Short answer: What is a release pipeline and how does it differ from a build pipeline? Answer: A build pipeline (CI) compiles, tests, and packages your code — it produces artifacts. A release pipeline (CD) takes those artifacts and deploys them to different environments like Dev, QA, or Production.

Example code

Build Pipeline: Compiles your .NET app and outputs a .zip file. Release Pipeline: Takes that .zip and deploys it to Azure App Service. So, the build pipeline = create, and release pipeline = deliver.

Real-world example (ShopNest)

ShopNest’s YAML pipeline builds on every PR, runs unit tests, then deploys to a staging slot on main-branch merges.

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: What are pipeline templates and how are they used? Answer: Templates let you reuse pipeline steps across projects — great for standardization.

Example code

You can create a reusable file: 📄 .azure-pipelines/build-template.yml steps: script: dotnet restore script: dotnet build Then in your main pipeline: extends: template: .azure-pipelines/build-template.yml This keeps your YAML DRY (Don’t Repeat Yourself) and consistent.

Real-world example (ShopNest)

ShopNest’s YAML pipeline builds on every PR, runs unit tests, then deploys to a staging slot on main-branch merges.

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: What is a build pipeline in Azure DevOps? Answer: A build pipeline in Azure DevOps automates how your code is compiled, tested, and packaged whenever you make changes. It’s part of Continuous Integration (CI) — where every code check-in triggers an automatic build to ensure nothing is broken.

Example code

When a developer pushes code to main, Azure Pipelines automatically compiles your .NET app, runs unit tests, and generates a build artifact (like a .zip or .dll) ready for deployment.

Real-world example (ShopNest)

ShopNest’s YAML pipeline builds on every PR, runs unit tests, then deploys to a staging slot on main-branch merges.

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: "ApplicationInsights": { "ConnectionString": "InstrumentationKey=xxxx-xxxx-xxxx" }

Real-world example (ShopNest)

Azure DevOps holds ShopNest repos, boards, and release pipelines in one place so build + deploy stay repeatable.

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: Restore packages as usual:? is a common interview topic in Azure DevOps. Give a clear definition, then one concrete example.

Real-world example (ShopNest)

Azure DevOps holds ShopNest repos, boards, and release pipelines in one place so build + deploy stay repeatable.

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: Create a class with the @Pipe decorator implementing PipeTransform. Implement a transform() method with your logic. Example: @Pipe({ name: 'exclaim' }) export class ExclaimPipe implements PipeTransform { transform(value: string): string { return value + '!!!';

Example code

}
} Use in template: <p>{{ 'Hello' | exclaim }}</p> <!-- Outputs: Hello!!! -->

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: ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override behavior. spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override… behavior.

Example code

spyOn(service,… 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override behavior. Example: spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions. ngular tests? spyOn() creates a spy on a method, allowing you to track calls and override… behavior. Example: spyOn(service, 'getData').and.returnValue(of(['mock data'])); Useful for mocking service methods and verifying interactions.

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: AOT compiles templates before runtime, improving startup performance. Enable via: ng build --aot Usually enabled automatically with --prod. Can be configured in angular.json: "configurations": { "production": { "aot": true }

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: Validators provides built-in validators like required, minLength, maxLength, email. ✅

Example code

new FormControl('', [Validators.required, Validators.email])

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-content> is used for content projection, i.e., to pass custom content into a component from a parent.

Example code

<!-- alert.component.html --> <div class="alert-box"> <ng-content></ng-content> </div> Usage: <app-alert> <p>Warning! Something went wrong.</p> </app-alert> Real-Time Example: Reusable modal or alert components that display different messages using <ng-content>.

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: tsconfig.json configures the TypeScript compiler.

Explain a bit more

Specifies: Target JS version (ES5/ES2015) Module system (ESNext/CommonJS) Included/excluded files Compiler options like strictness, decorators support Helps Angular’s build system transpile TS code to browser-compatible JS. Summary Table: Command/File Purpose Angular CLI Tool to scaffold, build, test Angular apps ng serve Run dev server with live reload ng build Compile and output build files Production Build ng build --prod enables optimizations angular.json CLI workspace/project configuration Custom Builder Extend Angular CLI build/serve functionality AOT Compilation Compile templates ahead-of-time for faster startup tsconfig.json TypeScript compiler options for Angular project Testing Angular Applications

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: Angular uses the fileReplacements option in angular.json.

Explain a bit more

You create environment files like environment.ts and environment.prod.ts. During build, Angular replaces the environment file based on the target configuration. Example in angular.json: "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } } } Allows different API endpoints, debug flags, or configurations per environment. Best Practices

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: *ngIf supports an else clause to show alternative template when condition is false. Use <ng-template> for the else block.

Example code

<div *ngIf="isLoggedIn; else loginPrompt"> Welcome back! </div> <ng-template #loginPrompt> Please log in. </ng-template>

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: E2E testing verifies the entire application flow in a real browser environment. Tests user interactions and integration between components and backend. Ensures app works as expected from a user's perspective.

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: ngular projects? tsconfig.json configures the TypeScript compiler. Specifies: Target JS version (ES5/ES2015) Module system (ESNext/CommonJS) Included/excluded files Compiler options like strictness, decorators support Helps Angular’s build system transpile TS code to browser-compatible JS. Summary Table: Command/File Purpose ngular CLI Tool to… scaffold,……… build, test Angular apps ng serve Run dev server with live…

Explain a bit more

reload ng build Compile and output build files Production Build ng build --prod enables optimizations ngular.json CLI workspace/project configuration Custom Builder Extend Angular CLI build/serve functionality OT Compilation Compile templates ahead-of-time for faster startup tsconfig.json TypeScript compiler options for Angular project Testing Angular Applications

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: FormBuilder helps create form controls/groups/arrays with less boilerplate. ✅

Example code

constructor(private fb: FormBuilder) {} this.profileForm = this.fb.group({ firstName: ['', Validators.required], lastName: [''], email: ['', [Validators.required, Validators.email]] });

Real-world example (ShopNest)

A shared CartService is injected into header and product pages so both see the same cart count.

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 modules (NgModules) are containers that group related components, directives, pipes, and services. Purpose: Organize code Enable lazy loading Manage dependencies

Example code

@NgModule({ declarations: [LoginComponent], imports: [CommonModule, FormsModule], exports: [LoginComponent] }) export class AuthModule {} Real-Time Example: AuthModule for login and registration AdminModule for dashboard, user management

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: Use the reset() method on FormGroup or NgForm.

Explain a bit more

✅ Examples: this.profileForm.reset(); myForm.resetForm(); You can also pass default values: this.profileForm.reset({ firstName: 'John', lastName: '' }); Summary Table: Concept Template-Driven Reactive Setup Use FormsModule, ngModel Use ReactiveFormsModule, FormGroup Validation Template-driven (HTML attrs) Programmatic with Validators Form Definition Implicit Explicit in TypeScript Custom Validation Limited Full control via functions Async Validation Not supported Supported with AsyncValidators Testing Harder Easier and more robust FormBuilder N/A Simplifies form creation Change Detection & Performance Optimization

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: The Angular CLI (Command Line Interface) is a tool to create, build, test, and deploy Angular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time

Example code

In a company, developers use ng generate component invoice to create a new invoice component with all required files. Angular Components & Templates The @Component decorator defines a component in Angular. It tells Angular how to create and display the component by providing metadata such as the selector, template, and styles. ✅ Example: @Component({ selector: 'app-user-card', templateUrl: './user-card.component.html', styleUrls: ['./user-card.component.css'] }) export class UserCardComponent {} 📌 Real-Time Example: In a CRM app, @Component({ selector: 'app-customer' }) is used to define a reusable customer display card. the different types. Data binding connects the component's class logic with its template (HTML). ✳ Types of Data Binding: Type Syntax Description Interpolation {{ value }} Bind component data to HTML Property Binding [property]="val ue" Bind DOM properties to component Event Binding (event)="handle r()" Bind DOM events to component methods Two-Way Binding [(ngModel)]="va lue" Sync data both ways (input ↔ component) ✅ Example: <!-- Interpolation --> <h1>{{ title }}</h1> <!-- Property Binding --> <input [value]="name" /> <!-- Event Binding --> <button (click)="greetUser()">Greet</button> <!-- Two-Way Binding --> <input [(ngModel)]="username" /> in templates? *ngIf: Conditionally includes or removes an element. *ngFor: Iterates over a list and renders template for each item. ✅ Example: <!-- *ngIf --> <div *ngIf="isLoggedIn">Welcome, {{ user.name }}</div> <!-- *ngFor --> <ul> <li *ngFor="let product of products">{{ product.name }}</li> </ul> 📌 Real-Time Example: E-commerce product list: *ngFor displays product cards dynamically. Angular? ➤ Parent to Child: Use @Input() // child.component.ts @Input() userData: any; <!-- parent.component.html --> <app-child [userData]="user"></app-child> ➤ Child to Parent: Use @Output() + EventEmitter // child.component.ts @Output() notify = new EventEmitter<string>(); this.notify.emit('Hello Parent!'); <!-- parent.component.html --> <app-child (notify)="handleNotification($event)"></app-child> 📌 Real-Time Example: Pass user object to UserCardComponent via @Input. Emit "user clicked" event back to parent with @Output. describe them. Lifecycle hooks are methods that Angular calls at specific stages of a component's existence. 🌀 Common Lifecycle Hooks: Hook Description ngOnInit Called once after component is initialized ngOnChanges Called when input properties change ngDoCheck Called during every change detection ngAfterViewI nit Called after component’s view has been initialized ngOnDestroy Cleanup just before the component is destroyed ngOnChanges() is called whenever an @Input() property changes in the component. ✅ Example: @Input() user: User; ngOnChanges(changes: SimpleChanges) { console.log('User changed:', changes.user.currentValue); } 📌 Real-Time Example: When a new user is selected in a dashboard, ngOnChanges() updates the user detail card dynamically. do you implement it? Two-way data binding means synchronizing the view and the component model automatically. ✅ Syntax: <input [(ngModel)]="username" /> Requires importing FormsModule. 📌 Real-Time Example: In a login form, updating the email input field updates the email property in the component instantly. Angular provides two ways: ➤ Template-Driven Forms: Use ngModel, required, etc. <form #form="ngForm"> <input name="email" [(ngModel)]="email" required /> <div *ngIf="form.controls.email?.invalid">Email is required.</div> </form> ➤ Reactive Forms: Use FormGroup, FormControl, and Validators. form = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]) }); 📌 Real-Time Example: Login or signup forms showing real-time validation messages. Use Reactive Forms to generate controls at runtime. ✅ Example: form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({}); this.questions.forEach(q => { this.form.addControl(q.key, new FormControl('')); }); } 📌 Real-Time Example: Survey builder where form fields change based on user selections. be used? ngModel is a directive that enables two-way data binding in template-driven forms. ✅ Example: <input [(ngModel)]="name" /> Use it when: Working with template-driven forms Simple input binding is sufficient Must import FormsModule. 📌 Real-Time Example: Live search input field using [(ngModel)]="searchQuery" for filtering products. Angular Directives attribute directives in Angular? ➤ Structural Directives: Change the structure/layout of the DOM by adding or removing elements. Prefix: * (e.g., *ngIf, *ngFor) Examples: *ngIf – conditionally includes elements *ngFor – loops over data to render elements *ngSwitch – conditionally renders one view out of many ➤ Attribute Directives: Change the appearance or behavior of an existing DOM element or component. Examples: ngClass – dynamically sets CSS classes ngStyle – sets inline styles dynamically Custom highlight directive (e.g., change color on hover) ✅ Real-Time Analogy: Structural: Like building or removing walls in a house (changes structure). Attribute: Like painting the walls (changes appearance only). directives in Angular? ➤ *ngIf: Conditionally displays content <div *ngIf="isLoggedIn">Welcome!</div> ➤ *ngFor: Iterates over a list <li *ngFor="let item of items">{{ item.name }}</li> ➤ ngSwitch: Selectively renders based on a condition <div [ngSwitch]="status"> <p *ngSwitchCase="'active'">Active</p> <p *ngSwitchCase="'inactive'">Inactive</p> <p *ngSwitchDefault>Unknown</p> </div> Angular? ➤ Steps:

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: NgZone monitors async operations (like promises, timers) and triggers Angular’s change detection automatically after they complete. It helps Angular know when to update the UI. You can run code outside Angular’s zone to avoid unnecessary change detection, improving performance.

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: Protractor is built on WebDriverJS for Angular E2E tests. Write test specs using Jasmine syntax. Run tests against a running Angular app. Example test: describe('App E2E Test', () => { it('should display welcome message', () => { browser.get('/'); expect(element(by.css('h1')).getText()).toEqual('Welcome'); }); }); Run with: ng e2e

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: ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time In a company, developers use ng generate component invoice to create a new invoice component with all… required files.…… ngular Components & Templates The @Component decorator defines a…

Explain a bit more

component in Angular. ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time

Example code

In a company, developers use ng generate component invoice to create a new invoice component with all… required files.… ngular Components & Templates The @Component decorator defines a component in Angular. ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time Example: In a company, developers use ng generate component invoice to create a new invoice component with all required files.… ngular Components & Templates The @Component decorator defines a component in Angular. ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time Example: In a company, developers use ng generate component invoice to create a new invoice component with all required files. ngular Components & Templates The @Component decorator defines a component in Angular. It tells Angular how to create nd display the component by providing metadata such as the selector, template, and styles. ✅ Example: @Component({ selector: 'app-user-card', templateUrl: './user-card.component.html', styleUrls: ['./user-card.component.css'] }) export class UserCardComponent {} 📌 Real-Time Example: In a CRM app, @Component({ selector: 'app-customer' }) is used to define a reusable customer display card. the different types. Data binding connects the component's class logic with its template (HTML). ✳ Types of Data Binding: Type Syntax Description Interpolation {{ value }} Bind component data to HTML Property Binding [property]="val ue" Bind DOM properties to component Event Binding (event)="handle r()" Bind DOM events to component methods Two-Way Binding [(ngModel)]="va lue" Sync data both ways (input ↔ component) ✅ Example: <!-- Interpolation --> <h1>{{ title }}</h1> <!-- Property Binding --> <input [value]="name" /> <!-- Event Binding --> <button (click)="greetUser()">Greet</button> <!-- Two-Way Binding --> <input [(ngModel)]="username" /> in templates? *ngIf: Conditionally includes or removes an element. *ngFor: Iterates over a list and renders template for each item. ✅ Example: <!-- *ngIf --> <div *ngIf="isLoggedIn">Welcome, {{ user.name }}</div> <!-- *ngFor --> <ul> <li *ngFor="let product of products">{{ product.name }}</li> </ul> 📌 Real-Time Example: E-commerce product list: *ngFor displays product cards dynamically. ngular? ➤ Parent to Child: Use @Input() // child.component.ts @Input() userData: any; <!-- parent.component.html --> <app-child [userData]="user"></app-child> ➤ Child to Parent: Use @Output() + EventEmitter // child.component.ts @Output() notify = new EventEmitter<string>(); this.notify.emit('Hello Parent!'); <!-- parent.component.html --> <app-child (notify)="handleNotification($event)"></app-child> 📌 Real-Time Example: Pass user object to UserCardComponent via @Input. Emit "user clicked" event back to parent with @Output. describe them. Lifecycle hooks are methods that Angular calls at specific stages of a component's existence. 🌀 Common Lifecycle Hooks: Hook Description ngOnInit Called once after component is initialized ngOnChanges Called when input properties change ngDoCheck Called during every change detection ngAfterViewI nit Called after component’s view has been initialized ngOnDestroy Cleanup just before the component is destroyed ngOnChanges() is called whenever an @Input() property changes in the component. ✅ Example: @Input() user: User; ngOnChanges(changes: SimpleChanges) { console.log('User changed:', changes.user.currentValue); } 📌 Real-Time Example: When a new user is selected in a dashboard, ngOnChanges() updates the user detail card dynamically. do you implement it? Two-way data binding means synchronizing the view and the component model utomatically. ✅ Syntax: <input [(ngModel)]="username" /> Requires importing FormsModule. 📌 Real-Time Example: In a login form, updating the email input field updates the email property in the component instantly. ngular provides two ways: ➤ Template-Driven Forms: Use ngModel, required, etc. <form #form="ngForm"> <input name="email" [(ngModel)]="email" required /> <div *ngIf="form.controls.email?.invalid">Email is required.</div> </form> ➤ Reactive Forms: Use FormGroup, FormControl, and Validators. form = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]) }); 📌 Real-Time Example: Login or signup forms showing real-time validation messages. Use Reactive Forms to generate controls at runtime. ✅ Example: form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({}); this.questions.forEach(q => { this.form.addControl(q.key, new FormControl('')); }); } 📌 Real-Time Example: Survey builder where form fields change based on user selections. be used? ngModel is a directive that enables two-way data binding in template-driven forms. ✅ Example: <input [(ngModel)]="name" /> Use it when: Working with template-driven forms Simple input binding is sufficient Must import FormsModule. 📌 Real-Time Example: Live search input field using [(ngModel)]="searchQuery" for filtering products. ngular Directives ttribute directives in Angular? ➤ Structural Directives: Change the structure/layout of the DOM by adding or removing elements. Prefix: * (e.g., *ngIf, *ngFor) Examples: *ngIf – conditionally includes elements *ngFor – loops over data to render elements *ngSwitch – conditionally renders one view out of many ➤ Attribute Directives: Change the appearance or behavior of an existing DOM element or component. Examples: ngClass – dynamically sets CSS classes ngStyle – sets inline styles dynamically Custom highlight directive (e.g., change color on hover) ✅ Real-Time Analogy: Structural: Like building or removing walls in a house (changes structure). Attribute: Like painting the walls (changes appearance only). directives in Angular? ➤ *ngIf: Conditionally displays content <div *ngIf="isLoggedIn">Welcome!</div> ➤ *ngFor: Iterates over a list <li *ngFor="let item of items">{{ item.name }}</li> ➤ ngSwitch: Selectively renders based on a condition <div [ngSwitch]="status"> <p *ngSwitchCase="'active'">Active</p> <p *ngSwitchCase="'inactive'">Inactive</p> <p *ngSwitchDefault>Unknown</p> </div> ngular? ➤ Steps:

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: Test form validity by setting control values and checking validity state.

Example code

it('should mark form invalid when empty', () => { component.form.controls['email'].setValue(''); expect(component.form.valid).toBeFalse(); }); it('should mark form valid with correct email', () => { component.form.controls['email'].setValue('test@example.com'); expect(component.form.valid).toBeTrue(); }); Advanced Angular Topics

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: Offload heavy computations or tasks to: Web Workers to run in background threads. ngZone.runOutsideAngular() to prevent triggering change detection unnecessarily. Use RxJS operators like debounce, throttle to optimize async streams. Break large tasks into smaller chunks. Miscellaneous Angular Concepts

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: ngular? Test form validity by setting control values and checking validity state. it('should mark form invalid when empty', () => { component.form.controls['email'].setValue(''); expect(component.form.valid).toBeFalse(); }); it('should mark form valid with correct email', () => {… component.form.controls['email'].setValue('test@example.com');…… expect(component.form.valid).toBeTrue(); }); dvanced Angular Topics…

Explain a bit more

ngular? ngular? Test form validity by setting control values and checking validity state.

Example code

it('should mark form invalid when empty', () => { component.form.controls['email'].setValue(''); expect(component.form.valid).toBeFalse(); }); it('should mark form valid with correct email', () => {… component.form.controls['email'].setValue('test@example.com');… expect(component.form.valid).toBeTrue(); }); dvanced Angular Topics ngular? ngular? Test form validity by setting control values and checking validity state. Example: it('should mark form invalid when empty', () => { component.form.controls['email'].setValue(''); expect(component.form.valid).toBeFalse(); }); it('should mark form valid with correct email', () => { component.form.controls['email'].setValue('test@example.com');… expect(component.form.valid).toBeTrue(); }); dvanced Angular Topics ngular? Test form validity by setting control values and checking validity state. Example: it('should mark form invalid when empty', () => { component.form.controls['email'].setValue(''); expect(component.form.valid).toBeFalse(); }); it('should mark form valid with correct email', () => { component.form.controls['email'].setValue('test@example.com'); expect(component.form.valid).toBeTrue(); }); dvanced Angular Topics

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.