For a router link to get an "active" CSS class when the link's route is active, you can use the ________ directive.
- [activeLink]
- [routerDirective]
- [routerLinkActive]
- [routerStyle]
To ensure that a router link receives an "active" CSS class when its associated route is active, you can use the [routerLinkActive] directive in Angular. This directive allows you to define CSS classes that should be applied when the link's route is active, providing visual feedback to users.
A client wants certain fields in a form to be auto-populated based on the value of another field. How would you achieve this in Angular?
- Implementing custom validation for auto-population
- Using pipes to manipulate the form data
- Using reactive forms with value changes observables
- Using template-driven forms with ngModel
To auto-populate fields based on another field's value, you'd typically use reactive forms in Angular along with valueChanges observables. This allows you to reactively update form fields based on changes in other fields. While template-driven forms with ngModel can achieve some level of auto-population, reactive forms provide more control and flexibility. Using pipes or custom validation may not be the most suitable approach for this requirement.
Which decorator is used to declare a class as an Angular component?
- @Component
- @Directive
- @Injectable
- @NgModule
The @Component decorator is used to declare a class as an Angular component. Components are the fundamental building blocks of Angular applications, representing user interface elements. NgModule is used to define modules, @Directive is used for custom directives, and @Injectable is used for dependency injection, but they are not used to declare components.
When dealing with a custom component that doesn't naturally fit into Angular's form ecosystem, which strategy can be employed to ensure it works with ngModel and formControl directives?
- Creating a separate service for form control interactions.
- Implementing a custom directive to handle ngModel and formControl.
- Modifying Angular's core source code to accommodate custom components.
- Using custom event emitters for data binding.
To make a custom component work with ngModel and formControl in Angular, you should implement a custom directive that uses ControlValueAccessor. This allows the component to interface with Angular's form system seamlessly, enabling data binding and validation. Modifying Angular's core source code is not a recommended approach.
When you want to add a specific Angular capability to your project (like PWA support), you would use the ng ________ command.
- add
- enable
- generate
- install
To add a specific Angular capability to your project, like Progressive Web App (PWA) support, you would use the ng enable command. This command allows you to enable various features and capabilities in your Angular application.
To ensure that Angular recognizes your custom component's value accessor to interact with the ngModel directive, you need to add it to the providers array of your component and associate it with the ______ token.
- ControlValueAccessor
- FormControl
- NGModel
- NGValueAccessor
To make Angular recognize your custom component's value accessor for ngModel, you need to add it to the providers array of your component and associate it with the ControlValueAccessor token. This token signifies that your custom component implements the ControlValueAccessor interface, which is necessary for two-way data binding with ngModel.
When implementing a custom async validator, the returned observable should emit null for valid inputs and an error object for invalid inputs. This error object typically has a key that describes the error and a ______ value.
- boolean
- description
- message
- string
When implementing a custom async validator in Angular, the error object typically has a key that describes the error (e.g., 'customError') and a message value (a string) that provides details about the specific validation error. This message is useful for displaying error messages to users when their input is invalid.
How can you implement custom validators in a template-driven form?
- Custom validation can't be implemented in template-driven forms.
- Define custom validation functions in the component.
- Use the Validators class methods within the form template.
- Utilize the ReactiveFormsModule for template-driven forms.
In template-driven forms, custom validators are implemented by defining custom validation functions in the component. These functions can be used to validate form controls by adding them to the Validators array in the HTML template. While ReactiveForms use Validators directly in the form template, template-driven forms require custom logic in the component to implement custom validation.
What is the purpose of the [(ngModel)] syntax in template-driven forms?
- To create a two-way data binding for forms.
- To define CSS styles for form elements.
- To define form validation rules.
- To set the form's action attribute for submission.
In template-driven forms in Angular, [(ngModel)] is used to create a two-way data binding between form controls in the template and the corresponding data model in the component class. This allows changes in the form controls to automatically update the model, and changes in the model to update the form controls. It's a key feature for working with form data.
Which directive is used to create a custom attribute in Angular?
- @Attribute
- @CustomAttribute
- @Decorator
- @Directive
In Angular, the @Directive decorator is used to create custom attributes. By defining a directive with this decorator, you can attach custom behavior or properties to elements in your Angular templates, creating custom attributes.