{"department":"Front-End Development","description":null,"descriptionStatus":null,"descriptionUpdatedAt":null,"id":"84c36221-5a7f-4ae1-80f7-e18500058cee","label":"Angular","shortDescription":null,"slug":"angular","updatedAt":"2023-09-11T07:00:34.824Z","quizzes":[{"difficulty":"advanced","id":"9t4OsewXGd","questionCount":15,"questions":[{"index":0,"options":["You must manually call ChangeDetectorRef.detectChanges() on each affected component","Change detection runs only for components marked with OnPush that have async pipe subscriptions","You must explicitly call NgZone.run() to re-enter the Angular zone, which triggers change detection for the entire component tree","Change detection runs automatically because Zone.js patches all async APIs globally regardless of zone context"],"question":"When you execute an asynchronous operation using NgZone.runOutsideAngular(), what must happen before Angular's change detection will process any state changes produced by that operation?","difficulty":"advanced","explanation":"Code running outside Angular's zone does not trigger change detection. To have Angular process state changes, you must re-enter the zone via NgZone.run(), which triggers a full change detection cycle.","correctIndex":2},{"index":1,"options":["Element injector → Module injector → Platform injector","Module injector → Element injector → Platform injector","Element injector → Platform injector → Module injector","Platform injector → Element injector → Module injector"],"question":"In Angular's hierarchical dependency injection, when a component requests a token, what is the correct resolution order through the injector trees?","difficulty":"advanced","explanation":"Angular resolves dependencies by traversing the element injector tree first (up through parent DOM/components), then falls back to the module injector tree, and finally the platform injector.","correctIndex":0},{"index":2,"options":["mergeMap - processes all requests concurrently without cancellation","switchMap - unsubscribes from the previous inner observable when a new emission arrives","exhaustMap - ignores new emissions while an inner observable is active","concatMap - queues each request and processes them sequentially"],"question":"For a search autocomplete feature that makes API calls on each keystroke, which RxJS operator correctly cancels the previous in-flight request when a new keystroke arrives?","difficulty":"advanced","explanation":"switchMap automatically unsubscribes from the previous inner observable upon each new emission, making it ideal for search autocomplete where only the latest result matters and previous requests should be canceled.","correctIndex":1},{"index":3,"options":["Static:true queries resolve in ngOnInit (before change detection); static:false queries resolve in ngAfterViewInit/ngAfterContentInit (after change detection); default is false","Both resolve in ngAfterViewInit, but static:true is synchronous; default is true","Static:true queries resolve in ngAfterViewInit; static:false queries resolve in ngOnInit; default is false","Both resolve in ngOnInit, but static:true allows access before change detection; default is true"],"question":"Since Angular 9, what is the default behavior and key difference between `{ static: true }` and `{ static: false }` in ViewChild/ContentChild queries?","difficulty":"advanced","explanation":"The static option controls query resolution timing. With static:true, queries resolve before change detection runs (accessible in ngOnInit). With static:false (the default), queries resolve after change detection (accessible in ngAfterViewInit or ngAfterContentInit).","correctIndex":0},{"index":4,"options":["Signals can only be used in standalone components, ensuring better tree-shaking","Signals automatically handle all async operations without requiring subscription management","Signals replace the need for the OnPush change detection strategy entirely in all scenarios","Signals provide synchronous fine-grained reactivity, notifying only dependent consumers rather than triggering zone-based change detection across the component tree"],"question":"What is a key architectural advantage of Angular Signals over RxJS BehaviorSubject for managing component-local state?","difficulty":"advanced","explanation":"Signals enable fine-grained reactivity where only the specific consumers of a signal are notified of changes, avoiding Angular's default zone-based change detection that checks the entire component tree.","correctIndex":3},{"index":5,"options":["Inject ElementRef and Renderer2; use Renderer2.createElement() to add DOM nodes and Renderer2.removeChild() to remove them","Inject ViewContainerRef only; use ViewContainerRef.createComponent() to render and ViewContainerRef.remove() to remove","Inject TemplateRef and ViewContainerRef; use ViewContainerRef.createEmbeddedView() to render and ViewContainerRef.clear() to remove","Inject TemplateRef and ViewContainerRef; use TemplateRef.createEmbeddedView() to render and ViewContainerRef.detach() to remove"],"question":"When creating a custom structural directive similar to *ngIf, which is the correct approach to conditionally render an embedded view?","difficulty":"advanced","explanation":"Custom structural directives inject TemplateRef (the template to render) and ViewContainerRef (the anchor point). Views are created with ViewContainerRef.createEmbeddedView() and removed with ViewContainerRef.clear().","correctIndex":2},{"index":6,"options":["The execution order is non-deterministic and depends on the JavaScript runtime","They execute in the order they are registered in the providers array","They execute in the reverse order of their registration in the providers array","They execute in alphabetical order by class name"],"question":"When multiple HTTP interceptors are registered in Angular, what determines their execution order for outgoing requests?","difficulty":"advanced","explanation":"HTTP interceptors form a chain where each calls next.handle(). For outgoing requests, they execute in registration order. For incoming responses, they execute in reverse order (like a stack unwinding).","correctIndex":1},{"index":7,"options":["Ivy generates template instructions as factory functions at compile time, enabling tree-shaking of unused Angular features; View Engine uses a monolithic interpreter","Ivy requires Zone.js for change detection while View Engine does not","Ivy uses runtime compilation of templates while View Engine uses pre-compiled templates","Ivy only works with standalone components while View Engine only supports NgModules"],"question":"What is a key architectural difference between Angular's Ivy renderer and the legacy View Engine regarding bundle size optimization?","difficulty":"advanced","explanation":"Ivy compiles templates into incremental DOM instructions at build time, allowing unused Angular features to be tree-shaken. View Engine used a monolithic interpreter that included all framework code regardless of actual usage.","correctIndex":0},{"index":8,"options":["Returning `of(null)` skips preloading that route entirely; returning `load()` triggers immediate preloading of the route's module","Both trigger preloading, but `of(null)` does it with lower network priority","Returning `of(null)` preloads the route immediately; returning `load()` defers preloading to idle time","Returning `of(null)` preloads only the bundle metadata; returning `load()` preloads and activates the route"],"question":"When implementing a custom PreloadingStrategy, what is the effect of returning `of(null)` versus returning the result of `load()` from the `preload()` method?","difficulty":"advanced","explanation":"In a custom PreloadingStrategy, returning `of(null)` or an empty Observable signals that the route should not be preloaded. Returning `load()` triggers the preloading of that route's module immediately.","correctIndex":0},{"index":9,"options":["Implement DoCheck and the ngDoCheck() method","Implement OnChanges and the ngOnChanges() method","Implement OnInit and the ngOnInit() method","Implement ControlValueAccessor and the writeValue() method"],"question":"When implementing a custom form control that integrates with Angular reactive forms, which interface and method must you implement to receive programmatic value updates from the FormControl?","difficulty":"advanced","explanation":"The ControlValueAccessor interface bridges Angular forms and native DOM elements. The writeValue() method receives values from the model, registerOnChange() registers a callback for value changes, and registerOnTouched() registers a callback for blur events.","correctIndex":3},{"index":10,"options":["The async pipe internally calls markForCheck() on the ChangeDetectorRef, marking the component and its ancestors for the next change detection cycle","The async pipe triggers ApplicationRef.tick() which forces a full change detection cycle","Zone.js detects the Observable emission and triggers a full application change detection cycle","OnPush components always check when any Observable in their template emits, regardless of the async pipe"],"question":"A component uses OnPush change detection and displays an Observable via the async pipe. When the Observable emits a new value, what mechanism causes Angular to check this component?","difficulty":"advanced","explanation":"The async pipe calls markForCheck() on the ChangeDetectorRef when the Observable emits a value. This marks the component (and all ancestors up to the root) for the next change detection cycle, even with OnPush strategy.","correctIndex":0},{"index":11,"options":["It skips the component's own injector, searches parent injectors, and returns null if the service is not found in any parent injector without throwing an error","It searches from the root injector downward and returns null if not found anywhere","It skips all parent injectors and only checks the platform injector, returning null if not found","It creates a new instance of the service if not found in any injector, then returns null as a fallback"],"question":"In Angular's dependency injection, what is the combined effect of using @SkipSelf() and @Optional() decorators when injecting a service into a component?","difficulty":"advanced","explanation":"@SkipSelf() tells Angular to skip the current injector and start searching from parent injectors upward. @Optional() tells Angular to return null instead of throwing a NullInjectorError if the service is not found anywhere in the hierarchy.","correctIndex":0},{"index":12,"options":["The execution order is determined by each guard's priority property, defaulting to declaration order","They execute in reverse definition order, and all must pass regardless of earlier results","They execute in parallel and all must return true for navigation to succeed","They execute sequentially in definition order, and if any guard returns false or a UrlTree, subsequent guards are not executed"],"question":"When multiple CanActivate guards are defined on a single route in an array, how does Angular execute them?","difficulty":"advanced","explanation":"CanActivate guards execute sequentially in the order they appear in the array. If any guard returns false or a UrlTree (redirect), subsequent guards are not executed, providing short-circuit behavior for efficiency.","correctIndex":3},{"index":13,"options":["Angular automatically cleans up all subscriptions when a component is destroyed, so no manual cleanup is needed","Always use the async pipe exclusively; manual .subscribe() calls always cause memory leaks","Call .unsubscribe() in ngOnDestroy for each subscription; the takeUntil pattern with a destroyed$ subject is not reliable","Both the async pipe and manual cleanup via unsubscribe() or takeUntil patterns are valid approaches; the async pipe is preferred when possible"],"question":"Which statement most accurately describes valid approaches to preventing memory leaks from Observable subscriptions in Angular components?","difficulty":"advanced","explanation":"The async pipe manages subscriptions automatically and is preferred for template-bound observables. For subscriptions that don't feed templates, manual cleanup via unsubscribe() or the takeUntil pattern in ngOnDestroy is necessary and valid.","correctIndex":3},{"index":14,"options":["Standalone components increase bundle size because each component duplicates its dependency declarations instead of sharing them via modules","Standalone components can improve tree-shaking because dependencies are declared directly on the component, enabling build tools to better trace which framework features are actually used","Standalone components have no impact on bundle size; they are purely a developer experience improvement with identical output","Standalone components always result in smaller bundles because NgModules are eliminated from the runtime"],"question":"When migrating from NgModule-based to standalone components, what is the most accurate statement about the impact on bundle size and tree-shaking?","difficulty":"advanced","explanation":"Standalone components declare dependencies directly on themselves, which allows build tools to create a more precise dependency graph. This enables better tree-shaking of unused framework features compared to NgModule-based organization where unused components in a module could retain their dependencies.","correctIndex":1}]},{"difficulty":"beginner","id":"h6GtRo2vHz","questionCount":15,"questions":[{"index":0,"options":["angular init project-name","ng new project-name","ng create project-name","ng start project-name"],"question":"What Angular CLI command is used to create a new Angular project?","difficulty":"beginner","explanation":"The 'ng new project-name' command is the standard Angular CLI command used to scaffold and create a new Angular project with all necessary configuration files.","correctIndex":1},{"index":1,"options":["@Injectable","@Component","@Directive","@Module"],"question":"Which decorator is used to define an Angular component?","difficulty":"beginner","explanation":"The @Component decorator is used to mark a class as an Angular component and provide metadata such as the template, styles, and selector.","correctIndex":1},{"index":2,"options":["[(expression)]","(expression)","{{ expression }}","[expression]"],"question":"What is the correct syntax for string interpolation in an Angular template?","difficulty":"beginner","explanation":"String interpolation uses double curly braces {{ }} to display component property values in the template. It is a one-way data binding from the component to the view.","correctIndex":2},{"index":3,"options":["*ngFor","[hidden]","*ngIf","*ngShow"],"question":"Which structural directive is used to conditionally include or exclude an element from the DOM in Angular?","difficulty":"beginner","explanation":"The *ngIf directive conditionally adds or removes an element from the DOM based on whether the expression evaluates to true or false.","correctIndex":2},{"index":4,"options":["To inject services into a component","To define the HTML template for a component","To organize an application's components, directives, pipes, and services into cohesive blocks","To configure application routing"],"question":"What is the purpose of the @NgModule decorator?","difficulty":"beginner","explanation":"The @NgModule decorator defines a module that groups related components, directives, pipes, and services, providing context for dependency injection and compilation.","correctIndex":2},{"index":5,"options":["[ngModel]","{{ngModel}}","[(ngModel)]","(ngModel)"],"question":"What is the correct syntax for two-way data binding in Angular?","difficulty":"beginner","explanation":"Two-way data binding uses the banana-in-a-box syntax [( )] with ngModel, allowing data to flow in both directions between the template and the component.","correctIndex":2},{"index":6,"options":["ng init component component-name","ng generate component component-name","ng add component component-name","ng create component component-name"],"question":"What Angular CLI command is used to generate a new component?","difficulty":"beginner","explanation":"The 'ng generate component' command (or shorthand 'ng g c') creates a new component with its associated template, styles, and spec files.","correctIndex":1},{"index":7,"options":["To share data and logic across multiple components","To handle navigation between different views","To define the application's UI layout and structure","To declare HTML templates for components"],"question":"What is the primary purpose of Angular services?","difficulty":"beginner","explanation":"Angular services are singleton objects that encapsulate shared data, business logic, and functionality that can be injected into multiple components throughout the application.","correctIndex":0},{"index":8,"options":["*ngIf","*ngFor","*ngEach","*ngLoop"],"question":"Which structural directive is used to iterate over a collection and render an element for each item in Angular?","difficulty":"beginner","explanation":"The *ngFor directive repeats a portion of the DOM for each item in an iterable collection, similar to a for-each loop in other programming languages.","correctIndex":1},{"index":9,"options":["It injects a service into a component","It emits events from a child to a parent component","It allows a parent component to pass data to a child component","It captures keyboard input events from the user"],"question":"What does the @Input() decorator do in Angular?","difficulty":"beginner","explanation":"The @Input() decorator marks a property in a child component as a data input that can receive values from a parent component through property binding.","correctIndex":2},{"index":10,"options":["app.component.ts","main.ts","index.html","app.module.ts"],"question":"Which file is the root module of an Angular application by default?","difficulty":"beginner","explanation":"The app.module.ts file defines the root AppModule, which is the entry point module that Angular uses to bootstrap and launch the application.","correctIndex":3},{"index":11,"options":["To transform displayed values in templates","To define HTTP request endpoints","To manage application state","To establish communication between components"],"question":"What is the purpose of Angular pipes?","difficulty":"beginner","explanation":"Pipes transform data for display in templates, such as formatting dates, currency, or applying uppercase transformations, without modifying the original data.","correctIndex":0},{"index":12,"options":["A way to bind data between parent and child components","A design pattern where a class receives its dependencies from an external source rather than creating them","A method for injecting HTML content into templates dynamically","A technique for handling HTTP requests to external APIs"],"question":"What is dependency injection in Angular?","difficulty":"beginner","explanation":"Dependency injection is a design pattern where Angular provides instances of services to components and other services when they are requested, rather than having classes create their own dependencies.","correctIndex":1},{"index":13,"options":["It allows a child component to emit custom events to a parent component","It displays component data in the template","It injects a service into a component","It receives data from a parent component"],"question":"What does the @Output() decorator do in Angular?","difficulty":"beginner","explanation":"The @Output() decorator marks a property as an event emitter that a child component can use to send data to its parent component through event binding.","correctIndex":0},{"index":14,"options":["8080","3000","5000","4200"],"question":"What is the default port number for Angular's development server (ng serve)?","difficulty":"beginner","explanation":"By default, the Angular development server started with 'ng serve' runs on port 4200, accessible at http://localhost:4200.","correctIndex":3}]},{"difficulty":"intermediate","id":"MBKLfKupEz","questionCount":15,"questions":[{"index":0,"options":["A property on a mutable object passed via @Input() is modified","The AsyncPipe receives a new emitted value from an Observable","A DOM event handler in the component's template fires","A new object reference is assigned to an @Input() property"],"question":"When using ChangeDetectionStrategy.OnPush on a component, which of the following will NOT trigger change detection for that component?","difficulty":"intermediate","explanation":"OnPush change detection only runs when the input reference changes, DOM events fire, or async pipes emit. Mutating a property on an existing object reference does not trigger change detection.","correctIndex":0},{"index":1,"options":["An error is thrown for the overlapping requests","Both requests complete and both results are emitted","The previous request is canceled and only the new request result is used","Both requests complete and the last result is used"],"question":"In an Angular service, you use switchMap to handle search requests. What happens if a new search term arrives while a previous HTTP request is still in flight?","difficulty":"intermediate","explanation":"switchMap cancels the previous inner observable when a new value arrives, ensuring only the result of the most recent request is emitted.","correctIndex":2},{"index":2,"options":["The service gets a new instance per lazy-loaded module","The service can only be used within the declaring module","The service becomes tree-shakable if nothing injects it","The service is instantiated eagerly when the module loads"],"question":"What is a key advantage of using `providedIn: 'root'` on an @Injectable decorator compared to adding the service to a module's providers array?","difficulty":"intermediate","explanation":"Using providedIn: 'root' makes the service tree-shakable because the bundler can remove it if no component ever injects it, unlike module providers which are always included.","correctIndex":2},{"index":3,"options":["true","undefined","An empty object {}","null"],"question":"When creating a custom synchronous validator for a FormControl, what should the validator function return if the validation passes?","difficulty":"intermediate","explanation":"Angular validators return null to indicate that validation passed (no errors). A non-null object indicates validation failure with the keys representing error identifiers.","correctIndex":3},{"index":4,"options":["Resolve","CanDeactivate","CanLoad","CanActivate"],"question":"Which Angular router guard should you use to prevent navigation away from a route when the user has unsaved form changes?","difficulty":"intermediate","explanation":"CanDeactivate is specifically designed to determine whether a route can be exited, making it ideal for prompting users about unsaved changes before they navigate away.","correctIndex":1},{"index":5,"options":["

Title

","

Title

","

Title

",""],"question":"In a component template, you have ``. Which projected element will appear in this slot?","difficulty":"intermediate","explanation":"The select=\"[header]\" attribute targets elements that have the attribute 'header' on them.

has this attribute, while the others use class, element name, or role.","correctIndex":2},{"index":6,"options":["The query result is updated whenever the child component changes","The child component is always recreated on each change detection cycle","The query result is available in ngOnInit rather than ngAfterViewInit","The query searches the DOM outside the component's view"],"question":"What does setting `{ static: true }` in a `@ViewChild` query accomplish?","difficulty":"intermediate","explanation":"Setting static: true resolves the ViewChild query before ngOnInit, making the reference available in ngOnInit. Without it, the query resolves in ngAfterViewInit.","correctIndex":2},{"index":7,"options":["Impure pipes are more performant than pure pipes","Impure pipes run on every change detection cycle regardless of input changes","Pure pipes cannot transform objects or arrays","Pure pipes can handle asynchronous data like Observables"],"question":"What is the key behavioral difference between a pure and an impure pipe in Angular?","difficulty":"intermediate","explanation":"Pure pipes only execute when their input references change, while impure pipes execute on every change detection cycle, making them useful for mutable data but less performant.","correctIndex":1},{"index":8,"options":["It cancels the current HTTP request","It converts the response from an Observable to a Promise","It passes the request to the next interceptor in the chain or to the backend","It automatically retries the request on failure"],"question":"In an Angular HTTP interceptor, what is the purpose of calling `next.handle(req)`?","difficulty":"intermediate","explanation":"next.handle(req) forwards the modified or original request to the next interceptor in the chain, or to the backend if there are no more interceptors.","correctIndex":2},{"index":9,"options":["It makes the list iterable for asynchronous data sources","It enables filtering of list items directly in the template","It reduces DOM manipulation by reusing elements when the list changes","It sorts the list items before rendering them in the DOM"],"question":"What is the primary benefit of using a `trackBy` function with `*ngFor`?","difficulty":"intermediate","explanation":"trackBy allows Angular to identify which items have changed, been added, or removed by a unique identifier, enabling it to reuse existing DOM elements instead of destroying and recreating them.","correctIndex":2},{"index":10,"options":["It triggers a full application-wide change detection cycle","It marks the component for check, triggering change detection for that component","It converts the Observable to a Promise before rendering","It unsubscribes from the Observable and subscribes to a new one"],"question":"What happens when the AsyncPipe receives a new value from an Observable inside an OnPush component?","difficulty":"intermediate","explanation":"AsyncPipe calls markForCheck when it receives a new value, which ensures the component is checked during the next change detection cycle even with OnPush strategy.","correctIndex":1},{"index":11,"options":["It must be declared in an NgModule or be a standalone component","It must use ChangeDetectionStrategy.Default","It must extend a base component class","It cannot have any input or output properties"],"question":"When creating a component dynamically using ViewContainerRef.createComponent(), what must you ensure about the component?","difficulty":"intermediate","explanation":"Dynamically created components must either be declared in an NgModule that is available or be standalone components, otherwise Angular cannot resolve and create them.","correctIndex":0},{"index":12,"options":["To redirect users to a default route when navigation fails","To guard routes based on user authentication and permissions","To lazily load feature modules on demand","To prefetch data before the route is activated and the component renders"],"question":"What is the primary purpose of a Route Resolver in Angular?","difficulty":"intermediate","explanation":"Resolvers allow you to fetch required data before navigating to a route, ensuring the component has the data it needs when it initializes, avoiding loading states in the component itself.","correctIndex":3},{"index":13,"options":["To make the operation execute on a separate Web Worker thread","To ensure the operation triggers change detection when it completes","To allow the operation to directly modify the DOM bypassing Angular","To prevent Angular from running unnecessary change detection cycles during the operation"],"question":"Why would you use `NgZone.runOutsideAngular()` to wrap a long-running operation?","difficulty":"intermediate","explanation":"runOutsideAngular executes code outside Angular's zone, so events or timers within it won't trigger change detection, improving performance for operations that don't need to update the UI.","correctIndex":3},{"index":14,"options":["writeValue","registerOnTouched","setDisabledState","registerOnChange"],"question":"When implementing the ControlValueAccessor interface for a custom form control, which method is called by Angular forms to update the control's view from the model?","difficulty":"intermediate","explanation":"writeValue is called by the forms API whenever the model value changes, and it is responsible for updating the view or internal state of the custom form control.","correctIndex":0}]}]}

Angular Quiz

Pick your level

Beginner

Intermediate

Advanced