Angular Component Rehydration with State Persistence

Rehydration in Angular involves persisting the state of your components (e.g., form values, selected tabs, scroll positions) across page navigations or reloads. This provides a smoother user experience by avoiding data loss and unnecessary re-initialization. This challenge focuses on building a simple rehydration mechanism for an Angular component that manages a counter.

Problem Description

You are tasked with creating an Angular component that displays a counter and allows the user to increment or decrement it. The component should persist the counter's value across page refreshes or navigations using localStorage. When the component is initialized, it should attempt to retrieve the counter value from localStorage. If a value exists, it should initialize the counter with that value; otherwise, it should initialize it to 0. The component should also update localStorage whenever the counter value changes.

Key Requirements:

State Persistence: The counter value must be stored in localStorage and retrieved on component initialization.
Initialization: The counter should initialize to the value in localStorage if it exists, otherwise to 0.
Update Persistence: The counter value in localStorage must be updated whenever the counter value changes.
Component Functionality: The component must include buttons to increment and decrement the counter.
Error Handling: Handle potential errors when accessing localStorage (e.g., if localStorage is disabled).

Expected Behavior:

On initial load, if a counter value exists in localStorage, the component should display that value.
On initial load, if no counter value exists in localStorage, the component should display 0.
Clicking the increment button should increase the counter value and update localStorage.
Clicking the decrement button should decrease the counter value and update localStorage.
Refreshing the page or navigating to another page and back should restore the last known counter value from localStorage.
If localStorage is unavailable (e.g., due to browser settings), the component should gracefully handle the error and initialize the counter to 0.

Edge Cases to Consider:

localStorage is disabled or unavailable.
The value stored in localStorage is not a valid number (e.g., a string or null). Handle this gracefully by defaulting to 0.
Very large counter values that might cause issues with localStorage storage limits (though this is less critical for this exercise).

Examples

Example 1:

Input: localStorage contains the value "5" for the key "counterValue".
Output: The component displays "5".
Explanation: The component retrieves the value "5" from localStorage and initializes the counter to 5.

Example 2:

Input: localStorage does not contain the key "counterValue".
Output: The component displays "0".
Explanation: The component does not find a value for "counterValue" in localStorage and initializes the counter to 0.

Example 3:

Input: localStorage contains the value "abc" for the key "counterValue".
Output: The component displays "0".
Explanation: The component attempts to retrieve "abc" from localStorage, but it's not a valid number. It defaults to 0.

Constraints

The component should be written in TypeScript.
Use localStorage for state persistence.
The counter value should be stored in localStorage under the key "counterValue".
The component should be a standalone component.
The component should be relatively simple and focused on the rehydration logic. Complex styling or UI elements are not required.
Performance is not a primary concern for this exercise.

Notes

Consider using Angular's OnInit lifecycle hook to retrieve the value from localStorage during component initialization.
Use localStorage.setItem() and localStorage.getItem() to store and retrieve values.
Remember to handle potential errors when accessing localStorage.
Type safety is important. Ensure you are handling the retrieved value from localStorage appropriately.
Think about how to handle the case where the value in localStorage is not a number.