abp/docs/en/framework/ui/angular/commercial-ui.md

//[doc-seo]
{
    "Description": "Learn how to use ABP Commercial Angular date range controls, standalone UI configuration and the public testing entrypoint."
}

Commercial UI Components

The @volo/abp.commercial.ng.ui package provides shared ABP Commercial Angular controls in addition to the separately documented lookup components and entity filters. The package is included in ABP Commercial Angular application templates.

Date Range Controls

DateRangePickerComponent and DatetimeRangePickerComponent are Angular form controls. startDateProp and endDateProp specify the two properties updated in the bound model:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  DateRangePickerModule,
  DatetimeRangePickerComponent,
} from '@volo/abp.commercial.ng.ui';

@Component({
  selector: 'app-report-range',
  templateUrl: './report-range.component.html',
  imports: [
    FormsModule,
    DateRangePickerModule,
    DatetimeRangePickerComponent,
  ],
})
export class ReportRangeComponent {
  dateRange: {
    startDate: string | Date | null;
    endDate: string | Date | null;
  } = {
    startDate: null,
    endDate: null,
  };
}

<abp-date-range-picker
  [(ngModel)]="dateRange"
  startDateProp="startDate"
  endDateProp="endDate"
  labelText="Date Range"
/>

Use abp-datetime-range-picker with the same inputs when the model also needs start and end times. labelText is rendered as-is, so pass an already localized string (for example, a value resolved with the LocalizationService) instead of a localization key.

Standalone Configuration

Register commercial UI configuration in the application providers. The following example enables flag icons:

import { ApplicationConfig } from '@angular/core';
import {
  provideCommercialUiConfig,
  withEnableFlagIcon,
} from '@volo/abp.commercial.ng.ui/config';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCommercialUiConfig(
      withEnableFlagIcon(true),
    ),
  ],
};

Calling provideCommercialUiConfig() also registers the shared profile-picture, impersonation and tenant-switching providers. Flag icons are disabled unless withEnableFlagIcon(true) is supplied.

Testing

CommercialUiTestingModule imports and exports BaseCommercialUiModule, making its declarations available from the public testing entrypoint. Its withConfig() method returns the module registration without adding test doubles or providers:

import { TestBed } from '@angular/core/testing';
import { CommercialUiTestingModule } from '@volo/abp.commercial.ng.ui/testing';

await TestBed.configureTestingModule({
  imports: [CommercialUiTestingModule.withConfig()],
}).compileComponents();