@vigneshs9/angular-ui-library

A reusable Angular UI component library containing commonly used UI components for Angular applications.

Built with Angular 22 and designed to make application development faster by providing reusable, customizable components.

✨ Features

This library currently provides:

• 🔘 Button
• 📝 Text Field
• 📄 Text Area
• 📅 Datepicker
• 🔽 Dropdown
• 🔘 Radio Button
• 📊 Table

More reusable components will be added in future releases.

📦 Installation

Install the package using npm:

npm install @vigneshs9/angular-ui-library

The library currently supports:

Angular 22

Peer Dependencies

This library requires Angular 22 or compatible Angular packages.

{
  "peerDependencies": {
    "@angular/common": "^22.0.0",
    "@angular/core": "^22.0.0"
  }
}

If your project is using Angular 22, no additional Angular installation is required.

🚀 Getting Started

After installing the package:

npm install @vigneshs9/angular-ui-library

Import the components you need into your Angular application.

For standalone Angular components:

import {
  ButtonComponent,
  TextFieldComponent,
  TextAreaComponent,
  DatepickerComponent,
  DropdownComponent,
  RadioButtonComponent,
  TableComponent
} from '@vigneshs9/angular-ui-library';

Then add the required components to your component's imports:

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [
    ButtonComponent,
    TextFieldComponent,
    TextAreaComponent,
    DatepickerComponent,
    DropdownComponent,
    RadioButtonComponent,
    TableComponent
  ],
  templateUrl: './example.component.html'
})
export class ExampleComponent {}

🔘 Button

A reusable button component for common application actions.

Example

<lib-button 
  label="Submit"
  variant="primary" 
  (clicked)="onSubmit()">
</lib-button>

You can customize the button based on the available inputs and outputs provided by the component. variant must be primary, secondary or tertiary.

📝 Text Field

A reusable text input component for entering single-line values.

Example

<lib-text-field 
  label="New Password" 
  type="password" 
  placeholder="Enter your new password"
  [(value)]="password">
</lib-text-field>

Typical use cases:

• Username
• Email
• Password
• Search
• Number
• Other single-line inputs

📄 Text Area

A reusable component for multi-line text input.

Example

<lib-textarea 
  label="Description" 
  placeholder="Enter description" 
  [(value)]="description">
</lib-textarea>

Typical use cases:

• Description
• Comments
• Notes
• Messages
• Address

📅 Datepicker

A reusable date selection component.

Example

<lib-datepicker 
  label="Due Date" 
  [(value)]="date" 
  [min]="minDate"
  [max]="maxDate">
</lib-datepicker>

Typical use cases:

• Date of birth
• Start date
• End date
• Appointment date
• Schedule date

This datepicker offers disabled, max, min features.

🔽 Dropdown

A reusable dropdown/select component for selecting an option from a list.

Example

<lib-dropdown 
  [options]="taskStatus()" 
  [selectedValue]="taskStatus" 
  placeholder="Choose status"
  (selectionChange)="taskStatus = $event">
</lib-dropdown>

Example component data:

countries = [
  {
    label: 'India',
    value: 'IN',
    class: "tailwindcss optional"
  },
  {
    label: 'Australia',
    value: 'AU'
  },
  {
    label: 'United States',
    value: 'US'
  }
];

🔘 Radio Button

A reusable radio button component for selecting a single option from a group.

Example

<lib-radio-button 
  [options]="priorityOptions" 
  [selectedValue]="priority"
  (selectionChange)="priority = $event">
</lib-radio-button>

📊 Table

A reusable table component for displaying structured data.

Example

<lib-table 
  [headersInput]="tableHeaders" 
  [dataInput]="todoData()"
  (action)="handleTableAction($event)">
</lib-table>

Example data:

tableHeaders = [
   { key: 'title', label: 'Title' },
   { key: 'todoDateDMY', label: 'Date' },
   { key: 'description', label: 'Description' },
   { key: 'taskStatusLabel', label: 'Status', classKey: 'taskStatusClass' },
   { key: 'priorityLabel', label: 'Priority', classKey: 'priorityClass' },
   { key: 'edit', label: 'Edit', action: 'edit', icon: 'fas fa-edit' },
   { key: 'delete', label: 'Delete', action: 'delete', icon: 'fas fa-trash' }
];

🧩 Components

| Component | Description | | ------------ | ---------------------------- | | Button | Reusable button component | | Text Field | Single-line text input | | Text Area | Multi-line text input | | Datepicker | Date selection | | Dropdown | Select an option from a list | | Radio Button | Single option selection | | Table | Display structured data |

🛠️ Angular Compatibility

| Angular Version | Supported | | --------------- | ------------------------- | | Angular 22 | ✅ Supported | | Angular 21 | ❌ Not currently supported | | Angular 20 | ❌ Not currently supported |

The current library version is built and tested for Angular 22.

📋 Requirements

Before installing the library, make sure your project has:

• Node.js
• npm
• Angular 22
• Angular CLI compatible with Angular 22

Check your Angular version:

ng version

You should see Angular 22 in the output.

📥 Install

Install the latest published version:

npm install @vigneshs9/angular-ui-library

Or install a specific version:

npm install @vigneshs9/[email protected]

🔄 Updating the Library

To update to the latest version:

npm update @vigneshs9/angular-ui-library

Or:

npm install @vigneshs9/angular-ui-library@latest

👨‍💻 Development

Clone the repository:

git clone <your-repository-url>

Navigate to the project:

cd angular-ui-library

Install dependencies:

npm install

Build the library:

ng build angular-ui-components

The production package will be generated inside:

dist/angular-ui-components

📦 Publishing

To build the library:

ng build angular-ui-components

Navigate to the generated package:

cd dist/angular-ui-components

Publish the package:

npm publish --access public

🐛 Issues & Feedback

If you find a bug or have a feature request, please create an issue in the project's GitHub repository.

Your feedback and contributions are welcome.

🚀 Roadmap

Future versions may include additional reusable components such as:

• Modal
• Checkbox
• Toggle
• Tooltip
• Card
• Pagination
• Tabs
• Loader
• Form components
• Additional table features

📄 License

This project is licensed under the MIT License.

⭐ Support

If you find this library useful, consider giving the project a ⭐ on GitHub and sharing it with other Angular developers.

Built with ❤️ using Angular and TypeScript.