Data binding is a crucial concept in Angular. Explain the different types of data binding in Angular, including interpolation, property binding, and event binding.
Understand the difference between Structural (modifying the DOM layout with *ngIf , *ngFor ) and Attribute directives (modifying behavior or appearance).
Angular’s default change detection checks everything, all the time. A high-level candidate knows how to turn this off. Understanding ChangeDetectionStrategy.OnPush is the ultimate signal of performance literacy. The Strategy: Explain how forces the framework to only check a component when its
“Prevent a user from navigating away from a form with unsaved changes.” Hack approach: Implement a CanDeactivate guard that checks a dirty flag and prompts the user. Also handle browser refresh via HostListener('beforeunload') . decoded frontend angular interview hacking
Frontend security is often overlooked in prep, which makes it a great area to stand out.
"A component is an HTML template, a module is a container, and a service shares data."
An event originates from the component or its children (e.g., a button click). Data binding is a crucial concept in Angular
The @defer block allows developers to lazily load components, directives, and pipes based on specific runtime triggers. This drastically optimizes initial page load metrics like Largest Contentful Paint (LCP).
on interaction : Loads when the user clicks or focuses on the placeholder region.
import Component, inject from '@angular/core'; import FormControl, ReactiveFormsModule from '@angular/forms'; import debounceTime, distinctUntilChanged, switchMap, catchError from 'rxjs/operators'; import of from 'rxjs'; import SearchService from './search.service'; @Component( selector: 'app-search', standalone: true, imports: [ReactiveFormsModule], template: ` ` ) export class SearchComponent private searchService = inject(SearchService); searchControl = new FormControl(''); constructor() this.searchControl.valueChanges.pipe( debounceTime(300), // Wait 300ms for user to stop typing distinctUntilChanged(), // Only emit if value actually changed switchMap(query => this.searchService.queryApi(query).pipe( catchError(err => console.error(err); return of([]); // Catch errors inside switchMap to keep stream alive ) ) ) ).subscribe(results => // Update UI or component state here ); Use code with caution. The Strategy: Explain how forces the framework to
detectChanges() : Triggers change detection immediately for the current component and its children.
Discuss how OnPush change detection works by checking only when input references change or observables fire.