Angular Counter Component with State Management

This challenge focuses on implementing a simple counter component in Angular, demonstrating fundamental state management principles. You'll build a component that allows users to increment and decrement a counter value, showcasing how to manage and update state within an Angular component using TypeScript. This is a crucial skill for building interactive and dynamic Angular applications.

Problem Description

You are tasked with creating an Angular component called CounterComponent that displays a counter value and provides buttons to increment and decrement it. The component should maintain its own internal state for the counter value. The component should:

1. Initialize: Start with a counter value of 0.
2. Display: Show the current counter value in the template.
3. Increment: When the "Increment" button is clicked, the counter value should increase by 1.
4. Decrement: When the "Decrement" button is clicked, the counter value should decrease by 1.
5. Bound: The displayed counter value should always reflect the current state of the component.

Key Requirements:

• Use Angular's component architecture (decorator, template, class).
• Utilize TypeScript for type safety.
• Employ property binding to display the counter value in the template.
• Use event binding to handle button clicks and update the counter value.
• Ensure the component is self-contained and doesn't rely on external state management libraries (like NgRx or Akita) for this exercise.

Expected Behavior:

• The component renders correctly with an initial counter value of 0.
• Clicking the "Increment" button increases the counter value by 1 and updates the display.
• Clicking the "Decrement" button decreases the counter value by 1 and updates the display.
• The counter value never goes below 0.

Edge Cases to Consider:

• What happens when the decrement button is clicked repeatedly, potentially leading to a negative value? The counter should not go below zero.

Examples

Example 1:

Initial State: Counter Value = 0
User Action: Clicks "Increment" button
Output: Counter Value = 1
Explanation: The counter value is incremented by 1.

Example 2:

Initial State: Counter Value = 5
User Action: Clicks "Decrement" button
Output: Counter Value = 4
Explanation: The counter value is decremented by 1.

Example 3:

Initial State: Counter Value = 0
User Action: Clicks "Decrement" button multiple times
Output: Counter Value = 0
Explanation: The counter value remains at 0 because it cannot go below 0.

Constraints

• The component should be implemented using standard Angular features (no external state management libraries).
• The counter value should be an integer.
• The component should be relatively simple and focused on demonstrating state management within a single component.
• The component should be testable (though testing is not required for this challenge).

Notes

• Consider using a property in your component class to store the counter value.
• Use event binding to listen for clicks on the increment and decrement buttons.
• Use property binding to display the counter value in the template.
• Think about how to prevent the counter value from going below zero when decrementing. A simple if statement can handle this.
• Focus on the core concept of managing state within a component.