Angular Utility Library :rocket:

The NG Utility Library developed with the Angular 16 framework, stands out for its exceptional adaptability and reusability within Angular projects. This comprehensive collection encompasses utility services, directives, and components strategically crafted to expedite routine operations in Angular applications. By seamlessly incorporating these tools into your projects, you can significantly amplify your development speed and optimize the debugging procedures. :wrench: :computer:

Table of Contents :bookmark_tabs:

• Installation
• Usage
  • Logger Service
  • Components
    • vc-input Component
    • vc-loader Component
    • vc-button Component
• Contributing
• License

Installation :inbox_tray:

You can install the NG Utility Library via npm:

npm install @viitorcloudtechnologies/ng-utility-library --save

Usage :hammer_and_wrench:

After installing the library, you can import and use the utility services and components in your Angular components and services. :gear:

Logger Service

import { VcLoggerService } from "@viitorcloudtechnologies/ng-utility-library";

// Example usage of the Logger Service
VcLoggerService.log("This is a log message.", "Additional arguments");
VcLoggerService.warn("This is a warning message.", "Additional arguments");
VcLoggerService.error("This is an error message.");
VcLoggerService.clear();

The Logger Service is worry-free and won't log anything in production. It automatically adapts its behavior based on the environment. This makes debugging during development hassle-free and safe.

Components

The NG Utility Library includes the following components:

vc-input Component :keyboard:

The vc-input component provides a customizable input field with various options:

Input Attributes:

• [name] (Required): The name of the input field.
• [type] (Optional): The type of the input (text, email, password). Default: 'text'.
• [position] (Optional): The position of an associated SVG element (left or right). Default: left.
• [placeholder] (Optional): The placeholder text for the input. Default: ''.
• [maxLength] (Optional): The maximum length of the input. Default: undefined.
• [required] (Optional): Whether the input is required. Default: false.
• [isDisabled] (Optional): Whether the input is disabled. Default: false.
• [readOnly] (Optional): Whether the input is read-only. Default: false.
• [applyAllowNumberOnly] (Optional): Whether to allow only numbers. Default: false.
• [customClass] (Optional): Custom CSS classes for styling. Default: undefined.
• [label] (Optional): Label for the input. Default: ''.
• [pattern] (Optional): Regular expression pattern for validation. Default: undefined.
• [regexType] (Optional): Type of regex validation (if applicable). Default: undefined.

<vc-input [name]="inputName" [type]="inputType" [position]="inputPosition" [placeholder]="inputPlaceholder" [maxLength]="inputMaxLength" [required]="inputRequired" [isDisabled]="inputDisabled" [readOnly]="inputReadOnly" [applyAllowNumberOnly]="allowNumberOnly" [customClass]="inputCustomClass" [label]="inputLabel" [pattern]="inputPattern" [regexType]="inputRegexType" />

• #projectedElement (Required for using mat-icon): Use this attribute to pass a mat-icon within the <vc-input> element.

Search Bar Example :mag_right:

Here's an example of how to create a search bar using the vc-input component. The example includes a mat-icon for the search icon, and the position of the icon is set based on the [position] attribute of the vc-input component.

<vc-input
  placeholder="{{ 'partner.searchPartner' | translate }}"
  position="right"
  [customClass]="{
        'shadow-2sm rounded-[60px] outline-0 text-blue-50 font-semibold h-[40px] w-full pr-4': true
    }"
  type="text"
  name="search"
  [formControl]="searchControl"
>
  <mat-icon #projectedElement matIcon class="text-blue-50 absolute top-[10px]">search</mat-icon>
</vc-input>

The mat-icon element is projected within the vc-input component and positioned based on the value of [position]. In this example, it's positioned to the right of the input.

You can customize the attributes and styling to fit your specific design and functionality requirements.

vc-loader Component :hourglass_flowing_sand:

The vc-loader component displays a loading spinner with customizable styling options. It's a simple way to indicate ongoing processes to users. :spinner:

<vc-loader [class]="loaderClass" />

vc-button Component :ok:

The vc-button component creates a button with optional spinning loader:

Button Attributes:

• [type]: The type of the button (button or submit).
• [class]: Custom CSS classes for styling.
• [isDisabled]: Whether the button is disabled.
• [spin]: Whether to show a spinning loader.

<vc-button 
  [type]="buttonType" 
  [class]="buttonClass" 
  [isDisabled]="buttonDisabled" 
  [spin]="buttonSpin" 
  (buttonTap)="handleButtonClick()"
>
  Click Me
</vc-button>

...

Contributing :raising_hand:

Contributions to the NG Utility Library are welcome! If you have suggestions, bug reports, or improvements, please feel free to submit issues and pull requests on the GitHub repository. :octocat:

License :scroll:

The NG Utility Library is open-source software licensed under the MIT License. :memo:

Designed and developed by ViitorCloud Technologies Pvt. Ltd.. Enjoy using the Angular Utility Library! If you find it helpful, consider giving it a star. :star: