Angular Core Concepts Quiz Quiz

Test your knowledge of Angular with this 10-question multiple-choice quiz covering directives, data binding, lifecycle hooks, routing, and more. Ideal for developers seeking to review essential Angular concepts and practical scenarios.

1. Use of Angular

   What is Angular primarily used for in the context of modern development?

   1. Creating static websites
   2. Building dynamic web applications
   3. Designing mobile operating systems
   4. Developing command-line tools

   Explanation: Angular is a widely used framework for building dynamic and interactive web applications, enabling rich user interfaces and complex functionalities. While it can be adapted for various web-based needs, it is not designed for command-line tools or mobile operating systems. Static websites do not require the level of interactivity Angular provides, distinguishing it from frameworks aimed at simple sites. Thus, 'Building dynamic web applications' is the correct answer.

2. Core Angular Concepts

   Which of the following is a fundamental building block in Angular applications?

   1. Components
   2. Widgets
   3. Adapters
   4. Variables

   Explanation: Components are the main building blocks in Angular, responsible for controlling portions of the user interface and related logic. Adapters and widgets are not core Angular constructs, and while variables are used in any programming language, they are not a structural concept within Angular itself. Components encapsulate both logic and presentation, making them essential to Angular architecture.

3. Angular CLI Commands

   Which Angular CLI command generates a new component called 'user-profile'?

   1. ng generate component user-profile
   2. ng add component user-profile
   3. ng new component user-profile
   4. ng make component user-profile

   Explanation: The correct command to generate a new component in Angular is 'ng generate component user-profile', which creates the necessary files and boilerplate. 'ng make component' and 'ng add component' are not valid CLI commands. 'ng new component' is also incorrect, as 'ng new' is used for creating a new Angular application, not a component.

4. Enabling ngModel

   Which module must be imported to use the ngModel directive for two-way data binding in Angular?

   1. FormsModule
   2. ReactiveFormsModule
   3. HttpClientModule
   4. BrowserModule

   Explanation: To use ngModel for two-way data binding, the FormsModule must be imported into your Angular app’s module. ReactiveFormsModule is used for reactive forms but does not support ngModel. BrowserModule is essential for running applications in browsers but unrelated to forms, while HttpClientModule is intended for HTTP communication. Only FormsModule enables ngModel.

5. HTTP Requests in Angular

   How can you globally add HTTP headers to all outgoing HTTP requests in Angular?

   1. With ngOnInit in each component
   2. By configuring providers in BootstrapModule
   3. Using HttpHeaders directly
   4. Using HttpInterceptor

   Explanation: HttpInterceptor is the correct approach to globally intercept and modify HTTP requests, including adding headers, before they are sent. Setting headers with HttpHeaders directly only affects individual requests. Configuring providers in BootstrapModule or modifying headers in ngOnInit for each component is not an effective or scalable solution. Thus, HttpInterceptor provides the intended global effect.

6. Structural Directives

   What is the primary effect of a structural directive like *ngIf in an Angular template?

   1. It alters the structure of the DOM by adding or removing elements.
   2. It changes the color of elements.
   3. It handles custom events.
   4. It binds two-way data between elements.

   Explanation: Structural directives such as *ngIf control whether a portion of the DOM appears, effectively adding or removing elements based on conditions. Changing color is typically achieved through attribute directives or styling. Two-way binding is handled with ngModel, and event handling uses methods or event directives, not structural directives.

7. Lifecycle Hooks

   When does the ngAfterViewInit lifecycle hook execute during a component’s lifecycle?

   1. Before the component’s view is created
   2. When the component is destroyed
   3. When data-bound input properties change
   4. After the component’s view has been fully initialized

   Explanation: The ngAfterViewInit hook runs after Angular fully initializes a component's views, making it ideal for tasks requiring interaction with view children. 'Before the view is created' describes earlier hooks like ngOnInit. Input property changes invoke ngOnChanges, and component destruction triggers ngOnDestroy. Only the correct option denotes the stage after full view initialization.

8. Async Pipe Usage

   What does the async pipe in Angular templates automatically do with observables?

   1. It waits for events to occur before updating.
   2. It triggers HTTP requests on demand.
   3. It converts an object into an observable.
   4. It subscribes to an observable and unsubscribes when the component is destroyed.

   Explanation: The async pipe streamlines subscription management by automatically subscribing to observables and cleaning up with unsubscription when the component is destroyed. Waiting for events does not capture the full purpose, and it doesn't convert regular objects into observables. The async pipe does not directly deal with triggering HTTP requests.

9. Data from Parent to Child

   Which decorator allows an Angular component to receive data from its parent component?

   1. @Input
   2. @Injectable
   3. @Output
   4. @NgModule

   Explanation: @Input marks a property to receive data from a parent component, enabling component communication. @Output is for emitting data upward from child to parent. @Injectable is used for services, not component properties. @NgModule handles module configuration, not data flow between components.

10. Iteration in Templates

    How does the *ngFor directive function in Angular templates?

    1. It listens for custom events.
    2. It removes elements based on a condition.
    3. It creates a new element for each item in a collection.
    4. It validates form input fields.

    Explanation: *ngFor is designed to iterate over an array or collection, generating template instances for each item. Removing elements based on conditions is handled by *ngIf. Listening for custom events involves event binding, not iteration, and input validation is managed by forms and validators, not by *ngFor.