A client asks you to highlight the currently active page link in the navigation menu. How would you achieve this in Angular?
- By using the routerLinkActive directive and applying it to the navigation menu items with a CSS class.
- By using JavaScript to detect the active route and apply a CSS class to the corresponding navigation menu item.
- By manually updating the active page link in the navigation component whenever a route changes.
- By creating a custom Angular directive to handle active link highlighting.
To highlight the currently active page link in the navigation menu in Angular, you should use the routerLinkActive directive. This directive is applied to the navigation menu items and automatically adds a CSS class when the corresponding route is active. The other options are either incorrect or involve more manual and error-prone approaches.
Which method of the ControlValueAccessor interface is called when the form control value changes programmatically?
- controlValueChanged()
- setValue()
- updateValue()
- writeValue()
The method of the ControlValueAccessor interface that is called when the form control value changes programmatically is writeValue(). This method allows you to update the form control's value from your custom form control component. It plays a crucial role in synchronizing the value between the custom control and the form group.
When you want to cancel a subscription to an Observable, you call the ________ method on the subscription object.
- cancel
- complete
- dispose
- unsubscribe
To cancel a subscription to an Observable and release its resources, you call the unsubscribe method on the subscription object. It's important to unsubscribe from Observables to prevent memory leaks when you're done using them.
When creating a custom attribute directive, which decorator is used to define its metadata?
- @Component
- @Directive
- @Attribute
- @Metadata
In Angular, to create a custom attribute directive, you use the @Directive decorator to define its metadata. This decorator allows you to specify the selector, inputs, outputs, and other properties that determine how the directive behaves when applied to elements in the DOM. The other options, such as @Component, @Attribute, and @Metadata, are not typically used for creating attribute directives.
How does the ChangeDetectionStrategy.OnPush improve performance in Angular components?
- It enables two-way data binding
- It forces constant change detection
- It prevents data mutation
- It reduces the frequency of change detection cycles
The ChangeDetectionStrategy.OnPush setting in Angular tells the framework to perform change detection only when the inputs to a component change, rather than after every event. This optimization reduces the frequency of change detection cycles, which can significantly improve performance, especially in complex applications.
How can you set default values for form controls in a template-driven form?
- Use the defaultValue attribute.
- Assign values directly in the template.
- Set values programmatically in the component.
- Use the ngDefaultControl directive.
In template-driven forms, default values for form controls are typically set programmatically in the component by initializing the corresponding form control variables with the desired default values. While you can assign values directly in the template, this doesn't allow for dynamic default values or interaction with the component logic. The other options mentioned are not common practices for setting default values in template-driven forms.
What does the map operator in RxJS primarily do?
- Combines multiple Observables
- Filters data emitted by an Observable
- Subscribes to an Observable
- Transforms data emitted by an Observable
The map operator in RxJS primarily transforms data emitted by an Observable. It allows you to apply a function to each item emitted by the source Observable and returns a new Observable with the transformed values.
You are working on a large application where you need to display complex modal dialogs based on user interactions. How can dynamic components assist in this scenario?
- Dynamic components allow you to add styling to elements.
- Dynamic components can only be used in AngularJS.
- Dynamic components enable lazy loading of modules.
- Dynamic components can be created and rendered at runtime.
Dynamic components in Angular allow you to create and render components at runtime. This is particularly useful for displaying complex modal dialogs based on user interactions. You can dynamically load the modal component when needed, keeping the main application bundle smaller and improving performance. The other options do not accurately describe the capabilities of dynamic components.
What potential issue can arise when using Lazy Loading without properly planning the module structure?
- Circular dependencies
- Decreased maintainability
- Difficulty in routing configuration
- Increased initial loading time
When using Lazy Loading without proper planning, circular dependencies can arise. This occurs when two or more modules depend on each other, causing issues with module resolution and potentially leading to runtime errors. It's essential to structure modules carefully to avoid this problem.
Which method would you use in HttpInterceptor to catch and handle HTTP errors?
- catchError
- handleError
- handleError and catchError
- intercept
In an HttpInterceptor, you would use the intercept method to catch and handle HTTP errors. This method intercepts outgoing HTTP requests and incoming responses, giving you the opportunity to handle errors and modify requests before they are sent.