How can you access the value of a template-driven form control in the component class?

  • Using the formControlName directive.
  • Using the @ViewChild decorator.
  • Using the [(ngModel)] directive.
  • Using the Validators module.
To access the value of a template-driven form control in the component class, you can use the @ViewChild decorator. This allows you to reference the form control in the component, giving you access to its value and properties. While the other options are related to forms and validation in Angular, they do not directly provide a way to access the form control's value in the component class.

When using ChangeDetectionStrategy.OnPush, Angular relies on ________ checks to determine component updates.

  • Asynchronous
  • Manual
  • Reference
  • Regular
When using ChangeDetectionStrategy.OnPush in Angular, the framework relies on asynchronous checks to determine component updates. This means that Angular will trigger change detection for a component when asynchronous events, such as user interactions or observable data changes, occur. This strategy is valuable for optimizing performance by reducing unnecessary checks.

For a form control that has both synchronous and asynchronous validators, how does Angular handle validation?

  • Angular only runs either synchronous or asynchronous validators based on configuration.
  • Angular runs asynchronous validators first and then synchronous validators.
  • Angular runs both types of validators simultaneously.
  • Angular runs synchronous validators first and then asynchronous validators.
Angular handles validation for a form control with both synchronous and asynchronous validators by first running the synchronous validators and then the asynchronous ones. This ensures that immediate validation checks occur before potentially asynchronous checks, providing a smooth user experience.

A developer in your team used a custom form control but found that the valueChanges observable isn't emitting values when the control's value changes. What might be the potential reason and how would you resolve it?

  • The developer forgot to subscribe to the valueChanges observable.
  • The developer didn't specify a unique ID for the custom form control.
  • The developer is using a deprecated version of Angular.
  • The custom form control is missing the FormControlName directive in the template.
The potential reason for the valueChanges observable not emitting values when the custom form control's value changes could be that the custom form control is missing the FormControlName directive in the template. This directive binds the control to the form and allows it to propagate changes. Options a and b are not the typical reasons for this issue, and option c is unlikely unless there are other symptoms of a deprecated version. It's crucial to ensure that the custom form control is correctly integrated into the Angular form template.

When creating a service using the Angular CLI, which command would you use?

  • ng serve
  • ng generate service
  • ng create service
  • ng build service
When creating a service in Angular using the Angular CLI, you would use the command ng generate service. This command generates the necessary files and boilerplate code for an Angular service, making it a convenient way to create services in an Angular project. The other options (ng serve, ng create service, ng build service) are not the correct commands for creating a service.

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.

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.

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.

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.

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.