Implement Architect Target in Angular

This challenge focuses on implementing a "target" feature within an Angular application, allowing users to visualize and interact with specific points on a canvas or interface. This is a common requirement in applications ranging from design tools to data visualization platforms, where marking and manipulating specific locations is crucial.

Problem Description

Your task is to create an Angular component that renders a draggable "target" element on a predefined canvas. The target should be visually distinct and respond to user interactions.

Key Requirements:

1. Target Rendering: Create an Angular component responsible for rendering the target.
2. Draggable Functionality: The target element must be draggable within the boundaries of its parent container (the canvas).
3. Position Tracking: The component should emit an event whenever the target's position changes, providing the new x and y coordinates.
4. Initial Position: The target should be able to accept an initial position (x, y) as an input.
5. Styling: The target should have a visually clear style (e.g., a circle with a crosshair). The canvas should also be visually represented.

Expected Behavior:

• When the component loads, the target should appear at its initial position.
• A user should be able to click and drag the target.
• As the target is dragged, its x and y coordinates should be updated.
• An event should be emitted with the updated x and y coordinates whenever the drag operation concludes (i.e., when the mouse button is released).

Edge Cases to Consider:

• What happens if the user tries to drag the target outside the canvas boundaries? (The target should be constrained within the parent container).
• How will touch events be handled for mobile/tablet responsiveness? (For this challenge, focus on mouse events. Touch event handling can be considered an advanced extension).

Examples

Example 1:

• Input:
  • Initial target position: x: 100, y: 150
  • Canvas dimensions: width: 500px, height: 400px
• Output:
  • The target is rendered at (100, 150) within the 500x400 canvas.
  • Upon completion of a drag operation, the component emits an event with the new { x: newX, y: newY }. For instance, if the user drags it to (250, 300) and releases, the output event will be { x: 250, y: 300 }.
• Explanation: The component initializes the target and allows for interactive repositioning, notifying the parent component of the final location.

Example 2:

• Input:
  • Initial target position: x: 0, y: 0
  • Canvas dimensions: width: 300px, height: 300px
• Output:
  • The target is rendered at the top-left corner (0, 0) of the 300x300 canvas.
  • If the user attempts to drag the target to x: -50, y: 50, the target should visually stop at x: 0, y: 50 due to boundary constraints. The emitted event upon release will reflect the constrained position, e.g., { x: 0, y: 50 }.
• Explanation: This demonstrates the boundary constraints preventing the target from leaving the designated canvas area.

Constraints

• The canvas will be a div element with defined width and height CSS properties.
• The target element will be a div element positioned absolutely within the canvas.
• The solution should be implemented using TypeScript and Angular.
• The focus is on functional correctness and clear code structure, not extreme performance optimization for a vast number of targets.

Notes

• Consider using Angular's data binding and event handling mechanisms effectively.
• You might find Angular's Renderer2 useful for direct DOM manipulation if needed, but prefer using Angular's declarative approach where possible.
• Think about how to manage the state of the target's position within the component.
• For drag-and-drop functionality, you can implement it using native browser events (mousedown, mousemove, mouseup) or explore Angular CDK's Drag and Drop module for a more robust solution (though native events are sufficient for this challenge).
• The Output event should be of a custom type, for example, { x: number; y: number }.