NgxChoComponents

This library provides reusable Angular components for CHO applications with comprehensive Storybook documentation.

Generated with Angular CLI version 17.3.0.

Overview

NgxChoComponents includes:

• ChoAddressInfoComponent - Address display and editing
• ChoDetailsCardComponent - Information card layout
• ChoEmailInfoComponent - Email display and validation
• ChoModalComponent - Modal dialog wrapper
• ChoPhoneInfoComponent - Phone number display and formatting
• ChoRadioGroupComponent - Radio button group with validation
• ChoReviewStatusAlertComponent - Status alert messages

Dependencies

This library depends on:

• ngx-cho-common (must be built first)
• Bootstrap (for styling)

Installation

npm install ngx-cho-components ngx-cho-common bootstrap

Build

Important: Build ngx-cho-common first before building this library.

# Build dependencies first
ng build ngx-cho-common

# Then build this library
ng build ngx-cho-components

Build artifacts will be stored in the dist/ngx-cho-components directory.

Development

Code Scaffolding

ng generate component component-name --project ngx-cho-components
ng generate service service-name --project ngx-cho-components

Note: Always include --project ngx-cho-components or the component will be added to the default project.

Storybook Development

This library includes Storybook for component development and documentation:

# Start Storybook development server
ng run ngx-cho-components:storybook

# Build Storybook for deployment
ng run ngx-cho-components:build-storybook

Storybook will be available at http://localhost:6006

Running Tests

ng test ngx-cho-components

Publishing

1. Update version in projects/ngx-cho-components/package.json
2. Build dependencies and library:

   ng build ngx-cho-common
   ng build ngx-cho-components --configuration production

3. Publish to npm:

   cd dist/ngx-cho-components
   npm publish

Usage

Import the components module in your application:

import { NgxChoComponentsModule } from 'ngx-cho-components';

@NgModule({
  imports: [NgxChoComponentsModule],
  // ...
})
export class AppModule {}

Use components in your templates:

<cho-address-info [address]="userAddress"></cho-address-info>

<cho-modal [isOpen]="showModal" (closeModal)="handleClose()">
  <p>Modal content here</p>
</cho-modal>

<cho-radio-group 
  [options]="radioOptions" 
  [(value)]="selectedValue">
</cho-radio-group>

Styling

Components are designed to work with Bootstrap. Include Bootstrap CSS in your application:

@import 'bootstrap/dist/css/bootstrap.min.css';

Documentation

View component documentation and examples in Storybook:

1. Run ng run ngx-cho-components:storybook
2. Navigate to http://localhost:6006
3. Browse component stories and interact with examples

Further Help

• Angular CLI Overview and Command Reference
• Storybook for Angular
• Angular Library Development Guide