How can you project content from a parent component to a specific location in a child component?
- By using the
directive. - By using the
element with a selector in the child component's template. - By using the @Input decorator in the child component's TypeScript file.
- By using the Angular CLI command ng project-content.
You can project content from a parent component to a specific location in a child component by using the element with a selector in the child component's template. This selector allows you to define where the content should be placed within the child component's template. It's a crucial technique for creating flexible and reusable components in Angular.
If a component has a frequently updating data-bound property, using ChangeDetectionStrategy.______ might lead to unwanted behavior.
- CheckAlways
- CheckOnce
- Default
- OnPush
In Angular, Change Detection is the mechanism that automatically updates the view to reflect the model state. When a component uses ChangeDetectionStrategy.OnPush, it means that change detection is triggered only when the input properties of the component change or when an event is fired from the component itself. Using OnPush can lead to unwanted behavior if a data-bound property frequently updates outside of these triggers, as it may not be detected by Angular.
How can you bind an event to a button click in Angular?
- Using ngSwitch
- Using ngModel
- Using ngClass
- Using (click) syntax
In Angular, you can bind an event to a button click using the (click) syntax. For example, you can use (click)="functionName()" to trigger a function when the button is clicked. This syntax allows you to specify event bindings in your Angular templates. The other options (ngSwitch, ngModel, ngClass) are used for different purposes and do not directly bind events to button clicks.
An application form has a section that should only become available if the user selects a specific option in a dropdown menu. Which Angular feature would you use to conditionally display this section?
- *ngIf directive
- Angular routing
- ngClass directive
- Angular modules
To conditionally display a section in Angular based on user input, you would use the *ngIf directive (Option 1). This directive allows you to evaluate an expression and render or remove elements accordingly. Angular routing (Option 2) is used for navigating between different views, ngClass (Option 3) for applying CSS classes conditionally, and Angular modules (Option 4) are used for organizing and structuring an application.
Which of the following is a core principle of the NgRx library?
- Component-based Architecture
- Observables
- Two-way Data Binding
- Unidirectional Data Flow
A core principle of the NgRx library is "Unidirectional Data Flow." It emphasizes that data flows in one direction through your application, making it easier to understand and reason about how data changes occur. This pattern helps manage state and side effects more predictably.
When generating a new component using Angular CLI, how can you ensure that it does not produce a separate CSS file but instead uses inline styles?
- Modify the "angular.json" file
- Set a global CSS configuration
- Use the "--inlineStyle" flag
- Use the "ng configure component" command
To generate a new component using Angular CLI and ensure that it uses inline styles (no separate CSS file), you can use the "--inlineStyle" flag with the "ng generate component" command. This will generate a component with the styles included directly in the component file.
Which Angular testing utility is used to create a dynamic testing module?
- AngularTestingModule
- ComponentFixture
- TestBed
- TestBedModule
TestBed is an essential Angular testing utility used to create a dynamic testing module. It allows you to configure and initialize the testing environment for Angular components and services, providing a controlled context for testing.
Which Angular decorator is used to define a component's metadata?
- @Component
- @Directive
- @Injectable
- @NgModule
In Angular, the @Component decorator is used to define a component's metadata, including its selector, template, and other properties. This decorator is crucial for marking a TypeScript class as an Angular component. The other decorators mentioned are used for different purposes, such as defining modules, services, or custom directives.
When using the Angular CLI, which option ensures the application is built for production?
- ng serve
- ng build
- ng test
- ng lint
When building an Angular application for production, you should use the "ng build" command with the "--prod" flag. This flag enables optimizations like Ahead-of-Time (AOT) compilation, minification, and tree shaking to create a smaller and more efficient production bundle.
The HostListener decorator in custom directives listens to ________ events.
- Custom
- DOM
- Input
- Mouse
The HostListener decorator in custom directives listens to DOM events. It is used to subscribe to DOM events and perform custom actions when those events occur. The decorator takes the event name as an argument, allowing you to specify which DOM event the directive should listen for and respond to. This is a fundamental concept when working with Angular custom directives.