How can you analyze the bundle size of your Angular application?
- Using the "ng analyze" command
- Checking the browser console
- Using "npm start"
- Examining package.json
To analyze the bundle size of your Angular application, you can use the "ng analyze" command. This command provides detailed information about the size of each module and dependency in your application, helping you identify and optimize large bundles.
To make a service available only within a specific module, set the providedIn property to the ________ of that module.
- 'providers'
- 'imports'
- 'declarations'
- 'exports'
To limit the availability of a service to a specific module in Angular, you should set the 'providedIn' property to 'providers' of that module. This ensures that the service is scoped to the module where it's provided and can't be accessed outside of it. The other options ('imports,' 'declarations,' and 'exports') are unrelated to specifying service scope and purpose.
Which property of a FormControl instance would you check to determine if the user has interacted with a particular form control?
- dirty
- pristine
- touched
- untouched
To determine if the user has interacted with a particular form control in Angular Reactive Forms, you would check the touched property of the FormControl instance. It becomes true when the user has focused and blurred the form control, indicating interaction. The dirty property indicates if the value has changed.
How can you set default headers for every request made by HttpClient in your application?
- By adding headers to each HttpClient request manually
- By configuring HttpHeaders globally
- By modifying the HttpClient constructor
- By using an interceptor
You can set default headers for all HttpClient requests by using an interceptor. Interceptors allow you to intercept outgoing requests and modify them, including adding default headers, before they are sent.
Which of the following is the primary building block of an Angular application?
- Component
- Directive
- Module
- Service
In Angular, a component controls a patch of the screen called a view. Components are the main way to build and specify elements and logic on the page, making them the primary building block of an Angular application.
To mock a service in Angular tests, you often replace the real service with a ______ service.
- Mock
- Spy
- Stub
- TestBed
In Angular testing, you typically replace the real service with a "Spy" service. A spy allows you to track calls to service methods, set up return values, and perform other testing-related tasks while avoiding actual service execution.
Which tag is used for multi-slot content projection in Angular?
The tag used for multi-slot content projection in Angular is . It allows you to project content into named slots within a component's template, providing a way to customize the rendering of components from their parent components. is used for defining templates, while and are not standard Angular tags for this purpose.
You have a requirement to build a complex multi-step form with the ability to navigate between steps and validate each step individually. What approach would you take in Angular to handle this?
- Creating separate components for each form step
- Implementing a custom form control for each step
- Using a single large form with form groups
- Utilizing the ngSwitch directive for step navigation
To build a complex multi-step form with navigation and individual step validation, it's advisable to create separate components for each form step in Angular. This approach promotes code modularity, makes step validation and navigation easier, and improves maintainability. Using a single large form with form groups can become unwieldy, and implementing custom form controls for each step might be overcomplicated. The ngSwitch directive is more for conditionally rendering content than for step navigation.
Which property in the Angular routes configuration is used to define lazy-loaded modules?
- component
- loadChildren
- pathMatch
- redirectTo
To define lazy-loaded modules in Angular routes, you use the loadChildren property in the route configuration. This property specifies the path to the module file that should be loaded lazily when the route is activated.
In state management, to listen to changes in a specific slice of the state tree, you'd use ________.
- Actions
- Middleware
- Reducers
- Selectors
In state management libraries like NgRx or Redux, Selectors are used to listen to changes in a specific slice of the state tree. Selectors allow you to extract and compute derived pieces of state efficiently. They are particularly helpful when you need to extract specific data from your state for presentation purposes or when a component should respond to changes in a specific part of the application state.