Angular Component Code Generator

This challenge asks you to build a simple code generator within an Angular application. The generator will take user input (component name, selector, template content) and produce a basic Angular component TypeScript and HTML file. This is a useful exercise for understanding Angular component structure and dynamic code generation.

Problem Description

You are tasked with creating an Angular application that includes a component called CodeGenerator. This component will provide a user interface with the following input fields:

• Component Name: (Text input) - The name of the Angular component to be generated (e.g., MyComponent).
• Selector: (Text input) - The CSS selector for the component (e.g., app-my-component).
• Template Content: (Textarea) - The HTML content for the component's template (e.g., <h1>Hello, World!</h1>).

Upon clicking a "Generate Code" button, the CodeGenerator component should:

1. Retrieve the values entered in the input fields.
2. Generate the TypeScript and HTML code for a basic Angular component based on the provided inputs. The generated TypeScript file should include the component class with the provided name, selector, and a simple template URL. The generated HTML file should contain the provided template content.
3. Display the generated TypeScript and HTML code in separate, read-only text areas within the CodeGenerator component.

Key Requirements:

• The generated TypeScript code must be valid Angular component code.
• The generated HTML code must be valid HTML.
• The application must be a functional Angular application.
• Error handling: If any of the input fields are empty, display an appropriate error message to the user.

Expected Behavior:

• The user interface should be clear and intuitive.
• The generated code should accurately reflect the user's input.
• The application should handle empty input fields gracefully.
• The generated code should be formatted for readability.

Edge Cases to Consider:

• Component names and selectors containing special characters. (While not strictly required to handle all special characters, consider how your code will behave with common ones like hyphens).
• Very long template content.
• Empty input fields.

Examples

Example 1:

Input:
Component Name: MyComponent
Selector: app-my-component
Template Content: <h1>Hello, World!</h1>

Output (TypeScript):
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

}

Output (HTML):

<h1>Hello, World!</h1>

Explanation: The input values are used to generate a basic Angular component with the specified name, selector, and template content.

Example 2:

Input:
Component Name: ProductList
Selector: app-product-list
Template Content: <ul><li>Product 1</li><li>Product 2</li></ul>

Output (TypeScript):
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductList {

}

Output (HTML):

<ul>
  <li>Product 1</li>
  <li>Product 2</li>
</ul>

Explanation: Another example demonstrating the generation of component code with different input values.

Constraints

• The generated TypeScript code should be less than 200 characters.
• The generated HTML code can be of any length, but should be valid HTML.
• The application should be built using Angular version 14 or higher.
• The UI should be implemented using Angular's template syntax.
• The code generator should be implemented within a single Angular component (CodeGenerator).

Notes

• Consider using Angular's template literals for code generation.
• You don't need to implement file saving functionality. The generated code should only be displayed within the application.
• Focus on the core logic of generating the code based on user input. Styling and advanced features are not required.
• Think about how to handle potential errors or invalid input gracefully. A simple error message is sufficient.
• The generated CSS file is not required.