Angular Signals, Lifecycle, and State: Essentials Quiz Quiz

Explore key concepts of Angular Signals, lifecycle management, and state handling through realistic scenarios. This quiz assesses your ability to identify signal patterns, lifecycle hooks, and core state management techniques in Angular.

1. Identifying Signal Usage

   In a component that updates a displayed counter every time a button is clicked, which feature would you most commonly use to efficiently track and trigger UI updates?

   1. Directive
   2. Interceptor
   3. Callback
   4. Signal

   Explanation: Signals are specialized mechanisms used to track changes to values and efficiently trigger UI updates when those values change. Callbacks are functions executed in response to events but do not inherently track state. Interceptors are related to handling HTTP requests and not UI state. Directives modify behavior or appearance but do not themselves track data changes like signals do.

2. Lifecycle Hook Purpose

   Which lifecycle hook is best suited for initializing data when a component is created, such as fetching user information once the component has been mounted?

   1. OnInit
   2. DoCheck
   3. AfterViewInit
   4. OnDestroy

   Explanation: OnInit is called when a component is initialized and is the correct place to load data such as user information. OnDestroy is used for cleanup before the component is removed. AfterViewInit occurs after the component's view has been initialized, which is generally too late for initial data loading. DoCheck is used for custom change detection logic, not routine initialization.

3. State Management Essentials

   When managing a shared state between several components, such as a shopping cart total, what strategy is most effective within Angular's paradigm?

   1. Using a service with signals
   2. Modifying DOM elements directly
   3. Setting random global variables
   4. Passing data only through local variables

   Explanation: Using a dedicated service combined with signals allows shared state to be consistently managed and updated across multiple components. Global variables are discouraged due to lack of reactivity and maintainability. Passing data with only local variables does not facilitate sharing across components. Direct DOM manipulation bypasses state management and is considered poor practice.

4. Signal Characteristics

   Which statement accurately describes the behavior of Angular signals when their underlying data changes?

   1. Signals automatically update all subscribers when the value changes.
   2. Signals cannot be used to store primitive values like numbers or strings.
   3. Signals require manual poll checks by components to detect changes.
   4. Signals only trigger updates once when first initialized.

   Explanation: Signals are designed to automatically notify all subscribers and update any dependent UI or logic when their values change. Manual polling is not required with signals, making option B incorrect. Signals can indeed hold primitive values, so C is incorrect. They trigger updates on every change, not just at initialization, making D wrong.

5. Lifecycle Sequence Understanding

   If a parent component uses both OnInit and OnDestroy hooks, in which order are these lifecycle methods called during the component’s existence?

   1. OnInit and OnDestroy run simultaneously when the view is created.
   2. OnDestroy runs before OnInit during component creation.
   3. Both hooks run repeatedly on every change detection cycle.
   4. OnInit runs when the component is initialized, then OnDestroy runs when it is destroyed.

   Explanation: OnInit is called once when a component is created to perform initialization tasks, while OnDestroy executes just before the component is removed to handle cleanup. OnDestroy never occurs before OnInit, so option B is incorrect. Option C is inaccurate, as neither hook runs with every change detection. Option D is wrong since the hooks do not run at the same time.