Adding a modal component

Procedure

Create a new angular component.

The newly created component must be registered as part of the entryComponents property of the @NgModule decorator of the feature module.

 
   @NgModule({
      imports: [
        FormsModule,
        CommonModule,
        TranslateModule,
        SharedModule],
      entryComponents: [
        TransferOrderAddTrackingNumberComponent
      ],
      declarations: [TransferOrderAddTrackingNumberComponent],
      exports: [],
      providers: [TransferOrderSummaryExtnRTConfig]
    })

Note: The TransferOrderAddTrackingNumberComponent needs to be imported in the extension.module.ts file.

In the store-customization-impl.ts file, update the appropriate ModalComponents property based on the feature. For example, transferInventoryModalComponents is the property for the transfer-inventory module.

Sample code for the store-customization-impl.ts file that defines a new modal component for the transfer-inventory module is as follows:


import { StoreCustomizationBase } from '@sim-core/store-customization-base';
   // tslint:disable-next-line:max-line-length
   import { TransferOrderAddTrackingNumberComponent} from './features/transfer-inventory/transfer-order-add-tracking-number/transfer-order-add-tracking-number.component';
    export class StoreCustomizationImpl extends StoreCustomizationBase {
       transferInventoryModalComponents = [TransferOrderAddTrackingNumberComponent];
    }

Use the ISFNagModalService service from the shared module to open the component in a window modal.

A sample code is as follows:


import {TransferOrderAddTrackingNumberComponent} from '../transfer-order-add-tracking-number/transfer-order-add-tracking-number.component';
@Injectable()
export class  TransferOrderSummaryExtnRTConfig {
 constructor(private modalService: NgbModal,
            private nagModalService: ISFNagModalService,
    ) 
    public openAddTrackingNumberModal(entityModel, activeroute) {
          const modalRef = this.modalService.open(TransferOrderAddTrackingNumberComponent, {});
          modalRef.componentInstance.entityModel = entityModel;
          modalRef.result.then(data => {
          if (UIUtilsService.isNotVoid(data) && data['refreshParentScreen']) {
            this.relatedTasksService.sendMessage(true);
          }
          });
    } 
}