Which directive in Angular is used to add or remove an element from the DOM based on a condition?
- *ngFor
- *ngIf
- *ngInclude
- *ngSwitch
The *ngIf directive is used in Angular to conditionally add or remove an element from the DOM based on a given condition. If the condition evaluates to true, the element is rendered; otherwise, it is removed from the DOM. It's a fundamental directive for handling conditional rendering in Angular templates.
In the context of Angular's router, what is the significance of the pathMatch property?
- It defines the priority of route matching.
- It determines the parent route of a child route.
- It specifies how to match a URL path to a route.
- It controls the route's access permissions.
In Angular's router, the pathMatch property is significant because it specifies how to match a URL path to a route. It has two values: 'prefix' (default) and 'full.' 'Prefix' means the route will match if the URL starts with the path, while 'full' requires an exact URL match. The other options do not accurately describe the purpose of pathMatch.
At which lifecycle hook is it best to make an HTTP request in an Angular component?
- constructor
- ngAfterViewInit
- ngOnDestroy
- ngOnInit
In Angular, it's best to use the ngOnInit lifecycle hook to handle any additional initialization tasks, including making HTTP requests. The constructor is mainly used for dependency injection and not for logic.
How does Angular's default change detection strategy determine when to check components for updates?
- It checks components at predefined intervals.
- It checks components when asynchronous data arrives.
- It checks components when their input properties change.
- It checks components when there's user interaction.
Angular's default change detection strategy checks components at predefined intervals. It periodically scans all components in the application for changes, which can be resource-intensive. This approach is less efficient than the OnPush strategy because it checks components even when no relevant changes have occurred. User interaction and asynchronous data arrival do not directly trigger checks in the default strategy.
You're building a carousel component that requires initialization logic after its views are rendered. Which lifecycle hook would be most appropriate for this?
- ngOnInit
- ngAfterViewInit
- ngOnChanges
- ngOnDestroy
In Angular, the ngAfterViewInit lifecycle hook is most appropriate when you need to perform initialization logic after a component's views have been rendered. This hook is called once when the component's view and its children's views are initialized. ngOnInit is called earlier, before child views are ready, and the other options are not typically used for initialization logic in this context.
What is the primary purpose of the Validators class in Angular's Reactive Forms?
- To create custom form controls.
- To handle HTTP requests.
- To define validation rules for form controls.
- To style the form controls.
The primary purpose of the Validators class in Angular's Reactive Forms is to define validation rules for form controls. It provides a set of built-in validator functions that you can use to ensure that user input meets specific criteria, such as required fields, email formats, and custom validation logic. The other options do not accurately describe the role of the Validators class.
When ViewEncapsulation.Native is used, the styling is encapsulated using the browser's native ________.
- CSS-in-JS
- Inline styles
- Scoped CSS
- Shadow DOM
When ViewEncapsulation.Native is used, the styling is encapsulated using the browser's native Shadow DOM. Shadow DOM is a web standard that provides encapsulation of styles and markup, ensuring that styles in one component do not affect styles in another. It's a key feature in achieving component-based styling in Angular.
To create an instance of a component, you would use ______ method of ComponentFactory.
- create()
- generate()
- initialize()
- instantiate()
To create an instance of a component dynamically, you would use the create() method of ComponentFactory. This method allows you to instantiate and add components to your application at runtime. It's a fundamental concept in frameworks like Angular for dynamic component loading.
In Angular, to make a service available to the entire application, you should set its providedIn property to ________.
- 'anywhere'
- 'app'
- 'global'
- 'root'
In Angular, to make a service available to the entire application, you should set its 'providedIn' property to 'root'. This ensures that the service is provided at the root level injector, making it accessible throughout the application. Using 'root' is the recommended approach for most services in Angular applications.
How can you ensure that multiple HTTP requests are executed in order, one after another, using HttpClient and RxJS?
- Use the concatMap operator
- Use the forkJoin operator
- Use the mergeMap operator
- Use the switchMap operator
To execute multiple HTTP requests in order, one after another, you should use the concatMap operator from RxJS. concatMap maintains the order of execution by waiting for each request to complete before starting the next one.
Which module in Angular is primarily used for setting up routing?
- AppRoutingModule
- NgModule
- RouterModule
- RoutingModule
In Angular, the RouterModule is primarily used for setting up routing. It provides the necessary tools and components to configure routing in an Angular application. While NgModule is a fundamental building block in Angular, it's not specifically designed for routing. AppRoutingModule and RoutingModule are commonly used names for the routing module in many Angular projects.
An application you're working on requires form fields to be validated against data from a backend API. How would you achieve this in Angular?
- Implement asynchronous validators in Angular's Reactive Forms.
- Use Angular's built-in server-side validation.
- Use Angular's template-driven forms for API validation.
- Use JavaScript fetch API to validate form fields.
To validate form fields against data from a backend API in Angular, you should implement asynchronous validators in Angular's Reactive Forms. These validators allow you to make asynchronous API calls to validate form data. Using the JavaScript fetch API directly is possible but not as integrated and flexible as Angular's Reactive Forms. Angular's built-in server-side validation is a server-side concern and does not directly relate to Angular's validation. Template-driven forms do not provide the same level of control and flexibility for asynchronous validation as Reactive Forms.