Quotation Info - Angular Micro-Frontend Library

A reusable Angular component library for displaying quotation information forms using Formly. This library can be used as an NPM package in multiple applications as part of a micro-frontend architecture.

Features

• 🎯 Standalone Angular component (no module required)
• 📦 Published as NPM package
• 🔌 Easy integration with dependency injection
• 🎨 Formly-based dynamic forms
• 🌍 i18n support with ngx-translate
• 📱 Responsive design
• ⚡ Lightweight with peer dependencies

Installation

npm install @your-org/quotation-info

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/common @angular/core @angular/forms @angular/material @ngx-formly/core @ngx-translate/core

Usage

Basic Usage (with Direct Data)

import { Component } from '@angular/core';
import { QuotationInfo } from '@your-org/quotation-info';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [QuotationInfo],
  template: `
    <lib-quotation-info
      [quotationRequestID]="quotationId"
      [formDataJson]="formJson"
      (formReady)="onFormReady($event)"
      (formValueChange)="onFormChange($event)">
    </lib-quotation-info>
  `
})
export class AppComponent {
  quotationId = 'QT-12345';
  formJson = '{"fieldGroup": [...]}'; // Your form JSON
  
  onFormReady(event: any) {
    console.log('Form ready:', event.form, event.fields);
  }
  
  onFormChange(value: any) {
    console.log('Form changed:', value);
  }
}

Advanced Usage (with Service Injection)

If you want to use your application's services (RestService, LoaderService, etc.):

import { ApplicationConfig } from '@angular/core';
import { QUOTATION_INFO_CONFIG, QuotationInfoConfig } from '@your-org/quotation-info';
import { RestService } from './services/rest.service';
import { LoaderService } from './services/loader.service';
import { CommonService } from './services/common.service';
import { LatestFormlyApiService } from './services/latest-formly-api.service';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: QUOTATION_INFO_CONFIG,
      useFactory: (
        rest: RestService,
        loader: LoaderService,
        common: CommonService,
        formly: LatestFormlyApiService
      ): QuotationInfoConfig => ({
        restService: rest,
        loaderService: loader,
        commonService: common,
        formlyApiService: formly
      }),
      deps: [RestService, LoaderService, CommonService, LatestFormlyApiService]
    }
  ]
};

Then use the component:

import { QuotationInfo } from '@your-org/quotation-info';

@Component({
  selector: 'app-quotation-page',
  standalone: true,
  imports: [QuotationInfo],
  template: `
    <lib-quotation-info
      [objectDetails]="details"
      (dataLoadError)="handleError($event)">
    </lib-quotation-info>
  `
})
export class QuotationPageComponent {
  details = {
    objectInfo: {
      quotationRequestID: 'QT-12345',
      quotationSearchID: 'QS-001',
      isGroupPolicy: false
    }
  };
  
  handleError(error: any) {
    console.error('Error loading quotation:', error);
  }
}

With Custom Table Component

import { QuotationInfo } from '@your-org/quotation-info';
import { YourTableComponent } from './your-table.component';

@Component({
  selector: 'app-quotation-with-table',
  standalone: true,
  imports: [QuotationInfo, YourTableComponent],
  template: `
    <lib-quotation-info
      [quotationRequestID]="quotationId"
      [formDataJson]="formJson"
      (tableDataChange)="onTableDataChange($event)">
      
      <your-table-component 
        quotationTable
        [data]="tableData"
        (dataChange)="onTableChange($event)">
      </your-table-component>
    </lib-quotation-info>
  `
})
export class QuotationWithTableComponent {
  quotationId = 'QT-12345';
  formJson = '...';
  tableData: any[] = [];
  
  onTableDataChange(data: any) {
    this.tableData = data;
  }
  
  onTableChange(event: any) {
    console.log('Table changed:', event);
  }
}

API Reference

Inputs

| Input | Type | Description | |-------|------|-------------| | quotationRequestID | string | The quotation request identifier | | quotationSearchID | string | The quotation search identifier | | isGroupPolicy | boolean | Flag for group policy (default: false) | | latestVersion | any | Latest version data | | currentMenuItem | any | Current menu item | | objectDetails | any | Complete object details | | formDataJson | string | JSON string of form configuration | | quotationData | any | Complete quotation data object |

Outputs

| Output | Type | Description | |--------|------|-------------| | formReady | EventEmitter<{form: FormGroup, fields: FormlyFieldConfig[]}> | Emitted when form is initialized | | formValueChange | EventEmitter<any> | Emitted when form value changes | | tableDataChange | EventEmitter<any> | Emitted when table data changes | | dataLoadError | EventEmitter<any> | Emitted when data loading fails |

Public Methods

| Method | Returns | Description | |--------|---------|-------------| | getFormValue() | any | Get current form value | | getFormData() | {model, form, fields} | Get complete form data | | isFormValid() | boolean | Check if form is valid |

Building the Library

# Build the library
ng build quotation-info --configuration production

# The output will be in dist/quotation-info/

Publishing to NPM

Before publishing, update the package name in package.json to match your organization:

{
  "name": "@your-org/quotation-info"
}

Then publish:

cd dist/quotation-info
npm login
npm publish --access public

Development

To work on this library locally:

1. Build the library in watch mode:

ng build quotation-info --watch

2. In your application, use npm link:

cd dist/quotation-info
npm link

cd /path/to/your/app
npm link @your-org/quotation-info

Module Federation Alternative

For runtime micro-frontend integration, consider using Webpack Module Federation:

npm install @angular-architects/module-federation
ng add @angular-architects/module-federation

This allows dynamically loading the component from a remote application at runtime.

License

MIT

Support

For issues and feature requests, please visit your repository's issue tracker.