@sftech/ng-shared

Shared Angular components, base classes, and utilities for building CRUD applications with OData support and PrimeNG.

Installation

npm install @sftech/ng-shared

Peer Dependencies

• @angular/common >= 19.0.0
• @angular/core >= 19.0.0
• @fortawesome/angular-fontawesome >= 3.0.0
• @fortawesome/free-solid-svg-icons >= 6.7.0
• PrimeNG >= 19.0.0

Configuration

Pass your IAppConfig to modules that depend on ng-shared:

import { IAppConfig } from '@sftech/ng-shared';

export const appConfig: IAppConfig = {
    apiUrl: 'http://localhost:3000',
    baseUrl: 'http://localhost:4200',
};

Base Classes

BaseListComponent

Abstract base for paginated list views with OData support.

import { BaseListComponent } from '@sftech/ng-shared';

@Component({ ... })
export class MyListComponent extends BaseListComponent<MyModel, MyCreateDto, MyUpdateDto, MyResponseDto> {
    protected _repo = inject(MyService);
    protected _route = 'my-items';
}

Provides: data() signal, _loadData(), updateOdata(), openDisplay(), pagination via PaginatorComponent.

BaseDisplayComponent

Abstract base for detail/edit views with form handling.

import { BaseDisplayComponent } from '@sftech/ng-shared';

@Component({ ... })
export class MyDisplayComponent extends BaseDisplayComponent<MyModel, MyUpdateDto, MyUpdateDto, MyResponseDto> {
    protected override _repo = inject(MyService);
    protected override _route = 'my-items';

    protected override initializeForm(): FormGroup { ... }
    protected override getNewModel(): MyModel { ... }
    protected override mapFormToUpdateDto(): MyUpdateDto { ... }
    protected override mapFormToCreateDto(): MyCreateDto { ... }
}

Provides: model() signal, isNew() signal, submitForm(), deleteData(), goBack().

BaseDisplayModalComponent

Lightweight base for modal display components. Provides id and canEdit inputs.

BaseDbApiService

Abstract base for HTTP services with CRUD and OData support.

import { BaseDbApiService } from '@sftech/ng-shared';

@Injectable({ providedIn: 'root' })
export class MyService extends BaseDbApiService<MyModel, MyCreateDto, MyUpdateDto, MyResponseDto> {
    protected override _entityUrlPath = '/api/my-items';
    protected override _mapToModel(dto: MyResponseDto): MyModel { ... }
}

Provides: getAll(odata?), get(id), insert(dto), update(id, dto), delete(id).

BaseDialogComponent

Base for PrimeNG DynamicDialog components. Provides close(result) method and DynamicDialogRef injection.

OData Query Builder

import { Odata, OdataFilterCollection, OdataFilter, OdataPagination, ODataOrder, EFilterOperator, EFilterTypes, ESortDirection } from '@sftech/ng-shared';

const odata = new Odata();
const filter = new OdataFilterCollection();
filter.addAnd(new OdataFilter('name', 'test', EFilterOperator.CONTAINS, EFilterTypes.STRING));
odata.filter = filter;
odata.pagination = new OdataPagination(1, 10);
odata.orderBy = ODataOrder.create('name', ESortDirection.ASC);

UI Components

• PaginatorComponent — Wraps PrimeNG paginator with OData integration
• FormErrorDisplayComponent — Displays form validation errors
• SidebarNavigationComponent — Sidebar layout with navigation
• HeadMainFooterWithCanvasComponent — Header/content/footer layout
• BaseDialogComponent — Dialog wrapper for PrimeNG DynamicDialog
• NotPermittedComponent — 403 page

Exports

All public types are exported via @sftech/ng-shared:

• Configuration: IAppConfig, appConfigLoader
• DTOs: IBaseDbCreateDto, IBaseDbUpdateDto, IBaseDbResponseDto, IODataResponseDto, IApiResponseDto
• Models: BaseDbModel, MappedApiResponse, MappedApiError, MappedOdataResponse
• OData: Odata, OdataFilter, OdataFilterCollection, EFilterConcatenation, OdataExpands, OdataPagination, ODataOrder
• Enums: EFilterOperator, EFilterTypes, ESortDirection
• Services: BaseDbApiService
• Providers: IconProvider

Development

npx nx build ng-shared
npx nx lint ng-shared

License

MIT