This Angular project serves as a collection of reusable shared components that can be easily integrated into your Angular applications. These components are designed to enhance the user interface and functionality of your web applications, providing a consistent and professional look and feel.
The following reusable components are included:
- Accordion: Create collapsible sections with ease.
- Table: Display data in a tabular format with sorting and filtering capabilities.
- Input Box: Enhance user input forms with various input styles.
- Statistics: Display data statistics in an organized and visually appealing way.
- Description Box: Provide informative descriptions with rich text and media support.
- Modals: Create modal dialogs for displaying additional information or actions.
Before using these shared components, ensure that you have the following prerequisites installed:
- Node.js and npm
- Angular CLI
-
Clone this repository to your local machine:
git clone https://github.com/yourusername/angular-shared-components.git
-
Navigate to the project directory:
cd angular-shared-components
-
Install the required dependencies:
npm install
Each shared component can be used independently in your Angular application. Here's how to use them:
The Accordion component allows you to create collapsible sections. To use it, import the AccordionModule
in your Angular module and use the <app-accordion>
component in your HTML templates.
<app-accordion [items]="accordionItems"></app-accordion>
The Table component is designed for displaying data in a tabular format. Import the TableModule
in your Angular module and use the <app-table>
component in your HTML templates.
<app-table [data]="tableData" [columns]="tableColumns"></app-table>
Enhance your user input forms with different input styles using the Input Box component. Import the InputBoxModule
in your Angular module and use the <app-input-box>
component in your HTML templates.
<app-input-box [type]="'text'" [placeholder]="'Enter text...'" [(ngModel)]="textValue"></app-input-box>
The Statistics component allows you to display data statistics in an organized way. Import the StatisticsModule
in your Angular module and use the <app-statistics>
component in your HTML templates.
<app-statistics [data]="statisticsData"></app-statistics>
Provide informative descriptions with rich text and media support using the Description Box component. Import the DescriptionBoxModule
in your Angular module and use the <app-description-box>
component in your HTML templates.
<app-description-box [text]="descriptionText"></app-description-box>
Create modal dialogs for displaying additional information or actions with the Modals component. Import the ModalsModule
in your Angular module and use the <app-modal>
component in your HTML templates.
<app-modal [title]="modalTitle" [content]="modalContent" (close)="onModalClose()"></app-modal>
If you'd like to contribute to this project, please follow our contributing guidelines.
This project is licensed under the MIT License.
Feel free to customize this README to include any additional information specific to your project or components. Providing clear examples and usage instructions will help users and collaborators effectively utilize your Angular shared components.