Which decorator is used to inject a service into an Angular component?
- @Injectable()
- @Component()
- @Service()
- @InjectService()
To inject a service into an Angular component, you use the @Injectable() decorator. This decorator is applied to the service class, allowing Angular's dependency injection system to recognize and provide the service when requested by a component. The other options (@Component(), @Service(), @InjectService()) are not used for this purpose.
When using the OnPush strategy, a component will be checked if a new object reference is passed to one of its ________.
- Inputs
- Methods
- Outputs
- Variables
When using the OnPush change detection strategy in Angular, a component will be checked if a new object reference is passed to one of its inputs. This means that the component will only re-render if there's a change in the input values. The OnPush strategy is an optimization to reduce unnecessary checks and re-renders.
Change detection in Angular can be optimized by ensuring data structures are ________.
- Encapsulated
- Immutable
- Mutable
- Private
Change detection in Angular can be optimized by ensuring data structures are immutable. Immutable data structures ensure that when changes are made to data, a new reference is created, which helps Angular's change detection mechanism identify changes efficiently. By contrast, mutable data structures may not trigger change detection as expected.
Angular provides a set of classes like Renderer2 and ______ to safely manipulate the DOM without direct access.
- DomHelper
- DomManipulator
- ElementRef
- Renderer3
Angular provides a set of classes like Renderer2 to safely manipulate the DOM without direct access. These classes abstract away direct DOM manipulation, promoting a safer and more Angular-friendly way to interact with the DOM. ElementRef is used to access the underlying DOM element, not to manipulate it directly. DomManipulator and Renderer3 are not standard Angular classes.
You're building a chat application where messages should be displayed in real-time. However, if the user is not on the chat page, the messages should be buffered and displayed all at once when the user returns. Which RxJS operator or concept would help achieve this?
- BehaviorSubject
- BufferTime
- DebounceTime
- SwitchMap
To achieve real-time message display with buffering when the user returns, you can use the RxJS bufferTime operator. bufferTime collects items emitted within a specified time window and then emits the collected items as an array. This allows you to buffer messages and display them together when appropriate.
A client wants to implement a feature where custom user-generated templates can be rendered inside their application. Which approach in Angular would allow for this level of dynamic content rendering?
- Using Angular modules
- Using Angular ngTemplateOutlet directive
- Using Angular pipes
- Using Angular templates
To render custom user-generated templates dynamically in an Angular application, you can use the ngTemplateOutlet directive. It allows you to render templates based on user-defined conditions or data. While Angular pipes, modules, and templates have their uses, they are not specifically designed for this level of dynamic content rendering.
Which of the following is NOT a method available on ViewContainerRef?
- clear
- createEmbeddedView
- detach
- detectChanges
detectChanges is not a method available on ViewContainerRef. ViewContainerRef is primarily used for manipulating the view container's content, including creating embedded views, detaching, and clearing views. detectChanges is typically used on a ChangeDetectorRef to trigger change detection in Angular.
When the ViewEncapsulation.Emulated mode is used, Angular adds unique ________ to styles to achieve scoped styling.
- CSS IDs
- CSS classes
- attribute selectors
- pseudo-elements
When Angular uses the ViewEncapsulation mode "Emulated," it adds unique CSS classes to styles to achieve scoped styling. This means that styles defined in one component won't affect styles in other components, ensuring encapsulation and preventing unintended CSS conflicts. The unique CSS classes are generated dynamically to maintain separation between components, enhancing modularity and maintainability in Angular applications.
To intercept and modify HTTP requests globally, you would implement a class that uses the ________ interface.
- HttpClient
- HttpHandler
- HttpInterceptor
- HttpRequest
To intercept and modify HTTP requests globally in an Angular application, you would implement a class that uses the HttpInterceptor interface. This interface provides methods for intercepting both the request and the response, allowing you to add headers, modify requests, or handle errors at a global level.
When you want to replace a specific part of your component's view with another component dynamically, which of the following would you use?
- ngFor
- ngIf
- ngReplace
- ngSwitch
When you want to conditionally replace a specific part of your component's view with another component dynamically, you typically use ngIf. This structural directive allows you to conditionally render or remove elements based on a given expression. ngFor is used for rendering lists, ngSwitch for conditional rendering based on a value, and ngReplace is not a standard Angular directive.