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
• 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)

This library does not require Bootstrap, ng-bootstrap, Popper, or PrimeNG.

Installation

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

Breaking Changes

ChoModalComponent and the <cho-modal> selector have been removed. Applications should replace modal usage with an app-local dialog implementation, such as a native dialog or a PrimeNG dialog/drawer. This package no longer declares bootstrap or @ng-bootstrap/ng-bootstrap as peer dependencies.

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. Use a major version for the modal-component and peer-dependency removal.
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-radio-group 
  [options]="radioOptions" 
  [(value)]="selectedValue">
</cho-radio-group>

Styling

Components are framework-neutral and do not require Bootstrap. Applications should provide their own layout, dialog, and theme styling.

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