📦 Installation

npm install @hichchi/ngx-ui

🌟 Overview

This library provides a comprehensive collection of UI components and utilities for Angular applications. It includes reusable components, directives, pipes, and styling utilities to help build consistent and beautiful user interfaces.

✨ Key Features

• 🧩 UI Components: Pre-built, customizable components for common UI patterns
• 🎯 Directives: Useful directives for enhanced functionality
• 🔧 Pipes: Custom pipes for data transformation and formatting
• 🎨 Styling Utilities: CSS utilities and theming support
• 📱 Responsive Design: Mobile-first, responsive components
• ♿ Accessibility: WCAG compliant components with proper ARIA support

🚀 Usage

Using UI Components

import { NgModule } from "@angular/core";
import { HichchiUiModule } from "@hichchi/ngx-ui";

@NgModule({
  imports: [HichchiUiModule],
})
export class AppModule {}

Button Component

import { Component } from "@angular/core";

@Component({
  selector: "app-example",
  template: `
    <hichchi-button variant="primary" size="large" (click)="handleClick()">
      Click Me
    </hichchi-button>

    <hichchi-button
      variant="secondary"
      [disabled]="isLoading"
      [loading]="isLoading"
    >
      Submit
    </hichchi-button>
  `,
})
export class ExampleComponent {
  isLoading = false;

  handleClick() {
    console.log("Button clicked!");
  }
}

Card Component

import { Component } from "@angular/core";

@Component({
  selector: "app-card-example",
  template: `
    <hichchi-card>
      <hichchi-card-header>
        <h3>Card Title</h3>
      </hichchi-card-header>
      <hichchi-card-content>
        <p>This is the card content area.</p>
      </hichchi-card-content>
      <hichchi-card-footer>
        <hichchi-button variant="primary">Action</hichchi-button>
      </hichchi-card-footer>
    </hichchi-card>
  `,
})
export class CardExampleComponent {}

🔧 Development

Building

nx build ngx-ui

Running unit tests

nx test ngx-ui

Tests are executed via Jest.

Made with ❤️ by Hichchi Dev

Building the future of user interfaces, one commit at a time

📖 API Documentation

Complete technical reference for all classes, interfaces, methods, and types in this library.

Auto-generated by TypeDoc - Browse through detailed API references, code examples, and implementation guides below.

📋 API Table of Contents

• Classes
  • ButtonComponent
  • HcCardComponent
  • HcSeparatorComponent

Classes

ButtonComponent

Defined in: button/button.component.ts:50

Reusable button component for the Hichchi UI library

This component provides a customizable button with consistent styling and behavior across the application. It supports different colors, types, and custom CSS classes while maintaining accessibility and user experience standards.

The component uses Angular's new signal-based inputs and outputs for better performance and reactivity.

Examples

<!-- Basic button -->
<hc-button>Click me</hc-button>

<!-- Button with custom color and type -->
<hc-button
  [color]="'secondary'"
  [type]="'button'"
  (onClick)="handleClick($event)"
>
  Submit Form
</hc-button>

<!-- Button with custom CSS classes -->
<hc-button [class]="'my-custom-class another-class'" [color]="'danger'">
  Delete Item
</hc-button>

See

• HcColor Type defining available color options
• ButtonType Type defining available button types

Constructors

Constructor

new ButtonComponent(): ButtonComponent;

Returns

ButtonComponent

Properties

class

InputSignal<string>

Additional CSS classes to apply to the button

Allows for custom styling by adding extra CSS classes to the button element. Multiple classes can be specified as a space-separated string.

Default

"";

button/button.component.ts:70

color

InputSignal<HcColor>

The color theme of the button

Determines the visual appearance of the button based on predefined color schemes. Each color represents a different semantic meaning (primary for main actions, secondary for alternative actions, danger for destructive actions, etc.).

Default

"primary";

button/button.component.ts:60

onClick

OutputEmitterRef<MouseEvent>

Event emitted when the button is clicked

Emits the native MouseEvent when the user clicks the button, allowing parent components to handle the click interaction. The event contains information about the click such as coordinates, modifier keys, etc.

Example

handleButtonClick(event: MouseEvent) {
  console.log('Button clicked at:', event.clientX, event.clientY);
  // Handle the click event
}

button/button.component.ts:100

type

InputSignal<ButtonType>

The HTML button type attribute

Specifies the behavior of the button when used within forms.

• "submit": Submits the form (default)
• "button": Regular button with no default behavior
• "reset": Resets the form to its initial state

Default

"submit";

button/button.component.ts:82

HcCardComponent

Defined in: hc-card/hc-card.component.ts:57

Reusable card component for the Hichchi UI library

This component provides a container with consistent card styling that can be used to group related content together. Cards are commonly used for displaying information in a structured, visually appealing way with proper spacing, borders, and shadows.

The component acts as a content wrapper and uses Angular's content projection to display any content passed between the opening and closing tags.

Examples

<!-- Basic card -->
<hc-card>
  <h3>Card Title</h3>
  <p>This is some card content.</p>
</hc-card>

<!-- Card with form content -->
<hc-card>
  <form>
    <input type="text" placeholder="Enter your name" />
    <hc-button type="submit">Submit</hc-button>
  </form>
</hc-card>

<!-- Card with mixed content -->
<hc-card>
  <div class="card-header">
    <h2>User Profile</h2>
  </div>
  <div class="card-body">
    <p>User information goes here...</p>
  </div>
  <div class="card-footer">
    <hc-button>Edit Profile</hc-button>
  </div>
</hc-card>

See

ButtonComponent Related button component often used within cards

Constructors

Constructor

new HcCardComponent(): HcCardComponent;

Returns

HcCardComponent

HcSeparatorComponent

Defined in: hc-separator/hc-separator.component.ts:59

Reusable separator component for the Hichchi UI library

This component provides a visual separator element that can be used to divide content sections within a page or form. It supports an optional label that can be displayed within or alongside the separator line.

Separators are useful for creating visual breaks between different sections of content, improving readability and organization of the user interface.

Examples

<!-- Basic separator without label -->
<hc-separator></hc-separator>

<!-- Separator with label -->
<hc-separator [label]="'Personal Information'"></hc-separator>

<!-- Using separator in a form -->
<form>
  <input type="text" placeholder="First Name" />
  <input type="text" placeholder="Last Name" />

  <hc-separator [label]="'Contact Details'"></hc-separator>

  <input type="email" placeholder="Email" />
  <input type="tel" placeholder="Phone" />
</form>

<!-- Using separator between content sections -->
<div>
  <h2>Section 1</h2>
  <p>Content for section 1...</p>

  <hc-separator [label]="'OR'"></hc-separator>

  <h2>Section 2</h2>
  <p>Content for section 2...</p>
</div>

Constructors

Constructor

new HcSeparatorComponent(): HcSeparatorComponent;

Returns

HcSeparatorComponent

Properties

label

InputSignal<string>

Optional label text to display with the separator

When provided, this text will be displayed as part of the separator, typically centered within or alongside the separator line. This is useful for creating labeled dividers that help organize content sections.

Default

"";

hc-separator/hc-separator.component.ts:69