@pawan.sahu/create-ui-components

CLI tool to quickly add reusable Angular components to your project.

All components are automatically installed - no prompts, no configuration needed!

🚀 Usage

Using npx (Recommended - No Installation Required)

npx @pawan.sahu/create-ui-components

That's it! All components will be automatically copied to ./src/app/components/

Custom Path

npx @pawan.sahu/create-ui-components --path ./src/app/shared

📦 What It Does

Automatically installs all available Angular components:

• Input Text Component - Text input with real-time value display
• Radio Button Component - Radio button group with selection tracking

📝 Example Output

$ npx @pawan.sahu/create-ui-components

🎨 Angular UI Components Generator

📦 Installing all components to: ./src/app/components

   ✓ Created src/app/components/input-text/input-text.ts
   ✓ Created src/app/components/input-text/input-text.html
   ✓ Created src/app/components/input-text/input-text.css
   ✓ Created src/app/components/radiobutton/radiobutton.ts
   ✓ Created src/app/components/radiobutton/radiobutton.html
   ✓ Created src/app/components/radiobutton/radiobutton.css

✅ All components installed successfully!

📝 Available components:

   InputTextComponent
   Import: import { InputTextComponent } from './components/input-text/input-text';
   Usage:  <app-input-text />

   RadiobuttonComponent
   Import: import { RadiobuttonComponent } from './components/radiobutton/radiobutton';
   Usage:  <app-radiobutton />

💡 Using the Components

After installation, import and use them in your Angular components:

import { Component } from '@angular/core';
import { InputTextComponent } from './components/input-text/input-text';
import { RadiobuttonComponent } from './components/radiobutton/radiobutton';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [InputTextComponent, RadiobuttonComponent],
  template: `
    <div>
      <h1>My App</h1>
      <app-input-text />
      <app-radiobutton />
    </div>
  `
})
export class AppComponent {}

🎨 Component Details

Input Text Component

Selector: <app-input-text />

Features:

• Real-time input value display
• Signal-based state management
• Styled with CSS

Radio Button Component

Selector: <app-radiobutton />

Features:

• Multiple radio options
• Selection tracking
• Signal-based state management

🔧 Customization

All component files are copied to your project, so you can:

1. Modify styles - Edit the .css files
2. Change behavior - Edit the .ts files
3. Update templates - Edit the .html files

📂 Project Structure After Installation

your-angular-project/
└── src/
    └── app/
        └── components/
            ├── input-text/
            │   ├── input-text.ts
            │   ├── input-text.html
            │   └── input-text.css
            └── radiobutton/
                ├── radiobutton.ts
                ├── radiobutton.html
                └── radiobutton.css

🛠️ Command Line Options

# Install to default location (./src/app/components)
npx @pawan.sahu/create-ui-components

# Install to custom location
npx @pawan.sahu/create-ui-components --path ./src/app/shared

# Short flag
npx @pawan.sahu/create-ui-components -p ./src/app/shared

🔧 Requirements

• Node.js >= 14.0.0
• Angular project (v14+)

✨ Features

✅ Zero configuration - Just run and go ✅ No prompts - All components installed automatically ✅ Full source code - Customize as needed ✅ Standalone components - Works with Angular 14+ ✅ TypeScript - Full type safety ✅ Signals - Modern Angular reactive patterns

📄 License

MIT

🤝 Contributing

Contributions welcome! Please open an issue or submit a PR.

📧 Author

Pawan Sahu