Angular Generators

🚀 Features

✨ Smart Project Detection

• Automatic Detection: Instantly detects Angular projects by checking for angular.json
• Conditional Activation: Only activates when you're in an Angular workspace
• User Feedback: Clear notifications about project detection status

🎯 Intuitive Sidebar Interface

• Activity Bar Integration: Single tools icon in VS Code's Activity Bar
• Attractive Design: Beautiful emoji icons and theme-based styling
• One-Click Generation: Generate schematics with minimal clicks

🛠️ Complete Angular Schematic Support

Generate all major Angular schematics:

🤖 AI-Powered Code Generation

• Copilot Integration: Generate sample code using GitHub Copilot
• Smart Prompts: Context-aware prompts for Angular Material components
• Fallback Support: Graceful fallback when Copilot is unavailable
• One-Click Copy: Copy generated code to clipboard instantly

🔍 AI Code Review

• Intelligent Analysis: AI-powered code review with GitHub Copilot
• Comprehensive Feedback: Suggestions for code quality, performance, security, and best practices
• Angular-Specific: Tailored advice for Angular development
• Interactive Results: View review results in a dedicated webview panel

🎨 User Experience

• Visual Feedback: Progress indicators and success/error notifications
• Terminal Integration: Seamlessly runs ng generate commands
• Folder Selection: Interactive folder picker for target location
• Name Validation: Smart naming prompts with validation

📋 Requirements

• VS Code: 1.74.0 or higher
• Angular CLI: Globally installed (npm install -g @angular/cli)
• Angular Project: Valid Angular workspace with angular.json
• GitHub Copilot (optional): For AI-powered code generation and review features

🛠️ Installation & Usage

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Angular Generators"
4. Click Install

Quick Start

1. Open Angular Project → Extension automatically detects Angular workspace
2. Click Tools Icon → Located in VS Code's Activity Bar (left sidebar)
3. Choose Generator → Select from 9 available schematic types
4. Pick Location → Use folder picker to select target directory
5. Enter Name → Provide schematic name
6. Auto-Generate → Extension runs ng generate command automatically

Example Workflow

1. Open Angular Project ✅
   └── Extension detects angular.json ✅

2. Click 🛠️ Tools Icon in Activity Bar ✅
   └── Sidebar opens with generator buttons ✅

3. Click "🧩 Generate Component" ✅
   └── Folder selection dialog appears ✅

4. Select "src/app/components/" ✅
   └── Name input prompt appears ✅

5. Enter "user-profile" ✅
   └── Terminal runs: ng generate component user-profile ✅

### AI Code Review
1. **Select Code** → Highlight the code you want to review
2. **Click "🔍 AI Code Review"** → From the sidebar or command palette
3. **Wait for Analysis** → Copilot analyzes your code
4. **View Results** → Review suggestions appear in a webview panel

### AI Sample Generation
1. **Click "🎨 Generate Sample"** → Next to any Angular Material component
2. **Wait for Generation** → Copilot creates sample code
3. **Copy to Clipboard** → Click the copy button in the webview
4. **Paste and Use** → Insert the code into your component

---

## 🎨 Screenshots

### Activity Bar Integration
![Activity Bar](https://via.placeholder.com/300x200/333/fff?text=Activity+Bar+Icon)

### Sidebar Interface
![Sidebar](https://via.placeholder.com/300x400/333/fff?text=Generator+Buttons)

### Generation Workflow
![Workflow](https://via.placeholder.com/400x300/333/fff?text=Generation+Workflow)

---

## 🔧 Configuration

The extension works out-of-the-box with sensible defaults. No additional configuration required!

### Supported Angular Versions
- ✅ Angular 12+
- ✅ Angular CLI 12+
- ✅ Standalone components support
- ✅ Module-based applications

---

## 🐛 Troubleshooting

### Extension Not Activating
**Problem**: Extension shows "No Angular project detected"
**Solution**:
- Ensure you're in an Angular workspace
- Check that `angular.json` exists in the project root
- Verify Angular CLI is installed globally

### Generation Fails
**Problem**: `ng generate` command fails
**Solution**:
- Check terminal for specific error messages
- Ensure Angular CLI is properly installed
- Verify you have write permissions in the target directory

### Missing Generators
**Problem**: Some generator buttons don't appear
**Solution**:
- Restart VS Code
- Check that the extension is properly installed and enabled
- Verify you're in a valid Angular project

---

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](https://github.com/your-username/angular-generators-extension/blob/HEAD/CONTRIBUTING.md) for details.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

---

## 📄 License

This extension is licensed under the MIT License. See [LICENSE](https://github.com/your-username/angular-generators-extension/blob/HEAD/LICENSE) for details.

---

## 🙏 Acknowledgments

- Built with ❤️ for the Angular community
- Inspired by the Angular CLI's powerful schematic system
- Thanks to the VS Code Extension API for making this possible

---

## 📞 Support

- **Issues**: [GitHub Issues](https://github.com/your-username/angular-generators-extension/issues)
- **Discussions**: [GitHub Discussions](https://github.com/your-username/angular-generators-extension/discussions)
- **Email**: support@example.com

---

<div align="center">

**Happy Coding with Angular Generators! 🎉**

[![GitHub stars](https://img.shields.io/github/stars/your-username/angular-generators-extension?style=social)](https://github.com/your-username/angular-generators-extension)
[![Twitter Follow](https://img.shields.io/twitter/follow/yourhandle?style=social)](https://twitter.com/yourhandle)

</div>

## Extension Settings

This extension doesn't add any VS Code settings.

## Known Issues

- Terminal output monitoring for success/error detection could be improved
- Some Angular CLI versions may have different command formats