From 1f9dbfeb062c0502ac47d3950d4f959af5d5c35b Mon Sep 17 00:00:00 2001
From: Martin Pilat <>
Date: Wed, 2 Jul 2025 12:48:57 +0200
Subject: [PATCH 1/7] chore(bits): migrated from constructor injection

---
 .../skills/ng-constructor-to-inject/SKILL.md  |  68 +++++++
 .../references/patterns.md                    | 172 ++++++++++++++++++
 .../references/test-migration.md              | 166 +++++++++++++++++
 .../demo/src/components/app/app.component.ts  |  66 +++----
 .../breadcrumb-basic.example.component.ts     |  16 +-
 .../breadcrumb-visual-test.component.ts       |  16 +-
 .../button-basic.example.component.ts         |   5 +-
 .../checkbox-group-basic.example.component.ts |   6 +-
 ...heckbox-group-in-form.example.component.ts |  10 +-
 .../checkbox-group-test.component.ts          |   6 +-
 .../checkbox-group-visual-test.component.ts   |   6 +-
 .../checkbox-in-form.example.component.ts     |  10 +-
 .../checkbox-link.example.component.ts        |   5 +-
 .../checkbox-output.example.component.ts      |   5 +-
 ...te-option-multiselect.example.component.ts |  10 +-
 ...obox-v2-create-option.example.component.ts |  11 +-
 ...2-reactive-form-field.example.component.ts |   6 +-
 .../combobox-v2-test.example.component.ts     |  18 +-
 ...ombobox-reactive-form.example.component.ts |  10 +-
 .../combobox-test/combobox-test.component.ts  |  10 +-
 .../data-filter-basic.example.component.ts    |  55 ++----
 .../data-filter-isolated.example.component.ts |  31 +---
 .../client-side-basic.example.component.ts    |  18 +-
 ...nt-side-custom-search.example.component.ts |  19 +-
 .../client-side-delayed.example.component.ts  |  18 +-
 ...client-side-filtering.example.component.ts |  15 +-
 ...t-side-with-selection.example.component.ts |  21 +--
 .../client-side-basic.example.component.ts    |  18 +-
 ...nt-side-custom-search.example.component.ts |  19 +-
 .../client-side-delayed.example.component.ts  |  18 +-
 ...client-side-filtering.example.component.ts |  15 +-
 ...t-side-with-selection.example.component.ts |  21 +--
 ...dge-detection-service.example.component.ts |   6 +-
 ...t-propagation-service.example.component.ts |  10 +-
 .../search-service.example.component.ts       |   6 +-
 .../tree-checkbox-lazy.component.ts           |  13 +-
 .../tree-lazy/tree-lazy.example.component.ts  |  15 +-
 .../tree-leaf-pagination.example.component.ts |  17 +-
 .../tree-load-more.example.component.ts       |  17 +-
 .../tree-show-all-dialog.example.component.ts |  43 ++---
 .../tree-paginator-test.component.ts          |  17 +-
 ...th-additional-content.example.component.ts |   8 +-
 ...version-service-basic.example.component.ts |   5 +-
 ...separate-unit-display.example.component.ts |   5 +-
 ...with-viewport-manager.example.component.ts |  25 +--
 .../time-frame-bar-test.component.ts          |   6 +-
 .../time-frame-bar-visual.component.ts        |   6 +-
 .../time-frame-bar-zoom.example.component.ts  |   7 +-
 ...-picker-insignificant.example.component.ts |   6 +-
 .../date-picker-test.component.ts             |   6 +-
 ...e-picker-value-change.example.component.ts |   6 +-
 .../date-picker-visual-test.component.ts      |   6 +-
 ...te-time-picker-dialog.example.component.ts |   6 +-
 .../date-time-picker-visual-test.component.ts |   6 +-
 .../component-as-content.example.component.ts |   5 +-
 .../dialog-content.example.component.ts       |  10 +-
 .../confirmation-dialog.example.component.ts  |   9 +-
 ...ctions-before-closure.example.component.ts |   6 +-
 .../dialog-after-opened.example.component.ts  |   9 +-
 .../dialog-custom-class.example.component.ts  |  10 +-
 ...with-date-time-picker.example.component.ts |   6 +-
 ...dialog-inside-overlay.example.component.ts |   6 +-
 .../dialog-with-keyboard.example.component.ts |  10 +-
 .../dialog-position.example.component.ts      |  10 +-
 .../dialog-severity.example.component.ts      |  10 +-
 .../dialog-sizes.example.component.ts         |  10 +-
 ...-with-static-backdrop.example.component.ts |  10 +-
 .../dialog-visual-test.component.ts           |   6 +-
 .../dialog-zindex-test.component.ts           |  20 +-
 .../header-buttons.example.component.ts       |  10 +-
 .../simple-dialog.example.component.ts        |  10 +-
 .../dragdrop-basic.example.component.ts       |   6 +-
 ...eld-custom-validation.example.component.ts |   6 +-
 ...c-reactive-form-field.example.component.ts |   6 +-
 .../form-field-complex.example.component.ts   |  10 +-
 ...eld-dynamic-disabling.example.component.ts |  10 +-
 .../form-field-test.component.ts              |   6 +-
 ...validation-triggering.example.component.ts |   6 +-
 .../form-field-visual-test.component.ts       |   6 +-
 .../in-form-form-field.example.component.ts   |  10 +-
 ...ed-forms-as-component.example.component.ts |  18 +-
 ...e-query-builder-basic.example.component.ts |  10 +-
 .../freetype-query-builder-test.component.ts  |  12 +-
 ...xample-freetype-query-builder.component.ts |  12 +-
 .../icon-list/icon-list.example.component.ts  |   6 +-
 .../image-list.example.component.ts           |  64 ++++---
 .../image-visual-test.component.ts            |  64 ++++---
 ...om-confirmation-inside-dialog.component.ts |   6 +-
 .../overlay-custom-dialog.component.ts        |   6 +-
 ...lapse-outside-control.example.component.ts |   6 +-
 ...collapse-top-oriented.example.component.ts |   6 +-
 ...anel-embedded-content.example.component.ts |   6 +-
 ...-hide-outside-control.example.component.ts |  10 +-
 .../popover-outputs.example.component.ts      |   5 +-
 ...p-with-custom-content.example.component.ts |   6 +-
 .../radio-group-in-form.example.component.ts  |   6 +-
 .../radio-group-test.component.ts             |   6 +-
 .../radio-group-visual-test.component.ts      |   6 +-
 ...o-group-hints-content.example.component.ts |   6 +-
 ...ue-change-radio-group.example.component.ts |   6 +-
 .../repeat-virtual-scroll.component.ts        |  22 +--
 .../search-focus-change.example.component.ts  |   6 +-
 ...arch-on-search-cancel.example.component.ts |   5 +-
 ...ect-v2-custom-content.example.component.ts |   6 +-
 ...2-reactive-form-field.example.component.ts |   6 +-
 .../select-v2-test.example.component.ts       |  19 +-
 .../select-reactive-form.example.component.ts |  10 +-
 .../select-visual-test.component.ts           |   6 +-
 ...heading-group-dynamic.example.component.ts |   6 +-
 ...ontal-with-icons-only.example.component.ts |   6 +-
 ...horizontal-with-icons.example.component.ts |   6 +-
 ...ding-group-horizontal.example.component.ts |   6 +-
 ...ding-group-responsive.example.component.ts |   6 +-
 ...p-vertical-with-icons.example.component.ts |   6 +-
 ...eading-group-vertical.example.component.ts |   6 +-
 ...ng-group-with-content.example.component.ts |   6 +-
 ...ding-group-with-icons.example.component.ts |   6 +-
 .../tab-content-settings.example.component.ts |   6 +-
 ...ing-group-with-router.example.component.ts |   6 +-
 ...le-columns-add-remove.example.component.ts |  16 +-
 .../table-pagination.example.component.ts     |  10 +-
 .../table-reorder.example.component.ts        |   6 +-
 .../table-row-clickable.example.component.ts  |  10 +-
 ...select-and-pagination.example.component.ts |  10 +-
 .../table-search.example.component.ts         |  10 +-
 .../table-select.example.component.ts         |  10 +-
 ...ble-selectable-toggle.example.component.ts |  19 +-
 .../table-sorting.example.component.ts        |  10 +-
 .../table/table-test/table-test.component.ts  |  36 ++--
 .../table-virtual-scroll-datasource-1.ts      |   8 +-
 ...l-real-api-minimalist.example.component.ts |  19 +-
 ...l-api-progress-footer.example.component.ts |  19 +-
 ...-progress-text-footer.example.component.ts |  20 +-
 ...rtual-scroll-real-api.example.component.ts |  19 +-
 ...-select-sticky-header-example.component.ts |  14 +-
 ...roll-steps-and-button.example.component.ts |  20 +-
 ...ll-sticky-header-test-example.component.ts |  14 +-
 ...-scroll-sticky-header-example.component.ts |  14 +-
 ...extbox-number-min-max.example.component.ts |   6 +-
 .../textbox-number-test.component.ts          |   6 +-
 .../textbox-number-visual-test.component.ts   |   6 +-
 .../custom-theme.example.component.ts         |  17 +-
 .../theme-switch-service.example.component.ts |   6 +-
 ...me-frame-picker-basic.example.component.ts |   8 +-
 ...e-frame-picker-custom.example.component.ts |   6 +-
 ...ltiple-custom-pickers.example.component.ts |  18 +-
 ...ime-frame-picker-test.example.component.ts |   8 +-
 ...time-frame-picker-visual-test.component.ts |   8 +-
 ...e-picker-model-change.example.component.ts |   6 +-
 ...reserve-insignificant.example.component.ts |   6 +-
 ...-picker-reactive-form.example.component.ts |  10 +-
 .../time-picker-visual-test.component.ts      |   6 +-
 .../toast-basic-html.example.component.ts     |   5 +-
 .../toast-basic.example.component.ts          |   5 +-
 .../toast-config.example.component.ts         |   6 +-
 .../toast-events.example.component.ts         |   6 +-
 .../toast-position.example.component.ts       |   6 +-
 .../toast-sticky-error.example.component.ts   |   6 +-
 .../toast/toast-test/toast-test.component.ts  |   5 +-
 .../toast-type.example.component.ts           |   5 +-
 .../toast-visual-test.component.ts            |   6 +-
 .../toolbar-basic.example.component.ts        |   5 +-
 ...lbar-embedded-content.example.component.ts |   6 +-
 .../toolbar-selection.example.component.ts    |   6 +-
 ...async-form-validation.example.component.ts |  10 +-
 .../wizard-busy.example.component.ts          |   6 +-
 .../wizard-custom-footer.example.component.ts |   6 +-
 .../wizard-custom.example.component.ts        |  12 +-
 .../wizard-dialog.example.component.ts        |  10 +-
 .../wizard-dynamic.example.component.ts       |  11 +-
 .../wizard-horizontal.example.component.ts    |   6 +-
 .../wizard-remove-step.example.component.ts   |  11 +-
 ...ard-responsive-header.example.component.ts |   6 +-
 .../wizard-restore-state.example.component.ts |  19 +-
 .../wizard-step-change.example.component.ts   |  11 +-
 .../wizard-test/wizard-test.component.ts      |  13 +-
 .../wizard-tooltip.example.component.ts       |   6 +-
 ...tion-dialog-on-cancel.example.component.ts |  21 +--
 ...ard-with-custom-icons.example.component.ts |   6 +-
 ...ard-additional-button.example.component.ts |   5 +-
 ...d-confirmation-dialog.example.component.ts |  10 +-
 .../wizard-dialog.example.component.ts        |  10 +-
 .../wizard-reset-step-example.component.ts    |   6 +-
 .../wizard-simple.example.component.ts        |  12 +-
 .../wizard-steps.example.component.ts         |   6 +-
 .../wizard-validation.example.component.ts    |   6 +-
 .../wizard-visual-test.component.ts           |  10 +-
 .../basic-filter-group.component.ts           |  14 +-
 .../basic-filter-group.example.component.ts   |   9 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  22 +--
 ...stom-data-source-filter-group.component.ts |  14 +-
 ...a-source-filter-group.example.component.ts |  16 +-
 .../custom-data-source.service.ts             |   7 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../custom-template-filter-group.component.ts |  14 +-
 ...template-filter-group.example.component.ts |   9 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../dialog-filter-group.component.ts          |  14 +-
 .../dialog-filter-group.example.component.ts  |  13 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  17 +-
 .../filter-group/fake-http.service.ts         |  17 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...ist-with-pagination-data-source.service.ts |   9 +-
 ...red-view-list-with-pagination.component.ts |  23 +--
 .../filtered-view-list.component.ts           |  20 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...with-virtual-scroll-data-source.service.ts |   9 +-
 ...view-list-with-virtual-scroll.component.ts |  23 +--
 .../filtered-view-list.component.ts           |  22 +--
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...stom-virtual-scroll-data-source.service.ts |   9 +-
 ...le-with-custom-virtual-scroll.component.ts |  23 +--
 .../filtered-view-table.component.ts          |  24 +--
 .../virtual-scroll-custom-strategy.service.ts |   6 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...ble-with-pagination-data-source.service.ts |   9 +-
 ...ed-view-table-with-pagination.component.ts |  23 +--
 .../filtered-view-table.component.ts          |  20 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...able-with-selection-data-source.service.ts |   9 +-
 ...red-view-table-with-selection.component.ts |  23 +--
 .../filtered-view-table.component.ts          |  20 +-
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...al-scroll-selection-data-source.service.ts |   9 +-
 ...with-virtual-scroll-selection.component.ts |  23 +--
 .../filtered-view-table.component.ts          |  22 +--
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 ...with-virtual-scroll-data-source.service.ts |   9 +-
 ...iew-table-with-virtual-scroll.component.ts |  23 +--
 .../filtered-view-table.component.ts          |  22 +--
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 .../filtered-view-list.component.ts           |  19 +-
 .../filtered-view-with-list.component.ts      |  23 +--
 .../filter-group-dialog.component.ts          |  10 +-
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../item-picker/item-picker.component.ts      |  21 +--
 .../filtered-view-table.component.ts          |  16 +-
 .../filtered-view-with-table.component.ts     |  23 +--
 .../filter-group/filter-group.component.ts    |  17 +-
 .../filter-groups-wrapper.component.ts        |  15 +-
 .../filtered-view-tree.component.ts           |  20 +-
 ...ered-view-with-tree-data-source.service.ts |   8 +-
 .../filtered-view-with-tree.component.ts      |  22 +--
 .../list/basic-list/basic-list.component.ts   |  19 +-
 .../paginated-list-data-source.service.ts     |   9 +-
 .../paginated-list.component.ts               |  20 +-
 .../search-list-data-source.service.ts        |   9 +-
 .../list/search-list/search-list.component.ts |  20 +-
 .../selection-list.component.ts               |  21 +--
 ...virtual-scroll-list-data-source.service.ts |   9 +-
 .../virtual-scroll-list.component.ts          |  22 +--
 .../basic-table/basic-table.component.ts      |  16 +-
 ...stom-virtual-scroll-data-source.service.ts |   9 +-
 ...le-with-custom-virtual-scroll.component.ts |  24 +--
 .../virtual-scroll-custom-strategy.service.ts |   6 +-
 ...ble-with-pagination-data-source.service.ts |   9 +-
 .../table-with-pagination.component.ts        |  20 +-
 .../table-with-search-data-source.service.ts  |   9 +-
 .../table-with-search.component.ts            |  20 +-
 ...able-with-selection-data-source.service.ts |   9 +-
 .../table-with-selection.component.ts         |  20 +-
 .../table-with-sort-data-source.service.ts    |   9 +-
 .../table-with-sort.component.ts              |  20 +-
 ...with-virtual-scroll-data-source.service.ts |   9 +-
 .../table-with-virtual-scroll.component.ts    |  22 +--
 .../schematic-docs-cli-option.component.ts    |  12 +-
 .../schematic-docs-example.component.ts       |  19 +-
 ...framework-colors-dark.example.component.ts |   5 +-
 .../framework-colors-example.component.ts     |   6 +-
 .../filter-group-dialog.component.ts          |  13 +-
 .../item-picker/item-picker.component.ts      |  19 +-
 .../virtual-scroll-custom-strategy.service.ts |   9 +-
 .../click-interceptor.directive.ts            |   6 +-
 .../clipboard/clipboard.directive.ts          |  18 +-
 .../dragdrop/draggable.directive.ts           |  27 +--
 .../dragdrop/droppable.directive.ts           |  19 +-
 .../resize-observer.directive.ts              |  15 +-
 .../directives/resize/resize.directive.ts     |  13 +-
 .../directives/resizer/resizer.directive.ts   |  30 +--
 .../set-focus/set-focus.directive.ts          |  21 +--
 .../zoom-content/zoom-content.directive.ts    |  24 +--
 packages/bits/src/lib/busy/busy.component.ts  |  19 +-
 .../bits/src/lib/button/button.component.ts   |  28 +--
 .../lib/checkbox/checkbox-group.component.ts  |  18 +-
 .../src/lib/checkbox/checkbox.component.ts    |  27 +--
 .../bits/src/lib/chips/chip/chip.component.ts |  18 +-
 .../src/lib/chips/chips-overflow.service.ts   |  12 +-
 .../bits/src/lib/chips/chips.component.ts     |  28 +--
 .../time-frame-bar.component.ts               |  24 +--
 .../date-picker-day-picker.component.ts       |   8 +-
 .../date-picker-month-picker.component.ts     |   8 +-
 .../date-picker-year-picker.component.ts      |   8 +-
 .../lib/date-picker/date-picker.component.ts  |  22 +--
 .../date-time-picker.component.ts             |  21 +--
 .../dialog/confirmation-dialog.component.ts   |  10 +-
 .../src/lib/dialog/dialog-service.spec.ts     |  24 +--
 .../src/lib/dialog/dialog-stack.service.ts    |  25 +--
 .../bits/src/lib/dialog/dialog.component.ts   |  29 +--
 .../bits/src/lib/dialog/dialog.service.ts     |  11 +-
 .../src/lib/dnd/dnd-drop-target.directive.ts  |  22 +--
 .../lib/docs/copy-text/copy-text.component.ts |   6 +-
 .../example-wrapper/code-sandbox.service.ts   |   9 +-
 .../example-wrapper.component.ts              |  10 +-
 .../plunker-project.service.ts                |   9 +-
 .../src/lib/docs/services/sources.service.ts  |  11 +-
 .../srlc-indicator.component.ts               |   5 +-
 .../theme-switcher.component.spec.ts          |   6 +-
 .../theme-switcher.component.ts               |   5 +-
 .../src/lib/expander/expander.component.ts    |  16 +-
 .../freetype-query-builder.component.ts       |  31 +---
 .../helpers/freetype-query-utils.service.ts   |   6 +-
 .../text-highlight-overlay-component.ts       |  15 +-
 packages/bits/src/lib/icon/icon.component.ts  |   1 -
 .../bits/src/lib/image/image.component.ts     |  14 +-
 .../layout-resizer.component.spec.ts          |   5 +-
 .../layout-resizer.component.ts               |  52 +++---
 .../sheet-group/sheet-group.component.ts      |  27 +--
 .../src/lib/layout/sheet/sheet.component.ts   |  12 +-
 .../menu-action/menu-action.component.ts      |  23 +--
 .../menu-item/menu-item.component.ts          |  25 +--
 .../menu-link/menu-link.component.ts          |  23 +--
 .../menu-option/menu-option.component.ts      |  27 +--
 .../menu-switch/menu-switch.component.ts      |  25 +--
 .../src/lib/menu/menu-key-control.service.ts  |   6 +-
 .../bits/src/lib/menu/menu/menu.component.ts  |  26 +--
 .../bits/src/lib/message/message.component.ts |  18 +-
 .../overlay.component.spec.ts                 |  13 +-
 .../overlay-component/overlay.component.ts    |  27 +--
 .../lib/overlay/overlay-container.service.ts  |   5 +-
 .../lib/overlay/overlay-custom-container.ts   |  13 +-
 .../overlay-item/overlay-item.component.ts    |  13 +-
 .../bits/src/lib/overlay/overlay.service.ts   |  16 +-
 .../src/lib/paginator/paginator.component.ts  |  25 +--
 .../bits/src/lib/panel/panel.component.ts     |  28 +--
 .../lib/popover/popover-modal.component.ts    |  23 +--
 .../src/lib/popover/popover-modal.service.ts  |  11 +-
 .../bits/src/lib/popover/popover.component.ts |  40 +---
 .../popup-adapter/popup-adapter.component.ts  |  33 +---
 .../lib/popup/popup-container.component.ts    |  20 +-
 .../src/lib/popup/popup-toggle.directive.ts   |  12 +-
 .../bits/src/lib/popup/popup.component.ts     |  43 ++---
 .../src/lib/radio/radio-group.component.ts    |  35 +---
 .../bits/src/lib/repeat/repeat.component.ts   |  36 +---
 .../lib/risk-score/risk-score.component.ts    |  21 +--
 .../combobox-v2-option-highlight.directive.ts |  22 +--
 .../combobox-v2/combobox-v2.component.spec.ts |  12 +-
 .../combobox-v2/combobox-v2.component.ts      |  37 ++--
 .../mark-as-selected-item.directive.ts        |  12 +-
 .../select-v2-option-group.component.ts       |  21 +--
 .../select-v2/option-key-control.service.ts   |   6 +-
 .../option/select-v2-option.component.ts      |  28 +--
 .../select/select-v2.component.spec.ts        |  19 +-
 .../select-v2/select/select-v2.component.ts   |  31 ++--
 .../selected-items-key-control.service.ts     |   6 +-
 .../lib/select/combobox/combobox.component.ts |  38 ++--
 .../bits/src/lib/select/select.component.ts   |  30 +--
 .../select/spec-helpers/spec-components.ts    |  18 +-
 .../bits/src/lib/selector/selector.service.ts |   6 +-
 .../src/lib/sorter/sorter-keyboard.service.ts |   6 +-
 .../bits/src/lib/sorter/sorter.component.ts   |  28 +--
 .../bits/src/lib/spinner/spinner.component.ts |  25 +--
 .../tabgroup/tab-group/tab-group.component.ts |  18 +-
 .../tab-heading-group.component.spec.ts       |  12 +-
 .../tab-heading-group.component.ts            |  27 +--
 .../tab-heading/tab-heading.component.ts      |  18 +-
 ...b-heading-custom-template-ref.directive.ts |   6 +-
 .../lib/tabgroup/tab/tab-heading.directive.ts |   7 +-
 .../src/lib/tabgroup/tab/tab.component.ts     |  15 +-
 .../table-cell/table-cell-def.directive.ts    |  10 +-
 .../table/table-cell/table-cell.directive.ts  |  31 ++--
 .../table-cell/table-column-def.directive.ts  |  14 +-
 .../table-footer-cell-def.directive.ts        |  10 +-
 .../table-cell/table-footer-cell.directive.ts |   7 +-
 .../table-header-cell-def.directive.ts        |  10 +-
 .../table-cell/table-header-cell.component.ts |  37 ++--
 .../table-resizer/table-resizer.directive.ts  |  13 +-
 .../table/table-row/table-row.component.ts    |  71 +++-----
 .../table-select-row.component.ts             |   5 +-
 .../lib/table/table-state-handler.service.ts  |  17 +-
 .../table-sticky-header.directive.ts          |  17 +-
 .../bits/src/lib/table/table.component.ts     |  67 +++----
 .../src/lib/textbox/textbox.component.spec.ts |   6 +-
 .../quick-picker/quick-picker.component.ts    |  14 +-
 .../time-frame-picker.component.ts            |  22 +--
 .../spec-helpers/spec-components.ts           |  10 +-
 .../lib/time-picker/time-picker.component.ts  |  28 +--
 .../src/lib/toast/toast-container.service.ts  |  18 +-
 .../bits/src/lib/toast/toast.component.ts     |  21 +--
 .../bits/src/lib/toast/toast.directive.ts     |  10 +-
 packages/bits/src/lib/toast/toast.service.ts  |  14 +-
 .../bits/src/lib/toolbar/toolbar.component.ts |  31 +---
 .../bits/src/lib/tooltip/tooltip.component.ts |  23 +--
 .../bits/src/lib/tooltip/tooltip.directive.ts |  29 ++-
 .../wizard-footer/wizard-footer.component.ts  |  18 +-
 .../wizard-horizontal.component.ts            |  37 ++--
 .../wizard-overflow.component.ts              |   6 +-
 .../wizard-v2/wizard-step-footer.directive.ts |  56 +++---
 .../wizard-step-header.component.ts           |  27 +--
 .../wizard-v2/wizard-step-label.directive.ts  |  56 +++---
 .../wizard-step/wizard-step.component.ts      |  31 +---
 .../wizard-vertical.component.ts              |  20 +-
 .../bits/src/lib/wizard/wizard.component.ts   |  29 +--
 .../bits/src/pipes/unit-conversion.pipe.ts    |   5 +-
 .../bits/src/services/data-filter.service.ts  |   6 +-
 .../client-side-data-source.service.ts        |   8 +-
 .../local-filtering-data-source.service.ts    |   8 +-
 .../bits/src/services/dom-util.service.ts     |   7 +-
 .../src/services/edge-detection.service.ts    |  12 +-
 .../bits/src/services/event-bus.service.ts    |  11 +-
 packages/bits/src/services/list.service.ts    |   5 +-
 packages/bits/src/services/log-service.ts     |   6 +-
 .../bits/src/services/position.service.ts     |   5 +-
 packages/bits/src/services/search.service.ts  |  26 +--
 .../src/services/theme-switch.service.spec.ts |   6 +-
 .../bits/src/services/theme-switch.service.ts |  14 +-
 .../transient-cache-factory.service.ts        |   6 +-
 .../src/services/transient-cache.service.ts   |   6 +-
 .../src/services/unit-conversion.service.ts   |   5 +-
 packages/bits/src/services/util.service.ts    |  10 +-
 .../virtual-viewport-manager.service.spec.ts  |  12 +-
 449 files changed, 2651 insertions(+), 4357 deletions(-)
 create mode 100644 .github/skills/ng-constructor-to-inject/SKILL.md
 create mode 100644 .github/skills/ng-constructor-to-inject/references/patterns.md
 create mode 100644 .github/skills/ng-constructor-to-inject/references/test-migration.md

diff --git a/.github/skills/ng-constructor-to-inject/SKILL.md b/.github/skills/ng-constructor-to-inject/SKILL.md
new file mode 100644
index 000000000..52a003711
--- /dev/null
+++ b/.github/skills/ng-constructor-to-inject/SKILL.md
@@ -0,0 +1,68 @@
+---
+name: ng-constructor-to-inject
+description: 'Migrate Angular constructor parameter injection to inject() function syntax (Angular 14+ style). Use when: migrating constructor DI, converting constructor(private svc: Svc) to inject(), replacing constructor injection with field injection, fixing no-inject-constructor lint rule.'
+argument-hint: 'path/to/file.ts or glob like packages/bits/src/**/*.ts'
+---
+
+# Constructor Injection → `inject()` Migration
+
+Migrates Angular classes from constructor parameter injection to the `inject()` function style.
+
+## When to Use
+
+- A file has `constructor(private|public|protected|readonly dep: Type)` params
+- A spec file instantiates the class with `new MyClass(dep1, dep2)` after migration
+- A lint rule (`@angular-eslint/no-inject-constructor` or similar) flags constructor injection
+
+## Transformation Rules
+
+See [./references/patterns.md](./references/patterns.md) for exhaustive before/after patterns.
+
+## Procedure
+
+### Step 1 — Identify the target file(s)
+
+If the user provided a path or glob, use `grep_search` to list all files matching:
+```
+constructor\((?:private|public|protected|readonly)
+```
+Otherwise work on the currently open file.
+
+### Step 2 — For each source file
+
+1. **Read the file** to understand its full structure.
+2. **Collect constructor injected params**: extract `(modifier) (readonly?) name: Type` from the constructor signature.
+3. **Determine constructor body**: check whether the constructor body contains any statements beyond super() calls.
+4. **Apply the transformation**:
+   - Add a class field `modifier (readonly?) name = inject(Type);` for every injected param, placed directly after the last decorator / class opening `{`.
+   - Remove the matching params from the constructor signature.
+   - If the constructor is now empty (no params, no body except possibly `super()`), **remove the constructor entirely**.
+   - If a `super(...)` call exists without args after removing params, keep the constructor with only the super call.
+   - If there is remaining body code, keep the constructor with only the body (no params).
+5. **Update the `@angular/core` import**: add `inject` to the existing import if it is not already present.
+6. **Preserve all other imports**: do not touch non-angular-core imports.
+7. **Format**: match the surrounding code style (spacing, trailing commas).
+
+### Step 3 — Update spec files
+
+Find the corresponding `.spec.ts` file(s). See [./references/test-migration.md](./references/test-migration.md).
+
+1. If the spec creates the class with `new MyClass(dep1, dep2)`, migrate it to `TestBed`-based instantiation.
+2. If the spec already uses `TestBed.createComponent` / `TestBed.inject`, no change is needed.
+3. Run the spec after changes: prefer `runTests` tool over terminal.
+
+### Step 4 — Verify
+
+Run `get_errors` on the modified files and fix any TypeScript errors before finishing.
+
+## Quick Reference
+
+| Before | After |
+|--------|-------|
+| `constructor(private svc: SvcClass) {}` | `private svc = inject(SvcClass);` (constructor removed) |
+| `constructor(private readonly svc: SvcClass) {}` | `private readonly svc = inject(SvcClass);` |
+| `constructor(public svc: SvcClass) {}` | `public svc = inject(SvcClass);` |
+| `constructor(protected svc: SvcClass) {}` | `protected svc = inject(SvcClass);` |
+| `constructor(private svc: SvcClass) { this.init(); }` | field + constructor with body only |
+| `inject` already in import | add to existing named import list |
+| `import { Component } from "@angular/core"` | `import { Component, inject } from "@angular/core"` |
diff --git a/.github/skills/ng-constructor-to-inject/references/patterns.md b/.github/skills/ng-constructor-to-inject/references/patterns.md
new file mode 100644
index 000000000..5d0a0203e
--- /dev/null
+++ b/.github/skills/ng-constructor-to-inject/references/patterns.md
@@ -0,0 +1,172 @@
+# Migration Patterns
+
+## Basic: single private dep, empty constructor
+
+```ts
+// BEFORE
+import { Component } from "@angular/core";
+import { MyService } from "./my.service";
+
+@Component({ selector: "my-cmp", template: "" })
+export class MyComponent {
+    constructor(private myService: MyService) {}
+}
+
+// AFTER
+import { Component, inject } from "@angular/core";
+import { MyService } from "./my.service";
+
+@Component({ selector: "my-cmp", template: "" })
+export class MyComponent {
+    private myService = inject(MyService);
+}
+```
+
+---
+
+## Multiple deps, empty constructor
+
+```ts
+// BEFORE
+constructor(
+    private serviceA: ServiceA,
+    private serviceB: ServiceB,
+    private serviceC: ServiceC,
+) {}
+
+// AFTER  (constructor removed entirely)
+private serviceA = inject(ServiceA);
+private serviceB = inject(ServiceB);
+private serviceC = inject(ServiceC);
+```
+
+---
+
+## Constructor with body code
+
+```ts
+// BEFORE
+constructor(private router: Router) {
+    this.router.navigate(["/home"]);
+}
+
+// AFTER  (constructor body stays, param removed)
+private router = inject(Router);
+
+constructor() {
+    this.router.navigate(["/home"]);
+}
+```
+
+---
+
+## `readonly` modifier
+
+```ts
+// BEFORE
+constructor(private readonly svc: MyService) {}
+
+// AFTER
+private readonly svc = inject(MyService);
+```
+
+---
+
+## `public` or `protected` modifier (template or subclass access)
+
+```ts
+// BEFORE
+constructor(public changeDetector: ChangeDetectorRef) {}
+
+// AFTER
+public changeDetector = inject(ChangeDetectorRef);
+```
+
+---
+
+## Mix of injected and non-injected constructor params
+
+Non-injected params (no access modifier) are **not** migrated — they stay in the constructor signature.
+
+```ts
+// BEFORE
+constructor(private svc: SvcClass, config: SomeConfig) {
+    this.value = config.value;
+}
+
+// AFTER  (only access-modifier params move to inject())
+private svc = inject(SvcClass);
+
+constructor(config: SomeConfig) {
+    this.value = config.value;
+}
+```
+
+---
+
+## Class with `super()` call
+
+```ts
+// BEFORE
+constructor(private svc: SvcClass) {
+    super();
+}
+
+// AFTER  (constructor kept only for super())
+private svc = inject(SvcClass);
+
+constructor() {
+    super();
+}
+```
+
+If the super call passes injected deps, those must become field references:
+
+```ts
+// BEFORE
+constructor(private http: HttpClient) {
+    super(http);
+}
+
+// AFTER
+private http = inject(HttpClient);
+
+constructor() {
+    super(this.http);   // <-- update reference
+}
+```
+
+---
+
+## `inject` already imported
+
+Only add `inject` once. Find the existing `@angular/core` named import and append it:
+
+```ts
+// BEFORE
+import { Component, OnInit } from "@angular/core";
+
+// AFTER
+import { Component, OnInit, inject } from "@angular/core";
+```
+
+---
+
+## `inject` already present
+
+No change to the import line needed.
+
+---
+
+## Edge case: `@Inject(TOKEN)` decorator — out of scope
+
+This skill covers **only** TypeScript access-modifier params (`private|public|protected`).
+`@Inject(TOKEN)` params require a separate migration (`inject(TOKEN)` with optional flags) and are handled by the `@Inject`-migration skill.
+
+---
+
+## Ordering of injected fields
+
+Place `inject()` fields in the same order the constructor params appeared, directly at the top of the class body (after any class-level decorators but before other fields), to maintain readability.
+
+If the class already has fields, place the new `inject()` fields **before** the first non-inject field, unless a different convention is established in the file.
diff --git a/.github/skills/ng-constructor-to-inject/references/test-migration.md b/.github/skills/ng-constructor-to-inject/references/test-migration.md
new file mode 100644
index 000000000..ac3c405ad
--- /dev/null
+++ b/.github/skills/ng-constructor-to-inject/references/test-migration.md
@@ -0,0 +1,166 @@
+# Test Migration Guide
+
+When a class is migrated from constructor injection to `inject()`, its unit tests may break if they instantiate the class manually with `new`. This guide covers how to fix those cases.
+
+## 1. Detect which pattern the spec uses
+
+### Pattern A — Manual instantiation (must migrate)
+
+```ts
+// spec file before
+let component: MyComponent;
+beforeEach(() => {
+    component = new MyComponent(myServiceStub);
+});
+```
+
+### Pattern B — TestBed (no change needed)
+
+```ts
+// spec file — already fine
+beforeEach(async () => {
+    await TestBed.configureTestingModule({
+        declarations: [MyComponent],
+        providers: [{ provide: MyService, useValue: myServiceStub }],
+    }).compileComponents();
+    fixture = TestBed.createComponent(MyComponent);
+    component = fixture.componentInstance;
+});
+```
+
+---
+
+## 2. Migrating Pattern A → TestBed
+
+### 2a. Component spec
+
+```ts
+// BEFORE
+import { MyService } from "./my.service";
+import { MyComponent } from "./my.component";
+
+describe("MyComponent", () => {
+    let component: MyComponent;
+    const myServiceStub: Partial<MyService> = { getValue: () => "test" };
+
+    beforeEach(() => {
+        component = new MyComponent(myServiceStub as MyService);
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});
+
+// AFTER
+import { TestBed } from "@angular/core/testing";
+import { MyService } from "./my.service";
+import { MyComponent } from "./my.component";
+
+describe("MyComponent", () => {
+    let component: MyComponent;
+    const myServiceStub: Partial<MyService> = { getValue: () => "test" };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [MyComponent],
+            providers: [{ provide: MyService, useValue: myServiceStub }],
+        }).compileComponents();
+        const fixture = TestBed.createComponent(MyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});
+```
+
+### 2b. Service spec
+
+```ts
+// BEFORE
+import { MyService } from "./my.service";
+import { LoggerService } from "./logger.service";
+
+describe("MyService", () => {
+    let service: MyService;
+    const loggerStub = { warn: jasmine.createSpy() };
+
+    beforeEach(() => {
+        service = new MyService(loggerStub as LoggerService);
+    });
+    // ...
+});
+
+// AFTER
+import { TestBed } from "@angular/core/testing";
+import { MyService } from "./my.service";
+import { LoggerService } from "./logger.service";
+
+describe("MyService", () => {
+    let service: MyService;
+    const loggerStub = { warn: jasmine.createSpy() };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                MyService,
+                { provide: LoggerService, useValue: loggerStub },
+            ],
+        });
+        service = TestBed.inject(MyService);
+    });
+    // ...
+});
+```
+
+---
+
+## 3. Handling `providedIn: 'root'` services
+
+If the service under test is `@Injectable({ providedIn: 'root' })`, TestBed provides it automatically. You only need to override its deps:
+
+```ts
+TestBed.configureTestingModule({
+    providers: [
+        { provide: LoggerService, useValue: loggerStub },
+    ],
+});
+service = TestBed.inject(MyService);
+```
+
+---
+
+## 4. `standalone: true` components
+
+For standalone components, use `imports` instead of `declarations`:
+
+```ts
+await TestBed.configureTestingModule({
+    imports: [MyStandaloneComponent],
+    providers: [{ provide: MyService, useValue: myServiceStub }],
+}).compileComponents();
+```
+
+---
+
+## 5. Imports to add/update
+
+After migrating a spec from manual instantiation, ensure:
+
+- `TestBed` is imported from `@angular/core/testing`
+- `ComponentFixture` is imported if you need `fixture`
+- Remove `jasmine.createSpyObj` / manual stub constructor args that are no longer passed
+
+---
+
+## 6. Checklist
+
+- [ ] All `new MyClass(...)` calls replaced with TestBed pattern
+- [ ] All injected stubs moved to `providers` array
+- [ ] `TestBed.inject(MyService)` used for service retrieval
+- [ ] `fixture.detectChanges()` called after component creation if needed
+- [ ] `get_errors` run on the spec file — no TypeScript errors
+- [ ] Tests pass with `runTests` tool
diff --git a/packages/bits/demo/src/components/app/app.component.ts b/packages/bits/demo/src/components/app/app.component.ts
index b73d28601..51581e4e5 100644
--- a/packages/bits/demo/src/components/app/app.component.ts
+++ b/packages/bits/demo/src/components/app/app.component.ts
@@ -1,34 +1,34 @@
-// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to
-//  deal in the Software without restriction, including without limitation the
-//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-//  sell copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-//  all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-//  THE SOFTWARE.
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component, ViewEncapsulation, inject } from "@angular/core";
+
+import { ThemeSwitchService } from "@nova-ui/bits";
+
+@Component({
+    selector: "nui-app",
+    templateUrl: "app.component.html",
+    styleUrls: ["app.component.less"],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false,
+})
+export class AppComponent {
    themeSwitcherService = inject(ThemeSwitchService);
 
-import { Component, ViewEncapsulation } from "@angular/core";
-
-import { ThemeSwitchService } from "@nova-ui/bits";
-
-@Component({
-    selector: "nui-app",
-    templateUrl: "app.component.html",
-    styleUrls: ["app.component.less"],
-    encapsulation: ViewEncapsulation.None,
-    standalone: false,
-})
-export class AppComponent {
-    constructor(public themeSwitcherService: ThemeSwitchService) {}
-}
+}
diff --git a/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-basic/breadcrumb-basic.example.component.ts b/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-basic/breadcrumb-basic.example.component.ts
index a92cfb168..126a90038 100644
--- a/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-basic/breadcrumb-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-basic/breadcrumb-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, inject } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 
@@ -30,15 +30,13 @@ import { BreadcrumbItem, BreadcrumbStateService } from "@nova-ui/bits";
     standalone: false,
 })
 export class BreadcrumbBasicExampleComponent implements OnInit, OnDestroy {
+    private router = inject(Router);
+    private routerState = inject(ActivatedRoute);
+    private breadcrumbStateService = inject(BreadcrumbStateService);
+
     public breadcrumbSource: Array<BreadcrumbItem>;
     private routerSubscription: Subscription;
 
-    constructor(
-        private router: Router,
-        private routerState: ActivatedRoute,
-        private breadcrumbStateService: BreadcrumbStateService
-    ) {}
-
     public ngOnInit(): void {
         this.breadcrumbSource = this.breadcrumbStateService.getBreadcrumbState(
             this.routerState,
@@ -109,7 +107,9 @@ export class BreadcrumbBasicExampleComponent implements OnInit, OnDestroy {
     standalone: false,
 })
 export class BreadcrumbCountriesSubviewComponent {
-    constructor(private router: Router, private routerState: ActivatedRoute) {}
+    private router = inject(Router);
+    private routerState = inject(ActivatedRoute);
+
 
     public relativeNavigation(routerState: string): void {
         this.router.navigate([routerState], { relativeTo: this.routerState });
diff --git a/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-visual-test/breadcrumb-visual-test.component.ts b/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-visual-test/breadcrumb-visual-test.component.ts
index d42844255..4ef83509a 100644
--- a/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-visual-test/breadcrumb-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/breadcrumb/breadcrumb-visual-test/breadcrumb-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, inject } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 
@@ -30,15 +30,13 @@ import { BreadcrumbItem, BreadcrumbStateService } from "@nova-ui/bits";
     standalone: false,
 })
 export class BreadcrumbVisualTestComponent implements OnInit, OnDestroy {
+    private router = inject(Router);
+    private routerState = inject(ActivatedRoute);
+    private breadcrumbStateService = inject(BreadcrumbStateService);
+
     public breadcrumbSource: Array<BreadcrumbItem>;
     private routerSubscription: Subscription;
 
-    constructor(
-        private router: Router,
-        private routerState: ActivatedRoute,
-        private breadcrumbStateService: BreadcrumbStateService
-    ) {}
-
     public ngOnInit(): void {
         this.breadcrumbSource = this.breadcrumbStateService.getBreadcrumbState(
             this.routerState
@@ -89,7 +87,9 @@ export class BreadcrumbVisualTestComponent implements OnInit, OnDestroy {
     standalone: false,
 })
 export class BreadcrumbFirstSubviewLevelComponent {
-    constructor(private router: Router, private routerState: ActivatedRoute) {}
+    private router = inject(Router);
+    private routerState = inject(ActivatedRoute);
+
 
     goNext(): void {
         this.router.navigate(["second-subroute"], {
diff --git a/packages/bits/demo/src/components/demo/button/button-basic/button-basic.example.component.ts b/packages/bits/demo/src/components/demo/button/button-basic/button-basic.example.component.ts
index 61631b801..c7f8ae94f 100644
--- a/packages/bits/demo/src/components/demo/button/button-basic/button-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/button/button-basic/button-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ButtonBasicExampleComponent {
-    constructor(@Inject(ToastService) private toastService: ToastService) {}
+    private toastService = inject<ToastService>(ToastService);
+
 
     onClick(): void {
         this.toastService.info({
diff --git a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-basic/checkbox-group-basic.example.component.ts b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-basic/checkbox-group-basic.example.component.ts
index 8a0c2bd14..e51ac6d2a 100644
--- a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-basic/checkbox-group-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-basic/checkbox-group-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class CheckboxGroupBasicExampleComponent {
+    private toastService = inject(ToastService);
+
     public cabbage = $localize`Cabbage`;
     public potato = $localize`Potato`;
     public tomato = $localize`Tomato`;
@@ -35,8 +37,6 @@ export class CheckboxGroupBasicExampleComponent {
     public vegetables = [this.cabbage, this.potato, this.tomato, this.carrot];
     public selectedVegetables = [this.potato, this.tomato];
 
-    constructor(private toastService: ToastService) {}
-
     public isChecked(vegetable: string): boolean {
         return this.selectedVegetables.indexOf(vegetable) > -1;
     }
diff --git a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-in-form/checkbox-group-in-form.example.component.ts b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-in-form/checkbox-group-in-form.example.component.ts
index b77ca93c1..a62fe5349 100644
--- a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-in-form/checkbox-group-in-form.example.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-in-form/checkbox-group-in-form.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { ToastService } from "@nova-ui/bits";
@@ -29,6 +29,9 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class CheckboxGroupInFormExampleComponent {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject(ToastService);
+
     public cabbage = $localize`Cabbage`;
     public potato = $localize`Potato`;
     public tomato = $localize`Tomato`;
@@ -37,10 +40,7 @@ export class CheckboxGroupInFormExampleComponent {
     public selectedVegetables = [this.cabbage];
     public myForm;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private toastService: ToastService
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             checkboxGroup: this.formBuilder.control(
                 [this.cabbage, this.potato],
diff --git a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-test/checkbox-group-test.component.ts b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-test/checkbox-group-test.component.ts
index 002c114c1..246097d4f 100644
--- a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-test/checkbox-group-test.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-test/checkbox-group-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 @Component({
@@ -27,6 +27,8 @@ import { FormBuilder } from "@angular/forms";
     standalone: false,
 })
 export class CheckboxGroupTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public cabbage = "Cabbage";
     public potato = "Potato";
     public tomato = "Tomato";
@@ -37,7 +39,7 @@ export class CheckboxGroupTestComponent {
     public selectedVegetables = [this.potato, this.tomato, this.disabledOne];
     public testForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.testForm = this.formBuilder.group({
             checkboxGroup: this.formBuilder.control({
                 value: this.selectedVegetables,
diff --git a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-visual-test/checkbox-group-visual-test.component.ts b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-visual-test/checkbox-group-visual-test.component.ts
index 99951d580..856097bee 100644
--- a/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-visual-test/checkbox-group-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox-group/checkbox-group-visual-test/checkbox-group-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 @Component({
@@ -27,6 +27,8 @@ import { FormBuilder } from "@angular/forms";
     standalone: false,
 })
 export class CheckboxGroupVisualTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public cabbage = "Cabbage";
     public potato = "Potato";
     public tomato = "Tomato";
@@ -36,7 +38,7 @@ export class CheckboxGroupVisualTestComponent {
     public selectedVegetables = [this.potato, this.tomato, this.disabledOne];
     public testForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.testForm = this.formBuilder.group({
             checkboxGroup: this.formBuilder.control({
                 value: this.selectedVegetables,
diff --git a/packages/bits/demo/src/components/demo/checkbox/checkbox-in-form/checkbox-in-form.example.component.ts b/packages/bits/demo/src/components/demo/checkbox/checkbox-in-form/checkbox-in-form.example.component.ts
index f8041a6a9..442ceb428 100644
--- a/packages/bits/demo/src/components/demo/checkbox/checkbox-in-form/checkbox-in-form.example.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox/checkbox-in-form/checkbox-in-form.example.component.ts
@@ -17,7 +17,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
@@ -33,12 +33,10 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class CheckboxInFormExampleComponent implements OnInit {
-    public myForm: FormGroup<{ checkbox: FormControl<boolean | null> }>;
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject(ToastService);
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private toastService: ToastService
-    ) {}
+    public myForm: FormGroup<{ checkbox: FormControl<boolean | null> }>;
 
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
diff --git a/packages/bits/demo/src/components/demo/checkbox/checkbox-link/checkbox-link.example.component.ts b/packages/bits/demo/src/components/demo/checkbox/checkbox-link/checkbox-link.example.component.ts
index 73f1b0a6e..35caf0ac7 100644
--- a/packages/bits/demo/src/components/demo/checkbox/checkbox-link/checkbox-link.example.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox/checkbox-link/checkbox-link.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,9 +28,10 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class CheckboxLinkExampleComponent {
+    private toastService = inject(ToastService);
+
     public action(): boolean {
         this.toastService.warning({ message: $localize`Link clicked!` });
         return false;
     }
-    constructor(private toastService: ToastService) {}
 }
diff --git a/packages/bits/demo/src/components/demo/checkbox/checkbox-output/checkbox-output.example.component.ts b/packages/bits/demo/src/components/demo/checkbox/checkbox-output/checkbox-output.example.component.ts
index 4056bbe63..ece6db073 100644
--- a/packages/bits/demo/src/components/demo/checkbox/checkbox-output/checkbox-output.example.component.ts
+++ b/packages/bits/demo/src/components/demo/checkbox/checkbox-output/checkbox-output.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { CheckboxChangeEvent, ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { CheckboxChangeEvent, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class CheckboxOutputExampleComponent {
-    constructor(private toastService: ToastService) {}
+    private toastService = inject(ToastService);
+
 
     public onValueChanged($event: CheckboxChangeEvent): void {
         this.toastService.success({
diff --git a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option-multiselect/combobox-v2-create-option-multiselect.example.component.ts b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option-multiselect/combobox-v2-create-option-multiselect.example.component.ts
index 8b1217156..11e7c45c7 100644
--- a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option-multiselect/combobox-v2-create-option-multiselect.example.component.ts
+++ b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option-multiselect/combobox-v2-create-option-multiselect.example.component.ts
@@ -18,11 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    Component,
-    SecurityContext,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, SecurityContext, inject } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 
@@ -34,14 +30,14 @@ import { DomSanitizer } from "@angular/platform-browser";
     standalone: false,
 })
 export class ComboboxV2CreateOptionMultiselectExampleComponent {
+    private domSanitizer = inject(DomSanitizer);
+
     public options = Array.from({ length: 3 }).map(
         (_, i) => $localize`Item ${i}`
     );
 
     public comboboxControl = new FormControl<string[] | null>(null);
 
-    constructor(private domSanitizer: DomSanitizer) {}
-
     public createOption(optionName: string): void {
         const sanitizedOption = this.domSanitizer
             .sanitize(SecurityContext.HTML, optionName)
diff --git a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option/combobox-v2-create-option.example.component.ts b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option/combobox-v2-create-option.example.component.ts
index 37f3dd1e4..ee58b0a65 100644
--- a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option/combobox-v2-create-option.example.component.ts
+++ b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-create-option/combobox-v2-create-option.example.component.ts
@@ -18,12 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    Component,
-    SecurityContext,
-    ViewChild,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, SecurityContext, ViewChild, inject } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 
@@ -36,6 +31,8 @@ import { ComboboxV2Component } from "@nova-ui/bits";
     standalone: false,
 })
 export class ComboboxV2CreateOptionExampleComponent {
+    private domSanitizer = inject(DomSanitizer);
+
     public options = Array.from({ length: 3 }).map(
         (_, i) => $localize`Item ${i}`
     );
@@ -43,8 +40,6 @@ export class ComboboxV2CreateOptionExampleComponent {
 
     public comboboxControl = new FormControl<string | null>(null);
 
-    constructor(private domSanitizer: DomSanitizer) {}
-
     public createOption(option: string): void {
         const sanitizedOption = this.domSanitizer
             .sanitize(SecurityContext.HTML, option)
diff --git a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-reactive-form-field/combobox-v2-reactive-form-field.example.component.ts b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-reactive-form-field/combobox-v2-reactive-form-field.example.component.ts
index db6a09eac..ebe4b394e 100644
--- a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-reactive-form-field/combobox-v2-reactive-form-field.example.component.ts
+++ b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-reactive-form-field/combobox-v2-reactive-form-field.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -28,13 +28,15 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class ComboboxV2ReactiveFormFieldExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     public icons: any[] = ["check", "email", "execute"];
     public items = Array.from({ length: 100 }).map(
         (_, i) => $localize`Item ${i}`
     );
     public fancyForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             combobox: this.formBuilder.control("", Validators.required),
         });
diff --git a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-test/combobox-v2-test.example.component.ts b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-test/combobox-v2-test.example.component.ts
index 943129ae8..b6ddb6dbd 100644
--- a/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-test/combobox-v2-test.example.component.ts
+++ b/packages/bits/demo/src/components/demo/combobox-v2/combobox-v2-test/combobox-v2-test.example.component.ts
@@ -20,13 +20,7 @@
 
 import { OverlayConfig } from "@angular/cdk/overlay";
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    Component,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, OnInit, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FormBuilder, FormControl, Validators } from "@angular/forms";
 import { Observable, of, Subject } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
@@ -57,6 +51,10 @@ const defaultContainerHeight: number = 300;
     standalone: false,
 })
 export class ComboboxV2TestExampleComponent implements OnInit, AfterViewInit {
+    private formBuilder = inject(FormBuilder);
+    private dialogService = inject(DialogService);
+    private toastService = inject(ToastService);
+
     public virtualItems = Array.from({ length: 100000 }).map(
         (_, i) => $localize`Item ${i}`
     );
@@ -135,11 +133,7 @@ export class ComboboxV2TestExampleComponent implements OnInit, AfterViewInit {
     private viewport: CdkVirtualScrollViewport;
     @ViewChild("virtual") private virtualCombobox: ComboboxV2Component;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private dialogService: DialogService,
-        private toastService: ToastService
-    ) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             combobox: this.formBuilder.control("", Validators.required),
         });
diff --git a/packages/bits/demo/src/components/demo/combobox/combobox-reactive-form/combobox-reactive-form.example.component.ts b/packages/bits/demo/src/components/demo/combobox/combobox-reactive-form/combobox-reactive-form.example.component.ts
index 0e46ad0d2..217f7b99b 100644
--- a/packages/bits/demo/src/components/demo/combobox/combobox-reactive-form/combobox-reactive-form.example.component.ts
+++ b/packages/bits/demo/src/components/demo/combobox/combobox-reactive-form/combobox-reactive-form.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -31,6 +31,9 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ComboboxReactiveFormExampleComponent implements OnInit, OnDestroy {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
+
     public dataset = {
         items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
         selectedItem: "Item 2",
@@ -38,10 +41,7 @@ export class ComboboxReactiveFormExampleComponent implements OnInit, OnDestroy {
     public myForm;
     destroy$$ = new Subject<void>();
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             item: this.formBuilder.control(this.dataset.selectedItem, [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/combobox/combobox-test/combobox-test.component.ts b/packages/bits/demo/src/components/demo/combobox/combobox-test/combobox-test.component.ts
index ac07f9571..e5c2d2cce 100644
--- a/packages/bits/demo/src/components/demo/combobox/combobox-test/combobox-test.component.ts
+++ b/packages/bits/demo/src/components/demo/combobox/combobox-test/combobox-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import _cloneDeep from "lodash/cloneDeep";
 
@@ -30,6 +30,9 @@ import { ISelectChangedEvent, ISelectGroup, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ComboboxTestComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
+
     public dataset = [
         "Item 1",
         "Item 2",
@@ -151,10 +154,7 @@ export class ComboboxTestComponent implements OnInit {
     public errorState: boolean = true;
     public separatorsDisplayedItems = this.separatorsDataset.itemsInGroups;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             item: this.formBuilder.control(
                 this.reactiveFormDataset.selectedItem,
diff --git a/packages/bits/demo/src/components/demo/common/data-filter/data-filter-basic/data-filter-basic.example.component.ts b/packages/bits/demo/src/components/demo/common/data-filter/data-filter-basic/data-filter-basic.example.component.ts
index d78ef822e..54c788f8a 100644
--- a/packages/bits/demo/src/components/demo/common/data-filter/data-filter-basic/data-filter-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-filter/data-filter-basic/data-filter-basic.example.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    EventEmitter,
-    Injectable,
-    OnDestroy,
-    OnInit,
-    Output,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, EventEmitter, Injectable, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import moment from "moment/moment";
 import { Subject, Subscription } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -58,12 +48,12 @@ export class ListDatasource
     extends LocalFilteringDataSource<ListModel>
     implements OnDestroy
 {
+    private filterService = inject(DataFilterService);
+
     private onDestroy$ = new Subject<void>();
-    constructor(
-        searchService: SearchService,
-        private filterService: DataFilterService
-    ) {
-        super(searchService);
+    constructor() {
+        super();
+
         // Subscribe to service, and automatically unsubscribe upon `ngOnDestroy`
         this.filterService.filteringSubject
             .pipe(takeUntil(this.onDestroy$))
@@ -108,12 +98,11 @@ export class TableDatasource
     extends LocalFilteringDataSource<TableModel>
     implements OnDestroy
 {
+    private filterService = inject(DataFilterService);
+
     private onDestroy$ = new Subject<void>();
-    constructor(
-        searchService: SearchService,
-        private filterService: DataFilterService
-    ) {
-        super(searchService);
+    constructor() {
+        super();
         // Subscribe to service, and automatically unsubscribe upon `ngOnDestroy`
         this.filterService.filteringSubject
             .pipe(takeUntil(this.onDestroy$))
@@ -160,11 +149,11 @@ export class TableDatasource
     standalone: false,
 })
 export class DataFilterBasicExampleComponent implements AfterViewInit {
+    private filterService = inject(DataFilterService);
+
     @ViewChild("timeFramePicker")
     timeFramePicker: FilteringTimeFramePickerComponent;
 
-    constructor(private filterService: DataFilterService) {}
-
     public ngAfterViewInit(): void {
         // registering top-level filter which will be applied to all children
         this.filterService.registerFilter({
@@ -236,6 +225,9 @@ export class DataFilterBasicExampleComponent implements AfterViewInit {
     standalone: false,
 })
 export class NuiDataFilterTableComponent implements AfterViewInit, OnDestroy {
+    private dataFilter = inject(DataFilterService);
+    private dataSourceService = inject(TableDatasource);
+
     public dataSource?: any[] = [];
     public displayedColumns = ["position", "issue", "date"];
 
@@ -253,11 +245,6 @@ export class NuiDataFilterTableComponent implements AfterViewInit, OnDestroy {
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        private dataFilter: DataFilterService,
-        private dataSourceService: TableDatasource
-    ) {}
-
     public ngAfterViewInit(): void {
         // this filter will be applied in this component and NuiDataFilterListComponent
         this.dataFilter.registerFilter({
@@ -323,6 +310,9 @@ export class NuiDataFilterTableComponent implements AfterViewInit, OnDestroy {
     standalone: false,
 })
 export class NuiDataFilterListComponent implements AfterViewInit, OnDestroy {
+    private filterService = inject(DataFilterService);
+    private dataSourceService = inject(ListDatasource);
+
     public state: INovaFilteringOutputs = {
         repeat: {
             itemsSource: [],
@@ -333,11 +323,6 @@ export class NuiDataFilterListComponent implements AfterViewInit, OnDestroy {
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        private filterService: DataFilterService,
-        private dataSourceService: ListDatasource
-    ) {}
-
     public ngAfterViewInit(): void {
         // this filter will be applied only in this component
         this.filterService.registerFilter({
@@ -417,6 +402,8 @@ export class NuiDataFilterListComponent implements AfterViewInit, OnDestroy {
     standalone: false,
 })
 export class FilteringTimeFramePickerComponent implements IFilterPub, OnInit {
+    timeframeService = inject(TimeframeService);
+
     @Output() timeFrameChanged: EventEmitter<any> = new EventEmitter();
     public acceptedTimeframe: ITimeframe;
     public tf: ITimeframe = {
@@ -429,8 +416,6 @@ export class FilteringTimeFramePickerComponent implements IFilterPub, OnInit {
 
     public showFooter: boolean = false;
 
-    constructor(public timeframeService: TimeframeService) {}
-
     public closePopoverSubject = new Subject<void>();
     public openPopoverSubject = new Subject<void>();
 
diff --git a/packages/bits/demo/src/components/demo/common/data-filter/data-filter-isolated/data-filter-isolated.example.component.ts b/packages/bits/demo/src/components/demo/common/data-filter/data-filter-isolated/data-filter-isolated.example.component.ts
index 9851eb7d1..eb6128730 100644
--- a/packages/bits/demo/src/components/demo/common/data-filter/data-filter-isolated/data-filter-isolated.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-filter/data-filter-isolated/data-filter-isolated.example.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    EventEmitter,
-    OnDestroy,
-    OnInit,
-    Output,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import moment from "moment/moment";
 import { Subject, Subscription } from "rxjs";
 
@@ -54,11 +45,11 @@ import {
     standalone: false,
 })
 export class DataFilterIsolatedExampleComponent implements AfterViewInit {
+    private filterService = inject(DataFilterService);
+
     @ViewChild("timeFramePicker")
     timeFramePicker: FilteringTimeFramePickerComponent;
 
-    constructor(private filterService: DataFilterService) {}
-
     public ngAfterViewInit(): void {
         this.filterService.registerFilter({
             timeFramePicker: {
@@ -123,17 +114,15 @@ export class DataFilterIsolatedExampleComponent implements AfterViewInit {
 export class NuiDataFilterIsolatedTableComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataFilter = inject(DataFilterService);
+    private dataSourceService = inject(TableDatasource);
+
     public tableData?: any[] = [];
     public displayedColumns = ["position", "issue", "date"];
     @ViewChild("tableSearch") search: SearchComponent;
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        private dataFilter: DataFilterService,
-        private dataSourceService: TableDatasource
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataFilter.registerFilter({
             search: {
@@ -193,6 +182,9 @@ export class NuiDataFilterIsolatedTableComponent
 export class NuiDataFilterIsolatedListComponent
     implements AfterViewInit, OnDestroy
 {
+    private filterService = inject(DataFilterService);
+    private dataSourceService = inject(ListDatasource);
+
     public state: INovaFilteringOutputs = {
         repeat: {
             itemsSource: [],
@@ -201,11 +193,6 @@ export class NuiDataFilterIsolatedListComponent
     @ViewChild("listSearch") search: SearchComponent;
     private outputsSubscription: Subscription;
 
-    constructor(
-        private filterService: DataFilterService,
-        private dataSourceService: ListDatasource
-    ) {}
-
     public ngAfterViewInit(): void {
         this.filterService.registerFilter({
             search: {
diff --git a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-basic/client-side-basic.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-basic/client-side-basic.example.component.ts
index 880ba23d1..8b9534c10 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-basic/client-side-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-basic/client-side-basic.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -68,6 +62,9 @@ interface ExampleItem {
 export class DataSourceClientSideBasicExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<ExampleItem>>(ClientSideDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+
     public searchTerm = "";
     public page = 1;
 
@@ -89,10 +86,9 @@ export class DataSourceClientSideBasicExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<ExampleItem>,
-        public changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(RANDOM_ARRAY);
 
         this.filters = ["regular", "dark", "light"];
diff --git a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-custom-search/client-side-custom-search.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-custom-search/client-side-custom-search.example.component.ts
index 7e6e101aa..eeba04305 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-custom-search/client-side-custom-search.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-custom-search/client-side-custom-search.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Injectable,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, Injectable, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -80,6 +73,9 @@ export class ClientSideCustomSearchService extends SearchService {
 export class DataSourceClientSideCustomSearchExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<ExampleItem>>(ClientSideDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+
     public searchTerm = "";
     public page = 1;
 
@@ -101,10 +97,9 @@ export class DataSourceClientSideCustomSearchExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<ExampleItem>,
-        public changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(RANDOM_ARRAY);
 
         this.filters = ["regular", "dark", "light"];
diff --git a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-delayed/client-side-delayed.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-delayed/client-side-delayed.example.component.ts
index 5ac917938..ca431f54d 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-delayed/client-side-delayed.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-delayed/client-side-delayed.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subject, Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 
@@ -64,6 +58,9 @@ const INITIAL_ARRAY = [
 export class DataSourceClientSideDelayedExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<any>>(ClientSideDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+
     public searchTerm = "";
     public page = 1;
     public sorter = {
@@ -92,10 +89,9 @@ export class DataSourceClientSideDelayedExampleComponent
     @ViewChild("filteringSearch") filteringSearch: SearchComponent;
     @ViewChild("filteringSorter") filteringSorter: SorterComponent;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<any>,
-        public changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(INITIAL_ARRAY);
 
         this.filters = ["regular", "dark", "light"];
diff --git a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-filtering/client-side-filtering.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-filtering/client-side-filtering.example.component.ts
index 57efae29b..df59c09aa 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-filtering/client-side-filtering.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-filtering/client-side-filtering.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subscription } from "rxjs";
@@ -116,6 +110,8 @@ const RANDOM_ARRAY = [
 export class DataSourceClientSideFilteringExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    public dataSourceService = inject(DataSourceService) as LocalFilteringDataSource<ExampleItem>;
+
     public panelOptions: PanelOptions = {
         panelMode: "collapsible",
         heading: "Filters",
@@ -204,10 +200,7 @@ export class DataSourceClientSideFilteringExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: LocalFilteringDataSource<ExampleItem>
-    ) {
+    constructor() {
         this.dataSourceService.setData(RANDOM_ARRAY);
     }
 
diff --git a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-with-selection/client-side-with-selection.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-with-selection/client-side-with-selection.example.component.ts
index d9b748771..bb085ee86 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-with-selection/client-side-with-selection.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/client-side/client-side-with-selection/client-side-with-selection.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -53,6 +46,10 @@ interface IExampleItem {
 export class DataSourceWithSelectionExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<IExampleItem>>(ClientSideDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+    private listService = inject(ListService);
+
     public searchTerm = "";
     public page = 1;
 
@@ -64,11 +61,9 @@ export class DataSourceWithSelectionExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleItem>,
-        public changeDetection: ChangeDetectorRef,
-        private listService: ListService
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(getData());
     }
 
diff --git a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-basic/client-side-basic.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-basic/client-side-basic.example.component.ts
index d3aae9ccb..a9ef80d38 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-basic/client-side-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-basic/client-side-basic.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -72,6 +66,9 @@ interface ExampleItem {
 export class DepreacatedDataSourceClientSideBasicExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<LocalFilteringDataSource<ExampleItem>>(LocalFilteringDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+
     public searchTerm = "";
     public page = 1;
 
@@ -93,10 +90,9 @@ export class DepreacatedDataSourceClientSideBasicExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: LocalFilteringDataSource<ExampleItem>,
-        public changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(RANDOM_ARRAY);
 
         this.filters = ["regular", "dark", "light"];
diff --git a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-custom-search/client-side-custom-search.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-custom-search/client-side-custom-search.example.component.ts
index 81e03adac..df9041945 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-custom-search/client-side-custom-search.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-custom-search/client-side-custom-search.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Injectable,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, Injectable, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -84,6 +77,9 @@ export class ClientSideCustomSearchService extends SearchService {
 export class DepreacatedDataSourceClientSideCustomSearchExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<LocalFilteringDataSource<ExampleItem>>(LocalFilteringDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+
     public searchTerm = "";
     public page = 1;
 
@@ -105,10 +101,9 @@ export class DepreacatedDataSourceClientSideCustomSearchExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: LocalFilteringDataSource<ExampleItem>,
-        public changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(RANDOM_ARRAY);
 
         this.filters = ["regular", "dark", "light"];
diff --git a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-delayed/client-side-delayed.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-delayed/client-side-delayed.example.component.ts
index 4f89b5a7e..02087112b 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-delayed/client-side-delayed.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-delayed/client-side-delayed.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
@@ -69,6 +63,9 @@ const INITIAL_ARRAY = [
 export class DepreacatedDataSourceClientSideDelayedExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<LocalFilteringDataSource<any>>(LocalFilteringDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+
     public searchTerm = "";
     public page = 1;
     public sorter = {
@@ -97,10 +94,9 @@ export class DepreacatedDataSourceClientSideDelayedExampleComponent
     @ViewChild("filteringSearch") filteringSearch: SearchComponent;
     @ViewChild("filteringSorter") filteringSorter: SorterComponent;
 
-    constructor(
-        public dataSourceService: LocalFilteringDataSource<any>,
-        public changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(INITIAL_ARRAY);
 
         this.filters = ["regular", "dark", "light"];
diff --git a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-filtering/client-side-filtering.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-filtering/client-side-filtering.example.component.ts
index 833d4059e..5941cb5ca 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-filtering/client-side-filtering.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-filtering/client-side-filtering.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subscription } from "rxjs";
@@ -117,6 +111,8 @@ const RANDOM_ARRAY = [
 export class DepreacatedDataSourceClientSideFilteringExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject(DataSourceService) as DataSourceService<ExampleItem>;
+
     public panelOptions: PanelOptions = {
         panelMode: "collapsible",
         heading: "Filters",
@@ -205,10 +201,7 @@ export class DepreacatedDataSourceClientSideFilteringExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<ExampleItem>
-    ) {
+    constructor() {
         (
             this.dataSourceService as LocalFilteringDataSource<ExampleItem>
         ).setData(RANDOM_ARRAY);
diff --git a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-with-selection/client-side-with-selection.example.component.ts b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-with-selection/client-side-with-selection.example.component.ts
index bc667509b..68a39e0eb 100644
--- a/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-with-selection/client-side-with-selection.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/data-source/deprecated-client-side/client-side-with-selection/client-side-with-selection.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import isUndefined from "lodash/isUndefined";
 import { Subscription } from "rxjs";
 
@@ -58,6 +51,10 @@ interface IExampleItem {
 export class DepreacatedDataSourceWithSelectionExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<LocalFilteringDataSource<IExampleItem>>(LocalFilteringDataSource);
+    changeDetection = inject(ChangeDetectorRef);
+    private listService = inject(ListService);
+
     public searchTerm = "";
     public page = 1;
 
@@ -69,11 +66,9 @@ export class DepreacatedDataSourceWithSelectionExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: LocalFilteringDataSource<IExampleItem>,
-        public changeDetection: ChangeDetectorRef,
-        private listService: ListService
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(getData());
     }
 
diff --git a/packages/bits/demo/src/components/demo/common/edge-detection-service/edge-detection-service.example.component.ts b/packages/bits/demo/src/components/demo/common/edge-detection-service/edge-detection-service.example.component.ts
index 6b82a3797..5495e28d9 100644
--- a/packages/bits/demo/src/components/demo/common/edge-detection-service/edge-detection-service.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/edge-detection-service/edge-detection-service.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, ViewChild, inject } from "@angular/core";
 import _set from "lodash/set";
 
 import { EdgeDetectionService, IEdgeDetectionResult } from "@nova-ui/bits";
@@ -30,6 +30,8 @@ import { EdgeDetectionService, IEdgeDetectionResult } from "@nova-ui/bits";
     standalone: false,
 })
 export class EdgeDetectionServiceExampleComponent implements AfterViewInit {
+    private edgeDetectionService = inject(EdgeDetectionService);
+
     @ViewChild("parent") private parentElement: ElementRef;
     @ViewChild("placementElement") private toBePlacedElement: ElementRef;
 
@@ -60,8 +62,6 @@ export class EdgeDetectionServiceExampleComponent implements AfterViewInit {
         },
     };
 
-    constructor(private edgeDetectionService: EdgeDetectionService) {}
-
     public ngAfterViewInit(): void {
         this.update();
     }
diff --git a/packages/bits/demo/src/components/demo/common/event-propagation-service/event-propagation-service.example.component.ts b/packages/bits/demo/src/components/demo/common/event-propagation-service/event-propagation-service.example.component.ts
index acb781bc8..79bb94d4e 100644
--- a/packages/bits/demo/src/components/demo/common/event-propagation-service/event-propagation-service.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/event-propagation-service/event-propagation-service.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import {
     EventPropagationService,
@@ -33,11 +33,9 @@ import {
     standalone: false,
 })
 export class EventPropagationServiceExampleComponent {
-    constructor(
-        @Inject(EventPropagationService)
-        private eventPropagationService: IEventPropagationService,
-        @Inject(ToastService) private toastService: IToastService
-    ) {}
+    private eventPropagationService = inject<IEventPropagationService>(EventPropagationService);
+    private toastService = inject<IToastService>(ToastService);
+
 
     public handleClick(event: Event): void {
         const target = <Element>event.target;
diff --git a/packages/bits/demo/src/components/demo/common/search-service/search-service.example.component.ts b/packages/bits/demo/src/components/demo/common/search-service/search-service.example.component.ts
index 95af0b891..e7abc6e8f 100644
--- a/packages/bits/demo/src/components/demo/common/search-service/search-service.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/search-service/search-service.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import _includes from "lodash/includes";
 
 import { ISearchService, SearchService } from "@nova-ui/bits";
@@ -29,6 +29,8 @@ import { ISearchService, SearchService } from "@nova-ui/bits";
     standalone: false,
 })
 export class SearchServiceExampleComponent {
+    private searchService = inject<ISearchService>(SearchService);
+
     private now = new Date().getTime();
     private week = 7 * 24 * 60 * 60 * 1000; // milliseconds 7 * 24 * 60 * 60 * 1000
     public items = [
@@ -54,8 +56,6 @@ export class SearchServiceExampleComponent {
     public searchValue: any;
     public props = ["stringContainer", "numberContainer", "dateContainer"];
 
-    constructor(@Inject(SearchService) private searchService: ISearchService) {}
-
     public valuesChanged(values: any[]): void {
         this.props = [...values];
     }
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-checkbox-lazy/tree-checkbox-lazy.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-checkbox-lazy/tree-checkbox-lazy.component.ts
index 8061d49df..ee2354e2e 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-checkbox-lazy/tree-checkbox-lazy.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-checkbox-lazy/tree-checkbox-lazy.component.ts
@@ -24,13 +24,7 @@ import {
     CdkTree,
     NestedTreeControl,
 } from "@angular/cdk/tree";
-import {
-    Component,
-    Injectable,
-    IterableDiffer,
-    IterableDiffers,
-    ViewChild,
-} from "@angular/core";
+import { Component, Injectable, IterableDiffer, IterableDiffers, ViewChild, inject } from "@angular/core";
 import { Observable, of } from "rxjs";
 import { delay } from "rxjs/operators";
 
@@ -104,6 +98,9 @@ export class HttpMock {
     standalone: false,
 })
 export class TreeCheckboxLazyComponent {
+    private http = inject(HttpMock);
+    private differ = inject(IterableDiffers);
+
     public selectionModel = new SelectionModel<ServerNode>(true);
     treeControl = new NestedTreeControl<ServerNode>(node => node.children);
     dataSource = new ArrayDataSource(TREE_DATA);
@@ -112,8 +109,6 @@ export class TreeCheckboxLazyComponent {
 
     hasChild = (_: number, node: ServerNode): boolean => !!node.length;
 
-    constructor(private http: HttpMock, private differ: IterableDiffers) {}
-
     loadMore(node: any, nestedNode: CdkNestedTreeNode<any>): void {
         const differ: IterableDiffer<ServerNode> = this.differ
             .find(node.children)
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-lazy/tree-lazy.example.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-lazy/tree-lazy.example.component.ts
index a7229e894..3f18e78f7 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-lazy/tree-lazy.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-lazy/tree-lazy.example.component.ts
@@ -24,13 +24,7 @@ import {
     CdkTree,
     NestedTreeControl,
 } from "@angular/cdk/tree";
-import {
-    Component,
-    Injectable,
-    IterableDiffer,
-    IterableDiffers,
-    ViewChild,
-} from "@angular/core";
+import { Component, Injectable, IterableDiffer, IterableDiffers, ViewChild, inject } from "@angular/core";
 import { Observable, of } from "rxjs";
 import { delay } from "rxjs/operators";
 
@@ -78,15 +72,16 @@ class HttpMock {
     standalone: false,
 })
 export class TreeLazyExampleComponent {
-    treeControl = new NestedTreeControl<FoodNode>(node => node.children);
+    private http = inject(HttpMock);
+    private differ = inject(IterableDiffers);
+
+    treeControl = new NestedTreeControl<FoodNode>((node) => node.children);
     dataSource = new ArrayDataSource(TREE_DATA);
 
     @ViewChild(CdkTree) private cdkTree: CdkTree<FoodNode>;
 
     hasChild = (_: number, node: FoodNode): boolean => !!node.length;
 
-    constructor(private http: HttpMock, private differ: IterableDiffers) {}
-
     loadMore(node: FoodNode, nestedNode: CdkNestedTreeNode<any>): void {
         const differ: IterableDiffer<FoodNode> = this.differ
             .find(node.children)
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-leaf-pagination/tree-leaf-pagination.example.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-leaf-pagination/tree-leaf-pagination.example.component.ts
index 8fbeb93d4..9fa7d300e 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-leaf-pagination/tree-leaf-pagination.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-leaf-pagination/tree-leaf-pagination.example.component.ts
@@ -24,12 +24,7 @@ import {
     CdkTree,
     NestedTreeControl,
 } from "@angular/cdk/tree";
-import {
-    Component,
-    IterableDiffer,
-    IterableDiffers,
-    ViewChild,
-} from "@angular/core";
+import { Component, IterableDiffer, IterableDiffers, ViewChild, inject } from "@angular/core";
 
 import { DOCUMENT_CLICK_EVENT, EventBusService, expand } from "@nova-ui/bits";
 
@@ -75,6 +70,10 @@ const TREE_DATA: FoodNode[] = [
     standalone: false,
 })
 export class TreeLeafPaginationExampleComponent {
+    private http = inject(HttpMockService);
+    private differ = inject(IterableDiffers);
+    private eventBusService = inject(EventBusService);
+
     public pageSize = 25; // used for 'nui-paginator'
     public nodesTotalItems: { [key: string]: number } = {};
 
@@ -85,12 +84,6 @@ export class TreeLeafPaginationExampleComponent {
 
     hasChild = (_: number, node: FoodNode): boolean => !!node.children;
 
-    constructor(
-        private http: HttpMockService,
-        private differ: IterableDiffers,
-        private eventBusService: EventBusService
-    ) {}
-
     /** Load first page on first open */
     public onToggleClick(
         node: FoodNode,
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-load-more/tree-load-more.example.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-load-more/tree-load-more.example.component.ts
index bf773c5f0..6660af95a 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-load-more/tree-load-more.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-load-more/tree-load-more.example.component.ts
@@ -24,12 +24,7 @@ import {
     CdkTree,
     NestedTreeControl,
 } from "@angular/cdk/tree";
-import {
-    Component,
-    IterableDiffer,
-    IterableDiffers,
-    ViewChild,
-} from "@angular/core";
+import { Component, IterableDiffer, IterableDiffers, ViewChild, inject } from "@angular/core";
 
 import { DOCUMENT_CLICK_EVENT, EventBusService, expand } from "@nova-ui/bits";
 
@@ -77,6 +72,10 @@ const TREE_DATA: FoodNode[] = [
     standalone: false,
 })
 export class TreeLoadMoreExampleComponent {
+    private http = inject(HttpMockService);
+    private differ = inject(IterableDiffers);
+    private eventBusService = inject(EventBusService);
+
     public pageSize = 10;
     public remainingItemsCount: { [key: string]: number } = {};
 
@@ -87,12 +86,6 @@ export class TreeLoadMoreExampleComponent {
 
     hasChild = (_: number, node: FoodNode): boolean => !!node.children;
 
-    constructor(
-        private http: HttpMockService,
-        private differ: IterableDiffers,
-        private eventBusService: EventBusService
-    ) {}
-
     /** Load first page on first open */
     public onToggleClick(
         node: FoodNode,
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-show-all-dialog/tree-show-all-dialog.example.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-show-all-dialog/tree-show-all-dialog.example.component.ts
index 85904be44..45a0c3b85 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-show-all-dialog/tree-show-all-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-show-all-dialog/tree-show-all-dialog.example.component.ts
@@ -25,19 +25,7 @@ import {
     NestedTreeControl,
 } from "@angular/cdk/tree";
 import { HttpClient, HttpParams } from "@angular/common/http";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    Injectable,
-    Input,
-    IterableDiffer,
-    IterableDiffers,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Injectable, Input, IterableDiffer, IterableDiffers, OnDestroy, ViewChild, inject } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import isNil from "lodash/isNil";
 import { firstValueFrom, Observable, of, Subject } from "rxjs";
@@ -142,15 +130,14 @@ export class VirtualScrollListDataSource<T = any>
     extends DataSourceService<T>
     implements IDataSource
 {
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     // cache used to store our previous fetched results while scrolling
     // and more data is automatically fetched from the backend
     private cache = Array.from<IServer>({ length: 0 });
     private previousFilters: INovaFilters;
 
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     public async getFilteredData(
         filters: INovaFilters
     ): Promise<INovaFilteringOutputs> {
@@ -266,6 +253,11 @@ export class VirtualScrollListDataSource<T = any>
     standalone: false,
 })
 export class TreeShowAllDialogExampleComponent implements OnDestroy {
+    private virtualScrollListDataSource = inject(VirtualScrollListDataSource);
+    private differ = inject(IterableDiffers);
+    private eventBusService = inject(EventBusService);
+    private dialogService = inject(DialogService);
+
     private activeDialogRef: NuiDialogRef;
     private get activeDialogComponent(): TreeDialogContentExampleComponent {
         return this.activeDialogRef.componentInstance;
@@ -283,13 +275,6 @@ export class TreeShowAllDialogExampleComponent implements OnDestroy {
     public hasChild = (_: number, node: IServerNode): boolean =>
         !!node.children;
 
-    constructor(
-        private virtualScrollListDataSource: VirtualScrollListDataSource,
-        private differ: IterableDiffers,
-        private eventBusService: EventBusService,
-        private dialogService: DialogService
-    ) {}
-
     public showAll(node: IServerNode): void {
         // setup the Dialog
         this.activeDialogRef = this.dialogService.open(
@@ -472,6 +457,10 @@ export class TreeShowAllDialogExampleComponent implements OnDestroy {
     standalone: false,
 })
 export class TreeDialogContentExampleComponent implements AfterViewInit {
+    cdRef = inject(ChangeDetectorRef);
+    viewPortManager = inject(VirtualViewportManager);
+    activeDialog = inject(NuiActiveDialog);
+
     @Input() items: IServerNode[] = [];
     @Input() isLoading: boolean = false;
 
@@ -483,12 +472,6 @@ export class TreeDialogContentExampleComponent implements AfterViewInit {
     @ViewChild(RepeatComponent)
     public repeat: RepeatComponent;
 
-    constructor(
-        public cdRef: ChangeDetectorRef,
-        public viewPortManager: VirtualViewportManager,
-        @Inject(NuiActiveDialog) public activeDialog: any
-    ) {}
-
     public ngAfterViewInit(): void {
         this.viewPortManager.setViewport(this.repeat.viewportRef);
     }
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-visual-test/tree-paginator-test/tree-paginator-test.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-visual-test/tree-paginator-test/tree-paginator-test.component.ts
index 1a1d74605..cc2272be8 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-visual-test/tree-paginator-test/tree-paginator-test.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-visual-test/tree-paginator-test/tree-paginator-test.component.ts
@@ -24,12 +24,7 @@ import {
     CdkTree,
     NestedTreeControl,
 } from "@angular/cdk/tree";
-import {
-    Component,
-    IterableDiffer,
-    IterableDiffers,
-    ViewChild,
-} from "@angular/core";
+import { Component, IterableDiffer, IterableDiffers, ViewChild, inject } from "@angular/core";
 
 import { DOCUMENT_CLICK_EVENT, EventBusService, expand } from "@nova-ui/bits";
 
@@ -45,6 +40,10 @@ import { FoodNode, HttpMock, IApiResponse, TREE_DATA_PAGINATOR } from "../data";
     standalone: false,
 })
 export class TreePaginatorTestComponent {
+    private http = inject(HttpMock);
+    private differ = inject(IterableDiffers);
+    private eventBusService = inject(EventBusService);
+
     public pageSize = 10; // used for 'nui-paginator'
     public nodesTotalItems: { [key: string]: number } = {};
 
@@ -55,12 +54,6 @@ export class TreePaginatorTestComponent {
 
     hasChild = (_: number, node: FoodNode): boolean => !!node.children;
 
-    constructor(
-        private http: HttpMock,
-        private differ: IterableDiffers,
-        private eventBusService: EventBusService
-    ) {}
-
     /** Load first page on first open */
     public onToggleClick(
         node: FoodNode,
diff --git a/packages/bits/demo/src/components/demo/common/tree/tree-with-additional-content/tree-with-additional-content.example.component.ts b/packages/bits/demo/src/components/demo/common/tree/tree-with-additional-content/tree-with-additional-content.example.component.ts
index b4eebb4c6..b146194d7 100644
--- a/packages/bits/demo/src/components/demo/common/tree/tree-with-additional-content/tree-with-additional-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/tree/tree-with-additional-content/tree-with-additional-content.example.component.ts
@@ -20,7 +20,7 @@
 
 import { ArrayDataSource } from "@angular/cdk/collections";
 import { NestedTreeControl } from "@angular/cdk/tree";
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { DOCUMENT_CLICK_EVENT, EventBusService, expand } from "@nova-ui/bits";
 
@@ -68,7 +68,9 @@ const TREE_DATA: FoodNode[] = [
     standalone: false,
 })
 export class TreeWithAdditionalContentExampleComponent {
-    treeControl = new NestedTreeControl<FoodNode>(node => node.children);
+    private eventBusService = inject(EventBusService);
+
+    treeControl = new NestedTreeControl<FoodNode>((node) => node.children);
     dataSource = new ArrayDataSource(TREE_DATA);
 
     public items = ["Item 1", "Item 2", "Item 3"];
@@ -76,8 +78,6 @@ export class TreeWithAdditionalContentExampleComponent {
     public hasChild = (_: number, node: FoodNode): boolean =>
         !!node.children?.length;
 
-    constructor(private eventBusService: EventBusService) {}
-
     public onToggleClick(): void {
         this.eventBusService
             .getStream(DOCUMENT_CLICK_EVENT)
diff --git a/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-basic/unit-conversion-service-basic.example.component.ts b/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-basic/unit-conversion-service-basic.example.component.ts
index 82996b46d..9b467f3f7 100644
--- a/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-basic/unit-conversion-service-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-basic/unit-conversion-service-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IUnitConversionResult,
@@ -33,7 +33,8 @@ import {
     standalone: false,
 })
 export class UnitConversionServiceBasicExampleComponent implements OnInit {
-    constructor(public unitConversionService: UnitConversionService) {}
+    unitConversionService = inject(UnitConversionService);
+
 
     public num: number;
     public conversionDisplay: string;
diff --git a/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-separate-unit-display/unit-conversion-service-separate-unit-display.example.component.ts b/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-separate-unit-display/unit-conversion-service-separate-unit-display.example.component.ts
index a53518ff0..cc1166e03 100644
--- a/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-separate-unit-display/unit-conversion-service-separate-unit-display.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/unit-conversion-service/unit-conversion-service-separate-unit-display/unit-conversion-service-separate-unit-display.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IUnitConversionResult,
@@ -38,7 +38,8 @@ import {
 export class UnitConversionServiceSeparateUnitDisplayExampleComponent
     implements OnInit
 {
-    constructor(public unitConversionService: UnitConversionService) {}
+    unitConversionService = inject(UnitConversionService);
+
 
     public num: number;
     public valueDisplay: string;
diff --git a/packages/bits/demo/src/components/demo/common/viewport-manager/repeat-with-viewport-manager/repeat-with-viewport-manager.example.component.ts b/packages/bits/demo/src/components/demo/common/viewport-manager/repeat-with-viewport-manager/repeat-with-viewport-manager.example.component.ts
index 18d5197e4..062f16c6d 100644
--- a/packages/bits/demo/src/components/demo/common/viewport-manager/repeat-with-viewport-manager/repeat-with-viewport-manager.example.component.ts
+++ b/packages/bits/demo/src/components/demo/common/viewport-manager/repeat-with-viewport-manager/repeat-with-viewport-manager.example.component.ts
@@ -19,15 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Injectable,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, Injectable, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import isNil from "lodash/isNil";
 import { BehaviorSubject, firstValueFrom, Observable, of, Subject } from "rxjs";
@@ -106,6 +98,9 @@ export class GBooksDataSourceWithSearch
     extends DataSourceService<IGBookFrontendDTO>
     implements IDataSource
 {
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public busy = new BehaviorSubject(false);
 
     // cache used to store our previous fetched results while scrolling
@@ -115,7 +110,7 @@ export class GBooksDataSourceWithSearch
 
     private applyFilters$ = new Subject<IFilters>();
 
-    constructor(private logger: LoggerService, private http: HttpClient) {
+    constructor() {
         super();
 
         this.applyFilters$
@@ -249,6 +244,10 @@ export class GBooksDataSourceWithSearch
 export class RepeatWithViewportManagerExampleComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private viewportManager = inject(VirtualViewportManager);
+    private cd = inject(ChangeDetectorRef);
+    private dataSource = inject(GBooksDataSourceWithSearch);
+
     public books$ = new BehaviorSubject<IGBookBackendDTO[]>([]);
     public busy: boolean = false;
 
@@ -257,12 +256,6 @@ export class RepeatWithViewportManagerExampleComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        private viewportManager: VirtualViewportManager,
-        private cd: ChangeDetectorRef,
-        private dataSource: GBooksDataSourceWithSearch
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-test/time-frame-bar-test.component.ts b/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-test/time-frame-bar-test.component.ts
index 1e9813859..dc26ddb24 100644
--- a/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-test/time-frame-bar-test.component.ts
+++ b/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-test/time-frame-bar-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import moment from "moment/moment";
 
 import { HistoryStorage, ITimeframe } from "@nova-ui/bits";
@@ -30,12 +30,14 @@ import { HistoryStorage, ITimeframe } from "@nova-ui/bits";
     standalone: false,
 })
 export class TimeFrameBarTestComponent {
+    history = inject<HistoryStorage<ITimeframe>>(HistoryStorage);
+
     private baseDate = moment([2018, 5, 1, 15, 0, 0]);
     public fromDate = this.baseDate.clone().subtract(1, "month");
     public toDate = moment([2050]);
     public timeFrame: ITimeframe;
 
-    constructor(public history: HistoryStorage<ITimeframe>) {
+    constructor() {
         this.resetDefault();
     }
 
diff --git a/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-visual/time-frame-bar-visual.component.ts b/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-visual/time-frame-bar-visual.component.ts
index 13090694d..6ce003306 100644
--- a/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-visual/time-frame-bar-visual.component.ts
+++ b/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-visual/time-frame-bar-visual.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import moment from "moment/moment";
 
 import { HistoryStorage, ITimeframe, TimeframeService } from "@nova-ui/bits";
@@ -55,13 +55,13 @@ class TestBar {
     standalone: false,
 })
 export class TimeFrameBarVisualTestComponent implements OnInit {
+    private timeframeService = inject(TimeframeService);
+
     public bars: TestBar[] = ["first", "second", "third"].map(
         id => new TestBar(id)
     );
     public barNoQuickPick = new TestBar("bar-no-quick-pick");
 
-    constructor(private timeframeService: TimeframeService) {}
-
     public ngOnInit(): void {
         setTimeout(() => {
             // No zoom on bar[0]
diff --git a/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-zoom/time-frame-bar-zoom.example.component.ts b/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-zoom/time-frame-bar-zoom.example.component.ts
index b4808c5aa..bf542f7f4 100644
--- a/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-zoom/time-frame-bar-zoom.example.component.ts
+++ b/packages/bits/demo/src/components/demo/convenience/time-frame-bar/time-frame-bar-zoom/time-frame-bar-zoom.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import moment, { DurationInputArg2, Moment } from "moment/moment";
 
 import { HistoryStorage, ITimeframe } from "@nova-ui/bits";
@@ -30,6 +30,8 @@ import { HistoryStorage, ITimeframe } from "@nova-ui/bits";
     standalone: false,
 })
 export class TimeFrameBarZoomExampleComponent implements OnInit {
+    history = inject<HistoryStorage<ITimeframe>>(HistoryStorage);
+
     public minDate: Moment;
     public maxDate: Moment;
 
@@ -43,9 +45,6 @@ export class TimeFrameBarZoomExampleComponent implements OnInit {
         "minutes",
     ];
 
-    // Inject an instance of HistoryStorage
-    constructor(public history: HistoryStorage<ITimeframe>) {}
-
     public ngOnInit(): void {
         // Set the minimum and maximum selectable dates
         this.minDate = this.baseDate.clone().subtract(1, "months");
diff --git a/packages/bits/demo/src/components/demo/date-picker/date-picker-insignificant/date-picker-insignificant.example.component.ts b/packages/bits/demo/src/components/demo/date-picker/date-picker-insignificant/date-picker-insignificant.example.component.ts
index 4a5143e54..e965384cc 100644
--- a/packages/bits/demo/src/components/demo/date-picker/date-picker-insignificant/date-picker-insignificant.example.component.ts
+++ b/packages/bits/demo/src/components/demo/date-picker/date-picker-insignificant/date-picker-insignificant.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import moment, { Moment } from "moment/moment";
 
@@ -30,12 +30,12 @@ import { IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DatePickerInsignificantExampleComponent {
+    private toastService = inject<IToastService>(ToastService);
+
     public dt: Moment = moment().endOf("day");
     public selectedDate: Date;
     public control = new FormControl(this.dt, { nonNullable: true });
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public dateChanged(event: Moment): void {
         this.selectedDate = new Date(event.valueOf());
         this.toastService.info({
diff --git a/packages/bits/demo/src/components/demo/date-picker/date-picker-test/date-picker-test.component.ts b/packages/bits/demo/src/components/demo/date-picker/date-picker-test/date-picker-test.component.ts
index 652a49139..9ed1c52dd 100644
--- a/packages/bits/demo/src/components/demo/date-picker/date-picker-test/date-picker-test.component.ts
+++ b/packages/bits/demo/src/components/demo/date-picker/date-picker-test/date-picker-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import moment, { Moment } from "moment/moment";
 
@@ -30,6 +30,8 @@ import { IDatePickerDisabledDate } from "@nova-ui/bits";
     standalone: false,
 })
 export class DatePickerTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public dt: Moment;
     public dtPreserve: Moment;
     public minDate: Moment;
@@ -47,7 +49,7 @@ export class DatePickerTestComponent {
     public dateDisabled: IDatePickerDisabledDate[];
     public todayDateDisabled: IDatePickerDisabledDate[];
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.reactiveDatepickerForm = this.formBuilder.group({
             datePicker: this.formBuilder.control(moment()),
         });
diff --git a/packages/bits/demo/src/components/demo/date-picker/date-picker-value-change/date-picker-value-change.example.component.ts b/packages/bits/demo/src/components/demo/date-picker/date-picker-value-change/date-picker-value-change.example.component.ts
index eb6b276c9..240eb0411 100644
--- a/packages/bits/demo/src/components/demo/date-picker/date-picker-value-change/date-picker-value-change.example.component.ts
+++ b/packages/bits/demo/src/components/demo/date-picker/date-picker-value-change/date-picker-value-change.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { IToastService, ToastService } from "@nova-ui/bits";
@@ -29,9 +29,9 @@ import { IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DatePickerValueChangeExampleComponent {
-    public selectedDate: Date = new Date(moment().valueOf());
+    private toastService = inject<IToastService>(ToastService);
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    public selectedDate: Date = new Date(moment().valueOf());
 
     public dateChanged(event: Moment): void {
         this.selectedDate = new Date(event.valueOf());
diff --git a/packages/bits/demo/src/components/demo/date-picker/date-picker-visual-test/date-picker-visual-test.component.ts b/packages/bits/demo/src/components/demo/date-picker/date-picker-visual-test/date-picker-visual-test.component.ts
index 73c843e04..5dc358f8a 100644
--- a/packages/bits/demo/src/components/demo/date-picker/date-picker-visual-test/date-picker-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/date-picker/date-picker-visual-test/date-picker-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import moment, { Moment } from "moment/moment";
 
@@ -28,6 +28,8 @@ import moment, { Moment } from "moment/moment";
     standalone: false,
 })
 export class DatePickerVisualTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public initDate: Moment = moment().set({
         year: 2017,
         month: 11,
@@ -38,7 +40,7 @@ export class DatePickerVisualTestComponent {
     public emptyDate = moment("");
     public myForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             datePickerFormControl: this.formBuilder.control(this.emptyDate, [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-dialog/date-time-picker-dialog.example.component.ts b/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-dialog/date-time-picker-dialog.example.component.ts
index 9138b427b..cd5e23480 100644
--- a/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-dialog/date-time-picker-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-dialog/date-time-picker-dialog.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { DialogService } from "@nova-ui/bits";
@@ -29,10 +29,12 @@ import { DialogService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DateTimePickerDialogExampleComponent {
+    private dialogService = inject<DialogService>(DialogService);
+
     public dt: Moment;
     public selectedDate: Date;
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {
+    constructor() {
         this.dt = moment();
         this.selectedDate = new Date(this.dt.valueOf());
     }
diff --git a/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-visual-test/date-time-picker-visual-test.component.ts b/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-visual-test/date-time-picker-visual-test.component.ts
index fa4fa6f03..366c2a136 100644
--- a/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-visual-test/date-time-picker-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/date-time-picker/date-time-picker-visual-test/date-time-picker-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { DialogService } from "@nova-ui/bits";
@@ -29,12 +29,12 @@ import { DialogService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DateTimePickerVisualTestComponent {
+    private dialogService = inject<DialogService>(DialogService);
+
     public dt: Moment = moment("2018-02-02");
     public minDate: Moment = this.dt.clone().date(1);
     public maxDate: Moment = this.dt.clone().date(20);
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public open(content: TemplateRef<string>): void {
         this.dialogService.open(content, { size: "sm" });
     }
diff --git a/packages/bits/demo/src/components/demo/dialog/component-as-content/component-as-content.example.component.ts b/packages/bits/demo/src/components/demo/dialog/component-as-content/component-as-content.example.component.ts
index b526977cf..6f49082a8 100644
--- a/packages/bits/demo/src/components/demo/dialog/component-as-content/component-as-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/component-as-content/component-as-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { DialogService } from "@nova-ui/bits";
 
@@ -30,7 +30,8 @@ import { DialogContentExampleComponent } from "./dialog-content.example.componen
     standalone: false,
 })
 export class ComponentAsContentExampleComponent {
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
+    private dialogService = inject<DialogService>(DialogService);
+
 
     public openWithComponent(): void {
         const dialogRef = this.dialogService.open(
diff --git a/packages/bits/demo/src/components/demo/dialog/component-as-content/dialog-content.example.component.ts b/packages/bits/demo/src/components/demo/dialog/component-as-content/dialog-content.example.component.ts
index 271d6847d..6dfe68b30 100644
--- a/packages/bits/demo/src/components/demo/dialog/component-as-content/dialog-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/component-as-content/dialog-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, Input } from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 
 import { IToastService, NuiActiveDialog, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { IToastService, NuiActiveDialog, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogContentExampleComponent {
-    @Input() name: string;
+    activeDialog = inject(NuiActiveDialog);
+    private toastService = inject<IToastService>(ToastService);
 
-    constructor(
-        @Inject(NuiActiveDialog) public activeDialog: any,
-        @Inject(ToastService) private toastService: IToastService
-    ) {}
+    @Input() name: string;
 
     public onButtonClick(title: string): void {
         title === "Action" ? this.actionDone() : this.actionCanceled();
diff --git a/packages/bits/demo/src/components/demo/dialog/confirmation-dialog/confirmation-dialog.example.component.ts b/packages/bits/demo/src/components/demo/dialog/confirmation-dialog/confirmation-dialog.example.component.ts
index bc4e49ef2..adb0dd919 100644
--- a/packages/bits/demo/src/components/demo/dialog/confirmation-dialog/confirmation-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/confirmation-dialog/confirmation-dialog.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { DialogService, ToastService } from "@nova-ui/bits";
 
@@ -28,10 +28,9 @@ import { DialogService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ConfirmationDialogExampleComponent {
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
+
 
     public openInfo(): void {
         this.dialogService
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-actions-before-closure/dialog-actions-before-closure.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-actions-before-closure/dialog-actions-before-closure.example.component.ts
index 87ce9ff6e..375cf0918 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-actions-before-closure/dialog-actions-before-closure.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-actions-before-closure/dialog-actions-before-closure.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 import { take, takeUntil } from "rxjs/operators";
 
 import { DialogService, NuiDialogEvent, NuiDialogRef } from "@nova-ui/bits";
@@ -29,9 +29,9 @@ import { DialogService, NuiDialogEvent, NuiDialogRef } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogActionBeforeClosureExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject(DialogService);
 
-    constructor(private dialogService: DialogService) {}
+    private activeDialog: NuiDialogRef;
 
     public open(content: TemplateRef<string>): void {
         // You can return 'false' from the optional beforeDismiss function anytime you want to prevent the dialog from closing.
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-after-opened/dialog-after-opened.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-after-opened/dialog-after-opened.example.component.ts
index e6bc2d303..3749e9288 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-after-opened/dialog-after-opened.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-after-opened/dialog-after-opened.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -32,10 +32,9 @@ import { DialogContentExampleComponent } from "../component-as-content/dialog-co
     standalone: false,
 })
 export class DialogAfterOpenedExampleComponent implements OnInit, OnDestroy {
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
+
 
     public destroy$$: Subject<void> = new Subject<void>();
 
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-custom-class/dialog-custom-class.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-custom-class/dialog-custom-class.example.component.ts
index c25510d9a..6b73062dd 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-custom-class/dialog-custom-class.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-custom-class/dialog-custom-class.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogCustomClassExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private activeDialog: NuiDialogRef;
 
     public open(content: TemplateRef<string>): void {
         this.activeDialog = this.dialogService.open(content, {
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay-with-date-time-picker/dialog-inside-overlay-with-date-time-picker.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay-with-date-time-picker/dialog-inside-overlay-with-date-time-picker.example.component.ts
index 90e05ddfa..8dcc51849 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay-with-date-time-picker/dialog-inside-overlay-with-date-time-picker.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay-with-date-time-picker/dialog-inside-overlay-with-date-time-picker.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { DialogService, NuiDialogRef } from "@nova-ui/bits";
@@ -30,12 +30,14 @@ import { DialogService, NuiDialogRef } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogInsideOverlayWithDateTimePickerExampleComponent {
+    private dialogService = inject(DialogService);
+
     public dt: Moment;
     public selectedDate: Date;
 
     private activeDialog: NuiDialogRef;
 
-    constructor(private dialogService: DialogService) {
+    constructor() {
         this.dt = moment();
         this.selectedDate = new Date(this.dt.valueOf());
     }
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay/dialog-inside-overlay.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay/dialog-inside-overlay.example.component.ts
index e0cd3bbbd..a2e302331 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay/dialog-inside-overlay.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-inside-overlay/dialog-inside-overlay.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { DialogService, NuiDialogRef } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogInsideOverlayExampleComponent {
+    private dialogService = inject(DialogService);
+
     public options1 = Array.from({ length: 25 }).map(
         (_, i) => $localize`Item ${i}`
     );
@@ -37,8 +39,6 @@ export class DialogInsideOverlayExampleComponent {
 
     private activeDialog: NuiDialogRef;
 
-    constructor(private dialogService: DialogService) {}
-
     /**
      * Notice that the 'useOverlay' option is being passed in here
      */
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-keyboard/dialog-with-keyboard.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-keyboard/dialog-with-keyboard.example.component.ts
index d9be01bc0..5289278ce 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-keyboard/dialog-with-keyboard.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-keyboard/dialog-with-keyboard.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogWithKeyboardExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private activeDialog: NuiDialogRef;
 
     public openWith(content: TemplateRef<string>): void {
         this.activeDialog = this.dialogService.open(content, { size: "sm" });
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-position/dialog-position.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-position/dialog-position.example.component.ts
index 277a242a7..a3445dc42 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-position/dialog-position.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-position/dialog-position.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,14 +28,12 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogPositionExampleComponent {
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
+
     public isResponsiveMode = false;
     private activeDialog: NuiDialogRef;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
-
     public open(content: TemplateRef<string>, options: any): void {
         this.isResponsiveMode = options.isResponsiveMode;
         this.activeDialog = this.dialogService.open(content);
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-severity/dialog-severity.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-severity/dialog-severity.example.component.ts
index addd57950..9727c9f0b 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-severity/dialog-severity.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-severity/dialog-severity.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,14 +28,12 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogSeverityExampleComponent {
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
+
     public severity: string;
     private activeDialog: NuiDialogRef;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
-
     public open(content: TemplateRef<string>, severity = ""): void {
         this.severity = severity;
         this.activeDialog = this.dialogService.open(content, { size: "sm" });
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-sizes/dialog-sizes.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-sizes/dialog-sizes.example.component.ts
index 6e2442fb0..79afceda2 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-sizes/dialog-sizes.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-sizes/dialog-sizes.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogSizesExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private activeDialog: NuiDialogRef;
 
     public open(content: TemplateRef<string>, size: any): void {
         this.activeDialog = this.dialogService.open(content, { size });
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-static-backdrop/dialog-with-static-backdrop.example.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-static-backdrop/dialog-with-static-backdrop.example.component.ts
index 81281be22..541197b87 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-static-backdrop/dialog-with-static-backdrop.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-static-backdrop/dialog-with-static-backdrop.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogWithStaticBackdropExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private activeDialog: NuiDialogRef;
 
     public openWith(content: TemplateRef<string>): void {
         this.activeDialog = this.dialogService.open(content, {
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-visual-test/dialog-visual-test.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-visual-test/dialog-visual-test.component.ts
index e6fec3380..35cf690f8 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-visual-test/dialog-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-visual-test/dialog-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { DialogService, NuiDialogRef } from "@nova-ui/bits";
     standalone: false,
 })
 export class DialogVisualTestComponent {
+    private dialogService = inject<DialogService>(DialogService);
+
     public severity: string;
     private activeDialog: NuiDialogRef;
     public isResponsiveMode = false;
@@ -56,8 +58,6 @@ export class DialogVisualTestComponent {
         ],
     };
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public open(content: TemplateRef<string>, severity = ""): void {
         this.severity = severity;
         this.activeDialog = this.dialogService.open(content, { size: "sm" });
diff --git a/packages/bits/demo/src/components/demo/dialog/dialog-zindex-test/dialog-zindex-test.component.ts b/packages/bits/demo/src/components/demo/dialog/dialog-zindex-test/dialog-zindex-test.component.ts
index 44b36a518..ef4f2b8d7 100644
--- a/packages/bits/demo/src/components/demo/dialog/dialog-zindex-test/dialog-zindex-test.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/dialog-zindex-test/dialog-zindex-test.component.ts
@@ -20,13 +20,7 @@
 
 import { Overlay, OverlayRef } from "@angular/cdk/overlay";
 import { TemplatePortal } from "@angular/cdk/portal";
-import {
-    Component,
-    OnInit,
-    TemplateRef,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, OnInit, TemplateRef, ViewContainerRef, ViewEncapsulation, inject } from "@angular/core";
 import moment from "moment/moment";
 
 import {
@@ -44,6 +38,11 @@ import {
     standalone: false,
 })
 export class DialogZIndexTestComponent implements OnInit {
+    private dialogService = inject(DialogService);
+    private toastService = inject(ToastService);
+    private overlay = inject(Overlay);
+    private viewContainerRef = inject(ViewContainerRef);
+
     public busy: boolean = false;
     public appendToBody: boolean = false;
 
@@ -72,13 +71,6 @@ export class DialogZIndexTestComponent implements OnInit {
     private overlayRef: OverlayRef;
     private baseDate = moment([2018, 5, 1, 15, 0, 0]);
 
-    constructor(
-        private dialogService: DialogService,
-        private toastService: ToastService,
-        private overlay: Overlay,
-        private viewContainerRef: ViewContainerRef
-    ) {}
-
     public ngOnInit(): void {
         this.timeFrame = {
             startDatetime: this.baseDate.clone().subtract(1, "weeks"),
diff --git a/packages/bits/demo/src/components/demo/dialog/header-buttons/header-buttons.example.component.ts b/packages/bits/demo/src/components/demo/dialog/header-buttons/header-buttons.example.component.ts
index 76fe2aef9..bc47db123 100644
--- a/packages/bits/demo/src/components/demo/dialog/header-buttons/header-buttons.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/header-buttons/header-buttons.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class HeaderButtonsExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    private activeDialog: NuiDialogRef;
 
     public open(content: TemplateRef<string>): void {
         this.activeDialog = this.dialogService.open(content, { size: "sm" });
diff --git a/packages/bits/demo/src/components/demo/dialog/simple-dialog/simple-dialog.example.component.ts b/packages/bits/demo/src/components/demo/dialog/simple-dialog/simple-dialog.example.component.ts
index a6a13d480..e75ad225e 100644
--- a/packages/bits/demo/src/components/demo/dialog/simple-dialog/simple-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dialog/simple-dialog/simple-dialog.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class SimpleDialogExampleComponent {
-    private activeDialog: NuiDialogRef;
+    private dialogService = inject(DialogService);
+    private toastService = inject(ToastService);
 
-    constructor(
-        private dialogService: DialogService,
-        private toastService: ToastService
-    ) {}
+    private activeDialog: NuiDialogRef;
 
     public open(content: TemplateRef<string>): void {
         this.activeDialog = this.dialogService.open(content, { size: "sm" });
diff --git a/packages/bits/demo/src/components/demo/dragdrop/dragdrop-basic/dragdrop-basic.example.component.ts b/packages/bits/demo/src/components/demo/dragdrop/dragdrop-basic/dragdrop-basic.example.component.ts
index bbf561f97..12f833c30 100644
--- a/packages/bits/demo/src/components/demo/dragdrop/dragdrop-basic/dragdrop-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/dragdrop/dragdrop-basic/dragdrop-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import {
     IDropEvent,
@@ -48,6 +48,8 @@ class IsObjectValidator implements IDropValidator {
     standalone: false,
 })
 export class DragdropBasicExampleComponent {
+    private toastService = inject<IToastService>(ToastService);
+
     public draggableString = "this is a string";
     public draggableObj = {
         imma: "little",
@@ -74,8 +76,6 @@ export class DragdropBasicExampleComponent {
     public isStringValidator = new IsStringValidator();
     public isObjectValidator = new IsObjectValidator();
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public onDropObject(dropEvent: IDropEvent): void {
         this.toastService.info({ message: $localize`Drop object!` });
         this.destObject = dropEvent.payload;
diff --git a/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field-custom-validation.example.component.ts b/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field-custom-validation.example.component.ts
index df93ed347..9556e1e44 100644
--- a/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field-custom-validation.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field-custom-validation.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -28,9 +28,11 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class FormFieldBasicReactiveCustomValidationExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     public reactiveForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.reactiveForm = this.formBuilder.group({
             email: this.formBuilder.control("", [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field.example.component.ts b/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field.example.component.ts
index ef4195af3..2b72ec024 100644
--- a/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/basic-reactive/basic-reactive-form-field.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { UntypedFormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -27,9 +27,11 @@ import { UntypedFormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class FormFieldBasicReactiveExampleComponent {
+    private formBuilder = inject(UntypedFormBuilder);
+
     public reactiveForm;
 
-    constructor(private formBuilder: UntypedFormBuilder) {
+    constructor() {
         this.reactiveForm = this.formBuilder.group({
             email: this.formBuilder.control("", [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/form-field/complex/form-field-complex.example.component.ts b/packages/bits/demo/src/components/demo/form-field/complex/form-field-complex.example.component.ts
index a683e8d49..26f11b63f 100644
--- a/packages/bits/demo/src/components/demo/form-field/complex/form-field-complex.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/complex/form-field-complex.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 import { AbstractControl, FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -51,10 +51,10 @@ export class FormFieldComplexExampleComponent {
 
     public fancyForm;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private changeDetector: ChangeDetectorRef
-    ) {
+    private formBuilder = inject(FormBuilder);
+    private changeDetector = inject(ChangeDetectorRef);
+
+    constructor() {
         this.fancyForm = this.formBuilder.group(
             {
                 password: this.formBuilder.control("", Validators.required),
diff --git a/packages/bits/demo/src/components/demo/form-field/dynamic-disabling/form-field-dynamic-disabling.example.component.ts b/packages/bits/demo/src/components/demo/form-field/dynamic-disabling/form-field-dynamic-disabling.example.component.ts
index e74af87a9..b3ca5f3cb 100644
--- a/packages/bits/demo/src/components/demo/form-field/dynamic-disabling/form-field-dynamic-disabling.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/dynamic-disabling/form-field-dynamic-disabling.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { ToastService } from "@nova-ui/bits";
@@ -29,13 +29,13 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class FormFieldDynamicDisablingExampleComponent {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
+
     public dynamicForm;
     public visibleRadio: boolean;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService
-    ) {
+    constructor() {
         this.dynamicForm = this.formBuilder.group({
             password: this.formBuilder.control("", Validators.required),
             confirmPassword: this.formBuilder.control(
diff --git a/packages/bits/demo/src/components/demo/form-field/form-field-test/form-field-test.component.ts b/packages/bits/demo/src/components/demo/form-field/form-field-test/form-field-test.component.ts
index 7ed25fb02..ac426bcac 100644
--- a/packages/bits/demo/src/components/demo/form-field/form-field-test/form-field-test.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/form-field-test/form-field-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import moment from "moment/moment";
 
@@ -28,6 +28,8 @@ import moment from "moment/moment";
     standalone: false,
 })
 export class FormFieldTestComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+
     public dynamicForm;
 
     public dateTimePickerModel: string;
@@ -38,7 +40,7 @@ export class FormFieldTestComponent implements OnInit {
         $localize`Carrot`,
     ];
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.dynamicForm = this.formBuilder.group({
             textbox: this.formBuilder.control("", Validators.required),
             textboxNumber: this.formBuilder.control("", Validators.required),
diff --git a/packages/bits/demo/src/components/demo/form-field/form-field-validation-triggering/form-field-validation-triggering.example.component.ts b/packages/bits/demo/src/components/demo/form-field/form-field-validation-triggering/form-field-validation-triggering.example.component.ts
index db20adacf..638084a4b 100644
--- a/packages/bits/demo/src/components/demo/form-field/form-field-validation-triggering/form-field-validation-triggering.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/form-field-validation-triggering/form-field-validation-triggering.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -27,9 +27,11 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class FormFieldValidationTriggeringxampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     public reactiveForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.reactiveForm = this.formBuilder.group({
             email: this.formBuilder.control(""),
         });
diff --git a/packages/bits/demo/src/components/demo/form-field/form-field-visual-test/form-field-visual-test.component.ts b/packages/bits/demo/src/components/demo/form-field/form-field-visual-test/form-field-visual-test.component.ts
index 01e2e838b..5689a8de2 100644
--- a/packages/bits/demo/src/components/demo/form-field/form-field-visual-test/form-field-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/form-field-visual-test/form-field-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -27,11 +27,13 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class FormFieldVisualTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public fancyForm;
 
     public vegetables = ["Cabbage", "Potato", "Tomato", "Carrot"];
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             nickname: this.formBuilder.control("", [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/form-field/in-form/in-form-form-field.example.component.ts b/packages/bits/demo/src/components/demo/form-field/in-form/in-form-form-field.example.component.ts
index 76de29bb2..2bcf297bd 100644
--- a/packages/bits/demo/src/components/demo/form-field/in-form/in-form-form-field.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/in-form/in-form-form-field.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import moment from "moment/moment";
 
@@ -28,6 +28,9 @@ import moment from "moment/moment";
     standalone: false,
 })
 export class FormFieldInFormExampleComponent {
+    private formBuilder = inject(FormBuilder);
+    private changeDetector = inject(ChangeDetectorRef);
+
     public vegetables = [
         $localize`Cabbage`,
         $localize`Potato`,
@@ -36,10 +39,7 @@ export class FormFieldInFormExampleComponent {
     ];
     public fancyForm;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private changeDetector: ChangeDetectorRef
-    ) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             textbox: this.formBuilder.control("", [Validators.required]),
             textNumber: this.formBuilder.control(0, [Validators.required]),
diff --git a/packages/bits/demo/src/components/demo/form-field/nested-forms-as-component/nested-forms-as-component.example.component.ts b/packages/bits/demo/src/components/demo/form-field/nested-forms-as-component/nested-forms-as-component.example.component.ts
index 808711af8..ee7fe3eb0 100644
--- a/packages/bits/demo/src/components/demo/form-field/nested-forms-as-component/nested-forms-as-component.example.component.ts
+++ b/packages/bits/demo/src/components/demo/form-field/nested-forms-as-component/nested-forms-as-component.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, OnInit, Output, inject } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
@@ -50,12 +50,10 @@ type SecondFormGroup = FormGroup<{
     standalone: false,
 })
 export class NestedFormsAsComponentExampleComponent implements OnInit {
-    public fancyForm: NestedFormGroup;
+    private fb = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        private fb: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    public fancyForm: NestedFormGroup;
 
     public ngOnInit(): void {
         this.fancyForm = this.fb.group({
@@ -113,14 +111,14 @@ export class NestedFormsAsComponentExampleComponent implements OnInit {
     standalone: false,
 })
 export class FirstCustomFormExampleComponent implements OnInit {
+    private fb = inject(FormBuilder);
+
     @Output() formReady = new EventEmitter<FirstFormGroup>();
     public firstForm = this.fb.group({
         firstName: this.fb.control("", Validators.required),
         lastName: this.fb.control("", Validators.required),
     });
 
-    constructor(private fb: FormBuilder) {}
-
     public ngOnInit(): void {
         this.formReady.emit(this.firstForm);
     }
@@ -158,14 +156,14 @@ export class FirstCustomFormExampleComponent implements OnInit {
     standalone: false,
 })
 export class SecondCustomFormExampleComponent implements OnInit {
+    private fb = inject(FormBuilder);
+
     @Output() formReady = new EventEmitter<SecondFormGroup>();
     public secondForm = this.fb.group({
         city: null,
         address: null,
     });
 
-    constructor(private fb: FormBuilder) {}
-
     public ngOnInit(): void {
         this.formReady.emit(this.secondForm);
     }
diff --git a/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-basic/freetype-query-builder-basic.example.component.ts b/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-basic/freetype-query-builder-basic.example.component.ts
index 177c0e781..641f400f9 100644
--- a/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-basic/freetype-query-builder-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-basic/freetype-query-builder-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, EventEmitter } from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, inject } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 
 import { HelpEntry, ToastService, Tokenizer } from "@nova-ui/bits";
@@ -34,6 +34,9 @@ import { ExampleAppRenderer } from "./renderer";
     standalone: false,
 })
 export class FreetypeQueryBuilderBasicExampleComponent {
+    private cd = inject(ChangeDetectorRef);
+    private toastService = inject(ToastService);
+
     readonly: boolean = false;
     readonly SEPARATOR = " ";
     placeholder: string = "Click to start building query";
@@ -48,11 +51,6 @@ export class FreetypeQueryBuilderBasicExampleComponent {
     tokenizer: Tokenizer<ExampleAppToken> = new ExampleTokenizer();
     helpUpdater: ExampleHelp = new ExampleHelp();
 
-    constructor(
-        private cd: ChangeDetectorRef,
-        private toastService: ToastService
-    ) {}
-
     onValueChange($event: { value: string; tokens: ExampleAppToken[] }): void {
         this.tokens = $event.tokens;
         if (this.value !== $event.value) {
diff --git a/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-test/freetype-query-builder-test.component.ts b/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-test/freetype-query-builder-test.component.ts
index 1b4491f35..e1907f820 100644
--- a/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-test/freetype-query-builder-test.component.ts
+++ b/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-test/freetype-query-builder-test.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import { Subject } from "rxjs";
 
 import { HelpEntry, Tokenizer } from "@nova-ui/bits";
@@ -40,6 +34,8 @@ import { ExampleAppRenderer } from "./renderer";
     standalone: false,
 })
 export class FreetypeQueryBuilderTestComponent {
+    private cd = inject(ChangeDetectorRef);
+
     @Input() exampleId: string;
     /**
      * Inputs and outputs here are example of how the api for such a component can look. But This is going to be very specific based on required use-cases.
@@ -70,8 +66,6 @@ export class FreetypeQueryBuilderTestComponent {
     tokenizer: Tokenizer<ExampleAppToken> = new ExampleTokenizer();
     helpUpdater: ExampleHelp = new ExampleHelp();
 
-    constructor(private cd: ChangeDetectorRef) {}
-
     onValueChange($event: { value: string; tokens: ExampleAppToken[] }): void {
         this.tokens = $event.tokens;
         if (this.value !== $event.value) {
diff --git a/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-visual-test/example-freetype-query-builder.component.ts b/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-visual-test/example-freetype-query-builder.component.ts
index 5ee31e589..bc8bd1803 100644
--- a/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-visual-test/example-freetype-query-builder.component.ts
+++ b/packages/bits/demo/src/components/demo/freetype-query-builder/freetype-query-builder-visual-test/example-freetype-query-builder.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.s
 
-import {
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import { Subject } from "rxjs";
 
 import { HelpEntry, Tokenizer } from "@nova-ui/bits";
@@ -40,6 +34,8 @@ import { ExampleAppRenderer } from "../freetype-query-builder-test/renderer";
     standalone: false,
 })
 export class ExampleFreetypeQueryBuilderComponent {
+    private cd = inject(ChangeDetectorRef);
+
     @Input() exampleId: string;
     /**
      * Inputs and outputs here are example of how the api for such a component can look. But This is going to be very specific based on required use-cases.
@@ -70,8 +66,6 @@ export class ExampleFreetypeQueryBuilderComponent {
     tokenizer: Tokenizer<ExampleAppToken> = new ExampleTokenizer();
     helpUpdater: ExampleHelp = new ExampleHelp();
 
-    constructor(private cd: ChangeDetectorRef) {}
-
     onValueChange($event: { value: string; tokens: ExampleAppToken[] }): void {
         this.tokens = $event.tokens;
         if (this.value !== $event.value) {
diff --git a/packages/bits/demo/src/components/demo/icon/icon-list/icon-list.example.component.ts b/packages/bits/demo/src/components/demo/icon/icon-list/icon-list.example.component.ts
index 6ae1d1171..4d6a48325 100644
--- a/packages/bits/demo/src/components/demo/icon/icon-list/icon-list.example.component.ts
+++ b/packages/bits/demo/src/components/demo/icon/icon-list/icon-list.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import { IconService } from "./../../../../../../src/lib/icon/icon.service";
 
@@ -28,11 +28,11 @@ import { IconService } from "./../../../../../../src/lib/icon/icon.service";
     standalone: false,
 })
 export class IconListExampleComponent implements OnInit {
+    private iconService = inject(IconService);
+
     public icons: any[];
     public categories: any[];
 
-    constructor(private iconService: IconService) {}
-
     public ngOnInit(): void {
         this.icons = this.iconService.icons;
         this.categories = this.getCategories(this.icons);
diff --git a/packages/bits/demo/src/components/demo/image/image-list/image-list.example.component.ts b/packages/bits/demo/src/components/demo/image/image-list/image-list.example.component.ts
index d81ef0034..bf72ed3a6 100644
--- a/packages/bits/demo/src/components/demo/image/image-list/image-list.example.component.ts
+++ b/packages/bits/demo/src/components/demo/image/image-list/image-list.example.component.ts
@@ -1,34 +1,32 @@
-// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to
-//  deal in the Software without restriction, including without limitation the
-//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-//  sell copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-//  all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-//  THE SOFTWARE.
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component, inject } from "@angular/core";
+
+import { IImagesPresetItem, imagesPresetToken } from "@nova-ui/bits";
+
+@Component({
+    selector: "nui-image-list-example",
+    templateUrl: "./image-list.example.component.html",
+    standalone: false,
+})
+export class ImageListExampleComponent {
    images = inject<Array<IImagesPresetItem>>(imagesPresetToken);
 
-import { Component, Inject } from "@angular/core";
-
-import { IImagesPresetItem, imagesPresetToken } from "@nova-ui/bits";
-
-@Component({
-    selector: "nui-image-list-example",
-    templateUrl: "./image-list.example.component.html",
-    standalone: false,
-})
-export class ImageListExampleComponent {
-    constructor(
-        @Inject(imagesPresetToken) public images: Array<IImagesPresetItem>
-    ) {}
-}
+}
diff --git a/packages/bits/demo/src/components/demo/image/image-visual-test/image-visual-test.component.ts b/packages/bits/demo/src/components/demo/image/image-visual-test/image-visual-test.component.ts
index 11764a127..8ac2c1eac 100644
--- a/packages/bits/demo/src/components/demo/image/image-visual-test/image-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/image/image-visual-test/image-visual-test.component.ts
@@ -1,34 +1,32 @@
-// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to
-//  deal in the Software without restriction, including without limitation the
-//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-//  sell copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-//  all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-//  THE SOFTWARE.
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component, inject } from "@angular/core";
+
+import { IImagesPresetItem, imagesPresetToken } from "@nova-ui/bits";
+
+@Component({
+    selector: "nui-image-visual-test",
+    templateUrl: "./image-visual-test.component.html",
+    standalone: false,
+})
+export class ImageVisualTestComponent {
    images = inject<Array<IImagesPresetItem>>(imagesPresetToken);
 
-import { Component, Inject } from "@angular/core";
-
-import { IImagesPresetItem, imagesPresetToken } from "@nova-ui/bits";
-
-@Component({
-    selector: "nui-image-visual-test",
-    templateUrl: "./image-visual-test.component.html",
-    standalone: false,
-})
-export class ImageVisualTestComponent {
-    constructor(
-        @Inject(imagesPresetToken) public images: Array<IImagesPresetItem>
-    ) {}
-}
+}
diff --git a/packages/bits/demo/src/components/demo/overlay/overlay-custom-confirmation-inside-dialog/overlay-custom-confirmation-inside-dialog.component.ts b/packages/bits/demo/src/components/demo/overlay/overlay-custom-confirmation-inside-dialog/overlay-custom-confirmation-inside-dialog.component.ts
index 88dc63b97..f0fd996f9 100644
--- a/packages/bits/demo/src/components/demo/overlay/overlay-custom-confirmation-inside-dialog/overlay-custom-confirmation-inside-dialog.component.ts
+++ b/packages/bits/demo/src/components/demo/overlay/overlay-custom-confirmation-inside-dialog/overlay-custom-confirmation-inside-dialog.component.ts
@@ -22,7 +22,7 @@ import {
     FlexibleConnectedPositionStrategy,
     OverlayRef,
 } from "@angular/cdk/overlay";
-import { Component, OnDestroy, TemplateRef } from "@angular/core";
+import { Component, OnDestroy, TemplateRef, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -35,14 +35,14 @@ import { DialogService, NuiDialogRef, OverlayComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class CustomConfirmationInsideDialogComponent implements OnDestroy {
+    private dialogService = inject(DialogService);
+
     public onDestroy$ = new Subject<void>();
     public overlayTriggered$ = new Subject<void>();
 
     private overlayRef: OverlayRef;
     private activeDialog: NuiDialogRef;
 
-    constructor(private dialogService: DialogService) {}
-
     triggerOverlay(overlay: OverlayComponent): void {
         this.overlayTriggered$.next();
 
diff --git a/packages/bits/demo/src/components/demo/overlay/overlay-custom-dialog/overlay-custom-dialog.component.ts b/packages/bits/demo/src/components/demo/overlay/overlay-custom-dialog/overlay-custom-dialog.component.ts
index d02b2d86c..b4f860308 100644
--- a/packages/bits/demo/src/components/demo/overlay/overlay-custom-dialog/overlay-custom-dialog.component.ts
+++ b/packages/bits/demo/src/components/demo/overlay/overlay-custom-dialog/overlay-custom-dialog.component.ts
@@ -22,7 +22,7 @@ import {
     FlexibleConnectedPositionStrategy,
     OverlayRef,
 } from "@angular/cdk/overlay";
-import { Component, ViewChild, ViewEncapsulation } from "@angular/core";
+import { Component, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, OverlayComponent } from "@nova-ui/bits";
 
@@ -34,14 +34,14 @@ import { DialogService, NuiDialogRef, OverlayComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class OverlayCustomDialogComponent {
+    private dialogService = inject(DialogService);
+
     private overlayRef: OverlayRef;
     private activeDialog: NuiDialogRef;
 
     @ViewChild("overlay1") overlay1: OverlayComponent;
     @ViewChild("overlay2") overlay2: OverlayComponent;
 
-    constructor(private dialogService: DialogService) {}
-
     triggerOverlay(ref: HTMLElement, overlay: OverlayComponent): void {
         // Here we set the new element reference to the overlay conponent. The overlay will now connect to it
         overlay.toggleReference = ref;
diff --git a/packages/bits/demo/src/components/demo/panel/panel-collapse-outside-control/panel-collapse-outside-control.example.component.ts b/packages/bits/demo/src/components/demo/panel/panel-collapse-outside-control/panel-collapse-outside-control.example.component.ts
index 368aae638..f830e7967 100644
--- a/packages/bits/demo/src/components/demo/panel/panel-collapse-outside-control/panel-collapse-outside-control.example.component.ts
+++ b/packages/bits/demo/src/components/demo/panel/panel-collapse-outside-control/panel-collapse-outside-control.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class PanelCollapseOutsideControlExampleComponent {
+    private toastService = inject<ToastService>(ToastService);
+
     public isCollapsed: boolean = false;
     public heading = $localize`Header`;
 
@@ -48,6 +50,4 @@ export class PanelCollapseOutsideControlExampleComponent {
             title: $localize`Panel State`,
         });
     }
-
-    constructor(@Inject(ToastService) private toastService: ToastService) {}
 }
diff --git a/packages/bits/demo/src/components/demo/panel/panel-collapse-top-oriented/panel-collapse-top-oriented.example.component.ts b/packages/bits/demo/src/components/demo/panel/panel-collapse-top-oriented/panel-collapse-top-oriented.example.component.ts
index 3b8826c52..b879d015c 100644
--- a/packages/bits/demo/src/components/demo/panel/panel-collapse-top-oriented/panel-collapse-top-oriented.example.component.ts
+++ b/packages/bits/demo/src/components/demo/panel/panel-collapse-top-oriented/panel-collapse-top-oriented.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, Input } from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 
 import { IMenuGroup, ToastService } from "@nova-ui/bits";
 
@@ -28,9 +28,9 @@ import { IMenuGroup, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class PanelCollapseTopOrientedExampleComponent {
-    @Input() isOn = true;
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(@Inject(ToastService) private toastService: ToastService) {}
+    @Input() isOn = true;
 
     public itemsSource: IMenuGroup[] = [
         {
diff --git a/packages/bits/demo/src/components/demo/panel/panel-embedded-content/panel-embedded-content.example.component.ts b/packages/bits/demo/src/components/demo/panel/panel-embedded-content/panel-embedded-content.example.component.ts
index b457b31a8..5af829e60 100644
--- a/packages/bits/demo/src/components/demo/panel/panel-embedded-content/panel-embedded-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/panel/panel-embedded-content/panel-embedded-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,12 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class PanelEmbeddedContentExampleComponent {
+    private toastService = inject<ToastService>(ToastService);
+
     public isCollapsed = false;
     public headerIcon = "filter";
     public displayFooter = true;
 
-    constructor(@Inject(ToastService) private toastService: ToastService) {}
-
     onClickCancel(): void {
         this.toastService.info({
             message: $localize`Cancel clicked!`,
diff --git a/packages/bits/demo/src/components/demo/panel/panel-hide-outside-control/panel-hide-outside-control.example.component.ts b/packages/bits/demo/src/components/demo/panel/panel-hide-outside-control/panel-hide-outside-control.example.component.ts
index c648c412a..677dfa8df 100644
--- a/packages/bits/demo/src/components/demo/panel/panel-hide-outside-control/panel-hide-outside-control.example.component.ts
+++ b/packages/bits/demo/src/components/demo/panel/panel-hide-outside-control/panel-hide-outside-control.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Inject } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,6 +28,9 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class PanelHideOutsideControlExampleComponent {
+    private toastService = inject<ToastService>(ToastService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     public isHidden = false;
 
     public hide(): void {
@@ -47,9 +50,4 @@ export class PanelHideOutsideControlExampleComponent {
             title: $localize`Panel State`,
         });
     }
-
-    constructor(
-        @Inject(ToastService) private toastService: ToastService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
 }
diff --git a/packages/bits/demo/src/components/demo/popover/popover-outputs/popover-outputs.example.component.ts b/packages/bits/demo/src/components/demo/popover/popover-outputs/popover-outputs.example.component.ts
index ddd66e876..e84e84b6b 100644
--- a/packages/bits/demo/src/components/demo/popover/popover-outputs/popover-outputs.example.component.ts
+++ b/packages/bits/demo/src/components/demo/popover/popover-outputs/popover-outputs.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { IToastService, ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class PopoverOutputsExampleComponent {
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    private toastService = inject<IToastService>(ToastService);
+
 
     public onHide(): void {
         this.toastService.success({ message: $localize`onHide was invoked` });
diff --git a/packages/bits/demo/src/components/demo/popup/popup-with-custom-content/popup-with-custom-content.example.component.ts b/packages/bits/demo/src/components/demo/popup/popup-with-custom-content/popup-with-custom-content.example.component.ts
index 1e7be557a..0fb778094 100644
--- a/packages/bits/demo/src/components/demo/popup/popup-with-custom-content/popup-with-custom-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/popup/popup-with-custom-content/popup-with-custom-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewEncapsulation } from "@angular/core";
+import { Component, ViewEncapsulation, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -29,6 +29,8 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class PopupWithCustomContentComponent {
+    private formBuilder = inject(FormBuilder);
+
     public icon = "caret-down";
     public width = "200px";
     public itemsSource: string[] = [
@@ -39,7 +41,7 @@ export class PopupWithCustomContentComponent {
     ];
     public demoFormGroup;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.demoFormGroup = this.formBuilder.group({
             checkboxGroup: this.formBuilder.control(
                 [this.itemsSource[0], this.itemsSource[1], this.itemsSource[2]],
diff --git a/packages/bits/demo/src/components/demo/radio-group/radio-group-in-form/radio-group-in-form.example.component.ts b/packages/bits/demo/src/components/demo/radio-group/radio-group-in-form/radio-group-in-form.example.component.ts
index 1b75cba04..dfd09e105 100644
--- a/packages/bits/demo/src/components/demo/radio-group/radio-group-in-form/radio-group-in-form.example.component.ts
+++ b/packages/bits/demo/src/components/demo/radio-group/radio-group-in-form/radio-group-in-form.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -27,6 +27,8 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class RadioGroupInFormExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     public vegetables = [
         $localize`Cabbage`,
         $localize`Potato`,
@@ -35,7 +37,7 @@ export class RadioGroupInFormExampleComponent {
     ];
     public fancyForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             radioGroup: this.formBuilder.control(this.vegetables[1], [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/radio-group/radio-group-test/radio-group-test.component.ts b/packages/bits/demo/src/components/demo/radio-group/radio-group-test/radio-group-test.component.ts
index 43fdc8433..a47abccae 100644
--- a/packages/bits/demo/src/components/demo/radio-group/radio-group-test/radio-group-test.component.ts
+++ b/packages/bits/demo/src/components/demo/radio-group/radio-group-test/radio-group-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 import { CheckboxChangeEvent } from "@nova-ui/bits";
@@ -29,6 +29,8 @@ import { CheckboxChangeEvent } from "@nova-ui/bits";
     standalone: false,
 })
 export class RadioGroupTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public disabledForm;
 
     public fruits = [
@@ -47,7 +49,7 @@ export class RadioGroupTestComponent {
     public selectedFruit: string;
     public selectedFruitInline: string;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.disabledForm = this.formBuilder.group({
             radioGroup: this.formBuilder.control({ value: "", disabled: true }),
         });
diff --git a/packages/bits/demo/src/components/demo/radio-group/radio-group-visual-test/radio-group-visual-test.component.ts b/packages/bits/demo/src/components/demo/radio-group/radio-group-visual-test/radio-group-visual-test.component.ts
index b57520a50..1e1db3102 100644
--- a/packages/bits/demo/src/components/demo/radio-group/radio-group-visual-test/radio-group-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/radio-group/radio-group-visual-test/radio-group-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 @Component({
@@ -27,6 +27,8 @@ import { FormBuilder } from "@angular/forms";
     standalone: false,
 })
 export class RadioGroupVisualTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public disabledForm;
     public colors = ["Red", "Green", "Blue"];
     public colorHints = {
@@ -38,7 +40,7 @@ export class RadioGroupVisualTestComponent {
     public selectedFruit: string;
     public selectedColor: string;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.disabledForm = this.formBuilder.group({
             radioGroup: this.formBuilder.control({ value: "", disabled: true }),
         });
diff --git a/packages/bits/demo/src/components/demo/radio-group/radio-group-with-hints-content/radio-group-hints-content.example.component.ts b/packages/bits/demo/src/components/demo/radio-group/radio-group-with-hints-content/radio-group-hints-content.example.component.ts
index 58b7bc071..ef56b2417 100644
--- a/packages/bits/demo/src/components/demo/radio-group/radio-group-with-hints-content/radio-group-hints-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/radio-group/radio-group-with-hints-content/radio-group-hints-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -38,11 +38,11 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class RadioGroupHintsContentExampleComponent {
+    private readonly toastService = inject(ToastService);
+
     public colors = [$localize`Red`, $localize`Green`, $localize`Blue`];
     public selectedColor: string;
 
-    public constructor(private readonly toastService: ToastService) {}
-
     public showToast(): void {
         this.toastService.info({
             title: $localize`Radio button`,
diff --git a/packages/bits/demo/src/components/demo/radio-group/value-change-radio-group/value-change-radio-group.example.component.ts b/packages/bits/demo/src/components/demo/radio-group/value-change-radio-group/value-change-radio-group.example.component.ts
index 5d5bccedf..b89ec469c 100644
--- a/packages/bits/demo/src/components/demo/radio-group/value-change-radio-group/value-change-radio-group.example.component.ts
+++ b/packages/bits/demo/src/components/demo/radio-group/value-change-radio-group/value-change-radio-group.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { IToastService, ToastService } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ValueChangeRadioGroupExampleComponent {
+    private toastService = inject<IToastService>(ToastService);
+
     public colors = [$localize`Red`, $localize`Green`, $localize`Blue`];
     public colorHints = {
         Red: $localize`hot color`,
@@ -36,8 +38,6 @@ export class ValueChangeRadioGroupExampleComponent {
     };
     public selectedColor: string;
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public showSelected(): void {
         this.toastService.success({
             message: $localize`You selected ${this.selectedColor}. Nice!`,
diff --git a/packages/bits/demo/src/components/demo/repeat/repeat-virtual-scroll/repeat-virtual-scroll.component.ts b/packages/bits/demo/src/components/demo/repeat/repeat-virtual-scroll/repeat-virtual-scroll.component.ts
index 60af69f6f..7564d4157 100644
--- a/packages/bits/demo/src/components/demo/repeat/repeat-virtual-scroll/repeat-virtual-scroll.component.ts
+++ b/packages/bits/demo/src/components/demo/repeat/repeat-virtual-scroll/repeat-virtual-scroll.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
 import { filter, switchMap, takeUntil, tap } from "rxjs/operators";
@@ -62,6 +53,10 @@ import { IServer } from "./types";
 export class RepeatVirtualScrollComponent
     implements OnInit, AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as RepeatVirtualScrollDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+    private viewportManager = inject(VirtualViewportManager);
+
     public listItems$ = new BehaviorSubject<IServer[]>([]);
 
     public filteringState: INovaFilteringOutputs = {};
@@ -77,13 +72,6 @@ export class RepeatVirtualScrollComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: RepeatVirtualScrollDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef,
-        private viewportManager: VirtualViewportManager
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/components/demo/search/search-focus-change/search-focus-change.example.component.ts b/packages/bits/demo/src/components/demo/search/search-focus-change/search-focus-change.example.component.ts
index 335f45cc5..62936e4b7 100644
--- a/packages/bits/demo/src/components/demo/search/search-focus-change/search-focus-change.example.component.ts
+++ b/packages/bits/demo/src/components/demo/search/search-focus-change/search-focus-change.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,9 +28,9 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class SearchFocusChangeExampleComponent {
-    public isFocused: boolean = false;
+    toastService = inject<ToastService>(ToastService);
 
-    constructor(@Inject(ToastService) public toastService: ToastService) {}
+    public isFocused: boolean = false;
 
     public onFocusChange(focused: boolean): void {
         this.isFocused = focused;
diff --git a/packages/bits/demo/src/components/demo/search/search-on-search-cancel/search-on-search-cancel.example.component.ts b/packages/bits/demo/src/components/demo/search/search-on-search-cancel/search-on-search-cancel.example.component.ts
index f75860bc9..63606ce68 100644
--- a/packages/bits/demo/src/components/demo/search/search-on-search-cancel/search-on-search-cancel.example.component.ts
+++ b/packages/bits/demo/src/components/demo/search/search-on-search-cancel/search-on-search-cancel.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class SearchOnSearchCancelExampleComponent {
-    constructor(@Inject(ToastService) public toastService: ToastService) {}
+    toastService = inject<ToastService>(ToastService);
+
 
     public onSearch(value: string): void {
         this.toastService.success({
diff --git a/packages/bits/demo/src/components/demo/select-v2/select-v2-custom-content/select-v2-custom-content.example.component.ts b/packages/bits/demo/src/components/demo/select-v2/select-v2-custom-content/select-v2-custom-content.example.component.ts
index d058d5c03..5924974e7 100644
--- a/packages/bits/demo/src/components/demo/select-v2/select-v2-custom-content/select-v2-custom-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/select-v2/select-v2-custom-content/select-v2-custom-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -30,6 +30,8 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class SelectV2CustomContentExampleComponent {
+    private toastService = inject<ToastService>(ToastService);
+
     public items = [
         {
             headerName: $localize`Saved Data Filters`,
@@ -48,8 +50,6 @@ export class SelectV2CustomContentExampleComponent {
         },
     ];
 
-    constructor(@Inject(ToastService) private toastService: ToastService) {}
-
     public actionSimulation(event: Event): void {
         this.toastService.info({
             message: $localize`Action Occurred!`,
diff --git a/packages/bits/demo/src/components/demo/select-v2/select-v2-reactive-form-field/select-v2-reactive-form-field.example.component.ts b/packages/bits/demo/src/components/demo/select-v2/select-v2-reactive-form-field/select-v2-reactive-form-field.example.component.ts
index c9ed3a670..105e7b75f 100644
--- a/packages/bits/demo/src/components/demo/select-v2/select-v2-reactive-form-field/select-v2-reactive-form-field.example.component.ts
+++ b/packages/bits/demo/src/components/demo/select-v2/select-v2-reactive-form-field/select-v2-reactive-form-field.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -28,12 +28,14 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class SelectV2ReactiveFormFieldExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     public items = Array.from({ length: 100 }).map(
         (_, i) => $localize`Item ${i}`
     );
     public fancyForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             select: this.formBuilder.control("", Validators.required),
         });
diff --git a/packages/bits/demo/src/components/demo/select-v2/select-v2-test/select-v2-test.example.component.ts b/packages/bits/demo/src/components/demo/select-v2/select-v2-test/select-v2-test.example.component.ts
index 05d4ea83f..dadd6ced6 100644
--- a/packages/bits/demo/src/components/demo/select-v2/select-v2-test/select-v2-test.example.component.ts
+++ b/packages/bits/demo/src/components/demo/select-v2/select-v2-test/select-v2-test.example.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { OverlayConfig } from "@angular/cdk/overlay";
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { FormBuilder, FormControl, Validators } from "@angular/forms";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -59,6 +50,9 @@ interface IExampleItem {
 export class SelectV2TestExampleComponent
     implements OnInit, AfterViewInit, OnDestroy
 {
+    private dialogService = inject<DialogService>(DialogService);
+    private formBuilder = inject(FormBuilder);
+
     public selectedItem: IExampleItem | null;
     public handleClicksOutside: boolean = false;
     public iconItems = [
@@ -110,10 +104,7 @@ export class SelectV2TestExampleComponent
     private activeDialog: NuiDialogRef;
     @ViewChild("custom_control") private select: SelectV2Component;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        private formBuilder: FormBuilder
-    ) {
+    constructor() {
         this.fancyForm = this.formBuilder.group({
             select: this.formBuilder.control("", Validators.required),
         });
diff --git a/packages/bits/demo/src/components/demo/select/select-reactive-form/select-reactive-form.example.component.ts b/packages/bits/demo/src/components/demo/select/select-reactive-form/select-reactive-form.example.component.ts
index 3cfd718b3..7086d08f8 100644
--- a/packages/bits/demo/src/components/demo/select/select-reactive-form/select-reactive-form.example.component.ts
+++ b/packages/bits/demo/src/components/demo/select/select-reactive-form/select-reactive-form.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { ISelectChangedEvent, ToastService } from "@nova-ui/bits";
@@ -29,6 +29,9 @@ import { ISelectChangedEvent, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class SelectReactiveFormExampleComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
+
     public dataset = {
         items: [
             $localize`Item 1`,
@@ -41,10 +44,7 @@ export class SelectReactiveFormExampleComponent implements OnInit {
     };
     public myForm;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             item: this.formBuilder.control(this.dataset.selectedItem, [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/select/select-visual-test/select-visual-test.component.ts b/packages/bits/demo/src/components/demo/select/select-visual-test/select-visual-test.component.ts
index 0a9ea2ca8..8b54934fa 100644
--- a/packages/bits/demo/src/components/demo/select/select-visual-test/select-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/select/select-visual-test/select-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { ISelectChangedEvent } from "@nova-ui/bits";
@@ -32,6 +32,8 @@ import { ISelectChangedEvent } from "@nova-ui/bits";
     standalone: false,
 })
 export class SelectVisualTestComponent {
+    private formBuilder = inject(FormBuilder);
+
     public isRequired = true;
     public datasetBasic = {
         items: [
@@ -120,7 +122,7 @@ export class SelectVisualTestComponent {
         ],
     };
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             item: this.formBuilder.control(this.datasetBasic.selectedItem, [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-dynamic/tab-heading-group-dynamic.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-dynamic/tab-heading-group-dynamic.example.component.ts
index 61ab97d88..f9cde406c 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-dynamic/tab-heading-group-dynamic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-dynamic/tab-heading-group-dynamic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-dynamic-example",
@@ -27,11 +27,13 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupDynamicExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent: any[] = [];
 
-    constructor(private changeDetector: ChangeDetectorRef) {
+    constructor() {
         // "Dynamically" build first 2 tabs
         this.addTab();
         this.addTab();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons-only/tab-heading-group-horizontal-with-icons-only.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons-only/tab-heading-group-horizontal-with-icons-only.example.component.ts
index 0eb8e2c31..7f4b6f26c 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons-only/tab-heading-group-horizontal-with-icons-only.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons-only/tab-heading-group-horizontal-with-icons-only.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-horizontal-with-icons-only-example",
@@ -30,6 +30,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupHorizontalWithIconsOnlyExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -79,8 +81,6 @@ export class TabHeadingGroupHorizontalWithIconsOnlyExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons/tab-heading-group-horizontal-with-icons.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons/tab-heading-group-horizontal-with-icons.example.component.ts
index 2250dae20..5c13dab73 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons/tab-heading-group-horizontal-with-icons.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal-with-icons/tab-heading-group-horizontal-with-icons.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-horizontal-with-icons-example",
@@ -30,6 +30,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupHorizontalWithIconsExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -79,8 +81,6 @@ export class TabHeadingGroupHorizontalWithIconsExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal/tab-heading-group-horizontal.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal/tab-heading-group-horizontal.example.component.ts
index a2cb52269..e70dfe00d 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal/tab-heading-group-horizontal.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-horizontal/tab-heading-group-horizontal.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-horizontal-example",
@@ -27,6 +27,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupHorizontalExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -52,8 +54,6 @@ export class TabHeadingGroupHorizontalExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-responsive/tab-heading-group-responsive.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-responsive/tab-heading-group-responsive.example.component.ts
index 70c40cf14..32236fc2d 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-responsive/tab-heading-group-responsive.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-responsive/tab-heading-group-responsive.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-responsive-example",
@@ -33,12 +33,14 @@ import { ChangeDetectorRef, Component, Input } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupResponsiveExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     @Input() public icon: boolean = false;
 
     public currentTabId: string;
     public tabsetContent: object[] = [];
 
-    constructor(private changeDetector: ChangeDetectorRef) {
+    constructor() {
         this.setTabs();
     }
 
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical-with-icons/tab-heading-group-vertical-with-icons.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical-with-icons/tab-heading-group-vertical-with-icons.example.component.ts
index 83ae1f9ca..cb581c28b 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical-with-icons/tab-heading-group-vertical-with-icons.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical-with-icons/tab-heading-group-vertical-with-icons.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-vertical-with-icons-example",
@@ -27,6 +27,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupVerticalWithIconsExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -76,8 +78,6 @@ export class TabHeadingGroupVerticalWithIconsExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical/tab-heading-group-vertical.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical/tab-heading-group-vertical.example.component.ts
index 869ad0e03..294989492 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical/tab-heading-group-vertical.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-vertical/tab-heading-group-vertical.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-vertical-example",
@@ -26,6 +26,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupVerticalExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -75,8 +77,6 @@ export class TabHeadingGroupVerticalExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-content/tab-heading-group-with-content.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-content/tab-heading-group-with-content.example.component.ts
index 67baca9aa..925b3783d 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-content/tab-heading-group-with-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-content/tab-heading-group-with-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-with-content-example",
@@ -27,6 +27,8 @@ import { ChangeDetectorRef, Component, Input } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupWithContentExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     @Input() public icon: boolean = false;
 
     public currentTabId: string;
@@ -91,8 +93,6 @@ export class TabHeadingGroupWithContentExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-icons/tab-heading-group-with-icons.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-icons/tab-heading-group-with-icons.example.component.ts
index c887ed53c..7e1418416 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-icons/tab-heading-group-with-icons.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-icons/tab-heading-group-with-icons.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 
 @Component({
     selector: "nui-tab-heading-group-with-icons-example",
@@ -26,6 +26,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupWithIconsExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -75,8 +77,6 @@ export class TabHeadingGroupWithIconsExampleComponent {
         },
     ];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public updateContent(tabId: string): void {
         this.currentTabId = tabId;
         this.changeDetector.detectChanges();
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-content/settings/tab-content-settings.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-content/settings/tab-content-settings.example.component.ts
index ebc3b3bff..9c04876e0 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-content/settings/tab-content-settings.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-content/settings/tab-content-settings.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 @Component({
@@ -27,6 +27,8 @@ import { FormBuilder, Validators } from "@angular/forms";
     standalone: false,
 })
 export class TabContentSettingsExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     public content: string =
         "You can change your password using the form below:";
     public tabTitle: string = "Account Settings";
@@ -34,7 +36,7 @@ export class TabContentSettingsExampleComponent {
     public dynamicForm;
     public visibleRadio: boolean;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.dynamicForm = this.formBuilder.group({
             password: this.formBuilder.control("", Validators.required),
             confirmPassword: this.formBuilder.control(
diff --git a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-heading-group-with-router.example.component.ts b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-heading-group-with-router.example.component.ts
index df1439671..8f1398587 100644
--- a/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-heading-group-with-router.example.component.ts
+++ b/packages/bits/demo/src/components/demo/tabgroup/tab-heading-group-with-router/tab-heading-group-with-router.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Input, OnDestroy } from "@angular/core";
+import { Component, Input, OnDestroy, inject } from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
 
 @Component({
@@ -28,6 +28,8 @@ import { NavigationEnd, Router } from "@angular/router";
     standalone: false,
 })
 export class TabHeadingGroupWithRouterExampleComponent implements OnDestroy {
+    private _router = inject(Router);
+
     public currentTabRoute: string;
 
     @Input() public icon: boolean = false;
@@ -67,8 +69,6 @@ export class TabHeadingGroupWithRouterExampleComponent implements OnDestroy {
         }
     });
 
-    constructor(private _router: Router) {}
-
     public ngOnDestroy(): void {
         this.routeSubscription?.unsubscribe();
     }
diff --git a/packages/bits/demo/src/components/demo/table/table-columns-add-remove/table-columns-add-remove.example.component.ts b/packages/bits/demo/src/components/demo/table/table-columns-add-remove/table-columns-add-remove.example.component.ts
index bb1c65d6e..9efe2fe88 100644
--- a/packages/bits/demo/src/components/demo/table/table-columns-add-remove/table-columns-add-remove.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-columns-add-remove/table-columns-add-remove.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    Component,
-    Inject,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { DialogService, TableComponent } from "@nova-ui/bits";
@@ -48,6 +42,9 @@ interface IExampleTableModel {
     standalone: false,
 })
 export class TableColumnsAddRemoveExampleComponent {
+    private dialogService = inject<DialogService>(DialogService);
+    private formBuilder = inject(FormBuilder);
+
     public availableColumns = [
         "issue",
         "project",
@@ -73,10 +70,7 @@ export class TableColumnsAddRemoveExampleComponent {
     public dataSource = getData();
     @ViewChild(TableComponent) table: TableComponent<IExampleTableModel>;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        private formBuilder: FormBuilder
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             checkboxGroup: this.formBuilder.control(this.displayedColumnsCopy, [
                 Validators.required,
diff --git a/packages/bits/demo/src/components/demo/table/table-pagination/table-pagination.example.component.ts b/packages/bits/demo/src/components/demo/table/table-pagination/table-pagination.example.component.ts
index fb2b3a023..8e43d009e 100644
--- a/packages/bits/demo/src/components/demo/table/table-pagination/table-pagination.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-pagination/table-pagination.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, OnDestroy, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -47,6 +47,8 @@ interface IExampleTableModel {
 export class TablePaginationExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+
     public displayedColumns = [
         "position",
         "name",
@@ -63,9 +65,9 @@ export class TablePaginationExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(getData());
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-reorder/table-reorder.example.component.ts b/packages/bits/demo/src/components/demo/table/table-reorder/table-reorder.example.component.ts
index 75366f15d..821f22a0f 100644
--- a/packages/bits/demo/src/components/demo/table/table-reorder/table-reorder.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-reorder/table-reorder.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { IToastService, ToastService } from "@nova-ui/bits";
 
@@ -40,6 +40,8 @@ interface IExampleTableModel {
     standalone: false,
 })
 export class TableReorderExampleComponent {
+    private toastService = inject<IToastService>(ToastService);
+
     public displayedColumns = [
         "position",
         "name",
@@ -52,8 +54,6 @@ export class TableReorderExampleComponent {
     ];
     public dataSource = getData();
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public toastColumns(event: string[]): void {
         this.toastService.info({
             message:
diff --git a/packages/bits/demo/src/components/demo/table/table-row-clickable/table-row-clickable.example.component.ts b/packages/bits/demo/src/components/demo/table/table-row-clickable/table-row-clickable.example.component.ts
index 773566b52..950ee67ad 100644
--- a/packages/bits/demo/src/components/demo/table/table-row-clickable/table-row-clickable.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-row-clickable/table-row-clickable.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -46,6 +46,9 @@ interface IExampleTableModel {
 export class TableRowClickableExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+    selectorService = inject(SelectorService);
+
     public displayedColumns = [
         "position",
         "description",
@@ -67,11 +70,6 @@ export class TableRowClickableExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>,
-        public selectorService: SelectorService
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription =
             this.dataSourceService.outputsSubject.subscribe(
diff --git a/packages/bits/demo/src/components/demo/table/table-search-with-select-and-pagination/table-search-with-select-and-pagination.example.component.ts b/packages/bits/demo/src/components/demo/table/table-search-with-select-and-pagination/table-search-with-select-and-pagination.example.component.ts
index d6cfb37ef..8830e9d9f 100644
--- a/packages/bits/demo/src/components/demo/table/table-search-with-select-and-pagination/table-search-with-select-and-pagination.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-search-with-select-and-pagination/table-search-with-select-and-pagination.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, OnDestroy, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 
@@ -57,6 +57,8 @@ interface IExampleTableModel {
 export class TableSearchWithSelectAndPaginationComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+
     public displayedColumns = [
         "position",
         "name",
@@ -87,9 +89,9 @@ export class TableSearchWithSelectAndPaginationComponent
     private outputsSubscription: Subscription;
     private searchSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(getData());
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-search/table-search.example.component.ts b/packages/bits/demo/src/components/demo/table/table-search/table-search.example.component.ts
index 5be1991c2..5120f2dcc 100644
--- a/packages/bits/demo/src/components/demo/table/table-search/table-search.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-search/table-search.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, OnDestroy, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 
@@ -48,6 +48,8 @@ interface IExampleTableModel {
     standalone: false,
 })
 export class TableSearchExampleComponent implements AfterViewInit, OnDestroy {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+
     public displayedColumns = [
         "position",
         "name",
@@ -68,9 +70,9 @@ export class TableSearchExampleComponent implements AfterViewInit, OnDestroy {
     private outputsSubscription: Subscription;
     private searchSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(getData());
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-select/table-select.example.component.ts b/packages/bits/demo/src/components/demo/table/table-select/table-select.example.component.ts
index 3d0300860..b2ed949b1 100644
--- a/packages/bits/demo/src/components/demo/table/table-select/table-select.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-select/table-select.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, OnDestroy, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -46,6 +46,9 @@ interface IExampleTableModel {
     standalone: false,
 })
 export class TableSelectExampleComponent implements AfterViewInit, OnDestroy {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+    selectorService = inject(SelectorService);
+
     public displayedColumns = [
         "position",
         "item",
@@ -70,11 +73,6 @@ export class TableSelectExampleComponent implements AfterViewInit, OnDestroy {
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>,
-        public selectorService: SelectorService
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.componentTree = {
             paginator: {
diff --git a/packages/bits/demo/src/components/demo/table/table-selectable-toggle/table-selectable-toggle.example.component.ts b/packages/bits/demo/src/components/demo/table/table-selectable-toggle/table-selectable-toggle.example.component.ts
index b9dd16b32..4ecc8960e 100644
--- a/packages/bits/demo/src/components/demo/table/table-selectable-toggle/table-selectable-toggle.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-selectable-toggle/table-selectable-toggle.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -57,6 +50,10 @@ interface IExampleTableModel {
 export class TableSelectableToggleExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+    selectorService = inject(SelectorService);
+    changeDetector = inject(ChangeDetectorRef);
+
     public displayedColumns = [
         "position",
         "item",
@@ -81,12 +78,6 @@ export class TableSelectableToggleExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>,
-        public selectorService: SelectorService,
-        public changeDetector: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.componentTree = {
             paginator: {
diff --git a/packages/bits/demo/src/components/demo/table/table-sorting/table-sorting.example.component.ts b/packages/bits/demo/src/components/demo/table/table-sorting/table-sorting.example.component.ts
index e4fde76d5..c032db0be 100644
--- a/packages/bits/demo/src/components/demo/table/table-sorting/table-sorting.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-sorting/table-sorting.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, OnDestroy, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -47,6 +47,8 @@ interface IExampleTableModel {
     standalone: false,
 })
 export class TableSortingExampleComponent implements AfterViewInit, OnDestroy {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+
     public displayedColumns = [
         "position",
         "name",
@@ -67,9 +69,9 @@ export class TableSortingExampleComponent implements AfterViewInit, OnDestroy {
     sortableTable: TableComponent<IExampleTableModel>;
     private outputsSubscription: Subscription;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IExampleTableModel>
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(this.dataSource);
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-test/table-test.component.ts b/packages/bits/demo/src/components/demo/table/table-test/table-test.component.ts
index 1a2b788ba..0510ba7e3 100644
--- a/packages/bits/demo/src/components/demo/table/table-test/table-test.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-test/table-test.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ApplicationRef,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-    ViewContainerRef,
-} from "@angular/core";
+import { AfterViewInit, ApplicationRef, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, inject } from "@angular/core";
 import { NonNullableFormBuilder, Validators } from "@angular/forms";
 import { Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
@@ -59,6 +48,15 @@ import { TableStateHandlerService } from "../../../../../../src/lib/table/table-
     standalone: false,
 })
 export class TableTestComponent implements AfterViewInit, OnDestroy, OnInit {
+    private toastService = inject<IToastService>(ToastService);
+    private dialogService = inject<DialogService>(DialogService);
+    private tableStateHandlerService = inject<TableStateHandlerService>(TableStateHandlerService);
+    private formBuilder = inject(NonNullableFormBuilder);
+    changeDetection = inject(ChangeDetectorRef);
+    viewContainerRef = inject(ViewContainerRef);
+    applicationRef = inject(ApplicationRef);
+    dataSourceService = inject<ClientSideDataSource<ITestTableModel>>(ClientSideDataSource);
+
     public dataSource?: ITestTableModel[] = ELEMENT_DATA;
     public newColumn: string;
     public availableColumns = [
@@ -109,17 +107,9 @@ export class TableTestComponent implements AfterViewInit, OnDestroy, OnInit {
     private outputsSubscription: Subscription;
     private searchSubscription: Subscription;
 
-    constructor(
-        @Inject(ToastService) private toastService: IToastService,
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(TableStateHandlerService)
-        private tableStateHandlerService: TableStateHandlerService,
-        private formBuilder: NonNullableFormBuilder,
-        public changeDetection: ChangeDetectorRef,
-        public viewContainerRef: ViewContainerRef,
-        public applicationRef: ApplicationRef,
-        public dataSourceService: ClientSideDataSource<ITestTableModel>
-    ) {
+    constructor() {
+        const dataSourceService = this.dataSourceService;
+
         dataSourceService.setData(ELEMENT_DATA);
         this.myForm = this.formBuilder.group({
             checkboxGroup: this.formBuilder.control(this.displayedColumnsCopy, [
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-datasource-1.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-datasource-1.ts
index 6ac8412b2..a82393edb 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-datasource-1.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-datasource-1.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 
 import {
@@ -37,6 +37,8 @@ import {
 
 @Injectable()
 export class RandomuserTableDataSource1 extends DataSourceService<IRandomUserTableModel> {
+    private searchService = inject(SearchService);
+
     private readonly url = "https://randomuser.me/api";
     private readonly seed = "sw";
     private page: number = 1;
@@ -47,10 +49,6 @@ export class RandomuserTableDataSource1 extends DataSourceService<IRandomUserTab
     public busy = new BehaviorSubject(false);
     public itemsToLoad: BehaviorSubject<number> = new BehaviorSubject(500);
 
-    constructor(private searchService: SearchService) {
-        super();
-    }
-
     public async getFilteredData(
         filters: INovaFilters
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-minimalist/table-virtual-scroll-real-api-minimalist.example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-minimalist/table-virtual-scroll-real-api-minimalist.example.component.ts
index 60b69c90b..27db7b487 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-minimalist/table-virtual-scroll-real-api-minimalist.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-minimalist/table-virtual-scroll-real-api-minimalist.example.component.ts
@@ -20,16 +20,7 @@
 
 import { ListRange } from "@angular/cdk/collections";
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    forwardRef,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -57,6 +48,9 @@ import { RandomuserTableDataSource } from "../table-virtual-scroll-datasource";
 export class TableVirtualScrollRealApiMinimalistExampleComponent
     implements AfterViewInit, OnDestroy, OnInit
 {
+    selectorService = inject(SelectorService);
+    private cd = inject(ChangeDetectorRef);
+
     // This value is obtained from the server and used to evaluate the total number of pages to display
     private _totalItems: number = 0;
     // This value is being depending to obtain the total number of pages available depending on the range of the fatched items selected
@@ -96,10 +90,7 @@ export class TableVirtualScrollRealApiMinimalistExampleComponent
     public makeSticky: boolean = true;
     private dataSource: RandomuserTableDataSource;
 
-    constructor(
-        public selectorService: SelectorService,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor() {
         this.dataSource = new RandomuserTableDataSource();
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-footer/table-virtual-scroll-real-api-progress-footer.example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-footer/table-virtual-scroll-real-api-progress-footer.example.component.ts
index b2447201d..905919a25 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-footer/table-virtual-scroll-real-api-progress-footer.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-footer/table-virtual-scroll-real-api-progress-footer.example.component.ts
@@ -20,16 +20,7 @@
 
 import { ListRange } from "@angular/cdk/collections";
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    forwardRef,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -57,6 +48,9 @@ import { RandomuserTableDataSource } from "../table-virtual-scroll-datasource";
 export class TableVirtualScrollRealApiProgressFooterExampleComponent
     implements AfterViewInit, OnDestroy, OnInit
 {
+    selectorService = inject(SelectorService);
+    private cd = inject(ChangeDetectorRef);
+
     // This value is obtained from the server and used to evaluate the total number of pages to display
     private _totalItems: number = 0;
     // This value is being depending to obtain the total number of pages available depending on the range of the fatched items selected
@@ -96,10 +90,7 @@ export class TableVirtualScrollRealApiProgressFooterExampleComponent
     public makeSticky: boolean = true;
     private dataSource: RandomuserTableDataSource;
 
-    constructor(
-        public selectorService: SelectorService,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor() {
         this.dataSource = new RandomuserTableDataSource();
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-text-footer/table-virtual-scroll-real-api-progress-text-footer.example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-text-footer/table-virtual-scroll-real-api-progress-text-footer.example.component.ts
index 84eb323f3..3e6a16c2e 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-text-footer/table-virtual-scroll-real-api-progress-text-footer.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api-progress-text-footer/table-virtual-scroll-real-api-progress-text-footer.example.component.ts
@@ -19,15 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
 import { filter, switchMap, takeUntil, tap } from "rxjs/operators";
@@ -55,6 +47,10 @@ import { RandomuserTableDataSource } from "../table-virtual-scroll-datasource";
 export class TableVirtualScrollRealApiProgressTextFooterExampleComponent
     implements AfterViewInit, OnDestroy, OnInit
 {
+    selectorService = inject(SelectorService);
+    private cd = inject(ChangeDetectorRef);
+    private viewportManager = inject(VirtualViewportManager);
+
     // The range of items to fetch from the server and display within the viewport.
     public range: number = 40;
 
@@ -88,11 +84,7 @@ export class TableVirtualScrollRealApiProgressTextFooterExampleComponent
     public gridHeight = 400;
     private dataSource: RandomuserTableDataSource;
 
-    constructor(
-        public selectorService: SelectorService,
-        private cd: ChangeDetectorRef,
-        private viewportManager: VirtualViewportManager
-    ) {
+    constructor() {
         this.dataSource = new RandomuserTableDataSource();
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api/table-virtual-scroll-real-api.example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api/table-virtual-scroll-real-api.example.component.ts
index 933998bae..97318ab86 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api/table-virtual-scroll-real-api.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-real-api/table-virtual-scroll-real-api.example.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Injectable,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Injectable, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
 import { filter, switchMap, takeUntil, tap } from "rxjs/operators";
@@ -52,6 +43,9 @@ import {
 export class TableVirtualScrollRealApiExampleComponent
     implements AfterViewInit, OnDestroy, OnInit
 {
+    private cd = inject(ChangeDetectorRef);
+    private viewportManager = inject(VirtualViewportManager);
+
     @ViewChild(CdkVirtualScrollViewport, { static: false })
     viewport: CdkVirtualScrollViewport;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -87,10 +81,7 @@ export class TableVirtualScrollRealApiExampleComponent
     public gridHeight = 400;
     public makeSticky: boolean = true;
 
-    constructor(
-        private cd: ChangeDetectorRef,
-        private viewportManager: VirtualViewportManager
-    ) {
+    constructor() {
         this.dataSource = new RandomuserTableDataSource();
     }
 
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-select-sticky-header/table-virtual-scroll-select-sticky-header-example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-select-sticky-header/table-virtual-scroll-select-sticky-header-example.component.ts
index b63769e87..2392c26df 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-select-sticky-header/table-virtual-scroll-select-sticky-header-example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-select-sticky-header/table-virtual-scroll-select-sticky-header-example.component.ts
@@ -19,13 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    TrackByFunction,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, TrackByFunction, ViewChild, inject } from "@angular/core";
 import sample from "lodash/sample";
 import { Observable } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
@@ -59,6 +53,8 @@ interface IRandomUserTableModel {
 export class TableVirtualScrollSelectStickyHeaderExampleComponent
     implements AfterViewInit
 {
+    dataSourceService = inject<ClientSideDataSource<IRandomUserTableModel>>(ClientSideDataSource);
+
     @ViewChild(CdkVirtualScrollViewport)
     public viewport: CdkVirtualScrollViewport;
     // Note: Mock items list is used to fake that the data is already loaded
@@ -88,9 +84,7 @@ export class TableVirtualScrollSelectStickyHeaderExampleComponent
         item: IRandomUserTableModel
     ): number => item?.no;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IRandomUserTableModel>
-    ) {
+    constructor() {
         // Note: Initiating data source with data to be displayed
         this.dataSourceService.setData(generateUsers(100000));
     }
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-steps-and-button/table-virtual-scroll-steps-and-button.example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-steps-and-button/table-virtual-scroll-steps-and-button.example.component.ts
index f1f4c36cc..ffc0b212f 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-steps-and-button/table-virtual-scroll-steps-and-button.example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-steps-and-button/table-virtual-scroll-steps-and-button.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    OnInit,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, inject } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 
 import {
@@ -49,6 +43,10 @@ import { RandomuserTableDataSource1 } from "../table-virtual-scroll-datasource-1
 export class TableVirtualScrollStepsAndButtonExampleComponent
     implements OnDestroy, OnInit
 {
+    selectorService = inject(SelectorService);
+    private cd = inject(ChangeDetectorRef);
+    private searchService = inject(SearchService);
+
     // This value is obtained from the server and used to evaluate the total number of pages to display
     private _loadedItems: number = 0;
     private _isBusy: boolean = false;
@@ -84,12 +82,8 @@ export class TableVirtualScrollStepsAndButtonExampleComponent
 
     private dataSource: RandomuserTableDataSource1;
 
-    constructor(
-        public selectorService: SelectorService,
-        private cd: ChangeDetectorRef,
-        private searchService: SearchService
-    ) {
-        this.dataSource = new RandomuserTableDataSource1(searchService);
+    constructor() {
+        this.dataSource = new RandomuserTableDataSource1();
         this.dataSource.step.next(this.step);
         this.dataSource.itemsToLoad.next(this.itemsToLoad);
     }
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header-test/table-virtual-scroll-sticky-header-test-example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header-test/table-virtual-scroll-sticky-header-test-example.component.ts
index aa5f1b6da..79080fb88 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header-test/table-virtual-scroll-sticky-header-test-example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header-test/table-virtual-scroll-sticky-header-test-example.component.ts
@@ -19,13 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    TrackByFunction,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, TrackByFunction, ViewChild, inject } from "@angular/core";
 import { Observable } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
 import { map, startWith, switchMap, tap } from "rxjs/operators";
@@ -56,6 +50,8 @@ interface IRandomUserTableModel {
 export class TableVirtualScrollStickyHeaderTestExampleComponent
     implements AfterViewInit
 {
+    dataSourceService = inject<ClientSideDataSource<IRandomUserTableModel>>(ClientSideDataSource);
+
     @ViewChild(CdkVirtualScrollViewport)
     public viewport: CdkVirtualScrollViewport;
     // Note: Used only for demo purposes
@@ -85,9 +81,7 @@ export class TableVirtualScrollStickyHeaderTestExampleComponent
         item: IRandomUserTableModel
     ): number => item?.no;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IRandomUserTableModel>
-    ) {
+    constructor() {
         // Note: Initiating data source with data to be displayed
         this.dataSourceService.setData(generateUsers(100000));
     }
diff --git a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header/table-virtual-scroll-sticky-header-example.component.ts b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header/table-virtual-scroll-sticky-header-example.component.ts
index 47c0f5455..546387588 100644
--- a/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header/table-virtual-scroll-sticky-header-example.component.ts
+++ b/packages/bits/demo/src/components/demo/table/table-virtual-scroll-sticky-header/table-virtual-scroll-sticky-header-example.component.ts
@@ -19,13 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    TrackByFunction,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, TrackByFunction, ViewChild, inject } from "@angular/core";
 import sample from "lodash/sample";
 import { Observable } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
@@ -55,6 +49,8 @@ interface IRandomUserTableModel {
 export class TableVirtualScrollStickyHeaderExampleComponent
     implements AfterViewInit
 {
+    dataSourceService = inject<ClientSideDataSource<IRandomUserTableModel>>(ClientSideDataSource);
+
     @ViewChild(CdkVirtualScrollViewport)
     public viewport: CdkVirtualScrollViewport;
     // Note: Used only for demo purposes
@@ -83,9 +79,7 @@ export class TableVirtualScrollStickyHeaderExampleComponent
         item: IRandomUserTableModel
     ): number => item?.no;
 
-    constructor(
-        public dataSourceService: ClientSideDataSource<IRandomUserTableModel>
-    ) {
+    constructor() {
         // Note: Initiating data source with data to be displayed
         this.dataSourceService.setData(generateUsers(100000));
     }
diff --git a/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-min-max/textbox-number-min-max.example.component.ts b/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-min-max/textbox-number-min-max.example.component.ts
index 7561bc552..d50fea2d9 100644
--- a/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-min-max/textbox-number-min-max.example.component.ts
+++ b/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-min-max/textbox-number-min-max.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 @Component({
@@ -27,11 +27,13 @@ import { FormBuilder } from "@angular/forms";
     standalone: false,
 })
 export class TextboxNumberMinMaxExampleComponent {
+    formBuilder = inject(FormBuilder);
+
     public value = 10;
 
     public reactiveForm;
 
-    constructor(public formBuilder: FormBuilder) {
+    constructor() {
         this.reactiveForm = this.formBuilder.group({
             number: [1],
         });
diff --git a/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-test/textbox-number-test.component.ts b/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-test/textbox-number-test.component.ts
index e514fb0e5..a2a69566d 100644
--- a/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-test/textbox-number-test.component.ts
+++ b/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-test/textbox-number-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 @Component({
@@ -27,11 +27,13 @@ import { FormBuilder } from "@angular/forms";
     standalone: false,
 })
 export class TextboxNumberTestComponent {
+    formBuilder = inject(FormBuilder);
+
     public value = 10;
 
     public reactiveForm;
 
-    constructor(public formBuilder: FormBuilder) {
+    constructor() {
         this.reactiveForm = this.formBuilder.group({
             number: [1],
         });
diff --git a/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-visual-test/textbox-number-visual-test.component.ts b/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-visual-test/textbox-number-visual-test.component.ts
index 63257ce67..8f0229e03 100644
--- a/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-visual-test/textbox-number-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/textbox/textbox-number/textbox-number-visual-test/textbox-number-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 @Component({
@@ -27,9 +27,11 @@ import { FormBuilder } from "@angular/forms";
     standalone: false,
 })
 export class TextboxNumberVisualTestComponent {
+    formBuilder = inject(FormBuilder);
+
     public reactiveForm;
 
-    constructor(public formBuilder: FormBuilder) {
+    constructor() {
         this.reactiveForm = this.formBuilder.group({
             number: [10],
         });
diff --git a/packages/bits/demo/src/components/demo/theming/custom-theme/custom-theme.example.component.ts b/packages/bits/demo/src/components/demo/theming/custom-theme/custom-theme.example.component.ts
index 3fc289e5a..3a5cdd707 100644
--- a/packages/bits/demo/src/components/demo/theming/custom-theme/custom-theme.example.component.ts
+++ b/packages/bits/demo/src/components/demo/theming/custom-theme/custom-theme.example.component.ts
@@ -19,14 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import {
-    Component,
-    Inject,
-    OnDestroy,
-    Renderer2,
-    RendererFactory2,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, OnDestroy, Renderer2, RendererFactory2, ViewEncapsulation, inject } from "@angular/core";
 
 @Component({
     selector: "custom-theme-example",
@@ -41,10 +34,10 @@ export class CustomThemeExampleComponent implements OnDestroy {
     private readonly customClassName = "clown-party-theme";
 
     // Inject the RendererFactory2 for manipulating the DOM and inject the document for manipulation
-    constructor(
-        rendererFactory: RendererFactory2,
-        @Inject(DOCUMENT) document: Document
-    ) {
+    constructor() {
+        const rendererFactory = inject(RendererFactory2);
+        const document = inject<Document>(DOCUMENT);
+
         // Get the root html element
         this.containerElement = document.children[0];
         // Create a renderer instance
diff --git a/packages/bits/demo/src/components/demo/theming/theme-switch-service/theme-switch-service.example.component.ts b/packages/bits/demo/src/components/demo/theming/theme-switch-service/theme-switch-service.example.component.ts
index ad1278998..078579c75 100644
--- a/packages/bits/demo/src/components/demo/theming/theme-switch-service/theme-switch-service.example.component.ts
+++ b/packages/bits/demo/src/components/demo/theming/theme-switch-service/theme-switch-service.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, inject } from "@angular/core";
 
 import { ThemeSwitchService } from "@nova-ui/bits";
 
@@ -28,8 +28,8 @@ import { ThemeSwitchService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ThemeSwitchServiceExampleComponent implements OnInit, OnDestroy {
-    // Inject the service
-    constructor(public themeSwitchService: ThemeSwitchService) {}
+    themeSwitchService = inject(ThemeSwitchService);
+
 
     public ngOnInit(): void {
         // Configure the service to listen for changes to the system color scheme preference.
diff --git a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-basic/time-frame-picker-basic.example.component.ts b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-basic/time-frame-picker-basic.example.component.ts
index 404c56b45..4a2fa6870 100644
--- a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-basic/time-frame-picker-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-basic/time-frame-picker-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { Subject } from "rxjs";
 
 import {
@@ -33,6 +33,8 @@ import {
     standalone: false,
 })
 export class TimeFramePickerBasicExampleComponent {
+    timeframeService = inject(TimeframeService);
+
     public presets: ITimeFramePresetDictionary;
     public selectedPresetKey?: string = "lastHour";
     public acceptedTimeframe: ITimeframe;
@@ -40,7 +42,9 @@ export class TimeFramePickerBasicExampleComponent {
 
     public showFooter: boolean = false;
 
-    constructor(public timeframeService: TimeframeService) {
+    constructor() {
+        const timeframeService = this.timeframeService;
+
         this.presets = timeframeService.getDefaultPresets();
         this.acceptedTimeframe = this.timeframeService.getTimeframeByPresetId(
             this.selectedPresetKey
diff --git a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-custom/time-frame-picker-custom.example.component.ts b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-custom/time-frame-picker-custom.example.component.ts
index 1b27ca8b4..eb491563e 100644
--- a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-custom/time-frame-picker-custom.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-custom/time-frame-picker-custom.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { Subject } from "rxjs";
 
 import {
@@ -34,6 +34,8 @@ import {
     standalone: false,
 })
 export class TimeFramePickerCustomExampleComponent {
+    timeframeService = inject(TimeframeService);
+
     public presets: ITimeFramePresetDictionary = {
         last42Hours: {
             name: $localize`Last 42 hours`,
@@ -52,7 +54,7 @@ export class TimeFramePickerCustomExampleComponent {
 
     public showFooter: boolean = false;
 
-    constructor(public timeframeService: TimeframeService) {
+    constructor() {
         this.timeframeService.currentPresets = this.presets;
         this.acceptedTimeframe = this.timeframeService.getTimeframeByPresetId(
             this.selectedPresetKey
diff --git a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-multiple-custom-pickers/time-frame-picker-multiple-custom-pickers.example.component.ts b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-multiple-custom-pickers/time-frame-picker-multiple-custom-pickers.example.component.ts
index 63c7c150a..6fba1635a 100644
--- a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-multiple-custom-pickers/time-frame-picker-multiple-custom-pickers.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-multiple-custom-pickers/time-frame-picker-multiple-custom-pickers.example.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    QueryList,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, QueryList, ViewChildren, inject } from "@angular/core";
 import { Subject } from "rxjs";
 
 import {
@@ -44,13 +38,14 @@ interface IPicker {
 
 @Component({
     selector: "nui-time-frame-picker-multiple-custom-pickers",
-    templateUrl:
-        "./time-frame-picker-multiple-custom-pickers.example.component.html",
+    templateUrl: "./time-frame-picker-multiple-custom-pickers.example.component.html",
     standalone: false,
 })
 export class TimeFramePickerMultipleCustomPickersExampleComponent
     implements AfterViewInit
 {
+    private cdRef = inject(ChangeDetectorRef);
+
     @ViewChildren("scoper")
     private tfScopers: QueryList<TimeframeServiceScoperExampleComponent>;
 
@@ -118,8 +113,6 @@ export class TimeFramePickerMultipleCustomPickersExampleComponent
     public closePopoverSubject = new Subject<void>();
     public openPopoverSubject = new Subject<void>();
 
-    constructor(private cdRef: ChangeDetectorRef) {}
-
     public updateTf(value: ITimeframe, index: number): void {
         const picker = this.pickers[index];
         picker.tf = value;
@@ -183,5 +176,6 @@ export class TimeFramePickerMultipleCustomPickersExampleComponent
     standalone: false,
 })
 export class TimeframeServiceScoperExampleComponent {
-    constructor(public timeframeService: TimeframeService) {}
+    timeframeService = inject(TimeframeService);
+
 }
diff --git a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-test/time-frame-picker-test.example.component.ts b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-test/time-frame-picker-test.example.component.ts
index 4262cbdcb..81ddeb5db 100644
--- a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-test/time-frame-picker-test.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-test/time-frame-picker-test.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import moment from "moment/moment";
 import { Subject } from "rxjs";
 
@@ -34,6 +34,8 @@ import {
     standalone: false,
 })
 export class TimeFramePickerTestExampleComponent {
+    timeframeService = inject(TimeframeService);
+
     public presets: ITimeFramePresetDictionary;
     public selectedPresetKey?: string = "lastHour";
     public acceptedTimeframe: ITimeframe;
@@ -44,7 +46,9 @@ export class TimeFramePickerTestExampleComponent {
 
     public showFooter: boolean = false;
 
-    constructor(public timeframeService: TimeframeService) {
+    constructor() {
+        const timeframeService = this.timeframeService;
+
         this.presets = timeframeService.getDefaultPresets();
         this.acceptedTimeframe = this.timeframeService.getTimeframeByPresetId(
             this.selectedPresetKey
diff --git a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-visual-test/time-frame-picker-visual-test.component.ts b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-visual-test/time-frame-picker-visual-test.component.ts
index 0ec045615..4511c941f 100644
--- a/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-visual-test/time-frame-picker-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/time-frame-picker/time-frame-picker-visual-test/time-frame-picker-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import _find from "lodash/find";
 import _isUndefined from "lodash/isUndefined";
 import moment, { Moment } from "moment/moment";
@@ -37,6 +37,8 @@ import {
     standalone: false,
 })
 export class TimeFramePickerVisualTestComponent {
+    timeframeService = inject(TimeframeService);
+
     public presets: ITimeFramePresetDictionary;
     public presetsDatePicker: IQuickPickPresetDictionary;
     public selectedPresetKey?: string = "lastHour";
@@ -47,7 +49,9 @@ export class TimeFramePickerVisualTestComponent {
 
     public showFooter: boolean = false;
 
-    constructor(public timeframeService: TimeframeService) {
+    constructor() {
+        const timeframeService = this.timeframeService;
+
         this.presets = timeframeService.getDefaultPresets();
         this.acceptedTimeframe = this.timeframeService.getTimeframeByPresetId(
             this.selectedPresetKey,
diff --git a/packages/bits/demo/src/components/demo/time-picker/time-picker-model-change/time-picker-model-change.example.component.ts b/packages/bits/demo/src/components/demo/time-picker/time-picker-model-change/time-picker-model-change.example.component.ts
index c67e2865f..7f559074f 100644
--- a/packages/bits/demo/src/components/demo/time-picker/time-picker-model-change/time-picker-model-change.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-picker/time-picker-model-change/time-picker-model-change.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { ToastService } from "@nova-ui/bits";
@@ -29,8 +29,10 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class TimePickerModelChangeExampleComponent {
+    private toastService = inject<ToastService>(ToastService);
+
     public time: Moment;
-    constructor(@Inject(ToastService) private toastService: ToastService) {
+    constructor() {
         this.time = moment("01:20 AM", "HH:mm a");
     }
     public valueChange(time: any): void {
diff --git a/packages/bits/demo/src/components/demo/time-picker/time-picker-preserve-isignificant/time-picker-preserve-insignificant.example.component.ts b/packages/bits/demo/src/components/demo/time-picker/time-picker-preserve-isignificant/time-picker-preserve-insignificant.example.component.ts
index f7bfb0180..8217b12d8 100644
--- a/packages/bits/demo/src/components/demo/time-picker/time-picker-preserve-isignificant/time-picker-preserve-insignificant.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-picker/time-picker-preserve-isignificant/time-picker-preserve-insignificant.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { ToastService } from "@nova-ui/bits";
@@ -29,9 +29,11 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class TimePickerPreserveInsignificantExampleComponent {
+    private toastService = inject<ToastService>(ToastService);
+
     public time: Moment;
 
-    constructor(@Inject(ToastService) private toastService: ToastService) {
+    constructor() {
         this.time = moment();
     }
 
diff --git a/packages/bits/demo/src/components/demo/time-picker/time-picker-reactive-form/time-picker-reactive-form.example.component.ts b/packages/bits/demo/src/components/demo/time-picker/time-picker-reactive-form/time-picker-reactive-form.example.component.ts
index c00e1b947..dbce6763b 100644
--- a/packages/bits/demo/src/components/demo/time-picker/time-picker-reactive-form/time-picker-reactive-form.example.component.ts
+++ b/packages/bits/demo/src/components/demo/time-picker/time-picker-reactive-form/time-picker-reactive-form.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
@@ -35,16 +35,14 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class TimePickerReactiveFormExampleComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
+
     public time: Moment;
     public myForm: FormGroup<{
         timePickerFormControl: FormControl<Moment | null>;
     }>;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             timePickerFormControl: this.formBuilder.control(this.time, [
diff --git a/packages/bits/demo/src/components/demo/time-picker/time-picker-visual-test/time-picker-visual-test.component.ts b/packages/bits/demo/src/components/demo/time-picker/time-picker-visual-test/time-picker-visual-test.component.ts
index 164458796..16d839526 100644
--- a/packages/bits/demo/src/components/demo/time-picker/time-picker-visual-test/time-picker-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/time-picker/time-picker-visual-test/time-picker-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
@@ -33,13 +33,15 @@ import moment, { Moment } from "moment/moment";
     standalone: false,
 })
 export class TimePickerVisualTestComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+
     public time: Moment;
     public myTime: Moment;
     public myForm: FormGroup<{
         timePickerFormControl: FormControl<Moment | null>;
     }>;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.myTime = moment("2018-12-14T12:00:00+02:00");
     }
 
diff --git a/packages/bits/demo/src/components/demo/toast/toast-basic-html/toast-basic-html.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-basic-html/toast-basic-html.example.component.ts
index 319bb0649..7c7e3a001 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-basic-html/toast-basic-html.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-basic-html/toast-basic-html.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import { IToastService, ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ToastBasicHtmlExampleComponent implements OnInit {
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    private toastService = inject<IToastService>(ToastService);
+
 
     public ngOnInit(): void {
         this.toastService.setConfig(
diff --git a/packages/bits/demo/src/components/demo/toast/toast-basic/toast-basic.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-basic/toast-basic.example.component.ts
index 35b639a97..d8aed1710 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-basic/toast-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-basic/toast-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import { IToastConfig, IToastService, ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { IToastConfig, IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ToastBasicExampleComponent implements OnInit {
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    private toastService = inject<IToastService>(ToastService);
+
 
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
diff --git a/packages/bits/demo/src/components/demo/toast/toast-config/toast-config.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-config/toast-config.example.component.ts
index f8d6f04a0..14da43f9f 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-config/toast-config.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-config/toast-config.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IToastConfig,
@@ -33,9 +33,9 @@ import {
     standalone: false,
 })
 export class ToastConfigExampleComponent implements OnInit {
-    public selectedPosition: string;
+    private toastService = inject<IToastService>(ToastService);
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    public selectedPosition: string;
 
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
diff --git a/packages/bits/demo/src/components/demo/toast/toast-events/toast-events.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-events/toast-events.example.component.ts
index 72c57e5da..571cdb675 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-events/toast-events.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-events/toast-events.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IActiveToast,
@@ -34,13 +34,13 @@ import {
     standalone: false,
 })
 export class ToastEventsExampleComponent implements OnInit {
+    private toastService = inject<IToastService>(ToastService);
+
     public lastShown?: number;
     public clickCount = 0;
     public toastCount = 0;
     public isDisplayed: boolean;
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
     }
diff --git a/packages/bits/demo/src/components/demo/toast/toast-position/toast-position.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-position/toast-position.example.component.ts
index 2a3a4fa04..fe06d9ac3 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-position/toast-position.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-position/toast-position.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IToastConfig,
@@ -33,6 +33,8 @@ import {
     standalone: false,
 })
 export class ToastPositionExampleComponent implements OnInit {
+    private toastService = inject<IToastService>(ToastService);
+
     public toastPositions = [
         {
             displayValue: $localize`Top Right`,
@@ -74,8 +76,6 @@ export class ToastPositionExampleComponent implements OnInit {
     public selectedPosition: ToastPositionClass | string =
         this.toastPositions[0].className;
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
     }
diff --git a/packages/bits/demo/src/components/demo/toast/toast-sticky-error/toast-sticky-error.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-sticky-error/toast-sticky-error.example.component.ts
index ea1945d2c..ae6054ebf 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-sticky-error/toast-sticky-error.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-sticky-error/toast-sticky-error.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IToastConfig,
@@ -33,9 +33,9 @@ import {
     standalone: false,
 })
 export class ToastStickyErrorExampleComponent implements OnInit {
-    public selectedPosition: string;
+    private toastService = inject<IToastService>(ToastService);
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    public selectedPosition: string;
 
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
diff --git a/packages/bits/demo/src/components/demo/toast/toast-test/toast-test.component.ts b/packages/bits/demo/src/components/demo/toast/toast-test/toast-test.component.ts
index ec8319e1d..4eb077437 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-test/toast-test.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-test/toast-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IActiveToast,
@@ -35,7 +35,8 @@ import {
     standalone: false,
 })
 export class ToastTestComponent implements OnInit {
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    private toastService = inject<IToastService>(ToastService);
+
 
     private defaults: IToastDeclaration = {
         message: "",
diff --git a/packages/bits/demo/src/components/demo/toast/toast-type/toast-type.example.component.ts b/packages/bits/demo/src/components/demo/toast/toast-type/toast-type.example.component.ts
index a355fd535..5fb1d4655 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-type/toast-type.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-type/toast-type.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import { IToastConfig, IToastService, ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { IToastConfig, IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ToastTypeExampleComponent implements OnInit {
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    private toastService = inject<IToastService>(ToastService);
+
 
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
diff --git a/packages/bits/demo/src/components/demo/toast/toast-visual-test/toast-visual-test.component.ts b/packages/bits/demo/src/components/demo/toast/toast-visual-test/toast-visual-test.component.ts
index d17bbef9a..ed06907d6 100644
--- a/packages/bits/demo/src/components/demo/toast/toast-visual-test/toast-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/toast/toast-visual-test/toast-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 
 import {
     IToastConfig,
@@ -33,12 +33,12 @@ import {
     standalone: false,
 })
 export class ToastVisualTestComponent implements OnInit {
+    private toastService = inject<IToastService>(ToastService);
+
     private errorMessage: string = `Something went wrong + in addition there is an extremely
     long line that verifies that the toast expands as more text comes into it. More or less text -
     Toast messages must look good either way!`;
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public ngOnInit(): void {
         this.toastService.setConfig({}, "id");
     }
diff --git a/packages/bits/demo/src/components/demo/toolbar/toolbar-basic/toolbar-basic.example.component.ts b/packages/bits/demo/src/components/demo/toolbar/toolbar-basic/toolbar-basic.example.component.ts
index 781c32621..4a2dcbfdb 100644
--- a/packages/bits/demo/src/components/demo/toolbar/toolbar-basic/toolbar-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toolbar/toolbar-basic/toolbar-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { IToastService, ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { IToastService, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ToolbarBasicExampleComponent {
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
+    private toastService = inject<IToastService>(ToastService);
+
 
     public onShowToast(highlightMode: boolean): void {
         this.toastService.info({
diff --git a/packages/bits/demo/src/components/demo/toolbar/toolbar-embedded-content/toolbar-embedded-content.example.component.ts b/packages/bits/demo/src/components/demo/toolbar/toolbar-embedded-content/toolbar-embedded-content.example.component.ts
index 0767ce55c..e02873437 100644
--- a/packages/bits/demo/src/components/demo/toolbar/toolbar-embedded-content/toolbar-embedded-content.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toolbar/toolbar-embedded-content/toolbar-embedded-content.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { IMenuGroup, LoggerService } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { IMenuGroup, LoggerService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ToolbarEmbeddedContentExampleComponent {
+    private logger = inject<LoggerService>(LoggerService);
+
     public itemsSource: IMenuGroup[] = [
         {
             header: $localize`section title`,
@@ -83,8 +85,6 @@ export class ToolbarEmbeddedContentExampleComponent {
     public value: string;
     private timerHandler: number;
 
-    public constructor(@Inject(LoggerService) private logger: LoggerService) {}
-
     public onCancel(value: string): void {
         this.logger.warn("Example onCancel fired. Value passed: " + value);
         if (value === "") {
diff --git a/packages/bits/demo/src/components/demo/toolbar/toolbar-selection/toolbar-selection.example.component.ts b/packages/bits/demo/src/components/demo/toolbar/toolbar-selection/toolbar-selection.example.component.ts
index a1078f42f..3cd8eefeb 100644
--- a/packages/bits/demo/src/components/demo/toolbar/toolbar-selection/toolbar-selection.example.component.ts
+++ b/packages/bits/demo/src/components/demo/toolbar/toolbar-selection/toolbar-selection.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { LoggerService } from "@nova-ui/bits";
 
@@ -28,6 +28,8 @@ import { LoggerService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ToolbarSelectionExampleComponent {
+    private logger = inject<LoggerService>(LoggerService);
+
     public selectionEnabled = true;
     public select = {
         current: 1,
@@ -47,8 +49,6 @@ export class ToolbarSelectionExampleComponent {
 
     public noEmptyMessage = false;
 
-    public constructor(@Inject(LoggerService) private logger: LoggerService) {}
-
     public onCancel(value: string): void {
         this.logger.warn("Example onCancel fired. Value passed: " + value);
         if (value === "") {
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-async-validation-form/wizard-async-form-validation.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-async-validation-form/wizard-async-form-validation.example.component.ts
index 5b090c13b..6dd4e4e0a 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-async-validation-form/wizard-async-form-validation.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-async-validation-form/wizard-async-form-validation.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 import { AbstractControl, FormBuilder, Validators } from "@angular/forms";
 import { of } from "rxjs";
 import { delay, take } from "rxjs/operators";
@@ -37,15 +37,15 @@ const fakeAsyncValidator = (c: AbstractControl) => of(null).pipe(delay(4000));
     standalone: false,
 })
 export class WizardAsyncFormValidationExampleComponent {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject(ToastService);
+
     public busy: boolean;
     public form;
 
     @ViewChild("wizard") wizard: WizardHorizontalComponent;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private toastService: ToastService
-    ) {
+    constructor() {
         this.form = this.formBuilder.group({
             personDetails: this.formBuilder.group({
                 name: [
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-busy/wizard-busy.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-busy/wizard-busy.example.component.ts
index af6bc87ab..cff38b16f 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-busy/wizard-busy.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-busy/wizard-busy.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -29,12 +29,12 @@ import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardBusyExampleComponent {
+    private toastService = inject(ToastService);
+
     public busy: boolean;
 
     @ViewChild("wizard") private wizard: WizardHorizontalComponent;
 
-    constructor(private toastService: ToastService) {}
-
     public resetWizard(): void {
         this.wizard.reset();
     }
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-footer/wizard-custom-footer.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-footer/wizard-custom-footer.example.component.ts
index 8a596784e..4864f33ff 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-footer/wizard-custom-footer.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-footer/wizard-custom-footer.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -29,9 +29,9 @@ import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardCustomFooterExampleComponent {
-    @ViewChild("wizard") private wizard: WizardHorizontalComponent;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {}
+    @ViewChild("wizard") private wizard: WizardHorizontalComponent;
 
     public resetWizard(): void {
         this.wizard.reset();
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-layout/wizard-custom.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-layout/wizard-custom.example.component.ts
index fc8c250bb..0d5c4d3ac 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-layout/wizard-custom.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-custom-layout/wizard-custom.example.component.ts
@@ -19,13 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkStepper, STEPPER_GLOBAL_OPTIONS } from "@angular/cdk/stepper";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 // eslint-disable-next-line import/no-deprecated
 import { tap } from "rxjs/operators";
@@ -63,6 +57,8 @@ export class WizardCustomComponent extends WizardDirective {}
     standalone: false,
 })
 export class WizardCustomExampleComponent implements AfterViewInit {
+    private formBuilder = inject(FormBuilder);
+
     public form;
 
     public steps: number = 1;
@@ -71,7 +67,7 @@ export class WizardCustomExampleComponent implements AfterViewInit {
 
     @ViewChild("wizard") wizard: WizardCustomComponent;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.form = this.formBuilder.group({
             personDetails: this.formBuilder.group({
                 name: ["", [Validators.required, Validators.minLength(3)]],
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-dialog/wizard-dialog.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-dialog/wizard-dialog.example.component.ts
index d145a7043..1e71af2ad 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-dialog/wizard-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-dialog/wizard-dialog.example.component.ts
@@ -22,7 +22,7 @@ import {
     FlexibleConnectedPositionStrategy,
     OverlayRef,
 } from "@angular/cdk/overlay";
-import { Component, Inject, OnDestroy, TemplateRef } from "@angular/core";
+import { Component, OnDestroy, TemplateRef, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -41,6 +41,9 @@ import {
     standalone: false,
 })
 export class WizardDialogExampleComponent implements OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject(ToastService);
+
     public onDestroy$ = new Subject<void>();
     public overlayTriggered$ = new Subject<void>();
 
@@ -48,11 +51,6 @@ export class WizardDialogExampleComponent implements OnDestroy {
     public busy: boolean = false;
     public activeDialog: NuiDialogRef;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        private toastService: ToastService
-    ) {}
-
     public vegetables = [
         $localize`Cabbage`,
         $localize`Potato`,
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-dynamic/wizard-dynamic.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-dynamic/wizard-dynamic.example.component.ts
index 5da7f8b1e..467d0c978 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-dynamic/wizard-dynamic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-dynamic/wizard-dynamic.example.component.ts
@@ -18,12 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, TemplateRef, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -38,14 +33,14 @@ interface IWizardStepData {
     standalone: false,
 })
 export class WizardDynamicExampleComponent implements AfterViewInit {
+    private toastService = inject(ToastService);
+
     public enableDynamicStepWithButton = false;
     public steps: IWizardStepData[] = [];
 
     @ViewChild("dynamicTemplate1") dynamicTemplate1: TemplateRef<string>;
     @ViewChild("wizardComponent") private wizard: WizardHorizontalComponent;
 
-    constructor(private toastService: ToastService) {}
-
     public ngAfterViewInit(): void {
         this.addStep(this.dynamicTemplate1, $localize`My first dynamic step`);
     }
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-horizontal/wizard-horizontal.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-horizontal/wizard-horizontal.example.component.ts
index f77263c04..7902486ee 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-horizontal/wizard-horizontal.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-horizontal/wizard-horizontal.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -28,9 +28,9 @@ import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardHorizontalExampleComponent {
-    @ViewChild("wizard") private wizard: WizardHorizontalComponent;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {}
+    @ViewChild("wizard") private wizard: WizardHorizontalComponent;
 
     public resetWizard(): void {
         this.wizard.reset();
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-remove-step/wizard-remove-step.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-remove-step/wizard-remove-step.example.component.ts
index 210ad95ca..050d1e59d 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-remove-step/wizard-remove-step.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-remove-step/wizard-remove-step.example.component.ts
@@ -18,12 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, TemplateRef, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -38,13 +33,13 @@ interface IWizardStepData {
     standalone: false,
 })
 export class WizardRemoveStepExampleComponent implements AfterViewInit {
+    private toastService = inject(ToastService);
+
     public steps: IWizardStepData[] = [];
 
     @ViewChild("normalStep") normalStep: TemplateRef<string>;
     @ViewChild("wizard") private wizard: WizardHorizontalComponent;
 
-    constructor(private toastService: ToastService) {}
-
     public ngAfterViewInit(): void {
         this.addStep(this.normalStep, $localize`Normal step`);
     }
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-responsive-header/wizard-responsive-header.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-responsive-header/wizard-responsive-header.example.component.ts
index d02636cdb..16b35e579 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-responsive-header/wizard-responsive-header.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-responsive-header/wizard-responsive-header.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -28,12 +28,12 @@ import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardResponsiveHeaderExampleComponent {
+    private toast = inject(ToastService);
+
     public steps: Array<any> = Array.from({ length: 20 });
 
     @ViewChild("nuiWizard") public wizard: WizardHorizontalComponent;
 
-    constructor(private toast: ToastService) {}
-
     public reset(): void {
         this.wizard.reset();
     }
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-restore-state/wizard-restore-state.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-restore-state/wizard-restore-state.example.component.ts
index 3036fada6..ff111219d 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-restore-state/wizard-restore-state.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-restore-state/wizard-restore-state.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import isEqual from "lodash/isEqual";
 import { Subject } from "rxjs";
@@ -51,6 +44,10 @@ interface IWizardStepData {
     standalone: false,
 })
 export class WizardRestoreStateExampleComponent implements OnInit, OnDestroy {
+    private formBuilder = inject(FormBuilder);
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject(ToastService);
+
     public form;
     public activeDialog: NuiDialogRef;
     public state: IWizardState;
@@ -60,11 +57,7 @@ export class WizardRestoreStateExampleComponent implements OnInit, OnDestroy {
     @ViewChild("dynamicTemplate2") public template2: TemplateRef<string>;
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(DialogService) private dialogService: DialogService,
-        private toastService: ToastService
-    ) {
+    constructor() {
         this.form = this.formBuilder.group({
             personDetails: this.formBuilder.group({
                 name: ["", [Validators.required, Validators.minLength(3)]],
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-step-change/wizard-step-change.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-step-change/wizard-step-change.example.component.ts
index b3d2dd554..1a3781ae1 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-step-change/wizard-step-change.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-step-change/wizard-step-change.example.component.ts
@@ -19,12 +19,7 @@
 //  THE SOFTWARE.
 
 import { StepperSelectionEvent } from "@angular/cdk/stepper";
-import {
-    AfterViewInit,
-    Component,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, TemplateRef, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -39,13 +34,13 @@ interface IWizardStepData {
     standalone: false,
 })
 export class WizardStepChangeExampleComponent implements AfterViewInit {
+    private toastService = inject(ToastService);
+
     public steps: IWizardStepData[] = [];
 
     @ViewChild("normalStep") normalStep: TemplateRef<string>;
     @ViewChild("wizard") wizard: WizardHorizontalComponent;
 
-    constructor(private toastService: ToastService) {}
-
     public ngAfterViewInit(): void {
         this.addStep(this.normalStep, $localize`Normal step`);
     }
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-test/wizard-test.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-test/wizard-test.component.ts
index e2b7b7361..b23cb73b5 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-test/wizard-test.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-test/wizard-test.component.ts
@@ -22,14 +22,7 @@ import {
     FlexibleConnectedPositionStrategy,
     OverlayRef,
 } from "@angular/cdk/overlay";
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, TemplateRef, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -54,6 +47,8 @@ interface IWizardStepData {
     standalone: false,
 })
 export class WizardV2TestComponent implements AfterViewInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     public onDestroy$ = new Subject<void>();
     public overlayTriggered$ = new Subject<void>();
     public responsiveSteps: Array<any> = Array.from({ length: 20 });
@@ -62,8 +57,6 @@ export class WizardV2TestComponent implements AfterViewInit, OnDestroy {
     public busy: boolean = false;
     public activeDialog: NuiDialogRef;
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public vegetables = [
         $localize`Cabbage`,
         $localize`Potato`,
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-tooltip/wizard-tooltip.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-tooltip/wizard-tooltip.example.component.ts
index 35dcf0338..a9b1ff5b9 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-tooltip/wizard-tooltip.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-tooltip/wizard-tooltip.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 
 import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
 
@@ -28,9 +28,9 @@ import { ToastService, WizardHorizontalComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardTooltipExampleComponent {
-    @ViewChild("wizardComponent") wizard: WizardHorizontalComponent;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {}
+    @ViewChild("wizardComponent") wizard: WizardHorizontalComponent;
 
     public resetWizard(): void {
         this.wizard.reset();
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-confirmation-dialog-on-cancel/wizard-with-confirmation-dialog-on-cancel.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-confirmation-dialog-on-cancel/wizard-with-confirmation-dialog-on-cancel.example.component.ts
index aacea926e..817f56274 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-confirmation-dialog-on-cancel/wizard-with-confirmation-dialog-on-cancel.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-confirmation-dialog-on-cancel/wizard-with-confirmation-dialog-on-cancel.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    TemplateRef,
-    ViewChild,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import {
@@ -46,17 +39,17 @@ import {
     standalone: false,
 })
 export class WizardWithConfirmationDialogOnCancelExampleComponent {
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject(ToastService);
+    private formBuilder = inject(FormBuilder);
+    cd = inject(ChangeDetectorRef);
+
     public confirmationDialog: NuiDialogRef;
     public form;
 
     @ViewChild("wizard") private wizard: WizardHorizontalComponent;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        private toastService: ToastService,
-        private formBuilder: FormBuilder,
-        public cd: ChangeDetectorRef
-    ) {
+    constructor() {
         this.form = this.formBuilder.group({
             personDetails: this.formBuilder.group({
                 firstName: ["", [Validators.required, Validators.minLength(3)]],
diff --git a/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-custom-icons/wizard-with-custom-icons.example.component.ts b/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-custom-icons/wizard-with-custom-icons.example.component.ts
index 79f0a8b9d..55967ec93 100644
--- a/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-custom-icons/wizard-with-custom-icons.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard-v2/wizard-with-custom-icons/wizard-with-custom-icons.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 
 import {
     IWizardConfig,
@@ -47,9 +47,9 @@ import {
     standalone: false,
 })
 export class WizardWithCustomIconsExampleComponent {
-    @ViewChild("wizard") wizard: WizardHorizontalComponent;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {}
+    @ViewChild("wizard") wizard: WizardHorizontalComponent;
 
     public secondStepIconConfig: Partial<WizardStepStateConfig> = {
         initial: {
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-additional-button/wizard-additional-button.example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-additional-button/wizard-additional-button.example.component.ts
index 1a0f6ffe4..935853284 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-additional-button/wizard-additional-button.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-additional-button/wizard-additional-button.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -28,7 +28,8 @@ import { ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardAdditionalButtonExampleComponent {
-    constructor(@Inject(ToastService) private toastService: ToastService) {}
+    private toastService = inject<ToastService>(ToastService);
+
 
     public onAdditionalButtonClick(): void {
         this.toastService.info({
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-confirmation-dialog/wizard-confirmation-dialog.example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-confirmation-dialog/wizard-confirmation-dialog.example.component.ts
index f8727c5aa..d78907d63 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-confirmation-dialog/wizard-confirmation-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-confirmation-dialog/wizard-confirmation-dialog.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef } from "@angular/core";
+import { Component, TemplateRef, inject } from "@angular/core";
 
 import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
 
@@ -28,12 +28,10 @@ import { DialogService, NuiDialogRef, ToastService } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardConfirmationDialogExampleComponent {
-    public activeDialog: NuiDialogRef;
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
+    public activeDialog: NuiDialogRef;
 
     public openConfirmationDialog(
         $event: boolean,
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-dialog/wizard-dialog.example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-dialog/wizard-dialog.example.component.ts
index 6f95208e9..8d04963d6 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-dialog/wizard-dialog.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-dialog/wizard-dialog.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef, ViewChild } from "@angular/core";
+import { Component, TemplateRef, ViewChild, inject } from "@angular/core";
 
 import {
     DialogService,
@@ -33,15 +33,13 @@ import {
     standalone: false,
 })
 export class WizardDialogExampleComponent {
+    private dialogService = inject<DialogService>(DialogService);
+    private toastService = inject<ToastService>(ToastService);
+
     @ViewChild("wizardComponent") wizardComponent: WizardComponent;
 
     public activeDialog: NuiDialogRef;
 
-    constructor(
-        @Inject(DialogService) private dialogService: DialogService,
-        @Inject(ToastService) private toastService: ToastService
-    ) {}
-
     public vegetables = [
         $localize`Cabbage`,
         $localize`Potato`,
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-reset-step/wizard-reset-step-example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-reset-step/wizard-reset-step-example.component.ts
index d9c4542d1..4dafa73a9 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-reset-step/wizard-reset-step-example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-reset-step/wizard-reset-step-example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { IWizardSelectionEvent, WizardComponent } from "@nova-ui/bits";
@@ -29,11 +29,13 @@ import { IWizardSelectionEvent, WizardComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardResetStepExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     @ViewChild("wizardComponent") wizardComponent: WizardComponent;
     public myForm;
     public secondStepForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             name: ["", Validators.required],
             email: [
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-simple/wizard-simple.example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-simple/wizard-simple.example.component.ts
index 05e3701c4..892cd3a4d 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-simple/wizard-simple.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-simple/wizard-simple.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef, ViewChild } from "@angular/core";
+import { Component, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import {
@@ -37,6 +37,10 @@ import {
     standalone: false,
 })
 export class WizardSimpleExampleComponent {
+    private formBuilder = inject(FormBuilder);
+    private toastService = inject<ToastService>(ToastService);
+    private dialogService = inject<DialogService>(DialogService);
+
     @ViewChild("wizardComponent") wizardComponent: WizardComponent;
     @ViewChild("wizardStep2") wizardStep2Component: WizardStepComponent;
     @ViewChild("wizardStep3") wizardStep3Component: WizardStepComponent;
@@ -63,11 +67,7 @@ export class WizardSimpleExampleComponent {
 
     private activeDialog: NuiDialogRef;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) private toastService: ToastService,
-        @Inject(DialogService) private dialogService: DialogService
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             name: ["", Validators.required],
             email: [
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-steps/wizard-steps.example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-steps/wizard-steps.example.component.ts
index e01df2550..0ec575aa2 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-steps/wizard-steps.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-steps/wizard-steps.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnDestroy, ViewChild } from "@angular/core";
+import { Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -35,6 +35,8 @@ import {
     standalone: false,
 })
 export class WizardStepsExampleComponent implements OnDestroy {
+    private formBuilder = inject(FormBuilder);
+
     @ViewChild("wizardComponent") wizardComponent: WizardComponent;
     @ViewChild("dynamicStep") dynamicStep: WizardStepComponent;
 
@@ -42,7 +44,7 @@ export class WizardStepsExampleComponent implements OnDestroy {
     public myForm;
     private readonly destroy$ = new Subject<void>();
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             name: ["", Validators.required],
             email: [
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-validation/wizard-validation.example.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-validation/wizard-validation.example.component.ts
index 4d65fcc99..70f0da124 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-validation/wizard-validation.example.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-validation/wizard-validation.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { WizardComponent } from "@nova-ui/bits";
@@ -29,11 +29,13 @@ import { WizardComponent } from "@nova-ui/bits";
     standalone: false,
 })
 export class WizardValidationExampleComponent {
+    private formBuilder = inject(FormBuilder);
+
     @ViewChild("wizardComponent") wizardComponent: WizardComponent;
     public myForm;
     public secondStepForm;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             name: this.formBuilder.control("", Validators.required),
             email: this.formBuilder.control("", [
diff --git a/packages/bits/demo/src/components/demo/wizard/wizard-visual-test/wizard-visual-test.component.ts b/packages/bits/demo/src/components/demo/wizard/wizard-visual-test/wizard-visual-test.component.ts
index 9c3ef3595..cfb8bb4d0 100644
--- a/packages/bits/demo/src/components/demo/wizard/wizard-visual-test/wizard-visual-test.component.ts
+++ b/packages/bits/demo/src/components/demo/wizard/wizard-visual-test/wizard-visual-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, TemplateRef, ViewChild } from "@angular/core";
+import { Component, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import {
@@ -36,6 +36,9 @@ import {
     standalone: false,
 })
 export class WizardVisualTestComponent {
+    private formBuilder = inject(FormBuilder);
+    private dialogService = inject<DialogService>(DialogService);
+
     @ViewChild("wizardComponent") wizardComponent: WizardComponent;
     @ViewChild("dialogWizardBusy") dialogWizardBusy: WizardComponent;
 
@@ -54,10 +57,7 @@ export class WizardVisualTestComponent {
 
     private activeDialog: NuiDialogRef;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(DialogService) private dialogService: DialogService
-    ) {
+    constructor() {
         this.myForm = this.formBuilder.group({
             name: ["", Validators.required],
             email: [
diff --git a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.component.ts b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.component.ts
index 0bc5a4eeb..b3ba74c78 100644
--- a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-    TemplateRef,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 
 import { DialogService, IFilter, IFilterPub } from "@nova-ui/bits";
@@ -44,6 +36,8 @@ import {
     standalone: false,
 })
 export class BasicFilterGroupCompositeComponent implements IFilterPub, OnInit {
+    private dialogService = inject<DialogService>(DialogService);
+
     @Input() filterGroupItem: IFilterGroupItem;
     @Input() checkboxTemplateRef: TemplateRef<string>;
     @Input() expanderTemplateRef: TemplateRef<string>;
@@ -52,8 +46,6 @@ export class BasicFilterGroupCompositeComponent implements IFilterPub, OnInit {
         new EventEmitter();
     @Output() showAllButtonClicked: EventEmitter<any> = new EventEmitter();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.example.component.ts b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.example.component.ts
index b3d603b46..e3ae2e504 100644
--- a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.example.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/basic-filter-group.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, Inject, OnDestroy } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subscription } from "rxjs";
@@ -63,6 +63,8 @@ const RANDOM_ARRAY = [
 export class BasicFilterGroupExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject(DataSourceService) as DataSourceService<ExampleItem>;
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "color",
@@ -132,10 +134,7 @@ export class BasicFilterGroupExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<ExampleItem>
-    ) {
+    constructor() {
         (
             this.dataSourceService as LocalFilteringDataSource<ExampleItem>
         ).setData(RANDOM_ARRAY);
diff --git a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-group-dialog/filter-group-dialog.component.ts
index 3705641e2..d0b510449 100644
--- a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupCompositeDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index 8c8928c32..006d62b84 100644
--- a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { BasicFilterGroupCompositeComponent } from "../basic-filter-group.compon
     standalone: false,
 })
 export class BasicFilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject(DataSourceService) as DataSourceService<any>;
+
     @ContentChildren(BasicFilterGroupCompositeComponent)
     filterGroups: QueryList<BasicFilterGroupCompositeComponent>;
 
@@ -46,11 +42,6 @@ export class BasicFilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/item-picker/item-picker.component.ts
index c65ac3056..8e115d55e 100644
--- a/packages/bits/demo/src/schematics/filter-group/basic-filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/basic-filter-group/item-picker/item-picker.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import {
@@ -64,6 +53,9 @@ export interface IItemPickerOption {
 export class ItemPickerCompositeComponent
     implements AfterViewInit, OnInit, OnDestroy
 {
+    dataSource = inject(DataSourceService) as DataSourceService<IFilterGroupOption>;
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -97,12 +89,6 @@ export class ItemPickerCompositeComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (
             this.dataSource as LocalFilteringDataSource<IFilterGroupOption>
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.component.ts b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.component.ts
index b10a9a64e..a66408d41 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-    TemplateRef,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 
 import { DialogService, IFilter, IFilterPub } from "@nova-ui/bits";
@@ -46,6 +38,8 @@ import {
 export class CustomDataSourceFilterGroupCompositeComponent
     implements IFilterPub, OnInit
 {
+    private dialogService = inject<DialogService>(DialogService);
+
     @Input() filterGroupItem: IFilterGroupItem;
     @Input() checkboxTemplateRef: TemplateRef<string>;
     @Input() expanderTemplateRef: TemplateRef<string>;
@@ -54,8 +48,6 @@ export class CustomDataSourceFilterGroupCompositeComponent
         new EventEmitter();
     @Output() showAllButtonClicked: EventEmitter<any> = new EventEmitter();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.example.component.ts b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.example.component.ts
index 5627113c2..4cf291688 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.example.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source-filter-group.example.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, QueryList, ViewChildren, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subscription } from "rxjs";
@@ -54,6 +47,8 @@ import { ICustomDSFilteredData, IFilterGroupItem } from "./public-api";
 export class CustomDataSourceFilterGroupExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    private filterGroupCustomDataSourceService = inject(DataSourceService) as FilterGroupCustomDataSourceService;
+
     @ViewChildren(CustomDataSourceFilterGroupCompositeComponent)
     filterGroups: QueryList<CustomDataSourceFilterGroupCompositeComponent>;
 
@@ -67,11 +62,6 @@ export class CustomDataSourceFilterGroupExampleComponent
     };
     private filterGroupSubscriptions: Array<Subscription> = [];
 
-    constructor(
-        @Inject(DataSourceService)
-        private filterGroupCustomDataSourceService: FilterGroupCustomDataSourceService
-    ) {}
-
     public ngAfterViewInit(): void {
         this.filterGroupSubscriptions.push(
             this.filterGroupCustomDataSourceService.outputsSubject.subscribe(
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source.service.ts b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source.service.ts
index 3a02dade5..b4317e417 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/custom-data-source.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { DataSourceService, IFilters } from "@nova-ui/bits";
 
@@ -27,9 +27,8 @@ import { FakeHTTPService } from "../fake-http.service";
 
 @Injectable()
 export class FilterGroupCustomDataSourceService extends DataSourceService<ExampleItem> {
-    constructor(@Inject(FakeHTTPService) public httpService: FakeHTTPService) {
-        super();
-    }
+    httpService = inject<FakeHTTPService>(FakeHTTPService);
+
 
     // Emitting current filters to 'server' via http service, to get filtered data 'ICustomDSFilteredData'
     public async getFilteredData(
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index 8bd9fd54f..3dec06b40 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-data-source-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -40,6 +34,8 @@ import { CustomDataSourceFilterGroupCompositeComponent } from "../custom-data-so
 export class CustomDataSourceFilterGroupsWrapperComponent
     implements AfterViewInit
 {
+    dataSourceService = inject(DataSourceService) as DataSourceService<any>;
+
     @ContentChildren(CustomDataSourceFilterGroupCompositeComponent)
     filterGroups: QueryList<CustomDataSourceFilterGroupCompositeComponent>;
 
@@ -48,11 +44,6 @@ export class CustomDataSourceFilterGroupsWrapperComponent
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.component.ts b/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.component.ts
index bff264c21..787a6b64e 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-    TemplateRef,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 
 import { DialogService, IFilter, IFilterPub } from "@nova-ui/bits";
@@ -46,6 +38,8 @@ import {
 export class CustomTemplateFilterGroupCompositeComponent
     implements IFilterPub, OnInit
 {
+    private dialogService = inject<DialogService>(DialogService);
+
     @Input() filterGroupItem: IFilterGroupItem;
     @Input() checkboxTemplateRef: TemplateRef<string>;
     @Input() expanderTemplateRef: TemplateRef<string>;
@@ -54,8 +48,6 @@ export class CustomTemplateFilterGroupCompositeComponent
         new EventEmitter();
     @Output() showAllButtonClicked: EventEmitter<any> = new EventEmitter();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.example.component.ts b/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.example.component.ts
index c7de9098e..2d2a8c620 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.example.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/custom-template-filter-group.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, Inject, OnDestroy } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subscription } from "rxjs";
@@ -72,6 +72,8 @@ const RANDOM_ARRAY = [
 export class CustomTemplateFilterGroupExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<DataSourceService<ExampleItem>>(DataSourceService);
+
     public filterGroupItems: CustomTemplateFilterGroupItem[] = [
         {
             id: "color",
@@ -136,10 +138,7 @@ export class CustomTemplateFilterGroupExampleComponent
 
     private outputsSubscription: Subscription;
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<ExampleItem>
-    ) {
+    constructor() {
         (
             this.dataSourceService as LocalFilteringDataSource<ExampleItem>
         ).setData(RANDOM_ARRAY);
diff --git a/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index 32b6e3b96..090545db7 100644
--- a/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/custom-template-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -40,6 +34,8 @@ import { CustomTemplateFilterGroupCompositeComponent } from "../custom-template-
 export class CustomTemplateFilterGroupsWrapperComponent
     implements AfterViewInit
 {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(CustomTemplateFilterGroupCompositeComponent)
     filterGroups: QueryList<CustomTemplateFilterGroupCompositeComponent>;
 
@@ -48,11 +44,6 @@ export class CustomTemplateFilterGroupsWrapperComponent
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.component.ts b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.component.ts
index a7b78dfd2..9f8eeb9bb 100644
--- a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-    TemplateRef,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 
 import { DialogService, IFilter, IFilterPub } from "@nova-ui/bits";
@@ -44,6 +36,8 @@ import {
     standalone: false,
 })
 export class DialogFilterGroupCompositeComponent implements IFilterPub, OnInit {
+    private dialogService = inject<DialogService>(DialogService);
+
     @Input() filterGroupItem: IFilterGroupItem;
     @Input() checkboxTemplateRef: TemplateRef<string>;
     @Input() expanderTemplateRef: TemplateRef<string>;
@@ -52,8 +46,6 @@ export class DialogFilterGroupCompositeComponent implements IFilterPub, OnInit {
         new EventEmitter();
     @Output() showAllButtonClicked: EventEmitter<any> = new EventEmitter();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.example.component.ts b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.example.component.ts
index b3c4a659a..72aa20210 100644
--- a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.example.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/dialog-filter-group.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, Inject, OnDestroy } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subscription } from "rxjs";
@@ -71,6 +71,10 @@ const RANDOM_ARRAY = [
 export class DialogFilterGroupExampleComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<DataSourceService<ExampleItem>>(DataSourceService);
+    private dialogService = inject<DialogService>(DialogService);
+    private filterGroupService = inject(FilterGroupService);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "color",
@@ -253,12 +257,7 @@ export class DialogFilterGroupExampleComponent
     private outputsSubscription: Subscription;
     private dialogSubscription: Subscription;
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<ExampleItem>,
-        @Inject(DialogService) private dialogService: DialogService,
-        private filterGroupService: FilterGroupService
-    ) {
+    constructor() {
         (
             this.dataSourceService as LocalFilteringDataSource<ExampleItem>
         ).setData(RANDOM_ARRAY);
diff --git a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-group-dialog/filter-group-dialog.component.ts
index 56f2883f6..0a93f4bff 100644
--- a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupCompositeDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index 92911dbd3..27fd58dfb 100644
--- a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { DialogFilterGroupCompositeComponent } from "../dialog-filter-group.comp
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(DialogFilterGroupCompositeComponent)
     filterGroups: QueryList<DialogFilterGroupCompositeComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/item-picker/item-picker.component.ts
index 5551b5a6d..614a3ee42 100644
--- a/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filter-group/dialog-filter-group/item-picker/item-picker.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     DataSourceService,
@@ -55,6 +47,8 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerCompositeComponent implements OnInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+
     @Input() itemPickerOptions: IFilterGroupOption[];
     @Input() selectedValues: string[] = [];
 
@@ -64,11 +58,6 @@ export class ItemPickerCompositeComponent implements OnInit {
     public selectionMode = RepeatSelectionMode.multi;
     public selectedOptions: IFilterGroupOption[] = [];
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>
-    ) {}
-
     public ngOnInit(): void {
         (
             this.dataSource as LocalFilteringDataSource<IFilterGroupOption>
diff --git a/packages/bits/demo/src/schematics/filter-group/fake-http.service.ts b/packages/bits/demo/src/schematics/filter-group/fake-http.service.ts
index ec59b2d38..21ba059f4 100644
--- a/packages/bits/demo/src/schematics/filter-group/fake-http.service.ts
+++ b/packages/bits/demo/src/schematics/filter-group/fake-http.service.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    Inject,
-    Injectable,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { Component, Injectable, OnDestroy, ViewChild, inject } from "@angular/core";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
 import { Subject, Subscription } from "rxjs";
@@ -156,6 +150,9 @@ export class FakeHTTPService {
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class FakeServer implements OnDestroy {
+    private dataSourceService = inject(DataSourceService) as DataSourceService<ExampleItem>;
+    private httpService = inject<FakeHTTPService>(FakeHTTPService);
+
     public filterGroupItems: IFilterGroupItem[] = filterGroupItems;
     public filteringState: IFilteringOutputs = {
         repeat: {
@@ -169,11 +166,7 @@ export class FakeServer implements OnDestroy {
 
     @ViewChild(RepeatComponent) filteringRepeat: RepeatComponent;
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSourceService: DataSourceService<ExampleItem>,
-        @Inject(FakeHTTPService) private httpService: FakeHTTPService
-    ) {
+    constructor() {
         (
             this.dataSourceService as LocalFilteringDataSource<ExampleItem>
         ).setData(RANDOM_ARRAY);
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group.component.ts
index b22f49567..cbfeb5925 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/item-picker/item-picker.component.ts
index 88b2d03ae..81ff34228 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination-data-source.service.ts
index 0537b469c..7cda4c24c 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -49,10 +49,6 @@ export class FilteredViewListWithPaginationDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -124,6 +120,9 @@ export class FilteredViewListWithPaginationDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination.component.ts
index 9d2013de8..a9fe5e1b2 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list-with-pagination.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -64,6 +54,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewListWithPaginationComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewListWithPaginationDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -126,14 +119,6 @@ export class FilteredViewListWithPaginationComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewListWithPaginationDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list/filtered-view-list.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list/filtered-view-list.component.ts
index 4788b12bc..6584618b8 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list/filtered-view-list.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-pagination/filtered-view-list/filtered-view-list.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -59,6 +50,9 @@ import { IServer, IServerFilters } from "../types";
 export class FilteredViewListComponent
     implements OnInit, AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewListWithPaginationDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public listItems$ = new BehaviorSubject<IServer[]>([]);
     public readonly sorterItems: IMenuItem[] = [
         {
@@ -99,12 +93,6 @@ export class FilteredViewListComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewListWithPaginationDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group.component.ts
index 58ca4e874..13aaa77ae 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts
index 21f14139f..78ec1a690 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll-data-source.service.ts
index 10fa415ec..e34df40be 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -50,10 +50,6 @@ export class FilteredViewListWithVirtualScrollDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value || { start: 0, end: 0 };
@@ -125,6 +121,9 @@ export class FilteredViewListWithVirtualScrollDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll.component.ts
index e7dcc54ec..8ca550733 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list-with-virtual-scroll.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -66,6 +56,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewListWithVirtualScrollComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewListWithVirtualScrollDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -128,14 +121,6 @@ export class FilteredViewListWithVirtualScrollComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewListWithVirtualScrollDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list/filtered-view-list.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list/filtered-view-list.component.ts
index 7a440263d..a9652c907 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list/filtered-view-list.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-list-with-virtual-scroll/filtered-view-list/filtered-view-list.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import {
     filter,
@@ -66,6 +57,10 @@ import { IServer, IServerFilters } from "../types";
 export class FilteredViewListComponent
     implements OnInit, AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewListWithVirtualScrollDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+    private viewportManager = inject(VirtualViewportManager);
+
     public listItems$ = new BehaviorSubject<IServer[]>([]);
     public readonly sorterItems: IMenuItem[] = [
         {
@@ -101,13 +96,6 @@ export class FilteredViewListComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewListWithVirtualScrollDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef,
-        private viewportManager: VirtualViewportManager
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group.component.ts
index 13e23d02d..6a45c456d 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/item-picker/item-picker.component.ts
index 2aae89a7e..ad55822ef 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll-data-source.service.ts
index 85182a787..18d24a1ed 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -50,10 +50,6 @@ export class FilteredViewTableWithCustomVirtualScrollDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value || { start: 0, end: 0 };
@@ -112,6 +108,9 @@ export class FilteredViewTableWithCustomVirtualScrollDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll.component.ts
index d6cd7e5a7..759c74bec 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table-with-custom-virtual-scroll.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -69,6 +59,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewTableWithCustomVirtualScrollComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithCustomVirtualScrollDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -131,14 +124,6 @@ export class FilteredViewTableWithCustomVirtualScrollComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithCustomVirtualScrollDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/filtered-view-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/filtered-view-table.component.ts
index 0e49a646a..849fcd0aa 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/filtered-view-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/filtered-view-table.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -65,6 +56,11 @@ import { IServer } from "../types";
 export class FilteredViewTableComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithCustomVirtualScrollDataSource<IServer>;
+    private viewportManager = inject(VirtualViewportManager);
+    private customVirtualScrollStrategyService = inject(VirtualScrollCustomStrategyService);
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
 
@@ -82,14 +78,6 @@ export class FilteredViewTableComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithCustomVirtualScrollDataSource<IServer>,
-        private viewportManager: VirtualViewportManager,
-        private customVirtualScrollStrategyService: VirtualScrollCustomStrategyService,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/virtual-scroll-custom-strategy.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/virtual-scroll-custom-strategy.service.ts
index 1637dc74a..f330e1ba6 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/virtual-scroll-custom-strategy.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-custom-virtual-scroll/filtered-view-table/virtual-scroll-custom-strategy.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { IFilter, IFilterPub } from "@nova-ui/bits";
 
@@ -33,7 +33,9 @@ export class VirtualScrollCustomStrategyService
 
     protected virtualScrollRange: ListRange;
 
-    constructor(@Inject(CUSTOM_SCROLL_ITEMS_PER_PAGE) itemsPerPage: number) {
+    constructor() {
+        const itemsPerPage = inject(CUSTOM_SCROLL_ITEMS_PER_PAGE);
+
         this.itemsPerPage = itemsPerPage;
         this.reset();
     }
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group.component.ts
index a3dd44dc1..0aafd5b6d 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/item-picker/item-picker.component.ts
index c33009fcf..b870cfd55 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination-data-source.service.ts
index 0a48a1bee..acee367fd 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -49,10 +49,6 @@ export class FilteredViewTableWithPaginationDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -111,6 +107,9 @@ export class FilteredViewTableWithPaginationDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination.component.ts
index 20d8b6480..4d31e7c91 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table-with-pagination.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -64,6 +54,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewTableWithPaginationComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithPaginationDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -126,14 +119,6 @@ export class FilteredViewTableWithPaginationComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithPaginationDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table/filtered-view-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table/filtered-view-table.component.ts
index 5a2b0f8f9..d9985b7a9 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table/filtered-view-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-pagination/filtered-view-table/filtered-view-table.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -52,6 +43,9 @@ import { IServer } from "../types";
 export class FilteredViewTableComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithPaginationDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -69,12 +63,6 @@ export class FilteredViewTableComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithPaginationDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group.component.ts
index aeb15e422..d2d0d4333 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/item-picker/item-picker.component.ts
index 1e9a92fb8..ce9dc8f56 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection-data-source.service.ts
index a5d2d095a..baa9113cd 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -49,10 +49,6 @@ export class FilteredViewTableWithSelectionDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -124,6 +120,9 @@ export class FilteredViewTableWithSelectionDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection.component.ts
index 3b17b37a9..31c562a61 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table-with-selection.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -64,6 +54,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewTableWithSelectionComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithSelectionDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -126,14 +119,6 @@ export class FilteredViewTableWithSelectionComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithSelectionDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table/filtered-view-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table/filtered-view-table.component.ts
index a18c4f25d..401875e21 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table/filtered-view-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-selection/filtered-view-table/filtered-view-table.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { debounceTime, takeUntil, tap } from "rxjs/operators";
 
@@ -56,6 +47,9 @@ import { IServer } from "../types";
 export class FilteredViewTableComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithSelectionDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -92,12 +86,6 @@ export class FilteredViewTableComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithSelectionDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group.component.ts
index d7163841d..50ae7f96d 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/item-picker/item-picker.component.ts
index 610a5e906..3ff3aa741 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection-data-source.service.ts
index b22c31f92..f302abfd9 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -50,10 +50,6 @@ export class FilteredViewTableWithVirtualScrollSelectionDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value || { start: 0, end: 0 };
@@ -112,6 +108,9 @@ export class FilteredViewTableWithVirtualScrollSelectionDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection.component.ts
index 42974872b..f6261ce5f 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table-with-virtual-scroll-selection.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -69,6 +59,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewTableWithVirtualScrollSelectionComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithVirtualScrollSelectionDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -131,14 +124,6 @@ export class FilteredViewTableWithVirtualScrollSelectionComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithVirtualScrollSelectionDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table/filtered-view-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table/filtered-view-table.component.ts
index 616452d3d..3adcd1368 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table/filtered-view-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll-selection/filtered-view-table/filtered-view-table.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import {
     filter,
@@ -60,6 +51,10 @@ import { IServer } from "../types";
 export class FilteredViewTableComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithVirtualScrollSelectionDataSource<IServer>;
+    private viewportManager = inject(VirtualViewportManager);
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -85,13 +80,6 @@ export class FilteredViewTableComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithVirtualScrollSelectionDataSource<IServer>,
-        private viewportManager: VirtualViewportManager,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group.component.ts
index 10c90a360..7c50d39f0 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts
index e396d9203..4fb86e90b 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll-data-source.service.ts
index 60702b4d2..adf2aafb3 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import { firstValueFrom, forkJoin, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
@@ -50,10 +50,6 @@ export class FilteredViewTableWithVirtualScrollDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value || { start: 0, end: 0 };
@@ -112,6 +108,9 @@ export class FilteredViewTableWithVirtualScrollDataSource<T>
         return multiFilterArr;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll.component.ts
index e766e8d59..6011b0ee7 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table-with-virtual-scroll.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -66,6 +56,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewTableWithVirtualScrollComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithVirtualScrollDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -128,14 +121,6 @@ export class FilteredViewTableWithVirtualScrollComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithVirtualScrollDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.outputsSubscription = this.dataSource.outputsSubject.subscribe(
             (data: INovaFilteringOutputs) => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table/filtered-view-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table/filtered-view-table.component.ts
index fc7f3b5f1..0a232cb59 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table/filtered-view-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-table-with-virtual-scroll/filtered-view-table/filtered-view-table.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import {
     filter,
@@ -59,6 +50,10 @@ import { IServer } from "../types";
 export class FilteredViewTableComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as FilteredViewTableWithVirtualScrollDataSource<IServer>;
+    private viewportManager = inject(VirtualViewportManager);
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -76,13 +71,6 @@ export class FilteredViewTableComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewTableWithVirtualScrollDataSource<IServer>,
-        private viewportManager: VirtualViewportManager,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group.component.ts
index 812a4f0cc..192fc6168 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/item-picker/item-picker.component.ts
index 2b18bf148..08c11ae21 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-list/filtered-view-list.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-list/filtered-view-list.component.ts
index 5f24bd00b..f9d86d7c9 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-list/filtered-view-list.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-list/filtered-view-list.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -56,6 +48,9 @@ import { IServer, IServerFilters } from "../types";
     standalone: false,
 })
 export class FilteredViewListComponent implements AfterViewInit, OnDestroy {
+    private dataSource = inject(DataSourceService) as LocalFilteringDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public readonly sorterItems: IMenuItem[] = [
         {
             title: $localize`Name`,
@@ -94,11 +89,7 @@ export class FilteredViewListComponent implements AfterViewInit, OnDestroy {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: LocalFilteringDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
         this.dataSource.setData(LOCAL_DATA);
     }
 
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-with-list.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-with-list.component.ts
index 775dd1c0c..bfa8841bc 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-with-list.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-list/filtered-view-with-list.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -63,6 +53,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
     standalone: false,
 })
 export class FilteredViewWithListComponent implements AfterViewInit, OnDestroy {
+    private dataSource = inject(DataSourceService) as LocalFilteringDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -125,13 +118,7 @@ export class FilteredViewWithListComponent implements AfterViewInit, OnDestroy {
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: LocalFilteringDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor() {
         // here we use ClientSideDataSource since the data we're working with is static (RANDOM_ARRAY)
         // if you have a dynamic data source, you need to extend DataSourceService for your custom filtering behavior
         this.dataSource.setData(LOCAL_DATA);
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group-dialog/filter-group-dialog.component.ts
index c6eaa20b8..072d866ac 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Inject, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
@@ -31,17 +31,15 @@ import { IFilterGroupOption } from "../public-api";
     standalone: false,
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(
-        @Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog,
-        private selectorService: SelectorService
-    ) {}
-
     public acceptDialogFilters(): void {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group.component.ts
index ce0b45edf..47a61282b 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
     // before any new search is performed
     public detectFilterChanges = true;
@@ -69,8 +60,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index b55630402..f8e74ed60 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/item-picker/item-picker.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/item-picker/item-picker.component.ts
index d7c9a8ed2..aee96ecc9 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/item-picker/item-picker.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filter-group/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 
 import {
     ClientSideDataSource,
@@ -58,6 +48,9 @@ export interface IItemPickerOption {
     standalone: false,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -76,12 +69,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        public dataSource: DataSourceService<IFilterGroupOption>,
-        public changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(
             this.itemPickerOptions
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-table/filtered-view-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-table/filtered-view-table.component.ts
index ae32dbaff..60089b504 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-table/filtered-view-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-table/filtered-view-table.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -48,6 +41,8 @@ import { IServer } from "../types";
     standalone: false,
 })
 export class FilteredViewTableComponent implements OnDestroy, AfterViewInit {
+    private dataSource = inject(DataSourceService) as LocalFilteringDataSource<IServer>;
+
     public items: IServer[] = [];
     // This value is obtained from the server and used to evaluate the total number of pages to display
     public totalItems: number = 0;
@@ -64,10 +59,7 @@ export class FilteredViewTableComponent implements OnDestroy, AfterViewInit {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: LocalFilteringDataSource<IServer>
-    ) {
+    constructor() {
         this.dataSource.setData(LOCAL_DATA);
     }
 
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-with-table.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-with-table.component.ts
index 5a8fb1d9e..00f2b1a27 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-with-table.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-table/filtered-view-with-table.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 import { Subscription } from "rxjs";
 
@@ -65,6 +55,9 @@ import { IFilterable, IServer, ServerStatus } from "./types";
 export class FilteredViewWithTableComponent
     implements AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as LocalFilteringDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "status",
@@ -127,13 +120,7 @@ export class FilteredViewWithTableComponent
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: LocalFilteringDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor() {
         // here we use ClientSideDataSource since the data we're working with is static (RANDOM_ARRAY)
         // if you have a dynamic data source, you need to extend DataSourceService for your custom filtering behavior
         this.dataSource.setData(LOCAL_DATA);
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-group.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-group.component.ts
index cab1b13ce..8c2f22bcc 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-group.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChildren,
-} from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChildren, inject } from "@angular/core";
 import _orderBy from "lodash/orderBy";
 import { Subject } from "rxjs";
 
@@ -53,6 +42,8 @@ import {
     standalone: false,
 })
 export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
+    private dialogService = inject<DialogService>(DialogService);
+
     @Input() filterGroupItem: IFilterGroupItem;
     @Input() checkboxTemplateRef: TemplateRef<string>;
     @Input() expanderTemplateRef: TemplateRef<string>;
@@ -65,8 +56,6 @@ export class FilterGroupComponent implements IFilterPub, OnInit, OnDestroy {
 
     public onDestroy$ = new Subject<void>();
 
-    constructor(@Inject(DialogService) private dialogService: DialogService) {}
-
     public ngOnInit(): void {
         this.filterGroupItem.allFilterOptions = _orderBy(
             this.filterGroupItem.allFilterOptions,
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
index 909fde9df..f09dd2154 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filter-group/filter-groups-wrapper/filter-groups-wrapper.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    Inject,
-    QueryList,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 
 import { DataSourceService, IFilteringParticipants } from "@nova-ui/bits";
@@ -38,6 +32,8 @@ import { FilterGroupComponent } from "../filter-group.component";
     standalone: false,
 })
 export class FilterGroupsWrapperComponent implements AfterViewInit {
+    private dataSourceService = inject<DataSourceService<any>>(DataSourceService);
+
     @ContentChildren(FilterGroupComponent)
     filterGroups: QueryList<FilterGroupComponent>;
 
@@ -46,11 +42,6 @@ export class FilterGroupsWrapperComponent implements AfterViewInit {
         "other": $localize`# hidden filters.`,
     };
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSourceService: DataSourceService<any>
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSourceService.registerComponent(this.getFilterComponents());
         this.filterGroups.changes.subscribe(() => {
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-tree/filtered-view-tree.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-tree/filtered-view-tree.component.ts
index 20423d656..828c94978 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-tree/filtered-view-tree.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-tree/filtered-view-tree.component.ts
@@ -20,14 +20,7 @@
 
 import { ArrayDataSource } from "@angular/cdk/collections";
 import { NestedTreeControl } from "@angular/cdk/tree";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -50,7 +43,10 @@ import { IServer } from "../types";
     standalone: false,
 })
 export class FilteredViewTreeComponent implements OnDestroy, AfterViewInit {
-    treeControl = new NestedTreeControl<any>(node => node.children);
+    private dataSource = inject(DataSourceService) as FilteredViewWithTreeDataSource<IServer>;
+    private cdRef = inject(ChangeDetectorRef);
+
+    treeControl = new NestedTreeControl<any>((node) => node.children);
     dataSourceTree: ArrayDataSource<any>;
 
     public readonly sorterItems: IMenuItem[] = [
@@ -72,12 +68,6 @@ export class FilteredViewTreeComponent implements OnDestroy, AfterViewInit {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewWithTreeDataSource<IServer>,
-        private cdRef: ChangeDetectorRef
-    ) {}
-
     async ngAfterViewInit(): Promise<void> {
         this.dataSource.outputsSubject
             .pipe(
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree-data-source.service.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree-data-source.service.ts
index 45119bfec..c439a26d8 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree-data-source.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { Apollo, gql } from "apollo-angular";
 import { DocumentNode } from "graphql";
 import isArray from "lodash/isArray";
@@ -51,9 +51,9 @@ export class FilteredViewWithTreeDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private apollo: Apollo) {
-        super();
-    }
+    private logger = inject(LoggerService);
+    private apollo = inject(Apollo);
+
 
     public async getFilteredData(
         data: IServersCollection
diff --git a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree.component.ts b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree.component.ts
index f7e9e0c13..103bb8d2e 100644
--- a/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree.component.ts
+++ b/packages/bits/demo/src/schematics/filtered-view/filtered-view-with-tree/filtered-view-with-tree.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import _pull from "lodash/pull";
 
 import {
@@ -58,6 +49,9 @@ import { IFilterable, IServer } from "./types";
     standalone: false,
 })
 export class FilteredViewWithTreeComponent implements AfterViewInit {
+    private dataSource = inject(DataSourceService) as FilteredViewWithTreeDataSource<IServer>;
+    private cd = inject(ChangeDetectorRef);
+
     public filterGroupItems: IFilterGroupItem[] = [
         {
             id: "subregion",
@@ -146,14 +140,6 @@ export class FilteredViewWithTreeComponent implements AfterViewInit {
     @ViewChildren(FilterGroupComponent)
     private filterGroups: QueryList<FilterGroupComponent>;
 
-    constructor(
-        // inject dataSource providers only to share the same instance
-        // using DI descendants inheritance with child components
-        @Inject(DataSourceService)
-        private dataSource: FilteredViewWithTreeDataSource<IServer>,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.dataSource.applyFilters();
     }
diff --git a/packages/bits/demo/src/schematics/list/basic-list/basic-list.component.ts b/packages/bits/demo/src/schematics/list/basic-list/basic-list.component.ts
index 7df53c018..1a9405d75 100644
--- a/packages/bits/demo/src/schematics/list/basic-list/basic-list.component.ts
+++ b/packages/bits/demo/src/schematics/list/basic-list/basic-list.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -62,6 +54,9 @@ import { IServer, IServerFilters } from "./types";
     standalone: false,
 })
 export class BasicListComponent implements AfterViewInit, OnDestroy {
+    private dataSource = inject(DataSourceService) as ClientSideDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public readonly sorterItems: IMenuItem[] = [
         {
             title: $localize`Name`,
@@ -100,11 +95,7 @@ export class BasicListComponent implements AfterViewInit, OnDestroy {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: ClientSideDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {
+    constructor() {
         this.dataSource.setData(LOCAL_DATA);
     }
 
diff --git a/packages/bits/demo/src/schematics/list/paginated-list/paginated-list-data-source.service.ts b/packages/bits/demo/src/schematics/list/paginated-list/paginated-list-data-source.service.ts
index 507f59130..9a9a7126d 100644
--- a/packages/bits/demo/src/schematics/list/paginated-list/paginated-list-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/list/paginated-list/paginated-list-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -47,10 +47,6 @@ export class PaginatedListDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value ?? { start: 0, end: 0 };
@@ -78,6 +74,9 @@ export class PaginatedListDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/list/paginated-list/paginated-list.component.ts b/packages/bits/demo/src/schematics/list/paginated-list/paginated-list.component.ts
index 3abd9bcb9..80cddbaf3 100644
--- a/packages/bits/demo/src/schematics/list/paginated-list/paginated-list.component.ts
+++ b/packages/bits/demo/src/schematics/list/paginated-list/paginated-list.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -65,6 +56,9 @@ import { IServer, IServerFilters } from "./types";
 export class PaginatedListComponent
     implements OnInit, AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as PaginatedListDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public listItems$ = new BehaviorSubject<IServer[]>([]);
     public readonly sorterItems: IMenuItem[] = [
         {
@@ -105,12 +99,6 @@ export class PaginatedListComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: PaginatedListDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/list/search-list/search-list-data-source.service.ts b/packages/bits/demo/src/schematics/list/search-list/search-list-data-source.service.ts
index 0aeb933e3..8588eacdb 100644
--- a/packages/bits/demo/src/schematics/list/search-list/search-list-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/list/search-list/search-list-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -47,10 +47,6 @@ export class SearchListDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value ?? { start: 0, end: 0 };
@@ -70,6 +66,9 @@ export class SearchListDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/list/search-list/search-list.component.ts b/packages/bits/demo/src/schematics/list/search-list/search-list.component.ts
index 29c00b3de..1eb6be078 100644
--- a/packages/bits/demo/src/schematics/list/search-list/search-list.component.ts
+++ b/packages/bits/demo/src/schematics/list/search-list/search-list.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -59,6 +50,9 @@ import { IServer, IServerFilters } from "./types";
     standalone: false,
 })
 export class SearchListComponent implements OnInit, AfterViewInit, OnDestroy {
+    private dataSource = inject(DataSourceService) as SearchListDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public listItems$ = new BehaviorSubject<IServer[]>([]);
 
     public filteringState: INovaFilteringOutputs = {};
@@ -81,12 +75,6 @@ export class SearchListComponent implements OnInit, AfterViewInit, OnDestroy {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: SearchListDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/list/selection-list/selection-list.component.ts b/packages/bits/demo/src/schematics/list/selection-list/selection-list.component.ts
index 8b2cdd998..d0c90e6bd 100644
--- a/packages/bits/demo/src/schematics/list/selection-list/selection-list.component.ts
+++ b/packages/bits/demo/src/schematics/list/selection-list/selection-list.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -65,6 +57,10 @@ import { IServer, IServerFilters } from "./types";
     standalone: false,
 })
 export class SelectionListComponent implements AfterViewInit, OnDestroy {
+    private dataSource = inject(DataSourceService) as ClientSideDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+    private listService = inject(ListService);
+
     public readonly sorterItems: IMenuItem[] = [
         {
             title: $localize`Name`,
@@ -103,12 +99,7 @@ export class SelectionListComponent implements AfterViewInit, OnDestroy {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: ClientSideDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef,
-        private listService: ListService
-    ) {
+    constructor() {
         this.dataSource.setData(LOCAL_DATA);
     }
 
diff --git a/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list-data-source.service.ts b/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list-data-source.service.ts
index 4ca31a535..06a46ec1a 100644
--- a/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -48,10 +48,6 @@ export class VirtualScrollListDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value ?? { start: 0, end: 0 };
@@ -79,6 +75,9 @@ export class VirtualScrollListDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list.component.ts b/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list.component.ts
index c58ef16ee..03898b3a8 100644
--- a/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list.component.ts
+++ b/packages/bits/demo/src/schematics/list/virtual-scroll-list/virtual-scroll-list.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import {
     filter,
@@ -73,6 +64,10 @@ import { VirtualScrollListDataSource } from "./virtual-scroll-list-data-source.s
 export class VirtualScrollListComponent
     implements OnInit, AfterViewInit, OnDestroy
 {
+    private dataSource = inject(DataSourceService) as VirtualScrollListDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+    private viewportManager = inject(VirtualViewportManager);
+
     public listItems$ = new BehaviorSubject<IServer[]>([]);
     public readonly sorterItems: IMenuItem[] = [
         {
@@ -108,13 +103,6 @@ export class VirtualScrollListComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: VirtualScrollListDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef,
-        private viewportManager: VirtualViewportManager
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/table/basic-table/basic-table.component.ts b/packages/bits/demo/src/schematics/table/basic-table/basic-table.component.ts
index b33ed38e1..cb68cb114 100644
--- a/packages/bits/demo/src/schematics/table/basic-table/basic-table.component.ts
+++ b/packages/bits/demo/src/schematics/table/basic-table/basic-table.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    Inject,
-    OnDestroy,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -54,6 +47,8 @@ import { IServer } from "./types";
     standalone: false,
 })
 export class BasicTableComponent implements OnDestroy, AfterViewInit {
+    private dataSource = inject(DataSourceService) as ClientSideDataSource<IServer>;
+
     public items: IServer[] = [];
     // This value is obtained from the server and used to evaluate the total number of pages to display
     public totalItems: number = 0;
@@ -70,10 +65,7 @@ export class BasicTableComponent implements OnDestroy, AfterViewInit {
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: ClientSideDataSource<IServer>
-    ) {
+    constructor() {
         this.dataSource.setData(LOCAL_DATA);
     }
 
diff --git a/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll-data-source.service.ts b/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll-data-source.service.ts
index 8b03476dd..01921c443 100644
--- a/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -49,10 +49,6 @@ export class TableWithCustomVirtualScrollDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value || { start: 0, end: 0 };
@@ -79,6 +75,9 @@ export class TableWithCustomVirtualScrollDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll.component.ts b/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll.component.ts
index eb5820d6d..4b260e2fc 100644
--- a/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll.component.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/table-with-custom-virtual-scroll.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { debounceTime, takeUntil, tap } from "rxjs/operators";
 
@@ -72,6 +63,11 @@ import { VirtualScrollCustomStrategyService } from "./virtual-scroll-custom-stra
 export class TableWithCustomVirtualScrollComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as TableWithCustomVirtualScrollDataSource<IServer>;
+    private viewportManager = inject(VirtualViewportManager);
+    private customVirtualScrollStrategyService = inject(VirtualScrollCustomStrategyService);
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
 
@@ -100,14 +96,6 @@ export class TableWithCustomVirtualScrollComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: TableWithCustomVirtualScrollDataSource<IServer>,
-        private viewportManager: VirtualViewportManager,
-        private customVirtualScrollStrategyService: VirtualScrollCustomStrategyService,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/virtual-scroll-custom-strategy.service.ts b/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/virtual-scroll-custom-strategy.service.ts
index 46edf9fd4..459b10db0 100644
--- a/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/virtual-scroll-custom-strategy.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-custom-virtual-scroll/virtual-scroll-custom-strategy.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { IFilter, IFilterPub } from "@nova-ui/bits";
 
@@ -33,7 +33,9 @@ export class VirtualScrollCustomStrategyService
 
     protected virtualScrollRange: ListRange;
 
-    constructor(@Inject(CUSTOM_SCROLL_ITEMS_PER_PAGE) itemsPerPage: number) {
+    constructor() {
+        const itemsPerPage = inject(CUSTOM_SCROLL_ITEMS_PER_PAGE);
+
         this.itemsPerPage = itemsPerPage;
         this.reset();
     }
diff --git a/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination-data-source.service.ts b/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination-data-source.service.ts
index dbe4111a5..a7a2b5ec4 100644
--- a/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -48,10 +48,6 @@ export class TableWithPaginationDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -78,6 +74,9 @@ export class TableWithPaginationDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination.component.ts b/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination.component.ts
index b3b62316d..285655705 100644
--- a/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination.component.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-pagination/table-with-pagination.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { debounceTime, takeUntil, tap } from "rxjs/operators";
 
@@ -61,6 +52,9 @@ import { IServer } from "./types";
 export class TableWithPaginationComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as TableWithPaginationDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -89,12 +83,6 @@ export class TableWithPaginationComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: TableWithPaginationDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/table/table-with-search/table-with-search-data-source.service.ts b/packages/bits/demo/src/schematics/table/table-with-search/table-with-search-data-source.service.ts
index 0b7ed8033..8172e7b72 100644
--- a/packages/bits/demo/src/schematics/table/table-with-search/table-with-search-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-search/table-with-search-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -48,10 +48,6 @@ export class TableWithSearchDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -70,6 +66,9 @@ export class TableWithSearchDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/table/table-with-search/table-with-search.component.ts b/packages/bits/demo/src/schematics/table/table-with-search/table-with-search.component.ts
index 67138b548..5f6a66848 100644
--- a/packages/bits/demo/src/schematics/table/table-with-search/table-with-search.component.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-search/table-with-search.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { debounceTime, takeUntil, tap } from "rxjs/operators";
 
@@ -59,6 +50,9 @@ import { IServer } from "./types";
 export class TableWithSearchComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as TableWithSearchDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -81,12 +75,6 @@ export class TableWithSearchComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: TableWithSearchDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection-data-source.service.ts b/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection-data-source.service.ts
index d9564d8c0..3148f6f49 100644
--- a/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -48,10 +48,6 @@ export class TableWithSelectionDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -78,6 +74,9 @@ export class TableWithSelectionDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection.component.ts b/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection.component.ts
index 4ce5237fd..2632db835 100644
--- a/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection.component.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-selection/table-with-selection.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { debounceTime, takeUntil, tap } from "rxjs/operators";
 
@@ -64,6 +55,9 @@ import { IServer } from "./types";
 export class TableWithSelectionComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as TableWithSelectionDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -104,12 +98,6 @@ export class TableWithSelectionComponent
 
     private destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: TableWithSelectionDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort-data-source.service.ts b/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort-data-source.service.ts
index 408af8ae6..3cc7a16a6 100644
--- a/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -48,10 +48,6 @@ export class TableWithSortDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.paginator?.value || { start: 0, end: 0 };
@@ -78,6 +74,9 @@ export class TableWithSortDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort.component.ts b/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort.component.ts
index fa32a8f16..749936d94 100644
--- a/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort.component.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-sort/table-with-sort.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
 
@@ -60,6 +51,9 @@ import { IServer } from "./types";
 export class TableWithSortComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as TableWithSortDataSource<IServer>;
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -83,12 +77,6 @@ export class TableWithSortComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: TableWithSortDataSource<IServer>,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll-data-source.service.ts b/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll-data-source.service.ts
index 45663a241..e003e5b96 100644
--- a/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll-data-source.service.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { firstValueFrom, Observable, of } from "rxjs";
 import { catchError, delay, map } from "rxjs/operators";
 
@@ -49,10 +49,6 @@ export class TableWithVirtualScrollDataSource<T>
     extends ServerSideDataSource<T>
     implements IDataSource
 {
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
-
     // build query params specific to our backend API
     private static getRequestParams(filters: IServerFilters): HttpParams {
         const paging = filters.virtualScroll?.value || { start: 0, end: 0 };
@@ -79,6 +75,9 @@ export class TableWithVirtualScrollDataSource<T>
         return params;
     }
 
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
     public async getFilteredData(
         data: IServersCollection
     ): Promise<INovaFilteringOutputs> {
diff --git a/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll.component.ts b/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll.component.ts
index 59863e8af..a1add43bb 100644
--- a/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll.component.ts
+++ b/packages/bits/demo/src/schematics/table/table-with-virtual-scroll/table-with-virtual-scroll.component.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    Inject,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import {
     debounceTime,
@@ -70,6 +61,10 @@ import { IServer } from "./types";
 export class TableWithVirtualScrollComponent
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private dataSource = inject(DataSourceService) as TableWithVirtualScrollDataSource<IServer>;
+    private viewportManager = inject(VirtualViewportManager);
+    private changeDetection = inject(ChangeDetectorRef);
+
     public items: IServer[] = [];
     public isBusy: boolean = false;
     // This value is obtained from the server and used to evaluate the total number of pages to display
@@ -98,13 +93,6 @@ export class TableWithVirtualScrollComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        @Inject(DataSourceService)
-        private dataSource: TableWithVirtualScrollDataSource<IServer>,
-        private viewportManager: VirtualViewportManager,
-        private changeDetection: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.dataSource.busy
             .pipe(
diff --git a/packages/bits/demo/src/schematics/utils/schematic-docs-cli-option/schematic-docs-cli-option.component.ts b/packages/bits/demo/src/schematics/utils/schematic-docs-cli-option/schematic-docs-cli-option.component.ts
index 8cf369fa5..1bcc9edf4 100644
--- a/packages/bits/demo/src/schematics/utils/schematic-docs-cli-option/schematic-docs-cli-option.component.ts
+++ b/packages/bits/demo/src/schematics/utils/schematic-docs-cli-option/schematic-docs-cli-option.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, Input, Optional } from "@angular/core";
+import { Component, InjectionToken, Input, inject } from "@angular/core";
 
 import { RepeatComponent } from "@nova-ui/bits";
 
@@ -27,12 +27,16 @@ export enum SchematicsDocsComponentType {
     "table" = "table",
 }
 
+export const SCHEMATICS_DOCS_COMPONENT_TYPE = new InjectionToken<SchematicsDocsComponentType>("SchematicsDocsComponentType");
+
 @Component({
     selector: "nui-schematic-cli-option",
     templateUrl: "./schematic-docs-cli-option.component.html",
     standalone: false,
 })
 export class SchematicsDocsCliOptionComponent {
+    public forComponent? = inject<SchematicsDocsComponentType>(SCHEMATICS_DOCS_COMPONENT_TYPE, { optional: true });
+
     @Input() name: string;
 
     public componentType = SchematicsDocsComponentType;
@@ -171,12 +175,6 @@ public ngOnInit(): void {
         `,
     };
 
-    public constructor(
-        @Optional()
-        @Inject(SchematicsDocsComponentType)
-        public forComponent?: SchematicsDocsComponentType
-    ) {}
-
     public getRepeatPropKey(key: keyof RepeatComponent): string {
         return key;
     }
diff --git a/packages/bits/demo/src/schematics/utils/schematic-docs-example/schematic-docs-example.component.ts b/packages/bits/demo/src/schematics/utils/schematic-docs-example/schematic-docs-example.component.ts
index 3e1e04d15..340798045 100644
--- a/packages/bits/demo/src/schematics/utils/schematic-docs-example/schematic-docs-example.component.ts
+++ b/packages/bits/demo/src/schematics/utils/schematic-docs-example/schematic-docs-example.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    Inject,
-    Input,
-    OnInit,
-    Optional,
-    SkipSelf,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, Input, OnInit, ViewEncapsulation, inject } from "@angular/core";
 import _set from "lodash/set";
 
 import { CodeSourceFiles, DEMO_PATH_TOKEN } from "@nova-ui/bits";
@@ -39,6 +31,8 @@ import { CodeSourceFiles, DEMO_PATH_TOKEN } from "@nova-ui/bits";
     standalone: false,
 })
 export class SchematicDocsExampleComponent implements OnInit {
+    private context = inject<CodeSourceFiles>(DEMO_PATH_TOKEN, { skipSelf: true, optional: true })!;
+
     @Input() exampleFolderName: string;
     public componentSources: string[];
     public shouldCodeRender: boolean;
@@ -62,13 +56,6 @@ export class SchematicDocsExampleComponent implements OnInit {
         }, 100);
     }
 
-    constructor(
-        @SkipSelf()
-        @Optional()
-        @Inject(DEMO_PATH_TOKEN)
-        private context: CodeSourceFiles
-    ) {}
-
     public ngOnInit(): void {
         this.componentSources = this.getSourcesByFilenamePrefix(
             this.exampleFolderName
diff --git a/packages/bits/demo/src/static/framework-colors-dark/framework-colors-dark.example.component.ts b/packages/bits/demo/src/static/framework-colors-dark/framework-colors-dark.example.component.ts
index a417a03db..3918f4139 100644
--- a/packages/bits/demo/src/static/framework-colors-dark/framework-colors-dark.example.component.ts
+++ b/packages/bits/demo/src/static/framework-colors-dark/framework-colors-dark.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -32,8 +32,9 @@ import { default as colors } from "../../../../src/styles/data/framework-colors-
     standalone: false,
 })
 export class FrameworkColorsDarkExampleComponent {
+    private toastService = inject(ToastService);
+
     public colors = colors;
-    constructor(private toastService: ToastService) {}
 
     public onClipboardSuccess(): void {
         this.toastService.success({
diff --git a/packages/bits/demo/src/static/framework-colors/framework-colors-example.component.ts b/packages/bits/demo/src/static/framework-colors/framework-colors-example.component.ts
index 6421a7cda..f49967e67 100644
--- a/packages/bits/demo/src/static/framework-colors/framework-colors-example.component.ts
+++ b/packages/bits/demo/src/static/framework-colors/framework-colors-example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ToastService } from "@nova-ui/bits";
 
@@ -32,9 +32,9 @@ import { default as colors } from "../../../../src/styles/data/framework-colors.
     standalone: false,
 })
 export class FrameworkColorsExampleComponent {
-    public colors = colors;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {}
+    public colors = colors;
 
     public onClipboardSuccess(): void {
         this.toastService.success({
diff --git a/packages/bits/schematics/src/filter-group/files/__name@dasherize__/filter-group-dialog/filter-group-dialog.component.ts b/packages/bits/schematics/src/filter-group/files/__name@dasherize__/filter-group-dialog/filter-group-dialog.component.ts
index 2b6192e9f..68e851b35 100644
--- a/packages/bits/schematics/src/filter-group/files/__name@dasherize__/filter-group-dialog/filter-group-dialog.component.ts
+++ b/packages/bits/schematics/src/filter-group/files/__name@dasherize__/filter-group-dialog/filter-group-dialog.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    Output,
-} from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import { ISelection, NuiActiveDialog, SelectorService } from "@nova-ui/bits";
 
 import { IFilterGroupOption } from "../public-api";
@@ -35,14 +29,15 @@ import { IFilterGroupOption } from "../public-api";
     styleUrls: ["./filter-group-dialog.component.less"],
 })
 export class FilterGroupDialogComponent {
+    private activeDialog = inject<NuiActiveDialog>(NuiActiveDialog);
+    private selectorService = inject(SelectorService);
+
     @Input() title: string;
     @Input() itemPickerOptions: IFilterGroupOption[] = [];
     @Input() selectedValues: string[] = [];
 
     @Output() dialogClosed: EventEmitter<string[]> = new EventEmitter();
 
-    constructor(@Inject(NuiActiveDialog) private activeDialog: NuiActiveDialog, private selectorService: SelectorService) {}
-
     public acceptDialogFilters() {
         this.dialogClosed.emit(this.selectedValues);
         this.closeDialog();
diff --git a/packages/bits/schematics/src/filter-group/files/__name@dasherize__/item-picker/item-picker.component.ts b/packages/bits/schematics/src/filter-group/files/__name@dasherize__/item-picker/item-picker.component.ts
index cc61b8e3b..a07459e56 100644
--- a/packages/bits/schematics/src/filter-group/files/__name@dasherize__/item-picker/item-picker.component.ts
+++ b/packages/bits/schematics/src/filter-group/files/__name@dasherize__/item-picker/item-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 import {
     ClientSideDataSource,
     DataSourceService,
@@ -54,6 +44,9 @@ export interface IItemPickerOption {
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ItemPickerComponent implements OnInit, AfterViewInit {
+    dataSource = inject<DataSourceService<IFilterGroupOption>>(DataSourceService);
+    changeDetection = inject(ChangeDetectorRef);
+
     @Input() itemPickerOptions: IItemPickerOption[];
     @Input() selectedValues: string[] = [];
 
@@ -72,10 +65,6 @@ export class ItemPickerComponent implements OnInit, AfterViewInit {
         exclude: [],
     };
 
-    constructor(@Inject(DataSourceService) public dataSource: DataSourceService<IFilterGroupOption>,
-                public changeDetection: ChangeDetectorRef) {
-    }
-
     public ngOnInit(): void {
         (this.dataSource as ClientSideDataSource<IFilterGroupOption>).setData(this.itemPickerOptions);
         this.selection = {
diff --git a/packages/bits/schematics/src/table/files/virtual-scroll-custom-strategy.service.ts b/packages/bits/schematics/src/table/files/virtual-scroll-custom-strategy.service.ts
index 62a993e07..6607b0925 100644
--- a/packages/bits/schematics/src/table/files/virtual-scroll-custom-strategy.service.ts
+++ b/packages/bits/schematics/src/table/files/virtual-scroll-custom-strategy.service.ts
@@ -19,10 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import {
-    Inject,
-    Injectable,
-} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {
     IFilter,
     IFilterPub,
@@ -36,7 +33,9 @@ export class VirtualScrollCustomStrategyService implements IFilterPub<IFilter<Li
 
     protected virtualScrollRange: ListRange;
 
-    constructor(@Inject(CUSTOM_SCROLL_ITEMS_PER_PAGE) itemsPerPage: number) {
+    constructor() {
+        const itemsPerPage = inject(CUSTOM_SCROLL_ITEMS_PER_PAGE);
+
         this.itemsPerPage = itemsPerPage;
         this.reset();
     }
diff --git a/packages/bits/src/common/directives/click-interceptor/click-interceptor.directive.ts b/packages/bits/src/common/directives/click-interceptor/click-interceptor.directive.ts
index 278b85013..9c610a26e 100644
--- a/packages/bits/src/common/directives/click-interceptor/click-interceptor.directive.ts
+++ b/packages/bits/src/common/directives/click-interceptor/click-interceptor.directive.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Directive, HostListener } from "@angular/core";
+import { Directive, HostListener, inject } from "@angular/core";
 
 import { DOCUMENT_CLICK_EVENT } from "../../../constants/event.constants";
 import { EventBusService } from "../../../services/event-bus.service";
@@ -39,11 +39,11 @@ import { EventBusService } from "../../../services/event-bus.service";
     standalone: false,
 })
 export class ClickInterceptorDirective {
+    private eventBusService = inject(EventBusService);
+
     @HostListener("click", ["$event"])
     catchClick(event: MouseEvent): void {
         event.stopPropagation();
         this.eventBusService.getStream(DOCUMENT_CLICK_EVENT).next(event);
     }
-
-    constructor(private eventBusService: EventBusService) {}
 }
diff --git a/packages/bits/src/common/directives/clipboard/clipboard.directive.ts b/packages/bits/src/common/directives/clipboard/clipboard.directive.ts
index 9311c53b7..bf65ff789 100644
--- a/packages/bits/src/common/directives/clipboard/clipboard.directive.ts
+++ b/packages/bits/src/common/directives/clipboard/clipboard.directive.ts
@@ -19,15 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import {
-    Directive,
-    EventEmitter,
-    HostListener,
-    Inject,
-    Input,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { Directive, EventEmitter, HostListener, Input, OnInit, Output, inject } from "@angular/core";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import isString from "lodash/isString";
@@ -48,6 +40,9 @@ import { LoggerService } from "../../../services/log-service";
     standalone: false,
 })
 export class ClipboardDirective implements OnInit {
+    private logger = inject(LoggerService);
+    private document = inject<Document>(DOCUMENT);
+
     /* eslint-disable @angular-eslint/no-input-rename */
     /**
      * Text to be copied to the clipboard
@@ -82,11 +77,6 @@ export class ClipboardDirective implements OnInit {
         }
     }
 
-    constructor(
-        private logger: LoggerService,
-        @Inject(DOCUMENT) private document: Document
-    ) {}
-
     public ngOnInit(): void {
         try {
             this.hasCopySupport = this.document.queryCommandSupported("copy");
diff --git a/packages/bits/src/common/directives/dragdrop/draggable.directive.ts b/packages/bits/src/common/directives/dragdrop/draggable.directive.ts
index 0b9e9e9c4..20b8748c6 100644
--- a/packages/bits/src/common/directives/dragdrop/draggable.directive.ts
+++ b/packages/bits/src/common/directives/dragdrop/draggable.directive.ts
@@ -19,18 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    Inject,
-    Input,
-    NgZone,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgZone, OnInit, Output, inject } from "@angular/core";
 import throttle from "lodash/throttle";
 
 import { DragAndDropService } from "./drag-and-drop.service";
@@ -84,6 +73,12 @@ export class DraggableDirective implements OnInit {
     private static adornerHaloClass = "nui-drag__drag-halo";
     private static dragsourceOverlayClass = "nui-drag__drag-source--overlay";
 
+    private elRef = inject(ElementRef);
+    private zone = inject(NgZone);
+    private utilService = inject(UtilService);
+    private dragAndDropService = inject(DragAndDropService);
+    private document = inject<Document>(DOCUMENT);
+
     @Input() adornerDragClass: string;
     @Input() payload: any;
     @Output() dragStart = new EventEmitter();
@@ -148,14 +143,6 @@ export class DraggableDirective implements OnInit {
         });
     }
 
-    constructor(
-        private elRef: ElementRef,
-        private zone: NgZone,
-        private utilService: UtilService,
-        private dragAndDropService: DragAndDropService,
-        @Inject(DOCUMENT) private document: Document
-    ) {}
-
     public ngOnInit(): void {
         this.draggable = true;
     }
diff --git a/packages/bits/src/common/directives/dragdrop/droppable.directive.ts b/packages/bits/src/common/directives/dragdrop/droppable.directive.ts
index a3aa9483b..8e98c107f 100644
--- a/packages/bits/src/common/directives/dragdrop/droppable.directive.ts
+++ b/packages/bits/src/common/directives/dragdrop/droppable.directive.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    HostListener,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-} from "@angular/core";
+import { Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, inject } from "@angular/core";
 import _isNil from "lodash/isNil";
 import throttle from "lodash/throttle";
 import { Subscription } from "rxjs";
@@ -99,6 +90,9 @@ import {
     standalone: false,
 })
 export class DroppableDirective implements OnInit, OnDestroy {
+    private elRef = inject(ElementRef);
+    private dragAndDropService = inject(DragAndDropService);
+
     @Input() dragOverClass = "nui-drag--over";
     @Input() invalidDragOverClass: string;
     @Input() dropIndicatorClass: string;
@@ -191,11 +185,6 @@ export class DroppableDirective implements OnInit, OnDestroy {
         event.stopPropagation();
         return false;
     }
-
-    constructor(
-        private elRef: ElementRef,
-        private dragAndDropService: DragAndDropService
-    ) {}
     public ngOnInit(): void {
         this.onDragStateChangedSubscription =
             this.dragAndDropService.onDragStateChanged.subscribe(
diff --git a/packages/bits/src/common/directives/resize-observer/resize-observer.directive.ts b/packages/bits/src/common/directives/resize-observer/resize-observer.directive.ts
index 952914079..420df7bdc 100644
--- a/packages/bits/src/common/directives/resize-observer/resize-observer.directive.ts
+++ b/packages/bits/src/common/directives/resize-observer/resize-observer.directive.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Directive,
-    ElementRef,
-    EventEmitter,
-    NgZone,
-    OnDestroy,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, Directive, ElementRef, EventEmitter, NgZone, OnDestroy, Output, inject } from "@angular/core";
 import debounce from "lodash/debounce";
 
 import { RESIZE_DEBOUNCE_TIME } from "../../../constants/resize.constants";
@@ -39,14 +31,15 @@ import { RESIZE_DEBOUNCE_TIME } from "../../../constants/resize.constants";
     standalone: false,
 })
 export class ResizeObserverDirective implements OnDestroy, AfterViewInit {
+    private _element = inject(ElementRef);
+    private ngZone = inject(NgZone);
+
     @Output()
     public containerResize = new EventEmitter();
     public resizeHandler: Function;
     private _debounceTime = RESIZE_DEBOUNCE_TIME;
     private resizeObserver?: ResizeObserver;
 
-    constructor(private _element: ElementRef, private ngZone: NgZone) {}
-
     public set debounceTime(debounceTime: number) {
         this._debounceTime = debounceTime;
     }
diff --git a/packages/bits/src/common/directives/resize/resize.directive.ts b/packages/bits/src/common/directives/resize/resize.directive.ts
index de6594e34..ed517cdeb 100644
--- a/packages/bits/src/common/directives/resize/resize.directive.ts
+++ b/packages/bits/src/common/directives/resize/resize.directive.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Directive,
-    ElementRef,
-    EventEmitter,
-    OnDestroy,
-    Output,
-} from "@angular/core";
+import { AfterViewInit, Directive, ElementRef, EventEmitter, OnDestroy, Output, inject } from "@angular/core";
 import filter from "lodash/filter";
 import forEach from "lodash/forEach";
 
@@ -75,6 +68,8 @@ interface IResizeElement extends HTMLElement {
     standalone: false,
 })
 export class ResizeDirective implements AfterViewInit, OnDestroy {
+    private element = inject(ElementRef);
+
     /**
      * Event to be triggered on element resize
      */
@@ -103,8 +98,6 @@ export class ResizeDirective implements AfterViewInit, OnDestroy {
         }
     };
 
-    constructor(private element: ElementRef) {}
-
     public ngAfterViewInit(): void {
         this.attachResizeEvent(this.element.nativeElement, this.resizeEmit);
     }
diff --git a/packages/bits/src/common/directives/resizer/resizer.directive.ts b/packages/bits/src/common/directives/resizer/resizer.directive.ts
index 0c2053f7c..5c6f25f90 100644
--- a/packages/bits/src/common/directives/resizer/resizer.directive.ts
+++ b/packages/bits/src/common/directives/resizer/resizer.directive.ts
@@ -18,19 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Directive,
-    ElementRef,
-    EventEmitter,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    Output,
-    Renderer2,
-    SimpleChanges,
-} from "@angular/core";
+import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, inject } from "@angular/core";
 import debounce from "lodash/debounce";
 import isFunction from "lodash/isFunction";
 import isUndefined from "lodash/isUndefined";
@@ -59,6 +47,13 @@ const resizeClass = "nui-resize-gutter";
     standalone: false,
 })
 export class ResizerDirective implements AfterViewInit, OnChanges, OnDestroy {
+    private elRef = inject(ElementRef);
+    private renderer = inject(Renderer2);
+    private utilService = inject(UtilService);
+    private _element = inject(ElementRef);
+    private ngZone = inject(NgZone);
+    private eventBusService = inject(EventBusService);
+
     /**
      * Direction in which element can be resizable. can be "top", "right", "left" and "bottom"
      */
@@ -131,15 +126,6 @@ export class ResizerDirective implements AfterViewInit, OnChanges, OnDestroy {
     private mouseMoveUnlisten: () => void;
     private sibling: any;
 
-    public constructor(
-        private elRef: ElementRef,
-        private renderer: Renderer2,
-        private utilService: UtilService,
-        private _element: ElementRef,
-        private ngZone: NgZone,
-        private eventBusService: EventBusService
-    ) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes["resizerDirection"] && this.resizeGutter) {
             this.appendResizeElement();
diff --git a/packages/bits/src/common/directives/set-focus/set-focus.directive.ts b/packages/bits/src/common/directives/set-focus/set-focus.directive.ts
index 76fc1e493..634eb1697 100644
--- a/packages/bits/src/common/directives/set-focus/set-focus.directive.ts
+++ b/packages/bits/src/common/directives/set-focus/set-focus.directive.ts
@@ -19,17 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import {
-    AfterViewInit,
-    Directive,
-    ElementRef,
-    EventEmitter,
-    Inject,
-    Input,
-    OnChanges,
-    Output,
-    SimpleChanges,
-} from "@angular/core";
+import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, inject } from "@angular/core";
 
 /**
  * <example-url>./../examples/index.html#/common/set-focus</example-url>
@@ -52,6 +42,10 @@ export class SetFocusDirective implements AfterViewInit, OnChanges {
         "input",
         "textarea",
     ];
+
+    private el = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+
     /**
      * This property controls whether element is focused (true) or not (false).
      */
@@ -67,11 +61,6 @@ export class SetFocusDirective implements AfterViewInit, OnChanges {
 
     private focusableElement: HTMLElement;
 
-    constructor(
-        private el: ElementRef,
-        @Inject(DOCUMENT) private document: Document
-    ) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (!this.focusableElement || !changes["nuiSetFocus"]) {
             return;
diff --git a/packages/bits/src/common/directives/zoom-content/zoom-content.directive.ts b/packages/bits/src/common/directives/zoom-content/zoom-content.directive.ts
index bddbbeac3..f08141292 100644
--- a/packages/bits/src/common/directives/zoom-content/zoom-content.directive.ts
+++ b/packages/bits/src/common/directives/zoom-content/zoom-content.directive.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Directive,
-    ElementRef,
-    HostBinding,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    SimpleChanges,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, Input, NgZone, OnChanges, OnDestroy, SimpleChanges, inject } from "@angular/core";
 import isFinite from "lodash/isFinite";
 import { BehaviorSubject, Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -55,6 +44,9 @@ export interface IBrokerValue {
 export class ZoomContentDirective
     implements OnDestroy, AfterViewInit, OnChanges
 {
+    private ngZone = inject(NgZone);
+    private cdRef = inject(ChangeDetectorRef);
+
     private readonly destroy$ = new Subject<void>();
 
     @HostBinding("style.zoom")
@@ -86,11 +78,9 @@ export class ZoomContentDirective
 
     private resizeObserver: ResizeObserver;
 
-    constructor(
-        element: ElementRef,
-        private ngZone: NgZone,
-        private cdRef: ChangeDetectorRef
-    ) {
+    constructor() {
+        const element = inject(ElementRef);
+
         this.element = element.nativeElement;
 
         if (!this.element.parentElement) {
diff --git a/packages/bits/src/lib/busy/busy.component.ts b/packages/bits/src/lib/busy/busy.component.ts
index d2f4d4fbe..eeb662b92 100644
--- a/packages/bits/src/lib/busy/busy.component.ts
+++ b/packages/bits/src/lib/busy/busy.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    Component,
-    ContentChild,
-    ElementRef,
-    Input,
-    OnChanges,
-    SimpleChanges,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, Component, ContentChild, ElementRef, Input, OnChanges, SimpleChanges, ViewEncapsulation, inject } from "@angular/core";
 
 import { TabNavigationService } from "../../services/tab-navigation.service";
 import { ProgressComponent } from "../progress/progress.component";
@@ -47,6 +38,9 @@ import { SpinnerComponent } from "../spinner/spinner.component";
 })
 /* eslint-enable @angular-eslint/component-selector */
 export class BusyComponent implements AfterContentInit, OnChanges {
+    private tabNavigationService = inject(TabNavigationService);
+    private elRef = inject(ElementRef);
+
     public isDefaultTemplate = false;
     public isSpinnerTemplate = false;
     public isProgressTemplate = false;
@@ -61,11 +55,6 @@ export class BusyComponent implements AfterContentInit, OnChanges {
     @ContentChild(SpinnerComponent) spinnerComponent: SpinnerComponent;
     @ContentChild(ProgressComponent) progressComponent: ProgressComponent;
 
-    constructor(
-        private tabNavigationService: TabNavigationService,
-        private elRef: ElementRef
-    ) {}
-
     public ngAfterContentInit(): void {
         this.setBusyStateForContentComponents();
 
diff --git a/packages/bits/src/lib/button/button.component.ts b/packages/bits/src/lib/button/button.component.ts
index 79221eca8..07c224209 100644
--- a/packages/bits/src/lib/button/button.component.ts
+++ b/packages/bits/src/lib/button/button.component.ts
@@ -18,20 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentChecked,
-    Attribute,
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    HostBinding,
-    Input,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentChecked, ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef, ViewEncapsulation, HostAttributeToken, inject } from "@angular/core";
 import { fromEvent, merge, Subject, timer } from "rxjs";
 import { filter, takeUntil } from "rxjs/operators";
 
@@ -54,6 +41,10 @@ import { LoggerService } from "../../services/log-service";
     standalone: false,
 })
 export class ButtonComponent implements OnInit, OnDestroy, AfterContentChecked {
+    private type = inject(new HostAttributeToken("type"));
+    private el = inject(ElementRef);
+    private logger = inject(LoggerService);
+
     /**
      * Optionally, specify the display style. Supported values are "default", "primary", "action", and "destructive".
      */
@@ -176,11 +167,10 @@ export class ButtonComponent implements OnInit, OnDestroy, AfterContentChecked {
     private _isContentEmpty: boolean;
     private _size: ButtonSizeType;
 
-    constructor(
-        @Attribute("type") private type: string,
-        private el: ElementRef,
-        private logger: LoggerService
-    ) {
+    constructor() {
+        const type = this.type;
+        const el = this.el;
+
         if (this.getHostElement().tagName === "BUTTON" && !type) {
             this.logger.error(
                 `No type specified for button element. To avoid potential problems, the "type" attribute \
diff --git a/packages/bits/src/lib/checkbox/checkbox-group.component.ts b/packages/bits/src/lib/checkbox/checkbox-group.component.ts
index f62effc4d..c924498e7 100644
--- a/packages/bits/src/lib/checkbox/checkbox-group.component.ts
+++ b/packages/bits/src/lib/checkbox/checkbox-group.component.ts
@@ -18,19 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    ContentChildren,
-    EventEmitter,
-    forwardRef,
-    Input,
-    OnDestroy,
-    Output,
-    QueryList,
-    Renderer2,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, forwardRef, Input, OnDestroy, Output, QueryList, Renderer2, inject } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import _remove from "lodash/remove";
 import { Subscription } from "rxjs";
@@ -65,6 +53,8 @@ import { NuiFormFieldControl } from "../form-field/public-api";
 export class CheckboxGroupComponent
     implements AfterViewInit, OnDestroy, ControlValueAccessor
 {
+    private renderer = inject(Renderer2);
+
     /**
      * Sets "name" attribute for inner input element of nui-checkbox
      */
@@ -99,8 +89,6 @@ export class CheckboxGroupComponent
     private subscriptionsArray = new Array<Subscription>();
     private disabled: boolean = false;
 
-    constructor(private renderer: Renderer2) {}
-
     /**
      * Subscribe to nui-checkbox-group children values change
      */
diff --git a/packages/bits/src/lib/checkbox/checkbox.component.ts b/packages/bits/src/lib/checkbox/checkbox.component.ts
index d0d781d60..d4e2631e7 100644
--- a/packages/bits/src/lib/checkbox/checkbox.component.ts
+++ b/packages/bits/src/lib/checkbox/checkbox.component.ts
@@ -18,22 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    Input,
-    OnDestroy,
-    Output,
-    Renderer2,
-    ViewChild,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, Output, Renderer2, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { Subscription } from "rxjs";
 
@@ -84,6 +69,10 @@ export class CheckboxComponent
         ControlValueAccessor,
         OnDestroy
 {
+    private changeDetector = inject(ChangeDetectorRef);
+    private eventBusService = inject(EventBusService);
+    private renderer = inject(Renderer2);
+
     private _checked: boolean;
     private _disabled: boolean;
 
@@ -195,12 +184,6 @@ export class CheckboxComponent
 
     private keysAction = [KEYBOARD_CODE.SPACE, KEYBOARD_CODE.ENTER].map(String);
 
-    constructor(
-        private changeDetector: ChangeDetectorRef,
-        private eventBusService: EventBusService,
-        private renderer: Renderer2
-    ) {}
-
     public ngAfterViewInit(): void {
         this.rendererListener = this.renderer.listen(
             this.checkboxLabel.nativeElement,
diff --git a/packages/bits/src/lib/chips/chip/chip.component.ts b/packages/bits/src/lib/chips/chip/chip.component.ts
index 818896f06..d59dc15eb 100644
--- a/packages/bits/src/lib/chips/chip/chip.component.ts
+++ b/packages/bits/src/lib/chips/chip/chip.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    Output,
-    TemplateRef,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { IChipsItem } from "../public-api";
 
@@ -48,6 +37,9 @@ import { IChipsItem } from "../public-api";
     standalone: false,
 })
 export class ChipComponent implements AfterViewInit {
+    host = inject(ElementRef);
+    private cdRef = inject(ChangeDetectorRef);
+
     /**
      * Value passed to display as a chip.
      */
@@ -73,8 +65,6 @@ export class ChipComponent implements AfterViewInit {
 
     @ViewChild("projection") private contentTemplate: TemplateRef<any>;
 
-    constructor(public host: ElementRef, private cdRef: ChangeDetectorRef) {}
-
     public ngAfterViewInit(): void {
         this.isContentProjected = Boolean(
             this.contentTemplate.createEmbeddedView(undefined).rootNodes.length
diff --git a/packages/bits/src/lib/chips/chips-overflow.service.ts b/packages/bits/src/lib/chips/chips-overflow.service.ts
index 679112c95..5b7421254 100644
--- a/packages/bits/src/lib/chips/chips-overflow.service.ts
+++ b/packages/bits/src/lib/chips/chips-overflow.service.ts
@@ -18,19 +18,15 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ElementRef,
-    EventEmitter,
-    Injectable,
-    NgZone,
-    QueryList,
-} from "@angular/core";
+import { ElementRef, EventEmitter, Injectable, NgZone, QueryList, inject } from "@angular/core";
 
 import { ChipComponent } from "./chip/chip.component";
 import { IChipsGroup, IChipsItem, IChipsItemsSource } from "./public-api";
 
 @Injectable()
 export class ChipsOverflowService {
+    private zone = inject(NgZone);
+
     public itemsSource: IChipsItemsSource;
     public mainCell: ElementRef<HTMLElement>;
     public clearAll: ElementRef<HTMLElement>;
@@ -45,8 +41,6 @@ export class ChipsOverflowService {
     private chipResizeObserver: ResizeObserver;
     private chipsMutationObserver: MutationObserver;
 
-    constructor(private zone: NgZone) {}
-
     public init(): void {
         this.initChipResizeObserver();
         this.initChipsMutationObserver();
diff --git a/packages/bits/src/lib/chips/chips.component.ts b/packages/bits/src/lib/chips/chips.component.ts
index 8e2d8fb92..4a2dfed02 100644
--- a/packages/bits/src/lib/chips/chips.component.ts
+++ b/packages/bits/src/lib/chips/chips.component.ts
@@ -18,25 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ContentChild,
-    ElementRef,
-    EventEmitter,
-    HostListener,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    SimpleChanges,
-    ViewChild,
-    ViewChildren,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, Output, QueryList, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 import _size from "lodash/size";
 import { Subject } from "rxjs";
@@ -83,6 +65,9 @@ import {
 export class ChipsComponent
     implements OnInit, OnDestroy, OnChanges, AfterViewInit
 {
+    private zone = inject(NgZone);
+    private chipsOverflowService = inject(ChipsOverflowService);
+
     /**
      * Whether overflow mode turned on
      */
@@ -157,11 +142,6 @@ export class ChipsComponent
         return this.getItemsCount() ? "list" : null;
     }
 
-    constructor(
-        private zone: NgZone,
-        private chipsOverflowService: ChipsOverflowService
-    ) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes.itemsSource) {
             this.chipsOverflowService.itemsSource =
diff --git a/packages/bits/src/lib/convenience/time-frame-bar/time-frame-bar.component.ts b/packages/bits/src/lib/convenience/time-frame-bar/time-frame-bar.component.ts
index a05b62cd1..d7ba6b55a 100644
--- a/packages/bits/src/lib/convenience/time-frame-bar/time-frame-bar.component.ts
+++ b/packages/bits/src/lib/convenience/time-frame-bar/time-frame-bar.component.ts
@@ -18,19 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChild,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    SimpleChanges,
-} from "@angular/core";
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -67,6 +55,10 @@ import { TimeFramePickerComponent } from "../../time-frame-picker/time-frame-pic
 export class TimeFrameBarComponent
     implements AfterContentInit, OnChanges, OnDestroy
 {
+    timeframeService = inject(TimeframeService);
+    private logger = inject(LoggerService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     /** Earliest selectable date */
     @Input() minDate: Moment;
     /** Latest selectable date */
@@ -102,11 +94,7 @@ export class TimeFrameBarComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        public timeframeService: TimeframeService,
-        private logger: LoggerService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {
+    constructor() {
         this.presets = this.timeframeService.getDefaultPresets();
     }
 
diff --git a/packages/bits/src/lib/date-picker/date-picker-day-picker.component.ts b/packages/bits/src/lib/date-picker/date-picker-day-picker.component.ts
index 84a76f5b1..a9a0382c5 100644
--- a/packages/bits/src/lib/date-picker/date-picker-day-picker.component.ts
+++ b/packages/bits/src/lib/date-picker/date-picker-day-picker.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation, inject } from "@angular/core";
 import moment, { Moment } from "moment/moment";
 
 import { DatePickerInnerComponent } from "./date-picker-inner.component";
@@ -31,6 +31,8 @@ import { DatePickerInnerComponent } from "./date-picker-inner.component";
     standalone: false,
 })
 export class DayPickerComponent implements OnInit {
+    datePicker = inject(DatePickerInnerComponent);
+
     public labels: any[] = [];
     public title: string;
     public rows: any[] = [];
@@ -42,7 +44,9 @@ export class DayPickerComponent implements OnInit {
      */
     public todayDate: string = moment().toString();
 
-    constructor(public datePicker: DatePickerInnerComponent) {
+    constructor() {
+        const datePicker = this.datePicker;
+
         this.datePicker = datePicker;
     }
 
diff --git a/packages/bits/src/lib/date-picker/date-picker-month-picker.component.ts b/packages/bits/src/lib/date-picker/date-picker-month-picker.component.ts
index d661284dd..0d4a458e0 100644
--- a/packages/bits/src/lib/date-picker/date-picker-month-picker.component.ts
+++ b/packages/bits/src/lib/date-picker/date-picker-month-picker.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import moment from "moment/moment";
 import { Moment } from "moment/moment";
 
@@ -30,11 +30,15 @@ import { DatePickerInnerComponent } from "./date-picker-inner.component";
     standalone: false,
 })
 export class MonthPickerComponent implements OnInit {
+    datePicker = inject(DatePickerInnerComponent);
+
     title: string;
     rows: any[] = [];
     maxMode: string;
 
-    constructor(public datePicker: DatePickerInnerComponent) {
+    constructor() {
+        const datePicker = this.datePicker;
+
         this.datePicker = datePicker;
     }
 
diff --git a/packages/bits/src/lib/date-picker/date-picker-year-picker.component.ts b/packages/bits/src/lib/date-picker/date-picker-year-picker.component.ts
index f1a6e016f..e3f43095d 100644
--- a/packages/bits/src/lib/date-picker/date-picker-year-picker.component.ts
+++ b/packages/bits/src/lib/date-picker/date-picker-year-picker.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import moment from "moment/moment";
 import { Moment } from "moment/moment";
 
@@ -30,10 +30,14 @@ import { DatePickerInnerComponent } from "./date-picker-inner.component";
     standalone: false,
 })
 export class YearPickerComponent implements OnInit {
+    datePicker = inject(DatePickerInnerComponent);
+
     title: string;
     rows: any[] = [];
 
-    constructor(public datePicker: DatePickerInnerComponent) {
+    constructor() {
+        const datePicker = this.datePicker;
+
         this.datePicker = datePicker;
     }
 
diff --git a/packages/bits/src/lib/date-picker/date-picker.component.ts b/packages/bits/src/lib/date-picker/date-picker.component.ts
index 7c66194a1..4d3411e75 100644
--- a/packages/bits/src/lib/date-picker/date-picker.component.ts
+++ b/packages/bits/src/lib/date-picker/date-picker.component.ts
@@ -19,23 +19,7 @@
 //  THE SOFTWARE.
 
 import { OverlayConfig } from "@angular/cdk/overlay";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    HostBinding,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import {
     ControlValueAccessor,
     FormControl,
@@ -97,6 +81,8 @@ export class DatePickerComponent
         AfterViewInit,
         OnDestroy
 {
+    private cd = inject(ChangeDetectorRef);
+
     /** sets date-picker inline mode */
     @HostBinding("class.nui-datepicker--inline")
     @Input()
@@ -208,8 +194,6 @@ export class DatePickerComponent
     private momentDateFormat: string;
     private calendarChanged: Subscription;
 
-    constructor(private cd: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         _defaults(this, datePickerDefaults);
         this.selectedDate = this._value;
diff --git a/packages/bits/src/lib/date-time-picker/date-time-picker.component.ts b/packages/bits/src/lib/date-time-picker/date-time-picker.component.ts
index bc973cedc..884507d99 100644
--- a/packages/bits/src/lib/date-time-picker/date-time-picker.component.ts
+++ b/packages/bits/src/lib/date-time-picker/date-time-picker.component.ts
@@ -18,21 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    Input,
-    OnInit,
-    Output,
-    Renderer2,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, Renderer2, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import moment from "moment/moment";
 import { Moment } from "moment/moment";
@@ -64,6 +50,9 @@ import { NuiFormFieldControl } from "../form-field/public-api";
 export class DateTimePickerComponent
     implements AfterViewInit, OnInit, ControlValueAccessor
 {
+    private renderer = inject(Renderer2);
+    private cd = inject(ChangeDetectorRef);
+
     /** latest available date */
     @Input() maxDate: Moment;
     /** earliest available date */
@@ -125,8 +114,6 @@ export class DateTimePickerComponent
     onTouched = (): void => {};
     onChange = (value: any): void => {};
 
-    constructor(private renderer: Renderer2, private cd: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         if (!this.initEmpty && !this.model) {
             this.model = moment();
diff --git a/packages/bits/src/lib/dialog/confirmation-dialog.component.ts b/packages/bits/src/lib/dialog/confirmation-dialog.component.ts
index 723d9d95f..81e2ac9e7 100644
--- a/packages/bits/src/lib/dialog/confirmation-dialog.component.ts
+++ b/packages/bits/src/lib/dialog/confirmation-dialog.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, inject } from "@angular/core";
 
 import { NuiActiveDialog } from "./dialog-ref";
 import { ConfirmationDialogButtons, SeverityLevels } from "./public-api";
@@ -36,6 +36,9 @@ import { ConfirmationDialogButtons, SeverityLevels } from "./public-api";
     standalone: false,
 })
 export class ConfirmationDialogComponent {
+    private activeDialog = inject(NuiActiveDialog);
+    private changeDetector = inject(ChangeDetectorRef);
+
     @Input()
     public title: string = $localize`Confirmation`;
 
@@ -57,11 +60,6 @@ export class ConfirmationDialogComponent {
     @Input()
     public ariaLabel: string = "";
 
-    constructor(
-        private activeDialog: NuiActiveDialog,
-        private changeDetector: ChangeDetectorRef
-    ) {}
-
     public updateInputs(): void {
         this.changeDetector.detectChanges();
     }
diff --git a/packages/bits/src/lib/dialog/dialog-service.spec.ts b/packages/bits/src/lib/dialog/dialog-service.spec.ts
index bc0d1b074..7be44a615 100644
--- a/packages/bits/src/lib/dialog/dialog-service.spec.ts
+++ b/packages/bits/src/lib/dialog/dialog-service.spec.ts
@@ -21,16 +21,7 @@
 /// <reference path="./dialog-service.spec.d.ts" />
 
 import { CommonModule } from "@angular/common";
-import {
-    Component,
-    DebugElement,
-    getDebugNode,
-    Injectable,
-    Injector,
-    NgModule,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { Component, DebugElement, getDebugNode, Injectable, Injector, NgModule, OnDestroy, ViewChild, inject } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { Router } from "@angular/router";
 import _noop from "lodash/noop";
@@ -57,7 +48,8 @@ class CustomSpyService {
     standalone: false,
 })
 export class CustomInjectorComponent implements OnDestroy {
-    constructor(private _spyService: CustomSpyService) {}
+    private _spyService = inject(CustomSpyService);
+
 
     public ngOnDestroy(): void {
         this._spyService.called = true;
@@ -70,7 +62,8 @@ export class CustomInjectorComponent implements OnDestroy {
     standalone: false,
 })
 export class DestroyableComponent implements OnDestroy {
-    constructor(private _spyService: SpyService) {}
+    private _spyService = inject(SpyService);
+
 
     public ngOnDestroy(): void {
         this._spyService.called = true;
@@ -84,7 +77,8 @@ export class DestroyableComponent implements OnDestroy {
     standalone: false,
 })
 export class WithActiveDialogComponent {
-    constructor(public activeDialog: NuiActiveDialog) {}
+    activeDialog = inject(NuiActiveDialog);
+
 
     close(): void {
         this.activeDialog.close("from inside");
@@ -120,6 +114,8 @@ export class WithActiveDialogComponent {
     standalone: false,
 })
 class TestComponent {
+    dialogService = inject(DialogService);
+
     name = "World";
     openedDialog: NuiDialogRef;
     show = true;
@@ -131,8 +127,6 @@ class TestComponent {
     tplContentWithDismiss: any;
     @ViewChild("contentWithIf", { static: true }) tplContentWithIf: any;
 
-    constructor(public dialogService: DialogService) {}
-
     open(content: string, options?: object): NuiDialogRef {
         this.openedDialog = this.dialogService.open(content, options);
         return this.openedDialog;
diff --git a/packages/bits/src/lib/dialog/dialog-stack.service.ts b/packages/bits/src/lib/dialog/dialog-stack.service.ts
index 0aca66c57..09852785e 100644
--- a/packages/bits/src/lib/dialog/dialog-stack.service.ts
+++ b/packages/bits/src/lib/dialog/dialog-stack.service.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import {
-    ApplicationRef,
-    ComponentFactory,
-    ComponentFactoryResolver,
-    ComponentRef,
-    Inject,
-    Injectable,
-    Injector,
-    TemplateRef,
-} from "@angular/core";
+import { ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, Injectable, Injector, TemplateRef, inject } from "@angular/core";
 import isNil from "lodash/isNil";
 
 import { DialogBackdropComponent } from "./dialog-backdrop.component";
@@ -43,15 +34,13 @@ import { OverlayContainerService } from "../overlay/public-api";
  */
 @Injectable({ providedIn: "root" })
 export class DialogStackService {
-    private windowAttributes = ["backdrop", "keyboard", "size", "windowClass"];
+    private applicationRef = inject(ApplicationRef);
+    private injector = inject(Injector);
+    private factoryResolver = inject(ComponentFactoryResolver);
+    private overlayContainerService = inject(OverlayContainerService);
+    private document = inject<Document>(DOCUMENT);
 
-    constructor(
-        private applicationRef: ApplicationRef,
-        private injector: Injector,
-        private factoryResolver: ComponentFactoryResolver,
-        private overlayContainerService: OverlayContainerService,
-        @Inject(DOCUMENT) private document: Document
-    ) {}
+    private windowAttributes = ["backdrop", "keyboard", "size", "windowClass"];
 
     open(
         moduleCFR: ComponentFactoryResolver,
diff --git a/packages/bits/src/lib/dialog/dialog.component.ts b/packages/bits/src/lib/dialog/dialog.component.ts
index 1d26d7290..b651f73df 100644
--- a/packages/bits/src/lib/dialog/dialog.component.ts
+++ b/packages/bits/src/lib/dialog/dialog.component.ts
@@ -20,20 +20,7 @@
 
 import { CdkScrollable, ScrollDispatcher } from "@angular/cdk/scrolling";
 import { DOCUMENT } from "@angular/common";
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostListener,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    Renderer2,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation, inject } from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
 import { filter, take } from "rxjs/operators";
 
@@ -61,7 +48,12 @@ const FOCUSABLE_SELECTOR =
     encapsulation: ViewEncapsulation.None,
     standalone: false,
 })
-export class DialogComponent implements OnInit, AfterViewInit, OnDestroy {
+export class DialogComponent implements OnInit, AfterViewInit, OnDestroy  {
+    private document = inject<Document>(DOCUMENT);
+    private elRef = inject(ElementRef);
+    private renderer = inject(Renderer2);
+    private router = inject(Router);
+
     private elWithFocus: any;
     /**
      * Whether a backdrop element should be created for a given dialog (true by default).
@@ -92,13 +84,6 @@ export class DialogComponent implements OnInit, AfterViewInit, OnDestroy {
     private scrollableElement: CdkScrollable;
     private mouseDownOrigin: MouseEvent;
 
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        private elRef: ElementRef,
-        private renderer: Renderer2,
-        private router: Router
-    ) {}
-
     @HostListener("window:keydown.shift.tab", ["$event"])
     onShiftTab(event: KeyboardEvent): void {
         if (
diff --git a/packages/bits/src/lib/dialog/dialog.service.ts b/packages/bits/src/lib/dialog/dialog.service.ts
index 4c389cfe6..fbf4fac5b 100644
--- a/packages/bits/src/lib/dialog/dialog.service.ts
+++ b/packages/bits/src/lib/dialog/dialog.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ComponentFactoryResolver, Injectable, Injector } from "@angular/core";
+import { ComponentFactoryResolver, Injectable, Injector, inject } from "@angular/core";
 import assign from "lodash/assign";
 import defaults from "lodash/defaults";
 import pick from "lodash/pick";
@@ -34,11 +34,10 @@ import { IConfirmationDialogOptions, IDialogOptions } from "./public-api";
  */
 @Injectable({ providedIn: "root" })
 export class DialogService {
-    constructor(
-        private moduleCFR: ComponentFactoryResolver,
-        private injector: Injector,
-        private dialogStack: DialogStackService
-    ) {}
+    private moduleCFR = inject(ComponentFactoryResolver);
+    private injector = inject(Injector);
+    private dialogStack = inject(DialogStackService);
+
 
     public afterOpened$: Subject<NuiDialogRef> = new Subject<NuiDialogRef>();
 
diff --git a/packages/bits/src/lib/dnd/dnd-drop-target.directive.ts b/packages/bits/src/lib/dnd/dnd-drop-target.directive.ts
index 156c52a5a..afecdfdf3 100644
--- a/packages/bits/src/lib/dnd/dnd-drop-target.directive.ts
+++ b/packages/bits/src/lib/dnd/dnd-drop-target.directive.ts
@@ -19,16 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkDrag, CdkDragStart, CdkDropList } from "@angular/cdk/drag-drop";
-import {
-    AfterContentInit,
-    ContentChildren,
-    Directive,
-    ElementRef,
-    Input,
-    OnDestroy,
-    QueryList,
-    Renderer2,
-} from "@angular/core";
+import { AfterContentInit, ContentChildren, Directive, ElementRef, Input, OnDestroy, QueryList, Renderer2, inject } from "@angular/core";
 import { combineLatest, fromEvent, merge, Observable, of, Subject } from "rxjs";
 import {
     distinctUntilChanged,
@@ -57,6 +48,9 @@ import {
     standalone: false,
 })
 export class DndDropTargetDirective implements AfterContentInit, OnDestroy {
+    private targetDropList = inject(CdkDropList);
+    private renderer = inject(Renderer2);
+
     @ContentChildren(CdkDrag, { descendants: true })
     draggables: QueryList<CdkDrag>;
 
@@ -86,11 +80,9 @@ export class DndDropTargetDirective implements AfterContentInit, OnDestroy {
     }
 
     // canDrop primitive value is used for the host element class binding
-    constructor(
-        private targetDropList: CdkDropList,
-        private renderer: Renderer2,
-        hostElement: ElementRef
-    ) {
+    constructor() {
+        const hostElement = inject(ElementRef);
+
         const mouseEnter$: Observable<unknown> = fromEvent(
             hostElement.nativeElement,
             "mouseenter"
diff --git a/packages/bits/src/lib/docs/copy-text/copy-text.component.ts b/packages/bits/src/lib/docs/copy-text/copy-text.component.ts
index 245a623f5..a6dd9b26c 100644
--- a/packages/bits/src/lib/docs/copy-text/copy-text.component.ts
+++ b/packages/bits/src/lib/docs/copy-text/copy-text.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, Input } from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 
 import { IToastService } from "../../toast/public-api";
 import { ToastService } from "../../toast/toast.service";
@@ -31,13 +31,13 @@ import { ToastService } from "../../toast/toast.service";
     standalone: false,
 })
 export class CopyTextComponent {
+    private toastService = inject<IToastService>(ToastService);
+
     // file to which the copy applies
     @Input()
     public fileContent: string;
     public copyTooltip = $localize`copy snippet to clipboard`;
 
-    constructor(@Inject(ToastService) private toastService: IToastService) {}
-
     public onSnippetCopied(): void {
         this.toastService.info({
             message: $localize`Code snippet copied to clipboard`,
diff --git a/packages/bits/src/lib/docs/example-wrapper/code-sandbox.service.ts b/packages/bits/src/lib/docs/example-wrapper/code-sandbox.service.ts
index 3dae8879a..85bce9904 100644
--- a/packages/bits/src/lib/docs/example-wrapper/code-sandbox.service.ts
+++ b/packages/bits/src/lib/docs/example-wrapper/code-sandbox.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable, Optional } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { compressToBase64 } from "lz-string";
 
 import { createAngularApp } from "./code-sandbox-files";
@@ -31,10 +31,9 @@ import { FileMetadata } from "../services/sources.service";
     providedIn: "root",
 })
 export class CodeSandboxService {
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        @Optional() @Inject(DEMO_PATH_TOKEN) private config: any
-    ) {}
+    private document = inject<Document>(DOCUMENT);
+    private config = inject(DEMO_PATH_TOKEN, { optional: true })!;
+
 
     async open(prefix: string, sources: any): Promise<void> {
         async function mainVersion(packageName: string) {
diff --git a/packages/bits/src/lib/docs/example-wrapper/example-wrapper.component.ts b/packages/bits/src/lib/docs/example-wrapper/example-wrapper.component.ts
index 78f5e3be5..af7649c30 100644
--- a/packages/bits/src/lib/docs/example-wrapper/example-wrapper.component.ts
+++ b/packages/bits/src/lib/docs/example-wrapper/example-wrapper.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import hljs from "highlight.js";
 import javascript from "highlight.js/lib/languages/javascript";
 import json from "highlight.js/lib/languages/json";
@@ -40,6 +40,9 @@ import { FileMetadata, SourcesService } from "../services/sources.service";
     standalone: false,
 })
 export class ExampleWrapperComponent implements OnInit {
+    private sourcesService = inject(SourcesService);
+    private codeSandboxService = inject(CodeSandboxService);
+
     // Prefix of the example component's filenames
     @Input() filenamePrefix: string = "";
 
@@ -51,10 +54,7 @@ export class ExampleWrapperComponent implements OnInit {
 
     public componentSources: FileMetadata[];
 
-    constructor(
-        private sourcesService: SourcesService,
-        private codeSandboxService: CodeSandboxService
-    ) {
+    constructor() {
         hljs.registerLanguage("typescript", typescript);
         hljs.registerLanguage("javascript", javascript);
         hljs.registerLanguage("xml", xml);
diff --git a/packages/bits/src/lib/docs/example-wrapper/plunker-project.service.ts b/packages/bits/src/lib/docs/example-wrapper/plunker-project.service.ts
index 21a4ca525..e9fa9c604 100644
--- a/packages/bits/src/lib/docs/example-wrapper/plunker-project.service.ts
+++ b/packages/bits/src/lib/docs/example-wrapper/plunker-project.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { PlunkerFiles } from "./plunker-files";
 
@@ -28,10 +28,9 @@ import { PlunkerFiles } from "./plunker-files";
     providedIn: "root",
 })
 export class PlunkerProjectService {
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        private plunkerFiles: PlunkerFiles
-    ) {}
+    private document = inject<Document>(DOCUMENT);
+    private plunkerFiles = inject(PlunkerFiles);
+
 
     public open(prefix: string, sources: any, translations?: any): void {
         const form: HTMLFormElement = this.document.createElement("form");
diff --git a/packages/bits/src/lib/docs/services/sources.service.ts b/packages/bits/src/lib/docs/services/sources.service.ts
index 3776081ae..f83c964cb 100644
--- a/packages/bits/src/lib/docs/services/sources.service.ts
+++ b/packages/bits/src/lib/docs/services/sources.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, Injectable, Optional } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { DEMO_PATH_TOKEN } from "../../../constants/path.constants";
 import { LoggerService } from "../../../services/log-service";
@@ -27,12 +27,9 @@ import { CodeSourceFiles } from "../../../types";
 /** @ignore */
 @Injectable()
 export class SourcesService {
-    constructor(
-        private logger: LoggerService,
-        @Optional()
-        @Inject(DEMO_PATH_TOKEN)
-        private config: CodeSourceFiles
-    ) {}
+    private logger = inject(LoggerService);
+    private config = inject<CodeSourceFiles>(DEMO_PATH_TOKEN, { optional: true })!;
+
 
     public async getSourcesByFilenamePrefix(
         filenamePrefix: string
diff --git a/packages/bits/src/lib/docs/srlc-indicator/srlc-indicator.component.ts b/packages/bits/src/lib/docs/srlc-indicator/srlc-indicator.component.ts
index eeb7cfae3..abd997237 100644
--- a/packages/bits/src/lib/docs/srlc-indicator/srlc-indicator.component.ts
+++ b/packages/bits/src/lib/docs/srlc-indicator/srlc-indicator.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { Router, RoutesRecognized } from "@angular/router";
 import defaults from "lodash/defaults";
 import { filter, map } from "rxjs/operators";
@@ -32,7 +32,8 @@ import { ISrlcDetails, SrlcStage } from "./public-api";
     standalone: false,
 })
 export class SrlcIndicatorComponent implements OnInit {
-    constructor(private router: Router) {}
+    private router = inject(Router);
+
 
     public globalSrlc: ISrlcDetails = {
         stage: SrlcStage.preAlpha,
diff --git a/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.spec.ts b/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.spec.ts
index 11960e2cd..9b437a5e9 100644
--- a/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.spec.ts
+++ b/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, NgZone } from "@angular/core";
+import { Component, NgZone, inject } from "@angular/core";
 import {
     ComponentFixture,
     fakeAsync,
@@ -36,7 +36,9 @@ import { SwitchComponent } from "../../switch/switch.component";
     standalone: false,
 })
 class FakeComponent {
-    constructor(private zone: NgZone, private router: Router) {}
+    private zone = inject(NgZone);
+    private router = inject(Router);
+
 
     public navigate(commands: any[]) {
         this.zone.run(async () => this.router.navigate(commands));
diff --git a/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.ts b/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.ts
index 2f1e0d37b..489f1b3d4 100644
--- a/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.ts
+++ b/packages/bits/src/lib/docs/theme-switcher/theme-switcher.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 
 import { ThemeSwitchService } from "../../../services/theme-switch.service";
 
@@ -31,7 +31,8 @@ import { ThemeSwitchService } from "../../../services/theme-switch.service";
     standalone: false,
 })
 export class ThemeSwitcherComponent {
-    constructor(public themeSwitcherService: ThemeSwitchService) {}
+    themeSwitcherService = inject(ThemeSwitchService);
+
 
     onThemeChange(isDarkThemeEnabled: boolean): void {
         this.themeSwitcherService.setDarkTheme(isDarkThemeEnabled);
diff --git a/packages/bits/src/lib/expander/expander.component.ts b/packages/bits/src/lib/expander/expander.component.ts
index 930a86b2d..bc3a5d5fe 100644
--- a/packages/bits/src/lib/expander/expander.component.ts
+++ b/packages/bits/src/lib/expander/expander.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    Output,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { expandV2 } from "../../animations/expand";
 import { KEYBOARD_CODE } from "../../constants/keycode.constants";
@@ -45,6 +35,8 @@ import { KEYBOARD_CODE } from "../../constants/keycode.constants";
     standalone: false,
 })
 export class ExpanderComponent implements AfterContentInit {
+    private cdRef = inject(ChangeDetectorRef);
+
     /**
      * Adds "disabled" attribute to expander
      */
@@ -87,8 +79,6 @@ export class ExpanderComponent implements AfterContentInit {
 
     private actionKeys = [KEYBOARD_CODE.SPACE, KEYBOARD_CODE.ENTER].map(String);
 
-    constructor(private cdRef: ChangeDetectorRef) {}
-
     public ngAfterContentInit(): void {
         this.isCustomHeaderContentEmpty =
             this.customHeaderContent.nativeElement.childNodes.length === 0;
diff --git a/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.ts b/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.ts
index 0e7fd7877..2ef8e077e 100644
--- a/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.ts
+++ b/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.ts
@@ -18,22 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    Renderer2,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
@@ -90,6 +75,12 @@ export class FreetypeQueryBuilderComponent<T extends QueryToken>
         return document.execCommand("insertText", false, text);
     }
 
+    private renderer2 = inject(Renderer2);
+    private formBuilder = inject(FormBuilder);
+    private cd = inject(ChangeDetectorRef);
+    private toastService = inject(ToastService);
+    private utils = inject(FreeTypeQueryUtilsService);
+
     private readonly KEY_ENTER_CODE = "Enter";
     private readonly KEY_ESC_CODE = "Escape";
 
@@ -147,13 +138,7 @@ export class FreetypeQueryBuilderComponent<T extends QueryToken>
     inputHeight = this.BASE_LINE;
     public selectControl: FormControl = new FormControl();
 
-    constructor(
-        private renderer2: Renderer2,
-        private formBuilder: FormBuilder,
-        private cd: ChangeDetectorRef,
-        private toastService: ToastService,
-        private utils: FreeTypeQueryUtilsService
-    ) {
+    constructor() {
         this.formGroup = this.formBuilder.group({
             body: [""],
         });
diff --git a/packages/bits/src/lib/freetype-query-builder/helpers/freetype-query-utils.service.ts b/packages/bits/src/lib/freetype-query-builder/helpers/freetype-query-utils.service.ts
index fd1e8980c..2cd8072bb 100644
--- a/packages/bits/src/lib/freetype-query-builder/helpers/freetype-query-utils.service.ts
+++ b/packages/bits/src/lib/freetype-query-builder/helpers/freetype-query-utils.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { WindowToken } from "./window";
 import { CaretCoordinates } from "../models";
@@ -62,7 +62,9 @@ type OurCSS = CSSStyleDeclaration & { [key: string]: any };
 @Injectable()
 export class FreeTypeQueryUtilsService {
     private window: Window;
-    constructor(@Inject(WindowToken) window: any) {
+    constructor() {
+        const window = inject(WindowToken);
+
         this.window = window as Window;
     }
 
diff --git a/packages/bits/src/lib/freetype-query-builder/text-highlight-overlay/text-highlight-overlay-component.ts b/packages/bits/src/lib/freetype-query-builder/text-highlight-overlay/text-highlight-overlay-component.ts
index d405c68c6..b023a4ab1 100644
--- a/packages/bits/src/lib/freetype-query-builder/text-highlight-overlay/text-highlight-overlay-component.ts
+++ b/packages/bits/src/lib/freetype-query-builder/text-highlight-overlay/text-highlight-overlay-component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    ElementRef,
-    Inject,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges,
-    ViewChild,
-} from "@angular/core";
+import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild, inject } from "@angular/core";
 
 import { WindowToken } from "../helpers/window";
 import {
@@ -78,7 +69,9 @@ export class TextHighlightOverlayComponent<T extends QueryToken>
     }
 
     private window: Window;
-    constructor(@Inject(WindowToken) window: any) {
+    constructor() {
+        const window = inject(WindowToken);
+
         this.window = window as Window;
     }
 
diff --git a/packages/bits/src/lib/icon/icon.component.ts b/packages/bits/src/lib/icon/icon.component.ts
index c17d99859..49fd40f2f 100644
--- a/packages/bits/src/lib/icon/icon.component.ts
+++ b/packages/bits/src/lib/icon/icon.component.ts
@@ -60,7 +60,6 @@ export class IconComponent {
 
     private iconService = inject(IconService);
     private sanitizer = inject(DomSanitizer);
-
     public iconColor = input<string>();
     public brushType = input<string>("filled");
     public iconHoverColor = input<string>();
diff --git a/packages/bits/src/lib/image/image.component.ts b/packages/bits/src/lib/image/image.component.ts
index 3ed901bc4..ad466724a 100644
--- a/packages/bits/src/lib/image/image.component.ts
+++ b/packages/bits/src/lib/image/image.component.ts
@@ -55,6 +55,13 @@ import { UtilService } from "../../services/util.service";
     },
 })
 export class ImageComponent {
+    private logger = inject(LoggerService);
+    private utilService = inject(UtilService);
+    private changeDetector = inject(ChangeDetectorRef);
+    private images = inject<Array<IImagesPresetItem>>(imagesPresetToken);
+    private domSanitizer = inject(DomSanitizer);
+    private el = inject(ElementRef);
+
     /**
      * Image name from nui image preset or external source
      */
@@ -144,13 +151,6 @@ export class ImageComponent {
         })
     );
 
-    private logger = inject(LoggerService);
-    private utilService = inject(UtilService);
-    private changeDetector = inject(ChangeDetectorRef);
-    private images = inject<Array<IImagesPresetItem>>(imagesPresetToken);
-    private domSanitizer = inject(DomSanitizer);
-    private el = inject(ElementRef);
-
     public computedRole = computed(() => this.a11y().role);
     public computedAriaHidden = computed(() => this.a11y().ariaHidden);
     public computedAriaLabel = computed(() => this.a11y().ariaLabel);
diff --git a/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.spec.ts b/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.spec.ts
index c0e7922d8..9081b6808 100644
--- a/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.spec.ts
+++ b/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component, ElementRef } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, inject } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { LayoutResizerComponent } from "./layout-resizer.component";
@@ -33,7 +33,8 @@ import {
     standalone: false,
 })
 class LayoutResizerTestingComponent implements AfterViewInit {
-    constructor(public elRef: ElementRef) {}
+    elRef = inject(ElementRef);
+
     public ngAfterViewInit(): void {
         this.elRef.nativeElement.parentElement = document.createElement("div");
     }
diff --git a/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.ts b/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.ts
index aa916cbce..238cab00a 100644
--- a/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.ts
+++ b/packages/bits/src/lib/layout/layout-resizer/layout-resizer.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Renderer2,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Input, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, ViewChild, inject } from "@angular/core";
 
 import { ResizerDirective } from "../../../common/directives";
 import {
@@ -58,6 +47,13 @@ export class LayoutResizerComponent
     extends ResizerDirective
     implements OnInit, AfterViewInit, OnChanges, OnDestroy
 {
+    private _elRef: ElementRef;
+    private _renderer: Renderer2;
+    private _utilService: UtilService;
+    private _targetElement: ElementRef;
+    private _ngZone: NgZone;
+    private _eventBusService: EventBusService;
+
     @Input() resizeDirection: ResizeDirection;
     @Input() resizeElement: any;
     @Input() resizeUnit: ResizeUnit;
@@ -65,22 +61,22 @@ export class LayoutResizerComponent
     @Input() enableSeparateOffsetSize: boolean;
     @ViewChild("resizerSplit") resizerSplitEl: ElementRef;
 
-    constructor(
-        private _elRef: ElementRef,
-        private _renderer: Renderer2,
-        private _utilService: UtilService,
-        private _targetElement: ElementRef,
-        private _ngZone: NgZone,
-        private _eventBusService: EventBusService
-    ) {
-        super(
-            _elRef,
-            _renderer,
-            _utilService,
-            _targetElement,
-            _ngZone,
-            _eventBusService
-        );
+    constructor() {
+        const _elRef = inject(ElementRef);
+        const _renderer = inject(Renderer2);
+        const _utilService = inject(UtilService);
+        const _targetElement = inject(ElementRef);
+        const _ngZone = inject(NgZone);
+        const _eventBusService = inject(EventBusService);
+
+        super();
+
+        this._elRef = _elRef;
+        this._renderer = _renderer;
+        this._utilService = _utilService;
+        this._targetElement = _targetElement;
+        this._ngZone = _ngZone;
+        this._eventBusService = _eventBusService;
     }
 
     public resizeClass = "nui-layout-resizer";
diff --git a/packages/bits/src/lib/layout/sheet-group/sheet-group.component.ts b/packages/bits/src/lib/layout/sheet-group/sheet-group.component.ts
index 72667e50b..5ea4d2475 100644
--- a/packages/bits/src/lib/layout/sheet-group/sheet-group.component.ts
+++ b/packages/bits/src/lib/layout/sheet-group/sheet-group.component.ts
@@ -18,22 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ComponentFactoryResolver,
-    ComponentRef,
-    ContentChildren,
-    ElementRef,
-    HostBinding,
-    Input,
-    OnDestroy,
-    OnInit,
-    QueryList,
-    Renderer2,
-    ViewChild,
-    ViewContainerRef,
-} from "@angular/core";
+import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, ContentChildren, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, Renderer2, ViewChild, ViewContainerRef, inject } from "@angular/core";
 
 import {
     ResizeDirection,
@@ -58,6 +43,10 @@ interface IElementInfo {
     standalone: false,
 })
 export class SheetGroupComponent implements OnInit, AfterViewInit, OnDestroy {
+    elRef = inject(ElementRef);
+    private renderer = inject(Renderer2);
+    private componentFactoryResolver = inject(ComponentFactoryResolver);
+
     /**
      * Set whether the child elements can be resizable.
      */
@@ -198,12 +187,6 @@ export class SheetGroupComponent implements OnInit, AfterViewInit, OnDestroy {
         });
     }
 
-    constructor(
-        public elRef: ElementRef,
-        private renderer: Renderer2,
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {}
-
     public ngOnInit(): void {
         this.applyJoinedSheetsClass =
             (this.applyJoinedSheetsClass && !this.applySeparateSheetsClass) ||
diff --git a/packages/bits/src/lib/layout/sheet/sheet.component.ts b/packages/bits/src/lib/layout/sheet/sheet.component.ts
index 2577f1989..da322bc08 100644
--- a/packages/bits/src/lib/layout/sheet/sheet.component.ts
+++ b/packages/bits/src/lib/layout/sheet/sheet.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    ElementRef,
-    HostBinding,
-    Input,
-    OnInit,
-} from "@angular/core";
+import { Component, ElementRef, HostBinding, Input, OnInit, inject } from "@angular/core";
 
 import { ResizeDirection } from "../../../common/directives/resizer/public-api";
 import { ILayoutElementDirection } from "../public-api";
@@ -38,6 +32,8 @@ import { ILayoutElementDirection } from "../public-api";
     standalone: false,
 })
 export class SheetComponent implements OnInit {
+    elRef = inject(ElementRef);
+
     @HostBinding("class.sheet-fit-content")
     @Input()
     fitContent: boolean;
@@ -48,8 +44,6 @@ export class SheetComponent implements OnInit {
 
     public resizeDirection: ResizeDirection;
 
-    constructor(public elRef: ElementRef) {}
-
     public ngOnInit(): void {
         this.directionColumn =
             (this.directionColumn && !this.directionRow) ||
diff --git a/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.ts b/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.ts
index 3d815474f..27e8226ea 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    Input,
-    Optional,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { MenuActionType } from "../../public-api";
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
@@ -75,6 +66,8 @@ import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
     standalone: false,
 })
 export class MenuActionComponent extends MenuItemBaseComponent {
+    readonly group: MenuGroupComponent;
+
     /**
      * Adds icon by specified icon name
      */
@@ -84,11 +77,13 @@ export class MenuActionComponent extends MenuItemBaseComponent {
 
     @ViewChild("menuAction") menuItem: ElementRef;
 
-    constructor(
-        @Optional() readonly group: MenuGroupComponent,
-        cd: ChangeDetectorRef
-    ) {
+    constructor() {
+        const group = inject(MenuGroupComponent, { optional: true })!;
+        const cd = inject(ChangeDetectorRef);
+
         super(group, cd);
+        this.group = group;
+
 
         this.disabled = false;
     }
diff --git a/packages/bits/src/lib/menu/menu-item/menu-item/menu-item.component.ts b/packages/bits/src/lib/menu/menu-item/menu-item/menu-item.component.ts
index 08423c9f1..cf7f6d667 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-item/menu-item.component.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-item/menu-item.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    Input,
-    Optional,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { MenuItemBaseComponent } from "./menu-item-base";
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
@@ -66,13 +57,17 @@ import { MenuGroupComponent } from "../menu-group/menu-group.component";
     standalone: false,
 })
 export class MenuItemComponent extends MenuItemBaseComponent {
-    @ViewChild("menuItemDefault", { static: true }) menuItem: ElementRef;
+    readonly group: MenuGroupComponent;
+
+    @ViewChild("menuItemDefault") menuItem!: ElementRef;
+
+    constructor() {
+        const group = inject(MenuGroupComponent, { optional: true })!;
+        const cd = inject(ChangeDetectorRef);
 
-    constructor(
-        @Optional() readonly group: MenuGroupComponent,
-        cd: ChangeDetectorRef
-    ) {
         super(group, cd);
+        this.group = group;
+
 
         this.disabled = false;
     }
diff --git a/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.ts b/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.ts
index 8ad4a8b20..6d4dca6cb 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    Input,
-    Optional,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
 import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
@@ -67,6 +58,8 @@ import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
     standalone: false,
 })
 export class MenuLinkComponent extends MenuItemBaseComponent {
+    readonly group: MenuGroupComponent;
+
     /**
      * Sets inner "href" attribute of anchor tag
      */
@@ -81,11 +74,13 @@ export class MenuLinkComponent extends MenuItemBaseComponent {
     @Input() public icon: string;
     @ViewChild("menuLink") menuItem: ElementRef;
 
-    constructor(
-        @Optional() readonly group: MenuGroupComponent,
-        cd: ChangeDetectorRef
-    ) {
+    constructor() {
+        const group = inject(MenuGroupComponent, { optional: true })!;
+        const cd = inject(ChangeDetectorRef);
+
         super(group, cd);
+        this.group = group;
+
 
         this.disabled = false;
     }
diff --git a/packages/bits/src/lib/menu/menu-item/menu-option/menu-option.component.ts b/packages/bits/src/lib/menu/menu-item/menu-option/menu-option.component.ts
index 6b3aad4ec..6d855ac12 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-option/menu-option.component.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-option/menu-option.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostBinding,
-    HostListener,
-    Input,
-    Optional,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, HostBinding, HostListener, Input, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
 import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
@@ -71,6 +60,8 @@ import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
     standalone: false,
 })
 export class MenuOptionComponent extends MenuItemBaseComponent {
+    readonly group: MenuGroupComponent;
+
     /**
      * Sets inner input "name" attribute
      */
@@ -84,7 +75,7 @@ export class MenuOptionComponent extends MenuItemBaseComponent {
      */
     @Input() public checked: boolean;
 
-    @ViewChild("menuOption") menuItem: ElementRef;
+    @ViewChild("menuOption") menuItem!: ElementRef;
 
     @HostListener("click", ["$event"])
     public stopPropagationOfClick(event: MouseEvent): void {
@@ -106,11 +97,13 @@ export class MenuOptionComponent extends MenuItemBaseComponent {
         return `${!!this.checked}`;
     }
 
-    constructor(
-        @Optional() readonly group: MenuGroupComponent,
-        cd: ChangeDetectorRef
-    ) {
+    constructor() {
+        const group = inject(MenuGroupComponent, { optional: true })!;
+        const cd = inject(ChangeDetectorRef);
+
         super(group, cd);
+        this.group = group;
+
 
         this.name = "";
         this.value = "";
diff --git a/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.ts b/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.ts
index 4c69ec09e..81453f9e0 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostBinding,
-    HostListener,
-    Input,
-    Optional,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, HostBinding, HostListener, Input, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
 import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
@@ -75,6 +64,8 @@ import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
     standalone: false,
 })
 export class MenuSwitchComponent extends MenuItemBaseComponent {
+    readonly group: MenuGroupComponent;
+
     /**
      * Is needed to predefine item state, sets nui-checkbox [checked] property
      */
@@ -98,11 +89,13 @@ export class MenuSwitchComponent extends MenuItemBaseComponent {
         return this.checked;
     }
 
-    constructor(
-        @Optional() readonly group: MenuGroupComponent,
-        cd: ChangeDetectorRef
-    ) {
+    constructor() {
+        const group = inject(MenuGroupComponent, { optional: true })!;
+        const cd = inject(ChangeDetectorRef);
+
         super(group, cd);
+        this.group = group;
+
         this.checked = false;
 
         // Is needed to predefine item state, sets nui-switch [disabled] property
diff --git a/packages/bits/src/lib/menu/menu-key-control.service.ts b/packages/bits/src/lib/menu/menu-key-control.service.ts
index 57ba9f712..f8e92b850 100644
--- a/packages/bits/src/lib/menu/menu-key-control.service.ts
+++ b/packages/bits/src/lib/menu/menu-key-control.service.ts
@@ -27,6 +27,7 @@ import {
     QueryList,
     Renderer2,
     Inject,
+    inject
 } from "@angular/core";
 import isNull from "lodash/isNull";
 import { Subject, Subscription } from "rxjs";
@@ -42,6 +43,9 @@ import { KEYBOARD_CODE } from "../../constants/keycode.constants";
 
 @Injectable()
 export class MenuKeyControlService implements OnDestroy {
+    private live = inject(LiveAnnouncer);
+    private renderer = inject(Renderer2);
+
     public popup: PopupComponent;
     public menuGroups: QueryList<MenuGroupComponent>;
     public menuItems: QueryList<MenuItemBaseComponent>;
@@ -64,8 +68,6 @@ export class MenuKeyControlService implements OnDestroy {
     }
 
     constructor(
-        private live: LiveAnnouncer,
-        private renderer: Renderer2,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
diff --git a/packages/bits/src/lib/menu/menu/menu.component.ts b/packages/bits/src/lib/menu/menu/menu.component.ts
index 49fefee30..0154a7482 100644
--- a/packages/bits/src/lib/menu/menu/menu.component.ts
+++ b/packages/bits/src/lib/menu/menu/menu.component.ts
@@ -19,22 +19,7 @@
 //  THE SOFTWARE.
 
 import { FocusMonitor, FocusOrigin } from "@angular/cdk/a11y";
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    QueryList,
-    Renderer2,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 import _uniqueId from "lodash/uniqueId";
 import { Subject, Subscription } from "rxjs";
@@ -65,6 +50,10 @@ import { IMenuGroup } from "../public-api";
     standalone: false,
 })
 export class MenuComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private keyControlService = inject(MenuKeyControlService);
+    private renderer = inject(Renderer2);
+    private focusMonitor = inject(FocusMonitor);
+
     public iconSize = "";
     public iconColor = "";
     @Input() public widthOfPopup: string;
@@ -124,11 +113,6 @@ export class MenuComponent implements AfterViewInit, OnChanges, OnDestroy {
 
     private menuKeyControlListeners: Function[] = [];
     private focusMonitorSubscription: Subscription;
-    constructor(
-        private keyControlService: MenuKeyControlService,
-        private renderer: Renderer2,
-        private focusMonitor: FocusMonitor
-    ) {}
 
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes["size"]) {
diff --git a/packages/bits/src/lib/message/message.component.ts b/packages/bits/src/lib/message/message.component.ts
index c4ef2cb9d..08a594a3e 100644
--- a/packages/bits/src/lib/message/message.component.ts
+++ b/packages/bits/src/lib/message/message.component.ts
@@ -26,18 +26,7 @@ import {
     transition,
     trigger,
 } from "@angular/animations";
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    Renderer2,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation, inject } from "@angular/core";
 import { Subject, Subscription } from "rxjs";
 
 // <example-url>./../examples/index.html#/message</example-url>
@@ -70,6 +59,9 @@ export class MessageComponent implements OnInit, OnDestroy {
     };
     public static UNKNOWN_ICON = "severity_unknown";
 
+    private element = inject(ElementRef);
+    private renderer = inject(Renderer2);
+
     @HostBinding("class.d-none") isHidden: boolean = false;
 
     @Input() public type: null | "ok" | "info" | "critical" | "warning";
@@ -88,8 +80,6 @@ export class MessageComponent implements OnInit, OnDestroy {
         return this.type === "ok" || this.type === "info" ? "status" : "alert";
     }
 
-    constructor(private element: ElementRef, private renderer: Renderer2) {}
-
     public ngOnInit(): void {
         if (this.manualControl) {
             this.dismissSubscription = this.manualControl.subscribe(
diff --git a/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts b/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts
index 5a871dd50..0d92c265e 100644
--- a/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts
+++ b/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts
@@ -19,14 +19,7 @@
 //  THE SOFTWARE.
 
 import { Overlay } from "@angular/cdk/overlay";
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    Input,
-    NO_ERRORS_SCHEMA,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Input, NO_ERRORS_SCHEMA, ViewChild, inject } from "@angular/core";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { first } from "rxjs/operators";
 
@@ -47,14 +40,14 @@ import { NuiOverlayModule } from "../overlay.module";
     standalone: false,
 })
 class PopupWrapperComponent implements AfterViewInit {
+    elRef = inject(ElementRef);
+
     public items = Array.from({ length: 50 }).map((_, i) => `Item ${i}`);
     public selectedOptions = this.items[0];
     @Input() destroyed: boolean = false;
 
     @ViewChild(OverlayComponent) dropdown: OverlayComponent;
 
-    constructor(public elRef: ElementRef) {}
-
     public ngAfterViewInit(): void {}
 }
 
diff --git a/packages/bits/src/lib/overlay/overlay-component/overlay.component.ts b/packages/bits/src/lib/overlay/overlay-component/overlay.component.ts
index 77832d1a8..29ea0cf1d 100644
--- a/packages/bits/src/lib/overlay/overlay-component/overlay.component.ts
+++ b/packages/bits/src/lib/overlay/overlay-component/overlay.component.ts
@@ -26,20 +26,7 @@ import {
     OverlaySizeConfig,
 } from "@angular/cdk/overlay";
 import { CdkPortal } from "@angular/cdk/portal";
-import {
-    AfterContentChecked,
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentChecked, AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import set from "lodash/set";
 import some from "lodash/some";
 import { Observable, Subject, Subscription } from "rxjs";
@@ -91,6 +78,11 @@ export class OverlayComponent
         AfterViewInit,
         OnChanges
 {
+    overlayPositionService = inject(OverlayPositionService);
+    protected overlayService = inject(OverlayService);
+    protected cdkOverlay = inject(Overlay);
+    private eventBusService = inject(EventBusService);
+
     /** Sets overlay config in accordance with [Material CDK]{@link https://material.angular.io/cdk/overlay/api#OverlayConfig} */
     @Input() public overlayConfig: OverlayConfig;
 
@@ -129,12 +121,7 @@ export class OverlayComponent
 
     private positionStrategySubscription: Subscription;
 
-    constructor(
-        public overlayPositionService: OverlayPositionService,
-        protected overlayService: OverlayService,
-        protected cdkOverlay: Overlay,
-        private eventBusService: EventBusService
-    ) {
+    constructor() {
         this.show$ = this.overlayService.show$;
         this.hide$ = this.overlayService.hide$;
     }
diff --git a/packages/bits/src/lib/overlay/overlay-container.service.ts b/packages/bits/src/lib/overlay/overlay-container.service.ts
index 1ff5b05ee..27601b698 100644
--- a/packages/bits/src/lib/overlay/overlay-container.service.ts
+++ b/packages/bits/src/lib/overlay/overlay-container.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _isNull from "lodash/isNull";
 
 import { OVERLAY_CONTAINER_CLASS, OVERLAY_DEFAULT_PRIORITY } from "./types";
@@ -29,7 +29,8 @@ const PRIORITY_ATTRIBUTE = "priority";
 /** @dynamic */
 @Injectable({ providedIn: "root" })
 export class OverlayContainerService {
-    constructor(@Inject(DOCUMENT) private document: Document) {}
+    private document = inject<Document>(DOCUMENT);
+
 
     /**
      * Create a shared container to be used by all overlays if needed
diff --git a/packages/bits/src/lib/overlay/overlay-custom-container.ts b/packages/bits/src/lib/overlay/overlay-custom-container.ts
index 8f4cfe864..e7c637fb3 100644
--- a/packages/bits/src/lib/overlay/overlay-custom-container.ts
+++ b/packages/bits/src/lib/overlay/overlay-custom-container.ts
@@ -26,7 +26,7 @@
 import { OverlayContainer } from "@angular/cdk/overlay";
 import { Platform } from "@angular/cdk/platform";
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable, OnDestroy } from "@angular/core";
+import { Injectable, OnDestroy, inject } from "@angular/core";
 
 import { OverlayContainerService } from "./overlay-container.service";
 
@@ -36,11 +36,12 @@ export class OverlayCustomContainer
     extends OverlayContainer
     implements OnDestroy
 {
-    constructor(
-        @Inject(DOCUMENT) document: Document,
-        platform: Platform,
-        private overlayService: OverlayContainerService
-    ) {
+    private overlayService = inject(OverlayContainerService);
+
+    constructor() {
+        const document = inject<Document>(DOCUMENT);
+        const platform = inject(Platform);
+
         super(document, platform);
     }
 
diff --git a/packages/bits/src/lib/overlay/overlay-item/overlay-item.component.ts b/packages/bits/src/lib/overlay/overlay-item/overlay-item.component.ts
index 42dde40d6..99c7fb837 100644
--- a/packages/bits/src/lib/overlay/overlay-item/overlay-item.component.ts
+++ b/packages/bits/src/lib/overlay/overlay-item/overlay-item.component.ts
@@ -19,14 +19,7 @@
 //  THE SOFTWARE.
 
 import { Highlightable } from "@angular/cdk/a11y";
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostBinding,
-    Input,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, HostBinding, Input, inject } from "@angular/core";
 
 import { OVERLAY_ITEM } from "../constants";
 import { IOption } from "../types";
@@ -48,6 +41,8 @@ import { IOption } from "../types";
     standalone: false,
 })
 export class OverlayItemComponent implements Highlightable, IOption {
+    element = inject<ElementRef<HTMLElement>>(ElementRef);
+
     /** Whether the Item is active */
     @HostBinding("class.active")
     public active: boolean = false;
@@ -57,8 +52,6 @@ export class OverlayItemComponent implements Highlightable, IOption {
     @HostBinding("class.disabled")
     public isDisabled: boolean = false;
 
-    constructor(public element: ElementRef<HTMLElement>) {}
-
     /** Applies active class */
     public setActiveStyles(): void {
         this.active = true;
diff --git a/packages/bits/src/lib/overlay/overlay.service.ts b/packages/bits/src/lib/overlay/overlay.service.ts
index 37b3568a2..e03d09b60 100644
--- a/packages/bits/src/lib/overlay/overlay.service.ts
+++ b/packages/bits/src/lib/overlay/overlay.service.ts
@@ -27,7 +27,7 @@ import {
 } from "@angular/cdk/overlay";
 import { Portal } from "@angular/cdk/portal";
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable, OnDestroy, Optional } from "@angular/core";
+import { Injectable, OnDestroy, inject } from "@angular/core";
 import { Subject } from "rxjs";
 
 import { OVERLAY_CONTAINER } from "./constants";
@@ -40,6 +40,11 @@ import { OverlayContainerType, OVERLAY_PANEL_CLASS } from "./types";
  */
 @Injectable()
 export class OverlayService implements OnDestroy {
+    protected overlay = inject(Overlay);
+    protected overlayContainer = inject(OverlayContainer);
+    protected document = inject<Document>(DOCUMENT);
+    private customContainerInjection = inject<OverlayContainerType>(OVERLAY_CONTAINER, { optional: true });
+
     // inputs
     public contentTemplate: Portal<any>; // double check the type
     public customContainer: OverlayContainerType;
@@ -61,15 +66,6 @@ export class OverlayService implements OnDestroy {
     private _overlayConfig: OverlayConfig;
     private overlayRef: OverlayRef;
 
-    constructor(
-        protected overlay: Overlay,
-        protected overlayContainer: OverlayContainer,
-        @Inject(DOCUMENT) protected document: Document,
-        @Optional()
-        @Inject(OVERLAY_CONTAINER)
-        private customContainerInjection: OverlayContainerType
-    ) {}
-
     public createOverlay(): void {
         this.appendToContainer();
         this.overlayRef = this.overlay.create(this.overlayConfig);
diff --git a/packages/bits/src/lib/paginator/paginator.component.ts b/packages/bits/src/lib/paginator/paginator.component.ts
index 331cd406a..51fe863b0 100644
--- a/packages/bits/src/lib/paginator/paginator.component.ts
+++ b/packages/bits/src/lib/paginator/paginator.component.ts
@@ -19,20 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import _chunk from "lodash/chunk";
 import _clone from "lodash/clone";
 import _get from "lodash/get";
@@ -75,6 +62,10 @@ const containerPaddingsWithScroll = 37;
 export class PaginatorComponent
     implements OnInit, OnChanges, OnDestroy, IFilterPub
 {
+    private logger = inject(LoggerService);
+    private popupContainer = inject(PopupContainerService);
+    private cd = inject(ChangeDetectorRef);
+
     @Input() public itemsList: Array<IPaginatorItem> = [];
     /**
      * Current page number
@@ -159,11 +150,7 @@ export class PaginatorComponent
     private mainRangeStart: number;
     private mainRangeEnd: number;
 
-    public constructor(
-        private logger: LoggerService,
-        private popupContainer: PopupContainerService,
-        private cd: ChangeDetectorRef
-    ) {
+    public constructor() {
         this.popupContainer.parent = this;
     }
 
diff --git a/packages/bits/src/lib/panel/panel.component.ts b/packages/bits/src/lib/panel/panel.component.ts
index 35756fdc4..498adbab2 100644
--- a/packages/bits/src/lib/panel/panel.component.ts
+++ b/packages/bits/src/lib/panel/panel.component.ts
@@ -25,23 +25,7 @@ import {
     AnimationPlayer,
     style,
 } from "@angular/animations";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    Renderer2,
-    SimpleChanges,
-    ViewChild,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from "@angular/core";
 import isUndefined from "lodash/isUndefined";
 import { Subject, Subscription } from "rxjs";
 import { debounceTime, distinctUntilChanged, filter } from "rxjs/operators";
@@ -113,6 +97,10 @@ export class PanelComponent
         },
     };
 
+    private renderer = inject(Renderer2);
+    private builder = inject(AnimationBuilder);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     /**
      * Use this attribute to set the mode of the panel, by default is set to 'static',
      * collapsible mode allows panel to be opened or collapsed, 'hoverable' mode make panel displayed with the hover,
@@ -225,12 +213,6 @@ export class PanelComponent
     private _collapseAnimationFactory?: AnimationFactory;
     private lastAnimationPlayer?: AnimationPlayer;
 
-    constructor(
-        private renderer: Renderer2,
-        private builder: AnimationBuilder,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.defineSizes();
         this.defineState();
diff --git a/packages/bits/src/lib/popover/popover-modal.component.ts b/packages/bits/src/lib/popover/popover-modal.component.ts
index 1682f475a..9f42d5e16 100644
--- a/packages/bits/src/lib/popover/popover-modal.component.ts
+++ b/packages/bits/src/lib/popover/popover-modal.component.ts
@@ -19,18 +19,7 @@
 //  THE SOFTWARE.
 
 import { AnimationEvent } from "@angular/animations";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    HostListener,
-    Input,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit, TemplateRef, inject } from "@angular/core";
 import _isBoolean from "lodash/isBoolean";
 import { Subject, Subscription } from "rxjs";
 import { take } from "rxjs/operators";
@@ -59,6 +48,10 @@ export type PopoverModalEvents =
     standalone: false,
 })
 export class PopoverModalComponent implements AfterViewInit, OnInit, OnDestroy {
+    elRef = inject(ElementRef);
+    private zone = inject(NgZone);
+    private cdRef = inject(ChangeDetectorRef);
+
     /**
      * Is backdrop used
      */
@@ -117,12 +110,6 @@ export class PopoverModalComponent implements AfterViewInit, OnInit, OnDestroy {
         this.popoverModalEventSubject.next("mouse-leave");
     }
 
-    constructor(
-        public elRef: ElementRef,
-        private zone: NgZone,
-        private cdRef: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         const displayChangeSubscription = this.displayChange.subscribe(
             (show: boolean) => {
diff --git a/packages/bits/src/lib/popover/popover-modal.service.ts b/packages/bits/src/lib/popover/popover-modal.service.ts
index 4e87f3651..3babf05fe 100644
--- a/packages/bits/src/lib/popover/popover-modal.service.ts
+++ b/packages/bits/src/lib/popover/popover-modal.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _isNil from "lodash/isNil";
 
 import { PopoverPlacement } from "./public-api";
@@ -66,11 +66,10 @@ export interface IPopoverPosition {
  */
 @Injectable()
 export class PopoverModalService {
-    constructor(
-        private positionService: PositionService,
-        @Inject(DOCUMENT) private document: Document,
-        private edgeDetector: EdgeDetectionService
-    ) {}
+    private positionService = inject(PositionService);
+    private document = inject<Document>(DOCUMENT);
+    private edgeDetector = inject(EdgeDetectionService);
+
 
     public setPosition(
         popoverModal: HTMLElement,
diff --git a/packages/bits/src/lib/popover/popover.component.ts b/packages/bits/src/lib/popover/popover.component.ts
index 9c066b3b2..1a0563b01 100644
--- a/packages/bits/src/lib/popover/popover.component.ts
+++ b/packages/bits/src/lib/popover/popover.component.ts
@@ -24,27 +24,7 @@ import {
     Overlay,
     OverlayConfig,
 } from "@angular/cdk/overlay";
-import {
-    ChangeDetectorRef,
-    Component,
-    ComponentFactoryResolver,
-    ComponentRef,
-    ContentChild,
-    ElementRef,
-    EmbeddedViewRef,
-    EventEmitter,
-    HostListener,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    SimpleChanges,
-    TemplateRef,
-    ViewChild,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ComponentFactoryResolver, ComponentRef, ContentChild, ElementRef, EmbeddedViewRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from "@angular/core";
 import _includes from "lodash/includes";
 import _isNil from "lodash/isNil";
 import _isUndefined from "lodash/isUndefined";
@@ -97,6 +77,14 @@ export class PopoverComponent implements OnDestroy, OnInit, OnChanges {
             .rootNodes[0] as HTMLElement;
     }
 
+    public host = inject(ElementRef);
+    private componentFactoryResolver = inject(ComponentFactoryResolver);
+    private viewContainerRef = inject(ViewContainerRef);
+    private overlay = inject(Overlay);
+    private cdRef = inject(ChangeDetectorRef);
+    private eventBusService = inject(EventBusService);
+    private popoverPositionService = inject(PopoverPositionService);
+
     public displayed: boolean;
     /**
      * Popover listens to this stream and closes when the stream emits
@@ -247,16 +235,6 @@ export class PopoverComponent implements OnDestroy, OnInit, OnChanges {
         }
     }
 
-    constructor(
-        public host: ElementRef,
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private viewContainerRef: ViewContainerRef,
-        private overlay: Overlay,
-        private cdRef: ChangeDetectorRef,
-        private eventBusService: EventBusService,
-        private popoverPositionService: PopoverPositionService
-    ) {}
-
     public ngOnInit(): void {
         if (this.container) {
             this.containerElementRef = new ElementRef(this.container);
diff --git a/packages/bits/src/lib/popup-adapter/popup-adapter.component.ts b/packages/bits/src/lib/popup-adapter/popup-adapter.component.ts
index c6e46dbf1..6cd85a8fa 100644
--- a/packages/bits/src/lib/popup-adapter/popup-adapter.component.ts
+++ b/packages/bits/src/lib/popup-adapter/popup-adapter.component.ts
@@ -24,24 +24,7 @@ import {
     OverlayConfig,
 } from "@angular/cdk/overlay";
 import { DOCUMENT } from "@angular/common";
-import {
-    AfterContentInit,
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChild,
-    ElementRef,
-    EventEmitter,
-    Inject,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -74,6 +57,12 @@ const ADAPTER_OVERLAY_CONFIG: OverlayConfig = {
 export class PopupComponent
     implements AfterContentInit, AfterViewInit, OnChanges, OnDestroy
 {
+    private overlay = inject(Overlay);
+    private cdRef = inject(ChangeDetectorRef);
+    private eventBusService = inject(EventBusService);
+    private host = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+
     @ContentChild(PopupToggleDirective)
     public popupToggle: PopupToggleDirective;
 
@@ -137,14 +126,6 @@ export class PopupComponent
     private readonly destroy$ = new Subject<void>();
     private lastEventType: string;
 
-    constructor(
-        private overlay: Overlay,
-        private cdRef: ChangeDetectorRef,
-        private eventBusService: EventBusService,
-        private host: ElementRef,
-        @Inject(DOCUMENT) private document: Document
-    ) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes.appendToBody) {
             if (changes.appendToBody?.currentValue === false) {
diff --git a/packages/bits/src/lib/popup/popup-container.component.ts b/packages/bits/src/lib/popup/popup-container.component.ts
index fe88fe4ee..ec0efdd97 100644
--- a/packages/bits/src/lib/popup/popup-container.component.ts
+++ b/packages/bits/src/lib/popup/popup-container.component.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    NgZone,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, ElementRef, NgZone, ViewEncapsulation, inject } from "@angular/core";
 import { take } from "rxjs/operators";
 
 import { EdgeDetectionService } from "../../services/edge-detection.service";
@@ -49,17 +43,15 @@ import { PositionService } from "../../services/position.service";
     standalone: false,
 })
 export class PopupContainerComponent implements AfterViewInit {
+    private elRef = inject(ElementRef);
+    private zone = inject(NgZone);
+    private positionService = inject(PositionService);
+    private edgeDetector = inject(EdgeDetectionService);
+
     public hostElement: HTMLElement;
     public top: number;
     public left: number;
 
-    constructor(
-        private elRef: ElementRef,
-        private zone: NgZone,
-        private positionService: PositionService,
-        private edgeDetector: EdgeDetectionService
-    ) {}
-
     public ngAfterViewInit(): void {
         const position = this.setPosition(
             this.elRef.nativeElement,
diff --git a/packages/bits/src/lib/popup/popup-toggle.directive.ts b/packages/bits/src/lib/popup/popup-toggle.directive.ts
index eadfecc09..8dfbbdadf 100644
--- a/packages/bits/src/lib/popup/popup-toggle.directive.ts
+++ b/packages/bits/src/lib/popup/popup-toggle.directive.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    HostListener,
-    Input,
-    Output,
-} from "@angular/core";
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, inject } from "@angular/core";
 
 /** @ignore */
 @Directive({
@@ -33,6 +26,8 @@ import {
     standalone: false,
 })
 export class PopupToggleDirective {
+    host = inject(ElementRef);
+
     /** sets disable state and which prevents emitting toggle */
     @Input() isDisabled: boolean;
     /** sets disable state and which prevents emitting toggle (for using it on textbox component) */
@@ -45,7 +40,6 @@ export class PopupToggleDirective {
      */
     @Input() toggleOnKey: boolean = true;
 
-    constructor(public host: ElementRef) {}
 
     @HostListener("click", ["$event"])
     public handleElementFocus(event: Event): void {
diff --git a/packages/bits/src/lib/popup/popup.component.ts b/packages/bits/src/lib/popup/popup.component.ts
index eafa1550e..eee6ec842 100644
--- a/packages/bits/src/lib/popup/popup.component.ts
+++ b/packages/bits/src/lib/popup/popup.component.ts
@@ -18,26 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    ApplicationRef,
-    ChangeDetectorRef,
-    Component,
-    ComponentFactoryResolver,
-    ComponentRef,
-    ContentChild,
-    ElementRef,
-    EmbeddedViewRef,
-    EventEmitter,
-    Injector,
-    Input,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Output,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, ApplicationRef, ChangeDetectorRef, Component, ComponentFactoryResolver, ComponentRef, ContentChild, ElementRef, EmbeddedViewRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import _isUndefined from "lodash/isUndefined";
 import { filter, Subject, Subscription } from "rxjs";
 
@@ -110,6 +91,16 @@ const isMouseEvent = (event: Event): event is MouseEvent =>
 export class PopupDeprecatedComponent
     implements AfterContentInit, OnDestroy, OnInit
 {
+    private elementRef = inject(ElementRef);
+    private edgeDetector = inject(EdgeDetectionService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+    private eventBusService = inject(EventBusService);
+    private componentFactoryResolver = inject(ComponentFactoryResolver);
+    private injector = inject(Injector);
+    private appRef = inject(ApplicationRef);
+    private logger = inject(LoggerService);
+    private popupContainer = inject(PopupContainerService, { optional: true });
+
     @Input() width: string;
     /**
      * If additional styles should be applied to popup
@@ -172,17 +163,7 @@ export class PopupDeprecatedComponent
      */
     public visible = false;
 
-    constructor(
-        private elementRef: ElementRef,
-        private edgeDetector: EdgeDetectionService,
-        private changeDetectorRef: ChangeDetectorRef,
-        private eventBusService: EventBusService,
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private injector: Injector,
-        private appRef: ApplicationRef,
-        private logger: LoggerService,
-        @Optional() private popupContainer: PopupContainerService
-    ) {
+    constructor() {
         this.logger.warn(
             "<nui-popup-deprecated> is deprecated as of Nova v11. Please use <nui-popup> instead."
         );
diff --git a/packages/bits/src/lib/radio/radio-group.component.ts b/packages/bits/src/lib/radio/radio-group.component.ts
index deb87eb58..89c0a0fc6 100644
--- a/packages/bits/src/lib/radio/radio-group.component.ts
+++ b/packages/bits/src/lib/radio/radio-group.component.ts
@@ -18,26 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    ChangeDetectorRef,
-    Component,
-    ContentChildren,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    Input,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Output,
-    QueryList,
-    Renderer2,
-    TemplateRef,
-    ViewChild,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output, QueryList, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import _isNil from "lodash/isNil";
 import _isUndefined from "lodash/isUndefined";
@@ -73,6 +54,8 @@ import { NuiFormFieldControl } from "../form-field/public-api";
 export class RadioGroupComponent
     implements AfterContentInit, OnDestroy, ControlValueAccessor
 {
+    private renderer = inject(Renderer2);
+
     /**
      * Input to set aria label text
      */
@@ -115,7 +98,6 @@ export class RadioGroupComponent
     private _value: any = null;
     private selectedRadio: RadioComponent | null = null;
     private subscriptions = new Array<Subscription>();
-    constructor(private renderer: Renderer2) {}
 
     private registerChild(child: RadioComponent): void {
         this.renderer.setAttribute(
@@ -226,6 +208,9 @@ export class RadioGroupComponent
     standalone: false,
 })
 export class RadioComponent implements OnInit, OnDestroy {
+    private changeDetector = inject(ChangeDetectorRef);
+    private eventBusService = inject(EventBusService);
+
     /**
      * Sets the radio instance value
      */
@@ -284,11 +269,9 @@ export class RadioComponent implements OnInit, OnDestroy {
     @ContentChildren("[nui-radio-hint]")
     protected contentHints: QueryList<TemplateRef<any>>;
 
-    constructor(
-        @Optional() radioGroup: RadioGroupComponent,
-        private changeDetector: ChangeDetectorRef,
-        private eventBusService: EventBusService
-    ) {
+    constructor() {
+        const radioGroup = inject(RadioGroupComponent, { optional: true });
+
         this.radioGroup = radioGroup;
     }
 
diff --git a/packages/bits/src/lib/repeat/repeat.component.ts b/packages/bits/src/lib/repeat/repeat.component.ts
index c880f571c..8b5463ed3 100644
--- a/packages/bits/src/lib/repeat/repeat.component.ts
+++ b/packages/bits/src/lib/repeat/repeat.component.ts
@@ -28,27 +28,7 @@ import {
     transferArrayItem,
 } from "@angular/cdk/drag-drop";
 import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    DoCheck,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    IterableDiffer,
-    IterableDiffers,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    TemplateRef,
-    ViewChild,
-    ViewChildren,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ViewEncapsulation, inject } from "@angular/core";
 import _isEqual from "lodash/isEqual";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
@@ -100,6 +80,12 @@ interface IDndItemDropped<T = unknown> {
 export class RepeatComponent<T extends IRepeatItem = unknown>
     implements OnInit, OnDestroy, AfterViewInit, DoCheck, IFilterPub
 {
+    changeDetector = inject(ChangeDetectorRef);
+    logger = inject(LoggerService);
+    private iterableDiffers = inject(IterableDiffers);
+    dragDropService = inject(DragDrop);
+    private elRef = inject(ElementRef);
+
     /**
      * Turns on/off dragging functionality
      */
@@ -312,14 +298,6 @@ export class RepeatComponent<T extends IRepeatItem = unknown>
         return this.isModeMulti() || null;
     }
 
-    constructor(
-        public changeDetector: ChangeDetectorRef,
-        public logger: LoggerService,
-        private iterableDiffers: IterableDiffers,
-        public dragDropService: DragDrop,
-        private elRef: ElementRef
-    ) {}
-
     public ngOnInit(): void {
         this.intersectionObserver = new IntersectionObserver(
             this.intersectionObserverCallback
diff --git a/packages/bits/src/lib/risk-score/risk-score.component.ts b/packages/bits/src/lib/risk-score/risk-score.component.ts
index ecede8669..e3c2a2a2d 100644
--- a/packages/bits/src/lib/risk-score/risk-score.component.ts
+++ b/packages/bits/src/lib/risk-score/risk-score.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnDestroy, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 
 /**
@@ -48,6 +37,9 @@ import { BehaviorSubject } from "rxjs";
 
 // <example-url>./../examples/index.html#/risk-score</example-url>
 export class RiskScoreComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private changeDetectorRef = inject(ChangeDetectorRef);
+    private ngZone = inject(NgZone);
+
     @ViewChild("colorLine") private colorLine!: ElementRef;
 
     @Input()
@@ -67,10 +59,7 @@ export class RiskScoreComponent implements AfterViewInit, OnChanges, OnDestroy {
     private resizeObserver: ResizeObserver;
     private colorLineWidth$: BehaviorSubject<number>;
 
-    constructor(
-        private changeDetectorRef: ChangeDetectorRef,
-        private ngZone: NgZone
-    ) {
+    constructor() {
         this.colorLineWidth$ = new BehaviorSubject<number>(0);
         this.resizeObserver = new ResizeObserver(entries =>
             this.colorLineWidth$.next(entries[0].contentRect.width)
diff --git a/packages/bits/src/lib/select-v2/combobox-v2-option-highlight/combobox-v2-option-highlight.directive.ts b/packages/bits/src/lib/select-v2/combobox-v2-option-highlight/combobox-v2-option-highlight.directive.ts
index f49d09dc2..e2cb5310d 100644
--- a/packages/bits/src/lib/select-v2/combobox-v2-option-highlight/combobox-v2-option-highlight.directive.ts
+++ b/packages/bits/src/lib/select-v2/combobox-v2-option-highlight/combobox-v2-option-highlight.directive.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Directive,
-    ElementRef,
-    Inject,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    SimpleChanges,
-} from "@angular/core";
+import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from "@angular/core";
 import escape from "lodash/escape";
 import isUndefined from "lodash/isUndefined";
 import { Subject } from "rxjs";
@@ -50,18 +41,15 @@ import { InputValueTypes } from "../types";
 export class ComboboxV2OptionHighlightDirective
     implements OnChanges, OnInit, OnDestroy
 {
+    private el = inject<ElementRef<HTMLElement>>(ElementRef);
+    private combobox = inject<ComboboxV2Component>(NUI_SELECT_V2_OPTION_PARENT_COMPONENT);
+    private highlightPipe = inject(HighlightPipe);
+
     /** Part of the text to be highlighted */
     @Input("nuiComboboxV2OptionHighlight") public value: string;
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        private el: ElementRef<HTMLElement>,
-        @Inject(NUI_SELECT_V2_OPTION_PARENT_COMPONENT)
-        private combobox: ComboboxV2Component,
-        private highlightPipe: HighlightPipe
-    ) {}
-
     public ngOnInit(): void {
         this.updateHTML(this.combobox.inputValue);
 
diff --git a/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.spec.ts b/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.spec.ts
index 72d1d8358..a5e810d0d 100644
--- a/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.spec.ts
+++ b/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.spec.ts
@@ -19,14 +19,7 @@
 //  THE SOFTWARE.
 
 import { LiveAnnouncer } from "@angular/cdk/a11y";
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    NO_ERRORS_SCHEMA,
-    QueryList,
-    ViewChild,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, NO_ERRORS_SCHEMA, QueryList, ViewChild, inject } from "@angular/core";
 import {
     ComponentFixture,
     fakeAsync,
@@ -71,10 +64,11 @@ const nonExistentItem = { id: "item-101", name: "Item 101" };
     standalone: false,
 })
 class ComboboxV2WrapperComponent {
+    elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     public items = Array.from({ length: 10 }).map((_, i) => `Item ${i}`);
     public comboboxControl = new FormControl();
     @ViewChild(ComboboxV2Component) combobox: ComboboxV2Component;
-    constructor(public elRef: ElementRef<HTMLElement>) {}
 }
 
 describe("components >", () => {
diff --git a/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.ts b/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.ts
index 101f44075..5403c9771 100644
--- a/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.ts
+++ b/packages/bits/src/lib/select-v2/combobox-v2/combobox-v2.component.ts
@@ -19,24 +19,7 @@
 //  THE SOFTWARE.
 
 import { LiveAnnouncer } from "@angular/cdk/a11y";
-import {
-    AfterContentInit,
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChildren,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    QueryList,
-    SimpleChanges,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, OnChanges, OnDestroy, Output, QueryList, SimpleChanges, ViewEncapsulation, inject } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import includes from "lodash/includes";
 import isEqual from "lodash/isEqual";
@@ -92,6 +75,9 @@ export class ComboboxV2Component
     extends BaseSelectV2
     implements AfterContentInit, OnDestroy, OnChanges, AfterViewInit
 {
+    private selectedItemsKeyControlService = inject(SelectedItemsKeyControlService);
+    liveAnnouncer: LiveAnnouncer;
+
     /** Function that maps an Option's control value to its display value */
     @Input() public displayWith: ((value: any) => string) | null = null;
 
@@ -122,14 +108,15 @@ export class ComboboxV2Component
     /** Text of the Clear Button tooltip */
     public clearValueButtonTooltip: string;
 
-    constructor(
-        elRef: ElementRef,
-        optionKeyControlService: OptionKeyControlService<SelectV2OptionComponent>,
-        cdRef: ChangeDetectorRef,
-        private selectedItemsKeyControlService: SelectedItemsKeyControlService,
-        public liveAnnouncer: LiveAnnouncer
-    ) {
+    constructor() {
+        const elRef = inject(ElementRef);
+        const optionKeyControlService = inject<OptionKeyControlService<SelectV2OptionComponent>>(OptionKeyControlService);
+        const cdRef = inject(ChangeDetectorRef);
+        const liveAnnouncer = inject(LiveAnnouncer);
+
         super(optionKeyControlService, cdRef, elRef, liveAnnouncer);
+    
+        this.liveAnnouncer = liveAnnouncer;
     }
 
     public ngAfterContentInit(): void {
diff --git a/packages/bits/src/lib/select-v2/mark-as-selected-item.directive.ts b/packages/bits/src/lib/select-v2/mark-as-selected-item.directive.ts
index 26b0deb29..a0d8c64f0 100644
--- a/packages/bits/src/lib/select-v2/mark-as-selected-item.directive.ts
+++ b/packages/bits/src/lib/select-v2/mark-as-selected-item.directive.ts
@@ -19,21 +19,17 @@
 //  THE SOFTWARE.
 
 import { Highlightable } from "@angular/cdk/a11y";
-import {
-    ChangeDetectorRef,
-    Directive,
-    ElementRef,
-    HostBinding,
-} from "@angular/core";
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, inject } from "@angular/core";
 
 @Directive({
     selector: "[nuiMarkAsSelectedItem]",
     standalone: false,
 })
 export class MarkAsSelectedItemDirective implements Highlightable {
-    @HostBinding("class.active") private isActive: boolean = false;
+    elRef = inject(ElementRef);
+    private cdRef = inject(ChangeDetectorRef);
 
-    constructor(public elRef: ElementRef, private cdRef: ChangeDetectorRef) {}
+    @HostBinding("class.active") private isActive: boolean = false;
 
     public setActiveStyles(): void {
         this.isActive = true;
diff --git a/packages/bits/src/lib/select-v2/option-group/select-v2-option-group.component.ts b/packages/bits/src/lib/select-v2/option-group/select-v2-option-group.component.ts
index 126ad8b94..e532fc081 100644
--- a/packages/bits/src/lib/select-v2/option-group/select-v2-option-group.component.ts
+++ b/packages/bits/src/lib/select-v2/option-group/select-v2-option-group.component.ts
@@ -18,18 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
-    Component,
-    ContentChildren,
-    forwardRef,
-    HostBinding,
-    Inject,
-    OnDestroy,
-    Optional,
-    QueryList,
-} from "@angular/core";
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, forwardRef, HostBinding, OnDestroy, QueryList, inject } from "@angular/core";
 import every from "lodash/every";
 import { merge, Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -62,11 +51,9 @@ export class SelectV2OptionGroupComponent
     private select: IOptionedComponent;
     private onDestroy$ = new Subject<void>();
 
-    constructor(
-        @Optional()
-        @Inject(NUI_SELECT_V2_OPTION_PARENT_COMPONENT)
-        parent: IOptionedComponent
-    ) {
+    constructor() {
+        const parent = inject<IOptionedComponent>(NUI_SELECT_V2_OPTION_PARENT_COMPONENT, { optional: true })!;
+
         this.select = parent;
     }
 
diff --git a/packages/bits/src/lib/select-v2/option-key-control.service.ts b/packages/bits/src/lib/select-v2/option-key-control.service.ts
index d78725cce..937cbc766 100644
--- a/packages/bits/src/lib/select-v2/option-key-control.service.ts
+++ b/packages/bits/src/lib/select-v2/option-key-control.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ActiveDescendantKeyManager, LiveAnnouncer } from "@angular/cdk/a11y";
-import { Injectable, QueryList } from "@angular/core";
+import { Injectable, QueryList, inject } from "@angular/core";
 import isNil from "lodash/isNil";
 
 import {
@@ -31,13 +31,13 @@ import { IOption, IOverlayComponent } from "../overlay/types";
 
 @Injectable()
 export class OptionKeyControlService<T extends IOption> {
+    liveAnnouncer = inject(LiveAnnouncer);
+
     public popup: IOverlayComponent;
     public optionItems: QueryList<T>;
 
     private keyboardEventsManager: ActiveDescendantKeyManager<T>;
 
-    constructor(public liveAnnouncer: LiveAnnouncer) {}
-
     public initKeyboardManager(): void {
         this.keyboardEventsManager = new ActiveDescendantKeyManager(
             this.optionItems
diff --git a/packages/bits/src/lib/select-v2/option/select-v2-option.component.ts b/packages/bits/src/lib/select-v2/option/select-v2-option.component.ts
index 020e62155..bb5b06438 100644
--- a/packages/bits/src/lib/select-v2/option/select-v2-option.component.ts
+++ b/packages/bits/src/lib/select-v2/option/select-v2-option.component.ts
@@ -19,17 +19,7 @@
 //  THE SOFTWARE.
 
 import { Highlightable } from "@angular/cdk/a11y";
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostBinding,
-    HostListener,
-    Inject,
-    Input,
-    Optional,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, HostBinding, HostListener, Input, inject } from "@angular/core";
 
 import { OVERLAY_ITEM } from "../../overlay/constants";
 import { OverlayItemComponent } from "../../overlay/overlay-item/overlay-item.component";
@@ -62,6 +52,8 @@ export class SelectV2OptionComponent
     extends OverlayItemComponent
     implements Highlightable, IOption
 {
+    element: ElementRef<HTMLElement>;
+
     /** Sets value */
     @Input() public value: OptionValueType;
 
@@ -88,13 +80,13 @@ export class SelectV2OptionComponent
 
     private select: IOptionedComponent;
 
-    constructor(
-        @Optional()
-        @Inject(NUI_SELECT_V2_OPTION_PARENT_COMPONENT)
-        parent: IOptionedComponent,
-        public element: ElementRef<HTMLElement>
-    ) {
-        super(element);
+    constructor() {
+        const parent = inject<IOptionedComponent>(NUI_SELECT_V2_OPTION_PARENT_COMPONENT, { optional: true })!;
+        const element = inject<ElementRef<HTMLElement>>(ElementRef);
+
+        super();
+        this.element = element;
+
         this.select = parent;
     }
 
diff --git a/packages/bits/src/lib/select-v2/select/select-v2.component.spec.ts b/packages/bits/src/lib/select-v2/select/select-v2.component.spec.ts
index e939922f3..e336febcf 100644
--- a/packages/bits/src/lib/select-v2/select/select-v2.component.spec.ts
+++ b/packages/bits/src/lib/select-v2/select/select-v2.component.spec.ts
@@ -19,15 +19,7 @@
 //  THE SOFTWARE.
 
 import { LiveAnnouncer } from "@angular/cdk/a11y";
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    NO_ERRORS_SCHEMA,
-    QueryList,
-    SimpleChange,
-    ViewChild,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, NO_ERRORS_SCHEMA, QueryList, SimpleChange, ViewChild, inject } from "@angular/core";
 import {
     ComponentFixture,
     fakeAsync,
@@ -57,10 +49,11 @@ import { InputValueTypes } from "../types";
     standalone: false,
 })
 class SelectV2WrapperWithFormControlComponent {
+    elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     public items = Array.from({ length: 10 }).map((_, i) => `Item ${i}`);
     public selectControl = new FormControl();
     @ViewChild(SelectV2Component) select: SelectV2Component;
-    constructor(public elRef: ElementRef<HTMLElement>) {}
 }
 
 @Component({
@@ -74,10 +67,11 @@ class SelectV2WrapperWithFormControlComponent {
     standalone: false,
 })
 class SelectV2WrapperWithValueComponent {
+    elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     public items = Array.from({ length: 10 }).map((_, i) => `Item ${i}`);
     public value: InputValueTypes = this.items[0];
     @ViewChild(SelectV2Component) select: SelectV2Component;
-    constructor(public elRef: ElementRef<HTMLElement>) {}
 }
 
 @Component({
@@ -93,10 +87,11 @@ class SelectV2WrapperWithValueComponent {
     standalone: false,
 })
 class SelectV2WrapperAsyncComponent {
+    elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     public items: any[];
     public selectControl = new FormControl();
     @ViewChild(SelectV2Component) select: SelectV2Component;
-    constructor(public elRef: ElementRef<HTMLElement>) {}
 
     public setItems() {
         setTimeout(() => {
diff --git a/packages/bits/src/lib/select-v2/select/select-v2.component.ts b/packages/bits/src/lib/select-v2/select/select-v2.component.ts
index 18c71df36..e0f1487e6 100644
--- a/packages/bits/src/lib/select-v2/select/select-v2.component.ts
+++ b/packages/bits/src/lib/select-v2/select/select-v2.component.ts
@@ -19,20 +19,7 @@
 //  THE SOFTWARE.
 
 import { LiveAnnouncer } from "@angular/cdk/a11y";
-import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    Input,
-    OnChanges,
-    OnDestroy,
-    SimpleChanges,
-    TemplateRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ViewEncapsulation, inject } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { merge } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -79,19 +66,23 @@ export class SelectV2Component
     extends BaseSelectV2
     implements AfterContentInit, OnDestroy, OnChanges
 {
+    liveAnnouncer: LiveAnnouncer;
+
     /** Sets a custom template for displaying it in the Option */
     @Input() public displayValueTemplate: TemplateRef<any>;
 
     /** Value of the selected Option that derives in the Select */
     public displayText: string;
 
-    constructor(
-        elRef: ElementRef<HTMLElement>,
-        optionKeyControlService: OptionKeyControlService<SelectV2OptionComponent>,
-        cdRef: ChangeDetectorRef,
-        public liveAnnouncer: LiveAnnouncer
-    ) {
+    constructor() {
+        const elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+        const optionKeyControlService = inject<OptionKeyControlService<SelectV2OptionComponent>>(OptionKeyControlService);
+        const cdRef = inject(ChangeDetectorRef);
+        const liveAnnouncer = inject(LiveAnnouncer);
+
         super(optionKeyControlService, cdRef, elRef, liveAnnouncer);
+    
+        this.liveAnnouncer = liveAnnouncer;
     }
 
     public ngOnChanges(changes: SimpleChanges): void {
diff --git a/packages/bits/src/lib/select-v2/selected-items-key-control.service.ts b/packages/bits/src/lib/select-v2/selected-items-key-control.service.ts
index 222bc4e1c..ca5769701 100644
--- a/packages/bits/src/lib/select-v2/selected-items-key-control.service.ts
+++ b/packages/bits/src/lib/select-v2/selected-items-key-control.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ActiveDescendantKeyManager, LiveAnnouncer } from "@angular/cdk/a11y";
-import { Injectable, QueryList } from "@angular/core";
+import { Injectable, QueryList, inject } from "@angular/core";
 import isNil from "lodash/isNil";
 
 import { ComboboxV2Component } from "./combobox-v2/combobox-v2.component";
@@ -28,14 +28,14 @@ import { KEYBOARD_CODE } from "../../constants/keycode.constants";
 
 @Injectable()
 export class SelectedItemsKeyControlService {
+    liveAnnouncer = inject(LiveAnnouncer);
+
     private selectedItems: QueryList<MarkAsSelectedItemDirective>;
     private selectedItemsKeyManager: ActiveDescendantKeyManager<any>;
     private activeSelectedItemIndex?: number;
     private combobox: ComboboxV2Component;
     private inputElement: HTMLInputElement;
 
-    constructor(public liveAnnouncer: LiveAnnouncer) {}
-
     public initSelectedItemsKeyManager(
         elems: QueryList<MarkAsSelectedItemDirective>,
         combobox: ComboboxV2Component
diff --git a/packages/bits/src/lib/select/combobox/combobox.component.ts b/packages/bits/src/lib/select/combobox/combobox.component.ts
index 92450aa26..1475ed982 100644
--- a/packages/bits/src/lib/select/combobox/combobox.component.ts
+++ b/packages/bits/src/lib/select/combobox/combobox.component.ts
@@ -19,24 +19,7 @@
 //  THE SOFTWARE.
 
 import { FocusMonitor, FocusOrigin } from "@angular/cdk/a11y";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostBinding,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    QueryList,
-    Renderer2,
-    SimpleChanges,
-    ViewChild,
-    ViewChildren,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, HostBinding, Input, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation, inject } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import _debounce from "lodash/debounce";
 import _escape from "lodash/escape";
@@ -92,6 +75,13 @@ export class ComboboxComponent
     extends BaseSelect
     implements OnInit, OnChanges, OnDestroy, AfterViewInit
 {
+    private elRef = inject(ElementRef);
+    private renderer = inject(Renderer2);
+    private changeDetector = inject(ChangeDetectorRef);
+    private keyControlService = inject(MenuKeyControlService);
+    private focusMonitor = inject(FocusMonitor);
+    private logger = inject(LoggerService);
+
     /**
      * The option to clear the combobox if the value entered is not in array.
      */
@@ -134,15 +124,9 @@ export class ComboboxComponent
         return this.inline;
     }
 
-    constructor(
-        utilService: UtilService,
-        private elRef: ElementRef,
-        private renderer: Renderer2,
-        private changeDetector: ChangeDetectorRef,
-        private keyControlService: MenuKeyControlService,
-        private focusMonitor: FocusMonitor,
-        private logger: LoggerService
-    ) {
+    constructor() {
+        const utilService = inject(UtilService);
+
         super(utilService);
         // Blur is debounced cause when you click on menu item blur is triggered twice: from textbox and when popup is closed.
         this.comboboxEventListeners.push(
diff --git a/packages/bits/src/lib/select/select.component.ts b/packages/bits/src/lib/select/select.component.ts
index bb190b875..1ccc7bc35 100644
--- a/packages/bits/src/lib/select/select.component.ts
+++ b/packages/bits/src/lib/select/select.component.ts
@@ -18,22 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    HostBinding,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    Renderer2,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import _debounce from "lodash/debounce";
 import _isEmpty from "lodash/isEmpty";
@@ -74,6 +59,10 @@ export class SelectComponent
     extends BaseSelect
     implements OnInit, OnChanges, OnDestroy
 {
+    private renderer = inject(Renderer2);
+    elRef = inject(ElementRef);
+    private logger = inject(LoggerService);
+
     /**
      * A value that tells popup to be attached right after it's parent declaration or in <body>
      */
@@ -105,12 +94,9 @@ export class SelectComponent
 
     @ViewChild("menu") public menu: MenuComponent;
 
-    constructor(
-        utilService: UtilService,
-        private renderer: Renderer2,
-        public elRef: ElementRef,
-        private logger: LoggerService
-    ) {
+    constructor() {
+        const utilService = inject(UtilService);
+
         super(utilService);
         this.logger.warn(
             "<nui-select> is deprecated as of Nova v11. Please use <nui-select-v2> instead."
diff --git a/packages/bits/src/lib/select/spec-helpers/spec-components.ts b/packages/bits/src/lib/select/spec-helpers/spec-components.ts
index ef87af576..09a7f515f 100644
--- a/packages/bits/src/lib/select/spec-helpers/spec-components.ts
+++ b/packages/bits/src/lib/select/spec-helpers/spec-components.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 
 import { ToastService } from "../../toast/toast.service";
@@ -45,17 +45,15 @@ import { ISelectChangedEvent } from "../public-api";
     standalone: false,
 })
 export class SelectReactiveFormTestComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+    toastService = inject<ToastService>(ToastService);
+
     public myForm: FormGroup;
     public dataset = {
         items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
         selectedItem: "",
     };
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) public toastService: ToastService
-    ) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             item: this.formBuilder.control(this.dataset.selectedItem, [
@@ -96,17 +94,15 @@ export class SelectReactiveFormTestComponent implements OnInit {
     standalone: false,
 })
 export class ComboboxReactiveFormTestComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+    toastService = inject<ToastService>(ToastService);
+
     public myForm: FormGroup;
     public dataset = {
         items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
         selectedItem: "",
     };
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) public toastService: ToastService
-    ) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             item: this.formBuilder.control(this.dataset.selectedItem, [
diff --git a/packages/bits/src/lib/selector/selector.service.ts b/packages/bits/src/lib/selector/selector.service.ts
index 7c55435fb..077009a80 100644
--- a/packages/bits/src/lib/selector/selector.service.ts
+++ b/packages/bits/src/lib/selector/selector.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, Optional, TrackByFunction } from "@angular/core";
+import { Injectable, TrackByFunction, inject } from "@angular/core";
 import _differenceWith from "lodash/differenceWith";
 import _intersectionWith from "lodash/intersectionWith";
 import _isEqual from "lodash/isEqual";
@@ -41,12 +41,14 @@ import { RepeatSelectionMode } from "../repeat/types";
  */
 @Injectable({ providedIn: "root" })
 export class SelectorService {
+    private logger = inject(LoggerService, { optional: true });
+
     /**
      * Map if SelectionType to internationalized selector options
      */
     public i18nTitleMap: Record<string, string> = {};
 
-    constructor(@Optional() private logger?: LoggerService) {
+    constructor() {
         this.i18nTitleMap[
             SelectionType.All
         ] = $localize`Select all items on this page`;
diff --git a/packages/bits/src/lib/sorter/sorter-keyboard.service.ts b/packages/bits/src/lib/sorter/sorter-keyboard.service.ts
index c3d809d24..748b29a25 100644
--- a/packages/bits/src/lib/sorter/sorter-keyboard.service.ts
+++ b/packages/bits/src/lib/sorter/sorter-keyboard.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListKeyManager, LiveAnnouncer } from "@angular/cdk/a11y";
-import { Injectable, QueryList } from "@angular/core";
+import { Injectable, QueryList, inject } from "@angular/core";
 import isNull from "lodash/isNull";
 
 import {
@@ -32,12 +32,12 @@ import { OverlayComponent } from "../overlay/overlay-component/overlay.component
 
 @Injectable()
 export class SorterKeyboardService {
+    private liveAnnouncer = inject(LiveAnnouncer);
+
     public overlay: OverlayComponent;
     public menuItems: QueryList<MenuItemBaseComponent>;
     private keyboardEventsManager: ListKeyManager<MenuItemBaseComponent>;
 
-    constructor(private liveAnnouncer: LiveAnnouncer) {}
-
     public initKeyboardManager(): void {
         this.keyboardEventsManager = new ListKeyManager(
             this.menuItems
diff --git a/packages/bits/src/lib/sorter/sorter.component.ts b/packages/bits/src/lib/sorter/sorter.component.ts
index 49c4dab84..b962ea71d 100644
--- a/packages/bits/src/lib/sorter/sorter.component.ts
+++ b/packages/bits/src/lib/sorter/sorter.component.ts
@@ -19,21 +19,7 @@
 //  THE SOFTWARE.
 
 import { OverlayConfig } from "@angular/cdk/overlay";
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    Renderer2,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import _assign from "lodash/assign";
 import _isEqual from "lodash/isEqual";
 import _values from "lodash/values";
@@ -69,6 +55,11 @@ import { OverlayComponent } from "../overlay/overlay-component/overlay.component
 export class SorterComponent
     implements OnChanges, OnInit, OnDestroy, AfterViewInit, IFilterPub
 {
+    private logger = inject(LoggerService);
+    private sorterKeyboardService = inject(SorterKeyboardService);
+    private elRef = inject(ElementRef);
+    private renderer = inject(Renderer2);
+
     @Input() appendToBody: boolean = false;
     @Input() caption: string;
 
@@ -110,13 +101,6 @@ export class SorterComponent
     };
     private menuKeyControlListeners: Function[] = [];
 
-    constructor(
-        private logger: LoggerService,
-        private sorterKeyboardService: SorterKeyboardService,
-        private elRef: ElementRef,
-        private renderer: Renderer2
-    ) {}
-
     public ngOnInit(): void {
         this.onAppendToBodyChange(this.appendToBody);
     }
diff --git a/packages/bits/src/lib/spinner/spinner.component.ts b/packages/bits/src/lib/spinner/spinner.component.ts
index 90f4b24e4..ec22bf98e 100644
--- a/packages/bits/src/lib/spinner/spinner.component.ts
+++ b/packages/bits/src/lib/spinner/spinner.component.ts
@@ -19,19 +19,7 @@
 //  THE SOFTWARE.
 
 import { animate, style, transition, trigger } from "@angular/animations";
-import {
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    HostBinding,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    Output,
-    SimpleChanges,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, NgZone, OnChanges, OnDestroy, Output, SimpleChanges, ViewEncapsulation, inject } from "@angular/core";
 
 import { ButtonIcon, SpinnerSize } from "./public-api";
 import { LoggerService } from "../../services/log-service";
@@ -66,6 +54,11 @@ export class SpinnerComponent implements OnChanges, OnDestroy {
     private static defaultSize: SpinnerSize = SpinnerSize.Small;
     private showTimer: any;
     private _size: SpinnerSize;
+
+    private logger = inject(LoggerService);
+    private changeDetector = inject(ChangeDetectorRef);
+    private ngZone = inject(NgZone);
+
     public tooltipText = $localize`Cancel`;
 
     public showSpinner = false;
@@ -115,12 +108,6 @@ export class SpinnerComponent implements OnChanges, OnDestroy {
         return this.size !== SpinnerSize.Small;
     }
 
-    constructor(
-        private logger: LoggerService,
-        private changeDetector: ChangeDetectorRef,
-        private ngZone: NgZone
-    ) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes?.percent) {
             this.ariaValueNow = this.percent ? String(this.percent) : undefined;
diff --git a/packages/bits/src/lib/tabgroup/tab-group/tab-group.component.ts b/packages/bits/src/lib/tabgroup/tab-group/tab-group.component.ts
index bfceb563e..7d2686195 100644
--- a/packages/bits/src/lib/tabgroup/tab-group/tab-group.component.ts
+++ b/packages/bits/src/lib/tabgroup/tab-group/tab-group.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Input,
-    OnDestroy,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, ViewEncapsulation, inject } from "@angular/core";
 
 import { TabComponent } from "../tab/tab.component";
 
@@ -43,6 +35,9 @@ import { TabComponent } from "../tab/tab.component";
     standalone: false,
 })
 export class TabGroupComponent implements OnDestroy, AfterViewInit {
+    private el = inject(ElementRef);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     /** If true tabs will be placed vertically */
     @Input()
     get vertical(): boolean {
@@ -64,11 +59,6 @@ export class TabGroupComponent implements OnDestroy, AfterViewInit {
     protected isDestroyed: boolean;
     protected _vertical: boolean;
 
-    constructor(
-        private el: ElementRef,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
-
     public ngAfterViewInit(): void {
         this.checkTraverse();
     }
diff --git a/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.spec.ts b/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.spec.ts
index 1b31de93f..d61d37bae 100644
--- a/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.spec.ts
+++ b/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.spec.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 
 import { TabHeadingGroupComponent } from "./tab-heading-group.component";
@@ -52,6 +46,8 @@ import { TabHeadingComponent } from "../tab-heading/tab-heading.component";
     standalone: false,
 })
 class TestTabHeadingComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
     public tabsetContent: any[] = [];
 
@@ -60,7 +56,7 @@ class TestTabHeadingComponent {
     @ViewChildren(TabHeadingComponent)
     tabHeadings: QueryList<TabHeadingComponent>;
 
-    constructor(private changeDetector: ChangeDetectorRef) {
+    constructor() {
         this.addTab();
         this.addTab();
     }
diff --git a/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.ts b/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.ts
index 4c80ba92b..e7d15be84 100644
--- a/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.ts
+++ b/packages/bits/src/lib/tabgroup/tab-heading-group/tab-heading-group.component.ts
@@ -18,22 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChildren,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    NgZone,
-    OnDestroy,
-    Output,
-    QueryList,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, NgZone, OnDestroy, Output, QueryList, ViewChild, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 
 import { TabHeadingComponent } from "../tab-heading/tab-heading.component";
@@ -48,6 +33,10 @@ import { TabHeadingComponent } from "../tab-heading/tab-heading.component";
     standalone: false,
 })
 export class TabHeadingGroupComponent implements OnDestroy, AfterViewInit {
+    private el = inject(ElementRef);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+    private ngZone = inject(NgZone);
+
     @ContentChildren(TabHeadingComponent) _tabs: QueryList<TabHeadingComponent>;
 
     @ViewChild("resizableArea") resizableArea: ElementRef;
@@ -74,12 +63,6 @@ export class TabHeadingGroupComponent implements OnDestroy, AfterViewInit {
     private _tabSelectedSubscriptions: Subscription[] = [];
     private _changesSubscription: Subscription;
 
-    constructor(
-        private el: ElementRef,
-        private changeDetectorRef: ChangeDetectorRef,
-        private ngZone: NgZone
-    ) {}
-
     public ngAfterViewInit(): void {
         // Observing the size of the component to check traverse
         this._ro = new ResizeObserver(entries =>
diff --git a/packages/bits/src/lib/tabgroup/tab-heading/tab-heading.component.ts b/packages/bits/src/lib/tabgroup/tab-heading/tab-heading.component.ts
index 932d538a5..848d26523 100644
--- a/packages/bits/src/lib/tabgroup/tab-heading/tab-heading.component.ts
+++ b/packages/bits/src/lib/tabgroup/tab-heading/tab-heading.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    Output,
-} from "@angular/core";
+import { ChangeDetectorRef, Component,ElementRef, EventEmitter, HostBinding, Input, Output, inject } from "@angular/core";
 
 import { KEYBOARD_CODE } from "../../../constants/keycode.constants";
 
@@ -39,6 +31,9 @@ import { KEYBOARD_CODE } from "../../../constants/keycode.constants";
     standalone: false,
 })
 export class TabHeadingComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+    private elementRef = inject(ElementRef);
+
     /** This adds 'disabled' class to the host component depending on the 'disabled' @Input to properly style disabled tabs */
     @HostBinding("class.disabled")
     get isDisabled(): boolean {
@@ -66,11 +61,6 @@ export class TabHeadingComponent {
 
     protected _active: boolean;
 
-    constructor(
-        private changeDetector: ChangeDetectorRef,
-        private elementRef: ElementRef
-    ) {}
-
     public selectTab(): void {
         if (!this.disabled) {
             this.selected.emit(this);
diff --git a/packages/bits/src/lib/tabgroup/tab/tab-heading-custom-template-ref.directive.ts b/packages/bits/src/lib/tabgroup/tab/tab-heading-custom-template-ref.directive.ts
index c0dd110d6..944d6d55d 100644
--- a/packages/bits/src/lib/tabgroup/tab/tab-heading-custom-template-ref.directive.ts
+++ b/packages/bits/src/lib/tabgroup/tab/tab-heading-custom-template-ref.directive.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
+import { Directive, Input, TemplateRef, ViewContainerRef, inject } from "@angular/core";
 /** @ignore */
 @Directive({
     selector: "[nuiTabHeadingCustomTemplateRef]",
@@ -42,7 +42,9 @@ export class TabHeadingCustomTemplateRefDirective {
         return this._tabHeadingCustomTemplateRef;
     }
 
-    constructor(viewRef: ViewContainerRef) {
+    constructor() {
+        const viewRef = inject(ViewContainerRef);
+
         this.viewRef = viewRef;
     }
 }
diff --git a/packages/bits/src/lib/tabgroup/tab/tab-heading.directive.ts b/packages/bits/src/lib/tabgroup/tab/tab-heading.directive.ts
index 5dc80353d..462220474 100644
--- a/packages/bits/src/lib/tabgroup/tab/tab-heading.directive.ts
+++ b/packages/bits/src/lib/tabgroup/tab/tab-heading.directive.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Directive, TemplateRef } from "@angular/core";
+import { Directive, TemplateRef, inject } from "@angular/core";
 
 import { TabComponent } from "./tab.component";
 
@@ -31,7 +31,10 @@ import { TabComponent } from "./tab.component";
 export class TabHeadingDirective {
     templateRef: TemplateRef<any>;
 
-    constructor(templateRef: TemplateRef<any>, tab: TabComponent) {
+    constructor() {
+        const templateRef = inject<TemplateRef<any>>(TemplateRef);
+        const tab = inject(TabComponent);
+
         tab.headingRef = templateRef;
     }
 }
diff --git a/packages/bits/src/lib/tabgroup/tab/tab.component.ts b/packages/bits/src/lib/tabgroup/tab/tab.component.ts
index 2471fd4c2..a354f6196 100644
--- a/packages/bits/src/lib/tabgroup/tab/tab.component.ts
+++ b/packages/bits/src/lib/tabgroup/tab/tab.component.ts
@@ -18,16 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    Output,
-    TemplateRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, TemplateRef, ViewEncapsulation, inject } from "@angular/core";
 
 import { TabGroupComponent } from "../tab-group/tab-group.component";
 /** @ignore */
@@ -42,6 +33,8 @@ import { TabGroupComponent } from "../tab-group/tab-group.component";
     standalone: false,
 })
 export class TabComponent {
+    private tabGroup = inject(TabGroupComponent);
+
     /** Tab header text */
     @Input() heading: string;
     /** If true tab can not be activated  */
@@ -83,7 +76,7 @@ export class TabComponent {
     public headingRef: TemplateRef<any>;
     protected _active: boolean;
 
-    constructor(private tabGroup: TabGroupComponent) {
+    constructor() {
         this.tabGroup.addTab(this);
     }
 }
diff --git a/packages/bits/src/lib/table/table-cell/table-cell-def.directive.ts b/packages/bits/src/lib/table/table-cell/table-cell-def.directive.ts
index 2c4f8ed4c..b76f81752 100644
--- a/packages/bits/src/lib/table/table-cell/table-cell-def.directive.ts
+++ b/packages/bits/src/lib/table/table-cell/table-cell-def.directive.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkCellDef } from "@angular/cdk/table";
-import { Directive, TemplateRef } from "@angular/core";
+import { Directive, TemplateRef, inject } from "@angular/core";
 
 /**
  * @ignore
@@ -31,7 +31,13 @@ import { Directive, TemplateRef } from "@angular/core";
     standalone: false,
 })
 export class TableCellDefDirective extends CdkCellDef {
-    constructor(public template: TemplateRef<any>) {
+    template: TemplateRef<any>;
+
+    constructor() {
+        const template = inject<TemplateRef<any>>(TemplateRef);
+
         super(template);
+    
+        this.template = template;
     }
 }
diff --git a/packages/bits/src/lib/table/table-cell/table-cell.directive.ts b/packages/bits/src/lib/table/table-cell/table-cell.directive.ts
index 4d02bf7ca..923f7b03e 100644
--- a/packages/bits/src/lib/table/table-cell/table-cell.directive.ts
+++ b/packages/bits/src/lib/table/table-cell/table-cell.directive.ts
@@ -19,18 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkCell } from "@angular/cdk/table";
-import {
-    ChangeDetectorRef,
-    Directive,
-    ElementRef,
-    HostBinding,
-    HostListener,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    SimpleChanges,
-} from "@angular/core";
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from "@angular/core";
 import { Subscription } from "rxjs";
 import { filter } from "rxjs/operators";
 
@@ -54,6 +43,11 @@ export class TableCellDirective
     extends CdkCell
     implements OnInit, OnDestroy, OnChanges
 {
+    private columnDef: TableColumnDefDirective;
+    private elementRef: ElementRef;
+    private tableStateHandlerService = inject(TableStateHandlerService);
+    private cd = inject(ChangeDetectorRef);
+
     @Input() tooltipText: string;
     @Input() alignment: TableAlignmentOptions;
     public currentCellIndex: number;
@@ -79,13 +73,14 @@ export class TableCellDirective
         }
     }
 
-    constructor(
-        private columnDef: TableColumnDefDirective,
-        private elementRef: ElementRef,
-        private tableStateHandlerService: TableStateHandlerService,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor() {
+        const columnDef = inject(TableColumnDefDirective);
+        const elementRef = inject(ElementRef);
+
         super(columnDef, elementRef);
+    
+        this.columnDef = columnDef;
+        this.elementRef = elementRef;
     }
 
     public ngOnInit(): void {
diff --git a/packages/bits/src/lib/table/table-cell/table-column-def.directive.ts b/packages/bits/src/lib/table/table-cell/table-column-def.directive.ts
index 432a4dd44..5bedbeb28 100644
--- a/packages/bits/src/lib/table/table-cell/table-column-def.directive.ts
+++ b/packages/bits/src/lib/table/table-cell/table-column-def.directive.ts
@@ -19,13 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkColumnDef } from "@angular/cdk/table";
-import {
-    Directive,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges,
-} from "@angular/core";
+import { Directive, Input, OnChanges, OnInit, SimpleChanges, inject } from "@angular/core";
 
 import { TableStateHandlerService } from "../table-state-handler.service";
 import { ColumnTypes } from "../types";
@@ -45,6 +39,8 @@ export class TableColumnDefDirective
     extends CdkColumnDef
     implements OnInit, OnChanges
 {
+    private tableStateHandlerService = inject(TableStateHandlerService);
+
     public get name(): string {
         return super.name;
     }
@@ -55,10 +51,6 @@ export class TableColumnDefDirective
     @Input() type: ColumnTypes;
     @Input() columnWidth: number;
 
-    constructor(private tableStateHandlerService: TableStateHandlerService) {
-        super();
-    }
-
     public ngOnInit(): void {
         if (this.columnWidth) {
             this.tableStateHandlerService.setColumnWidth(
diff --git a/packages/bits/src/lib/table/table-cell/table-footer-cell-def.directive.ts b/packages/bits/src/lib/table/table-cell/table-footer-cell-def.directive.ts
index 0c89ac6e1..6abf50889 100644
--- a/packages/bits/src/lib/table/table-cell/table-footer-cell-def.directive.ts
+++ b/packages/bits/src/lib/table/table-cell/table-footer-cell-def.directive.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkFooterCellDef } from "@angular/cdk/table";
-import { Directive, TemplateRef } from "@angular/core";
+import { Directive, TemplateRef, inject } from "@angular/core";
 
 /**
  * @ignore
@@ -33,7 +33,13 @@ import { Directive, TemplateRef } from "@angular/core";
     standalone: false,
 })
 export class TableFooterCellDefDirective extends CdkFooterCellDef {
-    constructor(public template: TemplateRef<any>) {
+    template: TemplateRef<any>;
+
+    constructor() {
+        const template = inject<TemplateRef<any>>(TemplateRef);
+
         super(template);
+    
+        this.template = template;
     }
 }
diff --git a/packages/bits/src/lib/table/table-cell/table-footer-cell.directive.ts b/packages/bits/src/lib/table/table-cell/table-footer-cell.directive.ts
index b70999570..e1b0c0f7c 100644
--- a/packages/bits/src/lib/table/table-cell/table-footer-cell.directive.ts
+++ b/packages/bits/src/lib/table/table-cell/table-footer-cell.directive.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkColumnDef, CdkFooterCell } from "@angular/cdk/table";
-import { Directive, ElementRef } from "@angular/core";
+import { Directive, ElementRef, inject } from "@angular/core";
 
 /**
  * @ignore
@@ -34,7 +34,10 @@ import { Directive, ElementRef } from "@angular/core";
     standalone: false,
 })
 export class TableFooterCellDirective extends CdkFooterCell {
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
+    constructor() {
+        const columnDef = inject(CdkColumnDef);
+        const elementRef = inject(ElementRef);
+
         super(columnDef, elementRef);
     }
 }
diff --git a/packages/bits/src/lib/table/table-cell/table-header-cell-def.directive.ts b/packages/bits/src/lib/table/table-cell/table-header-cell-def.directive.ts
index 94c9721ee..7414a1ed1 100644
--- a/packages/bits/src/lib/table/table-cell/table-header-cell-def.directive.ts
+++ b/packages/bits/src/lib/table/table-cell/table-header-cell-def.directive.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkHeaderCellDef } from "@angular/cdk/table";
-import { Directive, TemplateRef } from "@angular/core";
+import { Directive, TemplateRef, inject } from "@angular/core";
 
 /**
  * @ignore
@@ -33,7 +33,13 @@ import { Directive, TemplateRef } from "@angular/core";
     standalone: false,
 })
 export class TableHeaderCellDefDirective extends CdkHeaderCellDef {
-    constructor(public template: TemplateRef<any>) {
+    template: TemplateRef<any>;
+
+    constructor() {
+        const template = inject<TemplateRef<any>>(TemplateRef);
+
         super(template);
+    
+        this.template = template;
     }
 }
diff --git a/packages/bits/src/lib/table/table-cell/table-header-cell.component.ts b/packages/bits/src/lib/table/table-cell/table-header-cell.component.ts
index 6063ae52a..8bcbda623 100644
--- a/packages/bits/src/lib/table/table-cell/table-header-cell.component.ts
+++ b/packages/bits/src/lib/table/table-cell/table-header-cell.component.ts
@@ -19,20 +19,7 @@
 //  THE SOFTWARE.
 
 import { CdkHeaderCell } from "@angular/cdk/table";
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    HostBinding,
-    HostListener,
-    Input,
-    NgZone,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Renderer2,
-    SimpleChanges,
-} from "@angular/core";
+import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, inject } from "@angular/core";
 import _isNil from "lodash/isNil";
 import _isUndefined from "lodash/isUndefined";
 import { fromEvent, Subscription } from "rxjs";
@@ -80,6 +67,13 @@ export class TableHeaderCellComponent
     extends CdkHeaderCell
     implements OnInit, OnChanges, AfterViewInit, OnDestroy
 {
+    private columnDef: TableColumnDefDirective;
+    private elementRef: ElementRef;
+    private tableStateHandlerService = inject(TableStateHandlerService);
+    private utilService = inject(UtilService);
+    private zone = inject(NgZone);
+    private renderer = inject(Renderer2);
+
     @Input() alignment: TableAlignmentOptions;
     @Input() tooltipText: string;
     @Input() isColumnSortingDisabled: boolean = false;
@@ -238,15 +232,14 @@ export class TableHeaderCellComponent
         this.tableStateHandlerService.draggedOverCell.next(undefined);
     }
 
-    constructor(
-        private columnDef: TableColumnDefDirective,
-        private elementRef: ElementRef,
-        private tableStateHandlerService: TableStateHandlerService,
-        private utilService: UtilService,
-        private zone: NgZone,
-        private renderer: Renderer2
-    ) {
+    constructor() {
+        const columnDef = inject(TableColumnDefDirective);
+        const elementRef = inject(ElementRef);
+
         super(columnDef, elementRef);
+        this.columnDef = columnDef;
+        this.elementRef = elementRef;
+
 
         this.tableStateHandlerService.columnType = <ColumnType>{
             columnName: this.columnDef.name,
diff --git a/packages/bits/src/lib/table/table-resizer/table-resizer.directive.ts b/packages/bits/src/lib/table/table-resizer/table-resizer.directive.ts
index dadb8fce2..87a3e3505 100644
--- a/packages/bits/src/lib/table/table-resizer/table-resizer.directive.ts
+++ b/packages/bits/src/lib/table/table-resizer/table-resizer.directive.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Directive,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    Input,
-    Output,
-} from "@angular/core";
+import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, inject } from "@angular/core";
 
 import { TableStateHandlerService } from "../table-state-handler.service";
 /** @ignore */
@@ -39,14 +32,14 @@ export enum TableResizePhase {
     standalone: false,
 })
 export class TableResizerDirective {
+    private tableStateHandlerService = inject(TableStateHandlerService);
+
     @HostBinding("class") hostClasses = "nui-table__resizer";
 
     @Input() columnIndex: number;
 
     @Output() resizerMovement = new EventEmitter<any>();
 
-    constructor(private tableStateHandlerService: TableStateHandlerService) {}
-
     private mouseMoveHandler = (event: MouseEvent) => {
         this.resizerMovement.emit(event.movementX);
     };
diff --git a/packages/bits/src/lib/table/table-row/table-row.component.ts b/packages/bits/src/lib/table/table-row/table-row.component.ts
index bcf7bc3fa..24cab7338 100644
--- a/packages/bits/src/lib/table/table-row/table-row.component.ts
+++ b/packages/bits/src/lib/table/table-row/table-row.component.ts
@@ -26,25 +26,7 @@ import {
     CdkRow,
     CdkRowDef,
 } from "@angular/cdk/table";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Directive,
-    ElementRef,
-    HostBinding,
-    HostListener,
-    Input,
-    IterableDiffers,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    SimpleChanges,
-    TemplateRef,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, HostBinding, HostListener, Input, IterableDiffers, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import _includes from "lodash/includes";
 import { Subject, Subscription } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -77,6 +59,8 @@ export class TableHeaderRowDefDirective
     extends CdkHeaderRowDef
     implements OnInit, OnDestroy, OnChanges
 {
+    private tableStateHandlerService = inject(TableStateHandlerService);
+
     @Input() set nuiHeaderRowDef(value: any) {
         this.columns = value ?? [];
     }
@@ -87,11 +71,10 @@ export class TableHeaderRowDefDirective
 
     public tableColumnsSubscription: Subscription;
 
-    constructor(
-        template: TemplateRef<any>,
-        _differs: IterableDiffers,
-        private tableStateHandlerService: TableStateHandlerService
-    ) {
+    constructor() {
+        const template = inject<TemplateRef<any>>(TemplateRef);
+        const _differs = inject(IterableDiffers);
+
         super(template, _differs);
     }
 
@@ -137,6 +120,8 @@ export class TableRowDefDirective<T>
     extends CdkRowDef<T>
     implements OnInit, OnDestroy
 {
+    private tableStateHandlerService = inject(TableStateHandlerService);
+
     @Input() set nuiRowDefColumns(value: any) {
         this.columns = value ?? [];
     }
@@ -147,11 +132,10 @@ export class TableRowDefDirective<T>
 
     public tableColumnsSubscription: Subscription;
 
-    constructor(
-        template: TemplateRef<any>,
-        _differs: IterableDiffers,
-        private tableStateHandlerService: TableStateHandlerService
-    ) {
+    constructor() {
+        const template = inject<TemplateRef<any>>(TemplateRef);
+        const _differs = inject(IterableDiffers);
+
         super(template, _differs);
     }
 
@@ -191,6 +175,8 @@ export class TableFooterRowDefDirective
     extends CdkFooterRowDef
     implements OnInit, OnDestroy
 {
+    private tableStateHandlerService = inject(TableStateHandlerService);
+
     @Input() set nuiFooterRowDef(value: any) {
         this.columns = value ?? [];
     }
@@ -201,11 +187,10 @@ export class TableFooterRowDefDirective
 
     public tableColumnsSubscription: Subscription;
 
-    constructor(
-        template: TemplateRef<any>,
-        _differs: IterableDiffers,
-        private tableStateHandlerService: TableStateHandlerService
-    ) {
+    constructor() {
+        const template = inject<TemplateRef<any>>(TemplateRef);
+        const _differs = inject(IterableDiffers);
+
         super(template, _differs);
     }
 
@@ -274,6 +259,9 @@ export class TableHeaderRowComponent
     extends CdkHeaderRow
     implements OnInit, OnDestroy, AfterViewInit
 {
+    private tableStateHandlerService = inject(TableStateHandlerService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     @Input() density: RowHeightOptions = "default";
 
     public selectorState: ISelectorState = {
@@ -307,10 +295,7 @@ export class TableHeaderRowComponent
 
     private onDestroy$ = new Subject<void>();
 
-    constructor(
-        private tableStateHandlerService: TableStateHandlerService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {
+    constructor() {
         super();
         this.selectable = this.tableStateHandlerService.selectable;
         this.selectionMode = this.tableStateHandlerService.selectionMode;
@@ -427,6 +412,10 @@ export class TableHeaderRowComponent
     standalone: false,
 })
 export class TableRowComponent extends CdkRow implements OnInit, OnDestroy {
+    private elementRef = inject(ElementRef);
+    private tableStateHandlerService = inject(TableStateHandlerService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     @Input() density: RowHeightOptions = "default";
     @Input() rowObject: Object;
     @Input()
@@ -465,11 +454,7 @@ export class TableRowComponent extends CdkRow implements OnInit, OnDestroy {
 
     private onDestroy$ = new Subject<void>();
 
-    constructor(
-        private elementRef: ElementRef,
-        private tableStateHandlerService: TableStateHandlerService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {
+    constructor() {
         super();
         this.selectable = this.tableStateHandlerService.selectable;
         this.selectionMode = this.tableStateHandlerService.selectionMode;
diff --git a/packages/bits/src/lib/table/table-spec-helpers/table-select-row.component.ts b/packages/bits/src/lib/table/table-spec-helpers/table-select-row.component.ts
index e8baebbf9..765c61c8b 100644
--- a/packages/bits/src/lib/table/table-spec-helpers/table-select-row.component.ts
+++ b/packages/bits/src/lib/table/table-spec-helpers/table-select-row.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, ViewChild } from "@angular/core";
+import { ChangeDetectorRef, Component, ViewChild, inject } from "@angular/core";
 
 import { TableSelectionConfig } from "@nova-ui/bits";
 
@@ -155,6 +155,8 @@ const ELEMENT_DATA: TableSelectModel[] = [
     standalone: false,
 })
 export class TableSelectTestComponent {
+    changeDetection = inject(ChangeDetectorRef);
+
     public displayedColumns = [
         "position",
         "item",
@@ -171,7 +173,6 @@ export class TableSelectTestComponent {
     @ViewChild(TableComponent, { static: true })
     tableComponent: TableComponent<any>;
     positionWidth = 100;
-    constructor(public changeDetection: ChangeDetectorRef) {}
 
     public onSelectorChange(selection: ISelection): void {
         this.selectedItems = selection;
diff --git a/packages/bits/src/lib/table/table-state-handler.service.ts b/packages/bits/src/lib/table/table-state-handler.service.ts
index efd0ab016..14e641ad1 100644
--- a/packages/bits/src/lib/table/table-state-handler.service.ts
+++ b/packages/bits/src/lib/table/table-state-handler.service.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    forwardRef,
-    Inject,
-    Injectable,
-    NgZone,
-    TrackByFunction,
-} from "@angular/core";
+import { Injectable, NgZone, TrackByFunction, inject } from "@angular/core";
 import _includes from "lodash/includes";
 import _isNil from "lodash/isNil";
 import _isNumber from "lodash/isNumber";
@@ -97,6 +91,9 @@ const DEFAULT_TRACK_BY: TrackByFunction<any> = (i, d) => d;
 
 @Injectable()
 export class TableStateHandlerService {
+    protected zone = inject(NgZone);
+    protected selectorService = inject(SelectorService);
+
     public tableParentWidth: number;
     public columnsState = new Subject<string[]>();
     public sortingState = new Subject<ISortedItem>();
@@ -144,12 +141,6 @@ export class TableStateHandlerService {
         desc: "triangle-down",
     };
 
-    constructor(
-        protected zone: NgZone,
-        @Inject(forwardRef(() => SelectorService))
-        protected selectorService: SelectorService
-    ) {}
-
     /**
      * Used to sync directives and components in table to apply additional styles and logic
      */
diff --git a/packages/bits/src/lib/table/table-virtual-scroll/table-sticky-header.directive.ts b/packages/bits/src/lib/table/table-virtual-scroll/table-sticky-header.directive.ts
index c13a10ec4..026b13e1d 100644
--- a/packages/bits/src/lib/table/table-virtual-scroll/table-sticky-header.directive.ts
+++ b/packages/bits/src/lib/table/table-virtual-scroll/table-sticky-header.directive.ts
@@ -22,14 +22,7 @@ import {
     CdkVirtualForOf,
     CdkVirtualScrollViewport,
 } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    ContentChild,
-    Directive,
-    Input,
-    OnDestroy,
-    Renderer2,
-} from "@angular/core";
+import { AfterViewInit, ContentChild, Directive, Input, OnDestroy, Renderer2, inject } from "@angular/core";
 import isBoolean from "lodash/isBoolean";
 import isEmpty from "lodash/isEmpty";
 import { asyncScheduler, EMPTY, merge, Observable, Subject } from "rxjs";
@@ -62,6 +55,9 @@ export enum TableVirtualScrollHeaderPosition {
     standalone: false,
 })
 export class TableStickyHeaderDirective implements AfterViewInit, OnDestroy {
+    private renderer = inject(Renderer2);
+    private viewport = inject(CdkVirtualScrollViewport);
+
     @ContentChild(TableComponent) public table: TableComponent<unknown>;
     @ContentChild(CdkVirtualForOf) public virtualFor: CdkVirtualForOf<unknown>;
 
@@ -104,11 +100,6 @@ export class TableStickyHeaderDirective implements AfterViewInit, OnDestroy {
         return !!this.tableElRef;
     }
 
-    constructor(
-        private renderer: Renderer2,
-        private viewport: CdkVirtualScrollViewport
-    ) {}
-
     public ngAfterViewInit(): void {
         this.assignRequiredProperties();
         // TODO: Find a better way to identify when the table header are rendered properly
diff --git a/packages/bits/src/lib/table/table.component.ts b/packages/bits/src/lib/table/table.component.ts
index d00d45bb5..1508b0b22 100644
--- a/packages/bits/src/lib/table/table.component.ts
+++ b/packages/bits/src/lib/table/table.component.ts
@@ -35,28 +35,7 @@ import {
     StickyPositioningListener,
 } from "@angular/cdk/table";
 import { DOCUMENT } from "@angular/common";
-import {
-    AfterContentInit,
-    AfterViewInit,
-    Attribute,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChild,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Inject,
-    Input,
-    IterableDiffers,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Output,
-    SkipSelf,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, IterableDiffers, OnChanges, OnDestroy, OnInit, Output, ViewEncapsulation, inject, HostAttributeToken } from "@angular/core";
 import _isEqual from "lodash/isEqual";
 import _keys from "lodash/keys";
 import { Subscription } from "rxjs";
@@ -123,6 +102,14 @@ export class TableComponent<T>
     extends CdkTable<T>
     implements OnInit, AfterViewInit, AfterContentInit, OnDestroy, OnChanges
 {
+    protected _differs: IterableDiffers;
+    protected _changeDetectorRef: ChangeDetectorRef;
+    protected _elementRef: ElementRef<any>;
+    protected _dir: Directionality;
+    private tableStateHandlerService = inject(TableStateHandlerService);
+    private document: Document;
+    private platform: Platform;
+
     @Input() reorderable = false;
     @Input() sortable = false;
     @Input() resizable = false;
@@ -164,23 +151,18 @@ export class TableComponent<T>
     @HostBinding("class.nui-table__table-fixed") layoutFixed = false;
     @ContentChild(CdkVirtualForOf) public virtualFor?: CdkVirtualForOf<unknown>;
 
-    constructor(
-        protected _differs: IterableDiffers,
-        protected _changeDetectorRef: ChangeDetectorRef,
-        protected _elementRef: ElementRef<any>,
-        @Attribute("role") role: string,
-        protected _dir: Directionality,
-        private tableStateHandlerService: TableStateHandlerService,
-        @Inject(DOCUMENT) private document: Document,
-        private platform: Platform,
-        @Inject(_VIEW_REPEATER_STRATEGY)
-        viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
-        viewportRuler: ViewportRuler,
-        @Optional()
-        @SkipSelf()
-        @Inject(STICKY_POSITIONING_LISTENER)
-        stickyPositioningListener: StickyPositioningListener
-    ) {
+    constructor() {
+        const _differs = inject(IterableDiffers);
+        const _changeDetectorRef = inject(ChangeDetectorRef);
+        const _elementRef = inject<ElementRef<any>>(ElementRef);
+        const role = inject(new HostAttributeToken("role"));
+        const _dir = inject(Directionality);
+        const document = inject<Document>(DOCUMENT);
+        const platform = inject(Platform);
+        const viewRepeater = inject<_ViewRepeater<T, RenderRow<T>, RowContext<T>>>(_VIEW_REPEATER_STRATEGY);
+        const viewportRuler = inject(ViewportRuler);
+        const stickyPositioningListener = inject<StickyPositioningListener>(STICKY_POSITIONING_LISTENER, { optional: true, skipSelf: true });
+
         // The _ViewRepeater and _CoalescedStyleScheduler parameters were optional before Angular v12.
         // They're included here for compatibility with Angular v12 and later.
         super(
@@ -195,6 +177,13 @@ export class TableComponent<T>
             viewportRuler,
             stickyPositioningListener
         );
+
+        this._differs = _differs;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._elementRef = _elementRef;
+        this._dir = _dir;
+        this.document = document;
+        this.platform = platform;
     }
 
     public getFilterComponents(): IFilteringParticipants {
diff --git a/packages/bits/src/lib/textbox/textbox.component.spec.ts b/packages/bits/src/lib/textbox/textbox.component.spec.ts
index 2d2d7dc48..1e5e2da48 100644
--- a/packages/bits/src/lib/textbox/textbox.component.spec.ts
+++ b/packages/bits/src/lib/textbox/textbox.component.spec.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { CommonModule } from "@angular/common";
-import { Component, NO_ERRORS_SCHEMA, ViewChild } from "@angular/core";
+import { Component, NO_ERRORS_SCHEMA, ViewChild, inject } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
 
@@ -38,13 +38,13 @@ import { SpinnerComponent } from "../spinner/spinner.component";
     standalone: false,
 })
 class TextboxFormComponent {
+    private fb = inject(FormBuilder);
+
     @ViewChild(TextboxComponent) input: TextboxComponent;
 
     public form = this.fb.group({
         input: this.fb.control(""),
     });
-
-    constructor(private fb: FormBuilder) {}
 }
 
 describe("components >", () => {
diff --git a/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.ts b/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.ts
index 476710841..de6ba5064 100644
--- a/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.ts
+++ b/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.ts
@@ -18,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation, inject } from "@angular/core";
 
 import { IQuickPickPresetDictionary } from "../public-api";
 
@@ -39,6 +31,8 @@ import { IQuickPickPresetDictionary } from "../public-api";
     standalone: false,
 })
 export class QuickPickerComponent {
+    changeDetector = inject(ChangeDetectorRef);
+
     @Input() presets: IQuickPickPresetDictionary;
     @Input() pickerTitle: string;
     @Input() presetsTitle: string = $localize`Quick picks`;
@@ -57,8 +51,6 @@ export class QuickPickerComponent {
         return this.presetKeysOrder || Object.keys(this.presets);
     }
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
-
     public selectPreset(key: string): void {
         this.presetSelected.emit(key);
     }
diff --git a/packages/bits/src/lib/time-frame-picker/time-frame-picker.component.ts b/packages/bits/src/lib/time-frame-picker/time-frame-picker.component.ts
index da76a189b..904c5e68d 100644
--- a/packages/bits/src/lib/time-frame-picker/time-frame-picker.component.ts
+++ b/packages/bits/src/lib/time-frame-picker/time-frame-picker.component.ts
@@ -18,17 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation, inject } from "@angular/core";
 import _cloneDeep from "lodash/cloneDeep";
 import { Moment } from "moment/moment";
 import moment from "moment/moment";
@@ -47,6 +37,9 @@ import { TimeframeService } from "./services/timeframe.service";
     standalone: false,
 })
 export class TimeFramePickerComponent implements OnChanges, OnInit {
+    private timeFrameService = inject(TimeframeService);
+    changeDetector = inject(ChangeDetectorRef);
+
     /**  earliest selectable date */
     @Input() minDate: Moment;
     /**  latest selectable date */
@@ -64,12 +57,7 @@ export class TimeFramePickerComponent implements OnChanges, OnInit {
     public isFocused: boolean;
     public modelDefault: any;
 
-    public distanceToEndDate: number; // to keep distance between start and end-date
-
-    constructor(
-        private timeFrameService: TimeframeService,
-        public changeDetector: ChangeDetectorRef
-    ) {}
+    public distanceToEndDate: number;
 
     public ngOnChanges(changes: any): void {
         if (changes["startModel"]) {
diff --git a/packages/bits/src/lib/time-picker/spec-helpers/spec-components.ts b/packages/bits/src/lib/time-picker/spec-helpers/spec-components.ts
index 7f92b5a87..390a66384 100644
--- a/packages/bits/src/lib/time-picker/spec-helpers/spec-components.ts
+++ b/packages/bits/src/lib/time-picker/spec-helpers/spec-components.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, OnInit } from "@angular/core";
+import { OnInit, inject } from "@angular/core";
 import { Component } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { Moment } from "moment/moment";
@@ -47,14 +47,12 @@ import { ToastService } from "../../toast/toast.service";
     standalone: false,
 })
 export class TimePickerReactiveFormTestComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
+    toastService = inject<ToastService>(ToastService);
+
     public time: Moment;
     public myForm: FormGroup;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        @Inject(ToastService) public toastService: ToastService
-    ) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             testTimePicker: this.formBuilder.control(this.time, [
diff --git a/packages/bits/src/lib/time-picker/time-picker.component.ts b/packages/bits/src/lib/time-picker/time-picker.component.ts
index bf3792a42..366a0fd2b 100644
--- a/packages/bits/src/lib/time-picker/time-picker.component.ts
+++ b/packages/bits/src/lib/time-picker/time-picker.component.ts
@@ -19,23 +19,7 @@
 //  THE SOFTWARE.
 
 import { OverlayConfig } from "@angular/cdk/overlay";
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    HostListener,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation, inject } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import _isEmpty from "lodash/isEmpty";
 import _isNil from "lodash/isNil";
@@ -84,6 +68,10 @@ export class TimePickerComponent
         ControlValueAccessor,
         NuiFormFieldControl
 {
+    private elementRef = inject(ElementRef);
+    private keyboardService = inject(TimePickerKeyboardService);
+    private cdr = inject(ChangeDetectorRef);
+
     @ViewChild("date", { static: true }) textbox: TextboxComponent;
     @ViewChild("popupArea", { static: true }) popupArea: ElementRef;
     @ViewChild("toggleRef", { static: true }) containerEl: ElementRef;
@@ -149,12 +137,6 @@ export class TimePickerComponent
     private itemToSelect: any;
     private inputChanged: Subject<string> = new Subject<string>();
 
-    constructor(
-        private elementRef: ElementRef,
-        private keyboardService: TimePickerKeyboardService,
-        private cdr: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.times = this.generateTimeItems(this.timeStep);
         this.times.map((value: Moment) => {
diff --git a/packages/bits/src/lib/toast/toast-container.service.ts b/packages/bits/src/lib/toast/toast-container.service.ts
index 9a854c837..c876fed4f 100644
--- a/packages/bits/src/lib/toast/toast-container.service.ts
+++ b/packages/bits/src/lib/toast/toast-container.service.ts
@@ -18,13 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ApplicationRef,
-    ComponentFactoryResolver,
-    ComponentRef,
-    EmbeddedViewRef,
-    Injectable,
-} from "@angular/core";
+import { ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injectable, inject } from "@angular/core";
 import isNil from "lodash/isNil";
 
 import { ToastInjector } from "./toast-injector";
@@ -40,12 +34,6 @@ interface IToastContainers {
  */
 @Injectable({ providedIn: "root" })
 export class ToastContainerService {
-    constructor(
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private overlayService: OverlayContainerService,
-        private appRef: ApplicationRef
-    ) {}
-
     private static getComponentRootNode(
         componentRef: ComponentRef<any>
     ): HTMLElement {
@@ -55,6 +43,10 @@ export class ToastContainerService {
     private containers: IToastContainers = {};
     private containerElement: HTMLElement;
 
+    private componentFactoryResolver = inject(ComponentFactoryResolver);
+    private overlayService = inject(OverlayContainerService);
+    private appRef = inject(ApplicationRef);
+
     /**
      * Creates container element for position, if container already exists - returns it
      * @return the container element
diff --git a/packages/bits/src/lib/toast/toast.component.ts b/packages/bits/src/lib/toast/toast.component.ts
index 40462b39b..96ddd3c2c 100644
--- a/packages/bits/src/lib/toast/toast.component.ts
+++ b/packages/bits/src/lib/toast/toast.component.ts
@@ -18,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Component,
-    HostBinding,
-    HostListener,
-    NgZone,
-    OnDestroy,
-    ViewEncapsulation,
-} from "@angular/core";
+import { Component, HostBinding, HostListener, NgZone, OnDestroy, ViewEncapsulation, inject } from "@angular/core";
 import { SafeHtml } from "@angular/platform-browser";
 import { Subscription } from "rxjs";
 
@@ -59,6 +52,10 @@ enum ToastState {
     standalone: false,
 })
 export class ToastComponent implements OnDestroy {
+    private toastService = inject(ToastServiceBase);
+    private toastPackage = inject(ToastPackage);
+    private ngZone = inject(NgZone);
+
     public body?: string | SafeHtml | null;
     public title?: string;
     public options: IToastConfig;
@@ -93,11 +90,9 @@ export class ToastComponent implements OnDestroy {
         success: "severity_ok",
     };
 
-    constructor(
-        private toastService: ToastServiceBase,
-        private toastPackage: ToastPackage,
-        private ngZone: NgZone
-    ) {
+    constructor() {
+        const toastPackage = this.toastPackage;
+
         this.title = toastPackage.title;
         this.body = toastPackage.body;
         this.options = toastPackage.config;
diff --git a/packages/bits/src/lib/toast/toast.directive.ts b/packages/bits/src/lib/toast/toast.directive.ts
index c1e80f6ff..bcaddc13e 100644
--- a/packages/bits/src/lib/toast/toast.directive.ts
+++ b/packages/bits/src/lib/toast/toast.directive.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Directive, ElementRef, Input, OnDestroy, OnInit } from "@angular/core";
+import { Directive, ElementRef, Input, OnDestroy, OnInit, inject } from "@angular/core";
 import find from "lodash/find";
 import isNil from "lodash/isNil";
 import { Subscription } from "rxjs";
@@ -42,6 +42,9 @@ import { NotificationService } from "../../services/notification-service";
  * Is used for highlighting elements
  */
 export class ToastDirective implements OnInit, OnDestroy {
+    private elRef = inject(ElementRef);
+    private notificationService = inject(NotificationService);
+
     /**
      * sets model for directive to check whether corresponding element should be highlighted or not
      */
@@ -57,11 +60,6 @@ export class ToastDirective implements OnInit, OnDestroy {
     private isHighlighted: boolean;
     private status: string;
 
-    constructor(
-        private elRef: ElementRef,
-        private notificationService: NotificationService
-    ) {}
-
     public ngOnInit(): void {
         this.notificationSubscription = this.notificationService.subscribe(
             "Highlight",
diff --git a/packages/bits/src/lib/toast/toast.service.ts b/packages/bits/src/lib/toast/toast.service.ts
index 6b1d20225..30e898f72 100644
--- a/packages/bits/src/lib/toast/toast.service.ts
+++ b/packages/bits/src/lib/toast/toast.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, Injector, SecurityContext } from "@angular/core";
+import { Injectable, Injector, SecurityContext, inject } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import _assign from "lodash/assign";
 import _cloneDeep from "lodash/cloneDeep";
@@ -53,6 +53,11 @@ import { NotificationService } from "../../services/notification-service";
  */
 @Injectable({ providedIn: "root" })
 export class ToastService implements IToastService {
+    private notificationService = inject(NotificationService);
+    private toastContainerService = inject(ToastContainerService);
+    private _injector = inject(Injector);
+    private sanitizer = inject(DomSanitizer);
+
     private index = 0;
     private currentlyActive = 0;
     private toasts: IActiveToast[] = [];
@@ -75,12 +80,7 @@ export class ToastService implements IToastService {
     private toastConfig: IToastConfig;
     private itemIdentificator: string | undefined;
 
-    constructor(
-        private notificationService: NotificationService,
-        private toastContainerService: ToastContainerService,
-        private _injector: Injector,
-        private sanitizer: DomSanitizer
-    ) {
+    constructor() {
         this.toastConfig = _assign({}, this.defaultToastConfig);
     }
 
diff --git a/packages/bits/src/lib/toolbar/toolbar.component.ts b/packages/bits/src/lib/toolbar/toolbar.component.ts
index 567bab06e..9cae38e8a 100644
--- a/packages/bits/src/lib/toolbar/toolbar.component.ts
+++ b/packages/bits/src/lib/toolbar/toolbar.component.ts
@@ -18,22 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    ContentChildren,
-    ElementRef,
-    HostBinding,
-    HostListener,
-    Input,
-    NgZone,
-    OnDestroy,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, HostListener, Input, NgZone, OnDestroy, QueryList, ViewChild, ViewChildren, ViewEncapsulation, inject } from "@angular/core";
 import _isEmpty from "lodash/isEmpty";
 import { merge, Subject, Subscription } from "rxjs";
 import { debounceTime, take, takeUntil } from "rxjs/operators";
@@ -72,6 +57,12 @@ import { MenuComponent } from "../menu";
     standalone: false,
 })
 export class ToolbarComponent implements AfterViewInit, OnDestroy {
+    element = inject(ElementRef);
+    private changeDetector = inject(ChangeDetectorRef);
+    private logger = inject(LoggerService);
+    private ngZone = inject(NgZone);
+    private keyboardService = inject(ToolbarKeyboardService);
+
     @ContentChildren(ToolbarGroupComponent)
     public groups: QueryList<ToolbarGroupComponent>;
 
@@ -123,14 +114,6 @@ export class ToolbarComponent implements AfterViewInit, OnDestroy {
     private destructiveItems: any[];
     private destroy$: Subject<void> = new Subject<void>();
 
-    constructor(
-        public element: ElementRef,
-        private changeDetector: ChangeDetectorRef,
-        private logger: LoggerService,
-        private ngZone: NgZone,
-        private keyboardService: ToolbarKeyboardService
-    ) {}
-
     @HostListener("keydown", ["$event"])
     onKeyDown(event: KeyboardEvent): void {
         this.keyboardService.onKeyDown(event);
diff --git a/packages/bits/src/lib/tooltip/tooltip.component.ts b/packages/bits/src/lib/tooltip/tooltip.component.ts
index 220d5a570..3cab5a50d 100644
--- a/packages/bits/src/lib/tooltip/tooltip.component.ts
+++ b/packages/bits/src/lib/tooltip/tooltip.component.ts
@@ -25,16 +25,7 @@ import {
     OverlayConfig,
     ScrollDispatcher,
 } from "@angular/cdk/overlay";
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import { BehaviorSubject, Observable, Subject } from "rxjs";
 import { skip, take, takeUntil } from "rxjs/operators";
 
@@ -77,6 +68,11 @@ const ANIMATION_DELAY = 200; // ms
     standalone: false,
 })
 export class TooltipComponent implements OnDestroy, OnInit {
+    private _changeDetectorRef = inject(ChangeDetectorRef);
+    private scrollDispatcher = inject(ScrollDispatcher);
+    private ngZone = inject(NgZone);
+    protected overlay = inject(Overlay);
+
     /** Message to display in the tooltip */
     public get message(): string {
         return this._message;
@@ -113,13 +109,6 @@ export class TooltipComponent implements OnDestroy, OnInit {
     private readonly destroy$ = new Subject<void>();
     private hiding$ = new BehaviorSubject<boolean>(false);
 
-    constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private scrollDispatcher: ScrollDispatcher,
-        private ngZone: NgZone,
-        protected overlay: Overlay
-    ) {}
-
     public ngOnInit(): void {
         this.updatePopupOverlayConfig();
     }
diff --git a/packages/bits/src/lib/tooltip/tooltip.directive.ts b/packages/bits/src/lib/tooltip/tooltip.directive.ts
index 683cf6063..072411205 100644
--- a/packages/bits/src/lib/tooltip/tooltip.directive.ts
+++ b/packages/bits/src/lib/tooltip/tooltip.directive.ts
@@ -21,14 +21,7 @@
 import { AriaDescriber, FocusMonitor } from "@angular/cdk/a11y";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { hasModifierKey } from "@angular/cdk/keycodes";
-import {
-    Directive,
-    ElementRef,
-    Input,
-    NgZone,
-    OnDestroy,
-    ViewContainerRef,
-} from "@angular/core";
+import { Directive, ElementRef, Input, NgZone, OnDestroy, ViewContainerRef, inject } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -56,6 +49,13 @@ import { OverlayPlacement } from "../overlay/types";
     standalone: false,
 })
 export class TooltipDirective implements OnDestroy {
+    private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+    private _viewContainerRef = inject(ViewContainerRef);
+    private _ngZone = inject(NgZone);
+    private _ariaDescriber = inject(AriaDescriber);
+    private _focusMonitor = inject(FocusMonitor);
+    private overlayPositionService = inject(OverlayPositionService);
+
     _tooltipInstance?: TooltipComponent;
 
     private _position: TooltipPosition = "top";
@@ -132,14 +132,11 @@ export class TooltipDirective implements OnDestroy {
     /** Emits when the component is destroyed. */
     private readonly _destroyed = new Subject<void>();
 
-    constructor(
-        private _elementRef: ElementRef<HTMLElement>,
-        private _viewContainerRef: ViewContainerRef,
-        private _ngZone: NgZone,
-        private _ariaDescriber: AriaDescriber,
-        private _focusMonitor: FocusMonitor,
-        private overlayPositionService: OverlayPositionService
-    ) {
+    constructor() {
+        const _elementRef = this._elementRef;
+        const _ngZone = this._ngZone;
+        const _focusMonitor = this._focusMonitor;
+
         this.overlayPositionService.setOverlayPositionConfig({
             arrowSize: 10,
             arrowPadding: 0,
diff --git a/packages/bits/src/lib/wizard-v2/wizard-footer/wizard-footer.component.ts b/packages/bits/src/lib/wizard-v2/wizard-footer/wizard-footer.component.ts
index 2368c2982..83b7ac173 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-footer/wizard-footer.component.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-footer/wizard-footer.component.ts
@@ -19,15 +19,7 @@
 //  THE SOFTWARE.
 
 import { FocusableOption, FocusMonitor } from "@angular/cdk/a11y";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    Input,
-    OnDestroy,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, ViewEncapsulation, inject } from "@angular/core";
 
 import { WizardStepFooterDirective } from "../wizard-step-footer.directive";
 
@@ -47,14 +39,12 @@ import { WizardStepFooterDirective } from "../wizard-step-footer.directive";
 export class WizardFooterComponent
     implements FocusableOption, AfterViewInit, OnDestroy
 {
+    private _focusMonitor = inject(FocusMonitor);
+    private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     /** Label of the given step. */
     @Input() footer: WizardStepFooterDirective | string;
 
-    constructor(
-        private _focusMonitor: FocusMonitor,
-        private _elementRef: ElementRef<HTMLElement>
-    ) {}
-
     public ngAfterViewInit(): void {
         this._focusMonitor.monitor(this._elementRef, true);
     }
diff --git a/packages/bits/src/lib/wizard-v2/wizard-horizontal/wizard-horizontal.component.ts b/packages/bits/src/lib/wizard-v2/wizard-horizontal/wizard-horizontal.component.ts
index 4584892ca..5f40c1c81 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-horizontal/wizard-horizontal.component.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-horizontal/wizard-horizontal.component.ts
@@ -21,21 +21,7 @@
 import { Directionality } from "@angular/cdk/bidi";
 import { BooleanInput } from "@angular/cdk/coercion";
 import { CdkStepper, StepperSelectionEvent } from "@angular/cdk/stepper";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Input,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation, inject } from "@angular/core";
 import last from "lodash/last";
 import pull from "lodash/pull";
 import without from "lodash/without";
@@ -78,6 +64,12 @@ export class WizardHorizontalComponent
     static ngAcceptInputTypeCompleted: BooleanInput = undefined;
     static ngAcceptInputTypeHasError: BooleanInput = undefined;
 
+    private dir: Directionality;
+    private cdRef: ChangeDetectorRef;
+    private el: ElementRef;
+
+    private zone = inject(NgZone);
+
     public hasOverflow = false;
     public isInResponsiveMode = false;
     public allHeadersWidth: number = 0;
@@ -111,13 +103,16 @@ export class WizardHorizontalComponent
     @ViewChildren("overflowComponent")
     public overflowComponents: QueryList<WizardOverflowComponent>;
 
-    constructor(
-        private dir: Directionality,
-        private cdRef: ChangeDetectorRef,
-        private el: ElementRef,
-        private zone: NgZone
-    ) {
+    constructor() {
+        const dir = inject(Directionality);
+        const cdRef = inject(ChangeDetectorRef);
+        const el = inject(ElementRef);
+
         super(dir, cdRef, el);
+
+        this.dir = dir;
+        this.cdRef = cdRef;
+        this.el = el;
     }
 
     public ngOnInit(): void {
diff --git a/packages/bits/src/lib/wizard-v2/wizard-overflow/wizard-overflow.component.ts b/packages/bits/src/lib/wizard-v2/wizard-overflow/wizard-overflow.component.ts
index 6b38a93a8..636e257d3 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-overflow/wizard-overflow.component.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-overflow/wizard-overflow.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ElementRef, Input, TemplateRef } from "@angular/core";
+import { Component, ElementRef, Input, TemplateRef, inject } from "@angular/core";
 
 /** @ignore */
 @Component({
@@ -28,11 +28,11 @@ import { Component, ElementRef, Input, TemplateRef } from "@angular/core";
     standalone: false,
 })
 export class WizardOverflowComponent {
+    el = inject(ElementRef);
+
     public tooltipText: string = $localize` more steps are available`;
 
     @Input() template: TemplateRef<any>;
     @Input() value: number | string;
     @Input() completed = false;
-
-    constructor(public el: ElementRef) {}
 }
diff --git a/packages/bits/src/lib/wizard-v2/wizard-step-footer.directive.ts b/packages/bits/src/lib/wizard-v2/wizard-step-footer.directive.ts
index 844078982..89e0d38f5 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-step-footer.directive.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-step-footer.directive.ts
@@ -1,29 +1,29 @@
-// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to
-//  deal in the Software without restriction, including without limitation the
-//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-//  sell copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-//  all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-//  THE SOFTWARE.
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Directive, TemplateRef, inject } from "@angular/core";
+
+@Directive({
+    selector: "[nuiWizardStepFooter]",
+    standalone: false,
+})
+export class WizardStepFooterDirective {
    template = inject<TemplateRef<any>>(TemplateRef);
 
-import { Directive, TemplateRef } from "@angular/core";
-
-@Directive({
-    selector: "[nuiWizardStepFooter]",
-    standalone: false,
-})
-export class WizardStepFooterDirective {
-    constructor(public template: TemplateRef<any>) {}
-}
+}
diff --git a/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.ts b/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.ts
index 9c80047ce..84e10da42 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.ts
@@ -20,19 +20,7 @@
 
 import { FocusMonitor } from "@angular/cdk/a11y";
 import { CdkStepHeader, StepState, STEP_STATE } from "@angular/cdk/stepper";
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    Inject,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Optional,
-    SimpleChanges,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges, ViewEncapsulation, inject } from "@angular/core";
 import assign from "lodash/assign";
 
 import {
@@ -63,6 +51,9 @@ export class WizardStepHeaderComponent
     extends CdkStepHeader
     implements AfterViewInit, OnDestroy, OnChanges
 {
+    private _focusMonitor = inject(FocusMonitor);
+    readonly config? = inject<IWizardConfig>(WIZARD_CONFIG, { optional: true });
+
     /** State of the given step. */
     public stepState: StepState;
 
@@ -93,13 +84,9 @@ export class WizardStepHeaderComponent
 
     private wizardConfig: IWizardConfig = { ...WIZARD_CONFIG_DEFAULT };
 
-    constructor(
-        private _focusMonitor: FocusMonitor,
-        _elementRef: ElementRef<HTMLElement>,
-        @Optional()
-        @Inject(WIZARD_CONFIG)
-        public readonly config?: IWizardConfig
-    ) {
+    constructor() {
+        const _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
         super(_elementRef);
 
         if (this.config) {
diff --git a/packages/bits/src/lib/wizard-v2/wizard-step-label.directive.ts b/packages/bits/src/lib/wizard-v2/wizard-step-label.directive.ts
index 894f52ebd..55b09b0c0 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-step-label.directive.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-step-label.directive.ts
@@ -1,29 +1,29 @@
-// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to
-//  deal in the Software without restriction, including without limitation the
-//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-//  sell copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-//  all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-//  THE SOFTWARE.
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Directive, TemplateRef, inject } from "@angular/core";
+
+@Directive({
+    selector: "[nuiWizardStepLabel]",
+    standalone: false,
+})
+export class WizardStepLabelDirective {
    template = inject<TemplateRef<any>>(TemplateRef);
 
-import { Directive, TemplateRef } from "@angular/core";
-
-@Directive({
-    selector: "[nuiWizardStepLabel]",
-    standalone: false,
-})
-export class WizardStepLabelDirective {
-    constructor(public template: TemplateRef<any>) {}
-}
+}
diff --git a/packages/bits/src/lib/wizard-v2/wizard-step/wizard-step.component.ts b/packages/bits/src/lib/wizard-v2/wizard-step/wizard-step.component.ts
index 67dac8c14..1536b7f00 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-step/wizard-step.component.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-step/wizard-step.component.ts
@@ -24,21 +24,7 @@ import {
     StepperOptions,
     STEPPER_GLOBAL_OPTIONS,
 } from "@angular/cdk/stepper";
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChild,
-    forwardRef,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Optional,
-    SkipSelf,
-    TemplateRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnDestroy, OnInit, TemplateRef, ViewEncapsulation, inject } from "@angular/core";
 import { FormControl, FormGroupDirective, NgForm } from "@angular/forms";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -72,6 +58,9 @@ export class WizardStepV2Component
     extends CdkStep
     implements OnInit, OnDestroy, ErrorStateMatcher
 {
+    private changeDetectorRef = inject(ChangeDetectorRef);
+    private _errorStateMatcher = inject(ErrorStateMatcher, { skipSelf: true });
+
     @Input() template?: TemplateRef<any>;
 
     @Input() stepStateConfig: Partial<WizardStepStateConfig>;
@@ -88,14 +77,10 @@ export class WizardStepV2Component
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        private changeDetectorRef: ChangeDetectorRef,
-        @Inject(forwardRef(() => CdkStepper)) stepper: any,
-        @SkipSelf() private _errorStateMatcher: ErrorStateMatcher,
-        @Optional()
-        @Inject(STEPPER_GLOBAL_OPTIONS)
-        stepperOptions?: StepperOptions
-    ) {
+    constructor() {
+        const stepper = inject(CdkStepper);
+        const stepperOptions = inject<StepperOptions>(STEPPER_GLOBAL_OPTIONS, { optional: true });
+
         super(stepper, stepperOptions);
     }
 
diff --git a/packages/bits/src/lib/wizard-v2/wizard-vertical/wizard-vertical.component.ts b/packages/bits/src/lib/wizard-v2/wizard-vertical/wizard-vertical.component.ts
index 9997534f7..50d2579c6 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-vertical/wizard-vertical.component.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-vertical/wizard-vertical.component.ts
@@ -21,15 +21,7 @@
 import { Directionality } from "@angular/cdk/bidi";
 import { BooleanInput } from "@angular/cdk/coercion";
 import { CdkStepper } from "@angular/cdk/stepper";
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Input,
-    Optional,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, ViewEncapsulation, inject } from "@angular/core";
 
 import { WizardDirective } from "../wizard.directive";
 
@@ -67,11 +59,11 @@ export class WizardVerticalComponent extends WizardDirective {
         super.selectedIndex = value;
     }
 
-    constructor(
-        @Optional() dir: Directionality,
-        changeDetectorRef: ChangeDetectorRef,
-        elementRef: ElementRef<HTMLElement>
-    ) {
+    constructor() {
+        const dir = inject(Directionality, { optional: true });
+        const changeDetectorRef = inject(ChangeDetectorRef);
+        const elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
         super(dir, changeDetectorRef, elementRef);
         this["_orientation"] = "vertical";
     }
diff --git a/packages/bits/src/lib/wizard/wizard.component.ts b/packages/bits/src/lib/wizard/wizard.component.ts
index 7f0880649..b1f0664a0 100644
--- a/packages/bits/src/lib/wizard/wizard.component.ts
+++ b/packages/bits/src/lib/wizard/wizard.component.ts
@@ -18,24 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    AfterContentInit,
-    AfterViewChecked,
-    ChangeDetectorRef,
-    Component,
-    ContentChildren,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    ViewChild,
-    ViewChildren,
-    ViewContainerRef,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterContentInit, AfterViewChecked, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation, inject } from "@angular/core";
 import _find from "lodash/find";
 import _findIndex from "lodash/findIndex";
 import _isUndefined from "lodash/isUndefined";
@@ -66,6 +49,10 @@ export class WizardComponent
 {
     private static placeholderFinishText = "Action"; // as a placeholder "Action" does not need to be i18n
 
+    private changeDetector = inject(ChangeDetectorRef);
+    private viewContainerRef = inject(ViewContainerRef);
+    private logger = inject(LoggerService);
+
     @ContentChildren(WizardStepComponent) steps: QueryList<WizardStepComponent>;
     @ViewChildren("stepTitle") stepTitles: QueryList<ElementRef>;
     @ViewChild("container", { read: ViewContainerRef }) dynamicStep: any;
@@ -131,12 +118,6 @@ export class WizardComponent
     private dynamicSubscriptions = new Map();
     private dynamicRefs = new Map();
 
-    constructor(
-        private changeDetector: ChangeDetectorRef,
-        private viewContainerRef: ViewContainerRef,
-        private logger: LoggerService
-    ) {}
-
     public ngOnInit(): void {
         if (this.finishText === WizardComponent.placeholderFinishText) {
             this.logger
diff --git a/packages/bits/src/pipes/unit-conversion.pipe.ts b/packages/bits/src/pipes/unit-conversion.pipe.ts
index 2ca836f91..52b397a2c 100644
--- a/packages/bits/src/pipes/unit-conversion.pipe.ts
+++ b/packages/bits/src/pipes/unit-conversion.pipe.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Pipe, PipeTransform } from "@angular/core";
+import { Pipe, PipeTransform, inject } from "@angular/core";
 
 import {
     unitConversionBases,
@@ -37,7 +37,8 @@ import { UnitConversionService } from "../services/unit-conversion.service";
     standalone: false,
 })
 export class UnitConversionPipe implements PipeTransform {
-    constructor(private unitConversionService: UnitConversionService) {}
+    private unitConversionService = inject(UnitConversionService);
+
 
     /**
      * Gets a string representation of the conversion of a large quantity of a small basic unit to a smaller quantity of a larger unit.
diff --git a/packages/bits/src/services/data-filter.service.ts b/packages/bits/src/services/data-filter.service.ts
index ec6856d9f..afdacb1b8 100644
--- a/packages/bits/src/services/data-filter.service.ts
+++ b/packages/bits/src/services/data-filter.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, OnDestroy, Optional, SkipSelf } from "@angular/core";
+import { Injectable, OnDestroy, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import _omit from "lodash/omit";
 import { Subject, Subscription } from "rxjs";
@@ -37,11 +37,13 @@ import {
  */
 @Injectable()
 export class DataFilterService implements IFilterPub, OnDestroy {
+    parent = inject(DataFilterService, { optional: true, skipSelf: true });
+
     protected _filters: IFilteringParticipants = {};
     public filteringSubject: Subject<void> = new Subject<void>();
     public onDestroy$ = new Subject<void>();
     private destroySubscriptions: Subscription[] = [];
-    constructor(@Optional() @SkipSelf() public parent: DataFilterService) {
+    constructor() {
         if (this.parent) {
             this.parent.filteringSubject
                 .pipe(takeUntil(this.onDestroy$))
diff --git a/packages/bits/src/services/data-source/client-side-data-source.service.ts b/packages/bits/src/services/data-source/client-side-data-source.service.ts
index 3bcb395c8..0ed265a22 100644
--- a/packages/bits/src/services/data-source/client-side-data-source.service.ts
+++ b/packages/bits/src/services/data-source/client-side-data-source.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import _get from "lodash/get";
 import _orderBy from "lodash/orderBy";
@@ -42,6 +42,8 @@ export class ClientSideDataSource<
     T,
     F extends INovaFilters = INovaFilters
 > extends DataSourceService<T, F> {
+    protected searchService = inject(SearchService);
+
     protected _allData: T[];
     protected _searchProps: string[] = [];
 
@@ -49,10 +51,6 @@ export class ClientSideDataSource<
     // and more data is automatically fetched from the backend
     protected virtualScrollData: T[] = [];
 
-    constructor(protected searchService: SearchService) {
-        super();
-    }
-
     public setData(initialData: T[] = []): void {
         this._allData = initialData;
     }
diff --git a/packages/bits/src/services/data-source/local-filtering-data-source.service.ts b/packages/bits/src/services/data-source/local-filtering-data-source.service.ts
index 4979ef210..6308b4a9a 100644
--- a/packages/bits/src/services/data-source/local-filtering-data-source.service.ts
+++ b/packages/bits/src/services/data-source/local-filtering-data-source.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _forEach from "lodash/forEach";
 import _get from "lodash/get";
 import _intersection from "lodash/intersection";
@@ -53,6 +53,8 @@ export class LocalFilteringDataSource<
     T,
     F extends INovaFilters = INovaFilters
 > extends DataSourceService<T, F> {
+    protected searchService = inject(SearchService);
+
     protected _allData: T[];
     protected _allCategoriesResult: IFilteringOutputs = {};
     protected _searchProps: string[] = [];
@@ -61,10 +63,6 @@ export class LocalFilteringDataSource<
     // and more data is automatically fetched from the backend
     protected virtualScrollData: T[] = [];
 
-    constructor(protected searchService: SearchService) {
-        super();
-    }
-
     public setData(initialData: T[] = []): void {
         this._allData = initialData;
     }
diff --git a/packages/bits/src/services/dom-util.service.ts b/packages/bits/src/services/dom-util.service.ts
index 4d010b38a..a95d8d518 100644
--- a/packages/bits/src/services/dom-util.service.ts
+++ b/packages/bits/src/services/dom-util.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 // TODO: Refactor class to use strongly typed values
 /**
@@ -30,7 +30,8 @@ import { Inject, Injectable } from "@angular/core";
  */
 @Injectable({ providedIn: "root" })
 export class DomUtilService {
-    constructor(@Inject(DOCUMENT) private document: any) {}
+    private document = inject(DOCUMENT);
+
 
     /**
      * Gets the closest parent element matching the specified selector
@@ -67,7 +68,7 @@ export class DomUtilService {
         // Get the closest matching element
         for (
             ;
-            elem && elem !== this.document;
+            elem;
             elem = elem.parentElement ?? undefined
         ) {
             if (elem?.matches(selector)) {
diff --git a/packages/bits/src/services/edge-detection.service.ts b/packages/bits/src/services/edge-detection.service.ts
index d7972d628..ccbff656a 100644
--- a/packages/bits/src/services/edge-detection.service.ts
+++ b/packages/bits/src/services/edge-detection.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _capitalize from "lodash/capitalize";
 import _get from "lodash/get";
 import _isNil from "lodash/isNil";
@@ -51,14 +51,14 @@ import {
 
 @Injectable({ providedIn: "root" })
 export class EdgeDetectionService {
+    private domUtilService = inject<DomUtilService>(DomUtilService);
+    private document = inject<Document>(DOCUMENT);
+    private logger = inject(LoggerService);
+
     public edgeDefinerSelector = ".nui-edge-definer";
     public initialEdgeDetectionResult: IEdgeDetectionResult;
 
-    constructor(
-        @Inject(DomUtilService) private domUtilService: DomUtilService,
-        @Inject(DOCUMENT) private document: Document,
-        private logger: LoggerService
-    ) {
+    constructor() {
         this.initialEdgeDetectionResult = {
             placed: {
                 top: false,
diff --git a/packages/bits/src/services/event-bus.service.ts b/packages/bits/src/services/event-bus.service.ts
index 02755a1df..c740c215b 100644
--- a/packages/bits/src/services/event-bus.service.ts
+++ b/packages/bits/src/services/event-bus.service.ts
@@ -18,12 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    Injectable,
-    OnDestroy,
-    Renderer2,
-    RendererFactory2,
-} from "@angular/core";
+import { Injectable, OnDestroy, Renderer2, RendererFactory2, inject } from "@angular/core";
 
 import { EventBus } from "./event-bus";
 import { DOCUMENT_CLICK_EVENT } from "../constants/event.constants";
@@ -37,7 +32,9 @@ export class EventBusService extends EventBus<Event> implements OnDestroy {
     private renderer: Renderer2;
     private listenerUnsubscriber?: () => void;
 
-    constructor(rendererFactory: RendererFactory2) {
+    constructor() {
+        const rendererFactory = inject(RendererFactory2);
+
         super();
         // Angular does not allow to easily use renderer in services. This is a workaround
         this.renderer = rendererFactory.createRenderer(null, null);
diff --git a/packages/bits/src/services/list.service.ts b/packages/bits/src/services/list.service.ts
index 8080cfe6a..3aabdac86 100644
--- a/packages/bits/src/services/list.service.ts
+++ b/packages/bits/src/services/list.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { INovaFilteringOutputs } from "./data-source/public-api";
 import { SelectionModel } from "./public-api";
@@ -28,7 +28,8 @@ import { SelectorService } from "../lib/selector/selector.service";
 
 @Injectable({ providedIn: "root" })
 export class ListService {
-    constructor(private selectorService: SelectorService) {}
+    private selectorService = inject(SelectorService);
+
 
     /**
      * Updates the selector checkbox status, selector menu items, and the repeat selected items.
diff --git a/packages/bits/src/services/log-service.ts b/packages/bits/src/services/log-service.ts
index b8c6179ff..1cb1b8e76 100644
--- a/packages/bits/src/services/log-service.ts
+++ b/packages/bits/src/services/log-service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, Optional } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import noop from "lodash/noop";
 
 import { LogLevel, NuiEnvironment } from "../environment";
@@ -37,7 +37,9 @@ import { LogLevel, NuiEnvironment } from "../environment";
 export class LoggerService {
     private logLevel: LogLevel = LogLevel.warn;
 
-    constructor(@Optional() env?: NuiEnvironment) {
+    constructor() {
+        const env = inject(NuiEnvironment, { optional: true });
+
         if (env && env.logLevel) {
             this.logLevel = env.logLevel;
             this.info("Log level set to " + this.logLevel);
diff --git a/packages/bits/src/services/position.service.ts b/packages/bits/src/services/position.service.ts
index f2bc54988..276066522 100644
--- a/packages/bits/src/services/position.service.ts
+++ b/packages/bits/src/services/position.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import _isNil from "lodash/isNil";
 
 /**
@@ -35,7 +35,8 @@ type OurCSS = CSSStyleDeclaration & { [key: string]: any };
  */
 @Injectable({ providedIn: "root" })
 export class PositionService {
-    constructor(@Inject(DOCUMENT) private document: Document) {}
+    private document = inject<Document>(DOCUMENT);
+
     /**
      * __Description:__
      * Takes two HTMLElements (hostElement and targetElement) and calculates a position for the targetElement.
diff --git a/packages/bits/src/services/search.service.ts b/packages/bits/src/services/search.service.ts
index 1861dd9b0..ffcfdd478 100644
--- a/packages/bits/src/services/search.service.ts
+++ b/packages/bits/src/services/search.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DatePipe } from "@angular/common";
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import has from "lodash/has";
 import isArray from "lodash/isArray";
 import isDate from "lodash/isDate";
@@ -49,27 +49,9 @@ import { ISearchService } from "./public-api";
  */
 @Injectable({ providedIn: "root" })
 export class SearchService implements ISearchService {
-    /**
-     *  __Description :__
-     * Search the value on the items within the given properties.
-     *
-     * __Parameters :__
-     *
-     * {any[]} items Items to search within.
-     *
-     *  {string[]} properties Properties where the search is applied. If no property specified, search is
-     *  applied on all fields.
-     *
-     *  {string|number|date} searchValue The searched value that is used as a string or string fragment. Empty
-     *  string returns the whole array.
-     *
-     *  {string} [dateFormat="mediumDate"] The Angular date format that is used for searching on Date type
-     *  properties.
-     *
-     *  return {any[]} Items resulted after the search.
-     *
-     */
-    constructor(private logger: LoggerService, private datePipe: DatePipe) {}
+    private logger = inject(LoggerService);
+    private datePipe = inject(DatePipe);
+
 
     public search = <T>(
         items: T[],
diff --git a/packages/bits/src/services/theme-switch.service.spec.ts b/packages/bits/src/services/theme-switch.service.spec.ts
index 97245d6c4..2ff146c10 100644
--- a/packages/bits/src/services/theme-switch.service.spec.ts
+++ b/packages/bits/src/services/theme-switch.service.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, NgZone } from "@angular/core";
+import { Component, NgZone, inject as inject_1 } from "@angular/core";
 import { fakeAsync, TestBed, tick } from "@angular/core/testing";
 import { Router, RouterModule, Routes } from "@angular/router";
 
@@ -29,7 +29,9 @@ import { ThemeSwitchService } from "./theme-switch.service";
     standalone: false,
 })
 class FakeComponent {
-    constructor(private zone: NgZone, private router: Router) {}
+    private zone = inject_1(NgZone);
+    private router = inject_1(Router);
+
 
     public navigate(commands: any[]) {
         this.zone.run(async () => this.router.navigate(commands));
diff --git a/packages/bits/src/services/theme-switch.service.ts b/packages/bits/src/services/theme-switch.service.ts
index 9ed4c1a0a..7ac720b16 100644
--- a/packages/bits/src/services/theme-switch.service.ts
+++ b/packages/bits/src/services/theme-switch.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT } from "@angular/common";
-import { Inject, Injectable, Renderer2, RendererFactory2 } from "@angular/core";
+import { Injectable, Renderer2, RendererFactory2, inject } from "@angular/core";
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { BehaviorSubject } from "rxjs";
 import { filter, map } from "rxjs/operators";
@@ -29,6 +29,11 @@ import { filter, map } from "rxjs/operators";
     providedIn: "root",
 })
 export class ThemeSwitchService {
+    private rendererFactory = inject(RendererFactory2);
+    private router = inject(Router);
+    private _route = inject(ActivatedRoute);
+    private document = inject<Document>(DOCUMENT);
+
     /** @ignore BehaviorSubject indicating whether we should display theme switcher */
     public showThemeSwitcherSubject: BehaviorSubject<boolean> =
         new BehaviorSubject<boolean>(false);
@@ -45,12 +50,7 @@ export class ThemeSwitchService {
 
     private renderer: Renderer2;
 
-    constructor(
-        private rendererFactory: RendererFactory2,
-        private router: Router,
-        private _route: ActivatedRoute,
-        @Inject(DOCUMENT) private document: Document
-    ) {
+    constructor() {
         /** Getting renderer instance */
         this.renderer = this.rendererFactory.createRenderer(null, null);
 
diff --git a/packages/bits/src/services/transient-cache-factory.service.ts b/packages/bits/src/services/transient-cache-factory.service.ts
index cbbdf9754..d0127ffff 100644
--- a/packages/bits/src/services/transient-cache-factory.service.ts
+++ b/packages/bits/src/services/transient-cache-factory.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import size from "lodash/size";
 
 import { ITransientCache } from "./public-api";
@@ -32,9 +32,9 @@ export interface IMap<T> {
 /** @ignore */
 @Injectable()
 export class TransientCacheFactory {
-    private cacheMap: IMap<ITransientCache> = {};
+    private utilService = inject(UtilService);
 
-    constructor(private utilService: UtilService) {}
+    private cacheMap: IMap<ITransientCache> = {};
 
     /** @ngdoc method
      *  @name create
diff --git a/packages/bits/src/services/transient-cache.service.ts b/packages/bits/src/services/transient-cache.service.ts
index 2abb4fad3..c874e4d57 100644
--- a/packages/bits/src/services/transient-cache.service.ts
+++ b/packages/bits/src/services/transient-cache.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { timer } from "rxjs";
 import { map } from "rxjs/operators";
 
@@ -32,9 +32,9 @@ interface ICache {
 /** @ignore */
 @Injectable({ providedIn: "root" })
 export class TransientCacheService implements ITransientCache {
-    private cache: ICache = {};
+    private utilService = inject(UtilService);
 
-    constructor(private utilService: UtilService) {}
+    private cache: ICache = {};
 
     public put = async (
         key: string,
diff --git a/packages/bits/src/services/unit-conversion.service.ts b/packages/bits/src/services/unit-conversion.service.ts
index 0418f9c74..807ceba3a 100644
--- a/packages/bits/src/services/unit-conversion.service.ts
+++ b/packages/bits/src/services/unit-conversion.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { LoggerService } from "./log-service";
 import { IUnitConversionResult } from "./public-api";
@@ -35,7 +35,8 @@ import {
  */
 @Injectable({ providedIn: "root" })
 export class UnitConversionService {
-    constructor(private logger: LoggerService) {}
+    private logger = inject(LoggerService);
+
 
     /**
      * Converts a raw value to a larger unit approximation of the value. For example, 1024 B to 1 KB, 12345 Hz to 12.35 kHz, etc.
diff --git a/packages/bits/src/services/util.service.ts b/packages/bits/src/services/util.service.ts
index 41df92dcd..0ccb809a2 100644
--- a/packages/bits/src/services/util.service.ts
+++ b/packages/bits/src/services/util.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { DOCUMENT, isPlatformBrowser } from "@angular/common";
-import { Inject, Injectable, PLATFORM_ID } from "@angular/core";
+import { Injectable, PLATFORM_ID, inject } from "@angular/core";
 import forOwn from "lodash/forOwn";
 import includes from "lodash/includes";
 import isBoolean from "lodash/isBoolean";
@@ -113,6 +113,9 @@ export class UtilService {
         return [];
     }
 
+    private document = inject<Document>(DOCUMENT);
+    private platformId = inject(PLATFORM_ID);
+
     private nextUniqueId = ["0", "0", "0"];
     private browserName?: string;
 
@@ -162,10 +165,7 @@ export class UtilService {
         }
     }
 
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        @Inject(PLATFORM_ID) private platformId: object
-    ) {
+    constructor() {
         this.browserName = this.getBrowser();
     }
 
diff --git a/packages/bits/src/services/virtual-viewport-manager.service.spec.ts b/packages/bits/src/services/virtual-viewport-manager.service.spec.ts
index 964dc1658..e850af63e 100644
--- a/packages/bits/src/services/virtual-viewport-manager.service.spec.ts
+++ b/packages/bits/src/services/virtual-viewport-manager.service.spec.ts
@@ -20,13 +20,7 @@
 
 import { ListRange } from "@angular/cdk/collections";
 import { ScrollingModule } from "@angular/cdk/scrolling";
-import {
-    AfterViewInit,
-    Component,
-    NO_ERRORS_SCHEMA,
-    OnDestroy,
-    ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, NO_ERRORS_SCHEMA, OnDestroy, ViewChild, inject } from "@angular/core";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { BehaviorSubject, Observable, Subject } from "rxjs";
 import {
@@ -69,6 +63,8 @@ import { NuiRepeatModule } from "../lib/repeat/repeat.module";
     standalone: false,
 })
 class ViewportInRepeatComponent implements AfterViewInit, OnDestroy {
+    viewportManager = inject(VirtualViewportManager);
+
     @ViewChild(RepeatComponent) public repeat: RepeatComponent;
     public pageSize: number = 20;
     public items$ = new BehaviorSubject<number[]>([]);
@@ -76,8 +72,6 @@ class ViewportInRepeatComponent implements AfterViewInit, OnDestroy {
     public destroy$ = new Subject<void>();
     public totalItems: number = 132;
 
-    constructor(public viewportManager: VirtualViewportManager) {}
-
     public ngAfterViewInit(): void {
         this.nextPage$ = this.viewportManager
             .setViewport(this.repeat.viewportRef)

From 447ddc6275755a98e23c896a8b27d592b35cab74 Mon Sep 17 00:00:00 2001
From: pavlo poimanov <pavlo.poimanov@solarwinds.com>
Date: Mon, 4 May 2026 14:39:36 +0300
Subject: [PATCH 2/7] chore: migrate constructor injection to inject() across
 all packages

---
 .../color-picker-basic.example.component.ts   |  5 ++-
 .../color-picker-palette.example.component.ts |  5 ++-
 .../color-picker-select.example.component.ts  |  5 ++-
 .../src/components/app/app.component.ts       |  6 ++--
 .../event-sampler/event-sampler.component.ts  |  4 +--
 .../events-basic-example.component.ts         |  5 +--
 ...t-bi-directional-stacked-test.component.ts |  6 ++--
 ...ne-chart-with-2y-axes-example.component.ts |  5 ++-
 .../status-chart.example.component.ts         |  6 ++--
 .../status-legend-chart.example.component.ts  |  6 ++--
 .../status-chart-test.component.ts            |  6 ++--
 .../common/charts-test-harness.component.ts   |  6 ++--
 .../chart-collection-test.component.ts        |  5 ++-
 .../domain/chart-domain.example.component.ts  |  5 +--
 .../chart-status-test.component.ts            |  6 ++--
 .../thresholds-prototype.component.ts         |  5 ++-
 ...e-chart-with-tooltips.example.component.ts |  4 +--
 .../thresholds-basic.example.component.ts     |  5 ++-
 .../thresholds-spark.example.component.ts     |  5 ++-
 .../thresholds-summary.example.component.ts   |  5 ++-
 .../thresholds-summary-test.component.ts      |  5 ++-
 ...mary-with-interval-scale-test.component.ts |  6 ++--
 .../chart-marker/chart-marker.component.ts    |  4 +--
 .../chart-tooltips.component.ts               |  4 +--
 .../src/thresholds/thresholds-service.ts      |  4 +--
 .../src/components/app/app.component.ts       |  4 +--
 .../overview/hero/data/kpi-datasources.ts     | 12 ++-----
 .../hero/data/table/beer-data-source.ts       |  6 ++--
 .../data/table/random-user-data-source.ts     |  6 ++--
 .../docs/overview/overview.module.ts          |  6 ++--
 ...-configurator-section.example.component.ts | 27 ++++-----------
 ...a-source-configurator-example.component.ts | 19 +++--------
 ...nut-content-formatter-example.component.ts | 28 +++++++--------
 .../custom-formatter-example.component.ts     | 24 ++++++-------
 .../widget/custom-widget.component.ts         |  3 +-
 .../data-source-setup.component.ts            | 16 +++------
 .../hello-dashboards-example.component.ts     |  4 +--
 .../persistence-handler-setup.component.ts    | 30 ++++++----------
 .../widget-creation.component.ts              | 34 ++++++-------------
 .../widget-editor-setup.component.ts          | 22 ++++--------
 .../widget-error-handling.component.ts        | 27 ++++-----------
 ...-multi-request-widget-example.component.ts |  6 +++-
 ...-broker-for-all-tiles-example.component.ts | 19 ++++-------
 .../kpi-sync-broker-example.component.ts      | 19 ++++-------
 ...dget-background-color-example.component.ts | 14 +++-----
 ...pi-widget-interactive-example.component.ts | 16 +++------
 .../kpi-widget-example.component.ts           | 16 +++------
 .../risk-score-widget-example.component.ts    | 16 +++------
 .../table-widget-search-example.component.ts  | 14 ++++----
 .../prototypes/data/kpi-datasources.ts        | 12 ++-----
 .../data/proportional-datasources.ts          |  7 ++--
 ...able-data-source-no-data-fields.service.ts |  7 ++--
 .../table/acme-table-data-source.service.ts   |  7 ++--
 .../table/acme-table-data-source2.service.ts  |  2 +-
 .../table/acme-table-data-source3.service.ts  |  2 +-
 .../acme-table-gbooks-data-source.service.ts  |  7 ++--
 .../data/timeseries-data-sources.ts           |  7 ++--
 .../acme-clone-selection.component.ts         |  4 +--
 .../many-widgets/acme-form-submit-handler.ts  |  5 +--
 .../prototypes/many-widgets/datasources.ts    |  7 ++--
 .../acme-clone-selection.component.ts         |  4 +--
 .../prototype-1/acme-form-submit-handler.ts   |  5 +--
 .../acme-clone-selection.component.ts         |  4 +--
 .../table/acme-form-submit-handler.ts         |  5 +--
 .../timeseries/acme-form-submit-handler.ts    |  5 +--
 .../dashboard-test-harness.component.ts       |  4 +--
 .../acme-clone-selection.component.ts         |  4 +--
 .../configurator/acme-form-submit-handler.ts  |  5 +--
 .../configurator/configurator-test.module.ts  |  6 ++--
 .../overview/acme-form-submit-handler.ts      |  5 +--
 .../test/visual/overview/overview.module.ts   |  6 ++--
 .../timeseries/acme-form-submit-handler.ts    |  5 +--
 .../timeseries/timeseries-test.module.ts      |  6 ++--
 .../widget-error/widget-error.component.ts    |  3 +-
 .../pipes/dashboard-unit-conversion-pipe.ts   |  4 +--
 .../list-group-item.component.ts              |  3 +-
 .../components/loading/loading.component.ts   |  4 +--
 .../providers/pizzagna-broadcaster.service.ts |  4 +--
 ...-content-percentage-formatter.component.ts |  3 +-
 .../donut-content-sum-formatter.component.ts  |  4 +--
 .../link-formatter.component.ts               |  5 +--
 .../raw-formatter/raw-formatter.component.ts  |  3 +-
 .../si-units-formatter.component.ts           |  5 +--
 .../status-with-icon-formatter.component.ts   |  4 +--
 .../data-source-error.component.ts            |  3 +-
 .../table-data-source-error.component.ts      |  7 ++--
 .../info-message-configuration.component.ts   |  3 +-
 .../refresh-rate-configurator.component.ts    |  4 ++-
 .../dashwiz/dashwiz-buttons.component.ts      |  3 +-
 .../configurator/pipe/pizzagna-root.pipe.ts   |  4 +--
 .../services/component-registry.service.ts    |  4 +--
 .../lib/services/provider-registry.service.ts |  5 ++-
 .../lib/services/url-interaction.service.ts   |  4 +--
 .../lib/services/widget-removal.service.ts    |  4 +--
 94 files changed, 314 insertions(+), 416 deletions(-)

diff --git a/packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.ts b/packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.ts
index 392562750..db53d35f3 100644
--- a/packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.ts
+++ b/packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 
 const CHART_PALETTE_CS1: string[] = [
@@ -42,11 +42,10 @@ const CHART_PALETTE_CS1: string[] = [
     standalone: false,
 })
 export class ColorPickerBasicExampleComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
     public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
     public colors: string[] = CHART_PALETTE_CS1;
 
-    constructor(private formBuilder: FormBuilder) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             backgroundColor: [this.colors[0]],
diff --git a/packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.ts b/packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.ts
index bb96c3fd6..09eeb18fb 100644
--- a/packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.ts
+++ b/packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 
 import {
@@ -33,13 +33,12 @@ import {
     standalone: false,
 })
 export class ColorPickerPaletteExampleComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
     public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
     public colorPalette: IPaletteColor[] = Array.from(
         HTML_COLORS.entries()
     ).map(([label, color]) => ({ label, color }));
 
-    constructor(private formBuilder: FormBuilder) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             backgroundColor: [""],
diff --git a/packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.ts b/packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.ts
index 7be36fe28..d228f335a 100644
--- a/packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.ts
+++ b/packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 
 import {
@@ -33,13 +33,12 @@ import {
     standalone: false,
 })
 export class ColorPickerSelectExampleComponent implements OnInit {
+    private formBuilder = inject(FormBuilder);
     public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
     public colorPalette: IPaletteColor[] = Array.from(
         HTML_COLORS.entries()
     ).map(([label, color]) => ({ label, color }));
 
-    constructor(private formBuilder: FormBuilder) {}
-
     public ngOnInit(): void {
         this.myForm = this.formBuilder.group({
             backgroundColor: [""],
diff --git a/packages/charts/examples/src/components/app/app.component.ts b/packages/charts/examples/src/components/app/app.component.ts
index 5e90fe464..613fc522e 100644
--- a/packages/charts/examples/src/components/app/app.component.ts
+++ b/packages/charts/examples/src/components/app/app.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewEncapsulation } from "@angular/core";
+import { Component, inject, ViewEncapsulation } from "@angular/core";
 
 import { ThemeSwitchService } from "@nova-ui/bits";
 
@@ -30,7 +30,9 @@ import { ThemeSwitchService } from "@nova-ui/bits";
     standalone: false,
 })
 export class AppComponent {
-    constructor(public themeSwitcherService: ThemeSwitchService) {
+    public themeSwitcherService = inject(ThemeSwitchService);
+
+    constructor() {
         this.themeSwitcherService.withRefreshRoute = true;
     }
 }
diff --git a/packages/charts/examples/src/components/demo/advanced-usage/events/event-sampler/event-sampler.component.ts b/packages/charts/examples/src/components/demo/advanced-usage/events/event-sampler/event-sampler.component.ts
index ccb23fbd5..cd28d5769 100644
--- a/packages/charts/examples/src/components/demo/advanced-usage/events/event-sampler/event-sampler.component.ts
+++ b/packages/charts/examples/src/components/demo/advanced-usage/events/event-sampler/event-sampler.component.ts
@@ -22,6 +22,7 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    inject,
     OnInit,
     ViewEncapsulation,
 } from "@angular/core";
@@ -206,6 +207,7 @@ export class EventSamplerComponent implements OnInit {
     private renderer: Renderer<IAccessors>;
     private scales: Scales;
     private seriesProcessor?: SeriesProcessor<IBarAccessors> | SeriesProcessor;
+    private changeDetector = inject(ChangeDetectorRef);
 
     public onEventFilterChange(selectedEvent: IEventInfo): void {
         this.selectedEvent = selectedEvent;
@@ -218,8 +220,6 @@ export class EventSamplerComponent implements OnInit {
         this.selectedInteractionType = type;
     }
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         this.valueAccessor = (i, j) => this.values[j][i];
         this.palette = new ChartPalette(
diff --git a/packages/charts/examples/src/components/demo/advanced-usage/events/events-basic/events-basic-example.component.ts b/packages/charts/examples/src/components/demo/advanced-usage/events/events-basic/events-basic-example.component.ts
index a6998f7d5..c4e13490a 100644
--- a/packages/charts/examples/src/components/demo/advanced-usage/events/events-basic/events-basic-example.component.ts
+++ b/packages/charts/examples/src/components/demo/advanced-usage/events/events-basic/events-basic-example.component.ts
@@ -22,6 +22,7 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    inject,
     OnInit,
 } from "@angular/core";
 import moment from "moment/moment";
@@ -47,11 +48,11 @@ import {
     standalone: false,
 })
 export class EventsBasicExampleComponent implements OnInit {
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
     public chart = new Chart(new XYGrid());
     public payload: string;
 
-    constructor(private changeDetectorRef: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         const accessors = new LineAccessors();
         const renderer = new LineRenderer();
diff --git a/packages/charts/examples/src/components/demo/chart-types/area/area-chart-bi-directional-stacked-test/area-chart-bi-directional-stacked-test.component.ts b/packages/charts/examples/src/components/demo/chart-types/area/area-chart-bi-directional-stacked-test/area-chart-bi-directional-stacked-test.component.ts
index a54360ff9..a33511a83 100644
--- a/packages/charts/examples/src/components/demo/chart-types/area/area-chart-bi-directional-stacked-test/area-chart-bi-directional-stacked-test.component.ts
+++ b/packages/charts/examples/src/components/demo/chart-types/area/area-chart-bi-directional-stacked-test/area-chart-bi-directional-stacked-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, inject, Input, OnInit } from "@angular/core";
 import moment from "moment/moment";
 
 import {
@@ -45,6 +45,8 @@ import {
     standalone: false,
 })
 export class AreaChartBiDirectionalStackedTestComponent implements OnInit {
+    public changeDetector = inject(ChangeDetectorRef);
+
     @Input()
     public inverted = false; // cave mode!
 
@@ -54,8 +56,6 @@ export class AreaChartBiDirectionalStackedTestComponent implements OnInit {
     public chartBottom: Chart;
     public chartAssistBottom: ChartAssist;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         // areaGrid returns an XYGrid configured for displaying an area chart's axes and other grid elements.
         this.chartTop = new Chart(new XYGrid(topChartConfig()), {
diff --git a/packages/charts/examples/src/components/demo/chart-types/line/line-chart-with-2y-axes/line-chart-with-2y-axes-example.component.ts b/packages/charts/examples/src/components/demo/chart-types/line/line-chart-with-2y-axes/line-chart-with-2y-axes-example.component.ts
index ff8277ca5..2b93ef865 100644
--- a/packages/charts/examples/src/components/demo/chart-types/line/line-chart-with-2y-axes/line-chart-with-2y-axes-example.component.ts
+++ b/packages/charts/examples/src/components/demo/chart-types/line/line-chart-with-2y-axes/line-chart-with-2y-axes-example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, inject, OnDestroy, OnInit } from "@angular/core";
 import moment from "moment/moment";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -52,6 +52,7 @@ export class LineChartWith2YAxesExampleComponent implements OnInit, OnDestroy {
     public axesStyles: IAxesStyleChangeEventPayload;
 
     private readonly destroy$ = new Subject<void>();
+    public changeDetector = inject(ChangeDetectorRef);
 
     public get leftAxisStyles(): Record<string, any> {
         return this.axesStyles?.[this.yLeftScale.id] ?? {};
@@ -61,8 +62,6 @@ export class LineChartWith2YAxesExampleComponent implements OnInit, OnDestroy {
         return this.axesStyles?.[this.yRightScale.id] ?? {};
     }
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         const xScale = new TimeScale();
         this.yLeftScale = new LinearScale();
diff --git a/packages/charts/examples/src/components/demo/chart-types/status/status-chart/status-chart.example.component.ts b/packages/charts/examples/src/components/demo/chart-types/status/status-chart/status-chart.example.component.ts
index 2654c3bbd..e9e18c45a 100644
--- a/packages/charts/examples/src/components/demo/chart-types/status/status-chart/status-chart.example.component.ts
+++ b/packages/charts/examples/src/components/demo/chart-types/status/status-chart/status-chart.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import moment from "moment/moment";
 
 import { IconService } from "@nova-ui/bits";
@@ -58,12 +58,12 @@ enum Status {
     standalone: false,
 })
 export class StatusChartExampleComponent implements OnInit {
+    private iconService = inject(IconService);
+
     public chart = new Chart(new XYGrid(new BarStatusGridConfig()));
     public tooltipsPlugin: BarTooltipsPlugin;
     public tooltipsStatusMarkers: IValueProvider<SvgMarker>;
 
-    constructor(private iconService: IconService) {}
-
     public ngOnInit(): void {
         // Configure the tooltips plugin (if needed)
         this.tooltipsStatusMarkers = createTooltipMarkerProvider(
diff --git a/packages/charts/examples/src/components/demo/chart-types/status/status-legend-chart/status-legend-chart.example.component.ts b/packages/charts/examples/src/components/demo/chart-types/status/status-legend-chart/status-legend-chart.example.component.ts
index b57e1704e..3f307e0bd 100644
--- a/packages/charts/examples/src/components/demo/chart-types/status/status-legend-chart/status-legend-chart.example.component.ts
+++ b/packages/charts/examples/src/components/demo/chart-types/status/status-legend-chart/status-legend-chart.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 
@@ -58,14 +58,14 @@ const OPACITY_BACKGROUND_EMPHASIZED = 0.4;
     standalone: false,
 })
 export class StatusLegendChartExampleComponent implements OnInit {
+    private iconService = inject(IconService);
+
     public chartAssist: ChartAssist;
 
     public legendLabel$: Observable<any>;
     public legendIcon$: Observable<any>;
     public legendBackground$: Observable<any>;
 
-    constructor(private iconService: IconService) {}
-
     public ngOnInit(): void {
         const chart = new Chart(new XYGrid(new BarStatusGridConfig()));
         this.chartAssist = new ChartAssist(chart);
diff --git a/packages/charts/examples/src/components/demo/chart-types/status/status-test/status-chart-test.component.ts b/packages/charts/examples/src/components/demo/chart-types/status/status-test/status-chart-test.component.ts
index 2efe0bf4b..d6af879da 100644
--- a/packages/charts/examples/src/components/demo/chart-types/status/status-test/status-chart-test.component.ts
+++ b/packages/charts/examples/src/components/demo/chart-types/status/status-test/status-chart-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import moment from "moment/moment";
 
 import { IconService } from "@nova-ui/bits";
@@ -58,12 +58,12 @@ enum Status {
     standalone: false,
 })
 export class StatusChartTestComponent implements OnInit {
+    private iconService = inject(IconService);
+
     public chart = new Chart(new XYGrid(new BarStatusGridConfig()));
     public tooltipsPlugin = new BarTooltipsPlugin({ horizontal: true });
     public statusMarkers: IValueProvider<SvgMarker>;
 
-    constructor(private iconService: IconService) {}
-
     public ngOnInit(): void {
         this.statusMarkers = createMarkerProvider(this.iconService);
         this.chart.addPlugin(this.tooltipsPlugin);
diff --git a/packages/charts/examples/src/components/demo/common/charts-test-harness.component.ts b/packages/charts/examples/src/components/demo/common/charts-test-harness.component.ts
index d3d01b83a..dfcd7330d 100644
--- a/packages/charts/examples/src/components/demo/common/charts-test-harness.component.ts
+++ b/packages/charts/examples/src/components/demo/common/charts-test-harness.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnDestroy } from "@angular/core";
+import { Component, inject, OnDestroy } from "@angular/core";
 
 import { ThemeSwitchService } from "@nova-ui/bits";
 
@@ -29,9 +29,11 @@ import { ThemeSwitchService } from "@nova-ui/bits";
     standalone: false,
 })
 export class ChartsTestHarnessComponent implements OnDestroy {
+    public themeSwitcher = inject(ThemeSwitchService);
+
     public originalWithRefreshRoute: boolean;
 
-    constructor(public themeSwitcher: ThemeSwitchService) {
+    constructor() {
         // disable route refreshing because the theme service currently always reverts to
         // the light theme on route refresh unless route.data.showThemeSwitcher is 'true'
         this.originalWithRefreshRoute = this.themeSwitcher.withRefreshRoute;
diff --git a/packages/charts/examples/src/components/demo/development/chart-collection/chart-collection-test/chart-collection-test.component.ts b/packages/charts/examples/src/components/demo/development/chart-collection/chart-collection-test/chart-collection-test.component.ts
index 5bf43293e..0b4fcdf2b 100644
--- a/packages/charts/examples/src/components/demo/development/chart-collection/chart-collection-test/chart-collection-test.component.ts
+++ b/packages/charts/examples/src/components/demo/development/chart-collection/chart-collection-test/chart-collection-test.component.ts
@@ -22,6 +22,7 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
+    inject,
     OnInit,
     QueryList,
     ViewChildren,
@@ -63,12 +64,14 @@ interface IMyChart {
     standalone: false,
 })
 export class ChartCollectionTestComponent implements OnInit, AfterViewInit {
+    private changeDetection = inject(ChangeDetectorRef);
+
     @ViewChildren(ChartComponent) charts: QueryList<ChartComponent>;
 
     public myCharts: IMyChart[] = [];
     private chartCount = 2;
 
-    constructor(private changeDetection: ChangeDetectorRef) {
+    constructor() {
         for (let i = 0; i < this.chartCount; i++) {
             const chart = new Chart(new XYGrid());
 
diff --git a/packages/charts/examples/src/components/demo/development/core/domain/chart-domain.example.component.ts b/packages/charts/examples/src/components/demo/development/core/domain/chart-domain.example.component.ts
index 494552536..31b695cca 100644
--- a/packages/charts/examples/src/components/demo/development/core/domain/chart-domain.example.component.ts
+++ b/packages/charts/examples/src/components/demo/development/core/domain/chart-domain.example.component.ts
@@ -22,6 +22,7 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
+    inject,
     OnInit,
     QueryList,
     ViewChildren,
@@ -58,6 +59,8 @@ import { DataGenerator } from "../../../../../data-generator";
     standalone: false,
 })
 export class ChartDomainExampleComponent implements OnInit, AfterViewInit {
+    private changeDetector = inject(ChangeDetectorRef);
+
     @ViewChildren(ChartComponent) chartComponents: QueryList<ChartComponent>;
 
     public dataRenderer: LineRenderer;
@@ -68,8 +71,6 @@ export class ChartDomainExampleComponent implements OnInit, AfterViewInit {
 
     public chartAssists: ChartAssist[] = [];
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public ngOnInit(): void {
         const numCharts = 3;
         for (let i = 0; i < numCharts; ++i) {
diff --git a/packages/charts/examples/src/components/demo/development/status/status-test/chart-status-test.component.ts b/packages/charts/examples/src/components/demo/development/status/status-test/chart-status-test.component.ts
index 757a1b214..d19fed85c 100644
--- a/packages/charts/examples/src/components/demo/development/status/status-test/chart-status-test.component.ts
+++ b/packages/charts/examples/src/components/demo/development/status/status-test/chart-status-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { AfterViewInit, Component } from "@angular/core";
+import { AfterViewInit, Component, inject } from "@angular/core";
 import range from "lodash/range";
 import moment from "moment/moment";
 
@@ -54,6 +54,8 @@ enum Status {
     standalone: false,
 })
 export class ChartStatusTestComponent implements AfterViewInit {
+    private iconService = inject(IconService);
+
     public chartThreshold = new Chart(new XYGrid(new BarStatusGridConfig()));
     public chartBand = new Chart(new XYGrid(new BarStatusGridConfig()));
 
@@ -62,7 +64,7 @@ export class ChartStatusTestComponent implements AfterViewInit {
     private thresholdScales: { x: TimeScale; y: BandScale };
     private bandScales: { x: TimeIntervalScale; y: BandScale };
 
-    constructor(private iconService: IconService) {
+    constructor() {
         const getStatusMarker = (status: string) =>
             new SvgMarker(this.iconService.getStatusIcon(status));
 
diff --git a/packages/charts/examples/src/components/demo/development/thresholds/thresholds-prototype.component.ts b/packages/charts/examples/src/components/demo/development/thresholds/thresholds-prototype.component.ts
index 4002156c5..a11293e05 100644
--- a/packages/charts/examples/src/components/demo/development/thresholds/thresholds-prototype.component.ts
+++ b/packages/charts/examples/src/components/demo/development/thresholds/thresholds-prototype.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import moment, { duration } from "moment/moment";
 
 import {
@@ -67,8 +67,7 @@ export class ThresholdsPrototypeComponent implements OnInit {
             [Status.Warning]: CHART_PALETTE_CS_S_EXTENDED[4],
         })
     );
-
-    constructor(private thresholdsService: ThresholdsService) {}
+    private thresholdsService = inject(ThresholdsService);
 
     public ngOnInit(): void {
         const accessors = new LineAccessors(
diff --git a/packages/charts/examples/src/components/demo/plugins/tooltips/line-chart/line-chart-with-tooltips.example.component.ts b/packages/charts/examples/src/components/demo/plugins/tooltips/line-chart/line-chart-with-tooltips.example.component.ts
index ddbddf032..23bec912c 100644
--- a/packages/charts/examples/src/components/demo/plugins/tooltips/line-chart/line-chart-with-tooltips.example.component.ts
+++ b/packages/charts/examples/src/components/demo/plugins/tooltips/line-chart/line-chart-with-tooltips.example.component.ts
@@ -22,6 +22,7 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    inject,
     OnInit,
 } from "@angular/core";
 import moment from "moment/moment";
@@ -50,8 +51,7 @@ export class LineChartWithTooltipsExampleComponent implements OnInit {
     public chart = new Chart(new XYGrid());
     public chartAssist = new ChartAssist(this.chart);
     public tooltipsPlugin = new ChartTooltipsPlugin();
-
-    constructor(private changeDetector: ChangeDetectorRef) {}
+    private changeDetector = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         // this is necessary to make the chart work in OnPush change detection mode
diff --git a/packages/charts/examples/src/components/demo/thresholds/thresholds-basic/thresholds-basic.example.component.ts b/packages/charts/examples/src/components/demo/thresholds/thresholds-basic/thresholds-basic.example.component.ts
index 93fe38ad3..0e8c11189 100644
--- a/packages/charts/examples/src/components/demo/thresholds/thresholds-basic/thresholds-basic.example.component.ts
+++ b/packages/charts/examples/src/components/demo/thresholds/thresholds-basic/thresholds-basic.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import moment, { duration } from "moment/moment";
 
 import {
@@ -63,8 +63,7 @@ export class ThresholdsBasicExampleComponent implements OnInit {
             [Status.Warning]: CHART_PALETTE_CS_S_EXTENDED[4],
         })
     );
-
-    constructor(private thresholdsService: ThresholdsService) {}
+    private thresholdsService = inject(ThresholdsService);
 
     public ngOnInit(): void {
         const accessors = new LineAccessors(
diff --git a/packages/charts/examples/src/components/demo/thresholds/thresholds-spark/thresholds-spark.example.component.ts b/packages/charts/examples/src/components/demo/thresholds/thresholds-spark/thresholds-spark.example.component.ts
index 13c6d7660..6db8419cf 100644
--- a/packages/charts/examples/src/components/demo/thresholds/thresholds-spark/thresholds-spark.example.component.ts
+++ b/packages/charts/examples/src/components/demo/thresholds/thresholds-spark/thresholds-spark.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import { rgb } from "d3-color";
 import get from "lodash/get";
 import moment, { Duration, Moment } from "moment/moment";
@@ -70,8 +70,7 @@ export class ThresholdsSparkExampleComponent implements OnInit {
     private renderer: LineRenderer;
     private accessors: LineAccessors;
     private xScale = new TimeScale();
-
-    constructor(private thresholdsService: ThresholdsService) {}
+    private thresholdsService = inject(ThresholdsService);
 
     public ngOnInit(): void {
         this.chartAssist = new SparkChartAssist();
diff --git a/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-example/thresholds-summary.example.component.ts b/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-example/thresholds-summary.example.component.ts
index eb234af85..3e1610fd5 100644
--- a/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-example/thresholds-summary.example.component.ts
+++ b/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-example/thresholds-summary.example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import moment from "moment/moment";
 
@@ -66,8 +66,7 @@ export class ThresholdsSummaryExampleComponent implements OnInit {
     public summaryChartAssist: ChartAssist;
 
     private thresholdsPalette: ChartPalette;
-
-    constructor(private thresholdsService: ThresholdsService) {}
+    private thresholdsService = inject(ThresholdsService);
 
     public ngOnInit(): void {
         // When instantiating the charts, use the provided grid configuration functions for the main grid and summary grid
diff --git a/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-test/thresholds-summary-test.component.ts b/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-test/thresholds-summary-test.component.ts
index 24d10910d..f9cdceced 100644
--- a/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-test/thresholds-summary-test.component.ts
+++ b/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-test/thresholds-summary-test.component.ts
@@ -20,6 +20,7 @@
 
 import {
     Component,
+    inject,
     Input,
     OnChanges,
     OnInit,
@@ -64,6 +65,8 @@ import {
     standalone: false,
 })
 export class ThresholdsSummaryTestComponent implements OnChanges, OnInit {
+    private thresholdsService = inject(ThresholdsService);
+
     @Input() data: Record<string, number[]>;
     @Input() zones: ISimpleThresholdZone[];
     @Input() startDate: Moment;
@@ -85,7 +88,7 @@ export class ThresholdsSummaryTestComponent implements OnChanges, OnInit {
     private backgroundScales: IXYScales;
     private summaryScales: IXYScales;
 
-    constructor(private thresholdsService: ThresholdsService) {
+    constructor() {
         this.scales = {
             x: new TimeScale(),
             y: new LinearScale(),
diff --git a/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-with-interval-scale-test/thresholds-summary-with-interval-scale-test.component.ts b/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-with-interval-scale-test/thresholds-summary-with-interval-scale-test.component.ts
index f1a24f235..a1061a331 100644
--- a/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-with-interval-scale-test/thresholds-summary-with-interval-scale-test.component.ts
+++ b/packages/charts/examples/src/components/demo/thresholds/thresholds-summary/thresholds-summary-with-interval-scale-test/thresholds-summary-with-interval-scale-test.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import moment, { duration } from "moment/moment";
 
@@ -56,6 +56,8 @@ import {
     standalone: false,
 })
 export class ThresholdsSummaryWithIntervalScaleTestComponent implements OnInit {
+    private thresholdsService = inject(ThresholdsService);
+
     public zones = [
         { status: "error", start: 80 },
         { status: "error", start: -100, end: 10 },
@@ -81,7 +83,7 @@ export class ThresholdsSummaryWithIntervalScaleTestComponent implements OnInit {
     private backgroundScales: IXYScales;
     private summaryScales: IXYScales;
 
-    constructor(private thresholdsService: ThresholdsService) {
+    constructor() {
         this.scales = {
             x: new TimeIntervalScale(duration(5, "minutes")),
             y: new LinearScale(),
diff --git a/packages/charts/src/chart-marker/chart-marker.component.ts b/packages/charts/src/chart-marker/chart-marker.component.ts
index 74735a188..259b32c44 100644
--- a/packages/charts/src/chart-marker/chart-marker.component.ts
+++ b/packages/charts/src/chart-marker/chart-marker.component.ts
@@ -28,6 +28,7 @@ import {
     OnDestroy,
     SimpleChanges,
     ViewChild,
+    inject,
 } from "@angular/core";
 import isFunction from "lodash/isFunction";
 import { BehaviorSubject } from "rxjs";
@@ -57,10 +58,9 @@ export class ChartMarkerComponent
     public height: string = "10px"; // size needs to be defined by default to prevent initial svg element from being huge
     public width: string = "10px"; // same here
 
+    private changeDetector = inject(ChangeDetectorRef);
     private svg = new BehaviorSubject<string>("");
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public ngAfterViewInit(): void {
         this.svg.subscribe((svg: string) => {
             this.renderMarkerSvg(svg);
diff --git a/packages/charts/src/chart-tooltips/chart-tooltips.component.ts b/packages/charts/src/chart-tooltips/chart-tooltips.component.ts
index f4e89b4e2..6088b7c97 100644
--- a/packages/charts/src/chart-tooltips/chart-tooltips.component.ts
+++ b/packages/charts/src/chart-tooltips/chart-tooltips.component.ts
@@ -28,6 +28,7 @@ import {
     QueryList,
     SimpleChanges,
     ViewChildren,
+    inject,
 } from "@angular/core";
 import {
     forceCollide,
@@ -74,14 +75,13 @@ export class ChartTooltipsComponent implements OnChanges, OnDestroy {
     private tooltipDirectivesIndex: {
         [seriesId: string]: ChartTooltipDirective;
     } = {};
+    private changeDetector = inject(ChangeDetectorRef);
     private closePending = false;
     private isOpen = false;
     private openTimeout: number;
     private collisionTimeout: number;
     private closeTimeout: number;
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (!(changes["plugin"] && changes["plugin"].currentValue)) {
             return;
diff --git a/packages/charts/src/thresholds/thresholds-service.ts b/packages/charts/src/thresholds/thresholds-service.ts
index 659f32375..9dd0ecf12 100644
--- a/packages/charts/src/thresholds/thresholds-service.ts
+++ b/packages/charts/src/thresholds/thresholds-service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { Numeric } from "d3-array";
 import cloneDeep from "lodash/cloneDeep";
 import sortBy from "lodash/sortBy";
@@ -64,7 +64,7 @@ import {
 export class ThresholdsService {
     public static SERIES_ID_SUFFIX = "__thresholds-background";
 
-    constructor(private loggerService: LoggerService) {}
+    private loggerService = inject(LoggerService);
 
     /**
      * Calculates the threshold "statuses" - from/to and what zone we're in. It is the first step that is required before the usage of other methods. Having
diff --git a/packages/dashboards/examples/src/components/app/app.component.ts b/packages/dashboards/examples/src/components/app/app.component.ts
index 6c3ce2cef..b01f8b8bc 100644
--- a/packages/dashboards/examples/src/components/app/app.component.ts
+++ b/packages/dashboards/examples/src/components/app/app.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, ViewEncapsulation } from "@angular/core";
+import { Component, inject, ViewEncapsulation } from "@angular/core";
 
 import { ThemeSwitchService } from "@nova-ui/bits";
 
@@ -30,5 +30,5 @@ import { ThemeSwitchService } from "@nova-ui/bits";
     standalone: false,
 })
 export class AppComponent {
-    constructor(public themeSwitcher: ThemeSwitchService) {}
+    public themeSwitcher = inject(ThemeSwitchService);
 }
diff --git a/packages/dashboards/examples/src/components/docs/overview/hero/data/kpi-datasources.ts b/packages/dashboards/examples/src/components/docs/overview/hero/data/kpi-datasources.ts
index 2b707eac2..de701d509 100644
--- a/packages/dashboards/examples/src/components/docs/overview/hero/data/kpi-datasources.ts
+++ b/packages/dashboards/examples/src/components/docs/overview/hero/data/kpi-datasources.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
+import { inject, Injectable, OnDestroy } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
 
@@ -36,10 +36,7 @@ export class HarryPotterAverageRatingDataSource
     public static providerId = "HarryPotterAverageRatingDataSource";
 
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -81,10 +78,7 @@ export class HarryPotterRatingsCountDataSource
     public static providerId = "HarryPotterRatingsCountDataSource";
 
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
diff --git a/packages/dashboards/examples/src/components/docs/overview/hero/data/table/beer-data-source.ts b/packages/dashboards/examples/src/components/docs/overview/hero/data/table/beer-data-source.ts
index b82c2cadf..14815363e 100644
--- a/packages/dashboards/examples/src/components/docs/overview/hero/data/table/beer-data-source.ts
+++ b/packages/dashboards/examples/src/components/docs/overview/hero/data/table/beer-data-source.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import { BehaviorSubject } from "rxjs";
@@ -57,9 +57,7 @@ export class BeerDataSource extends DataSourceService<IBrewInfo> {
         { id: "brewers_tips", label: "Brewer's Tips", dataType: "string" },
     ];
 
-    constructor(private logger: LoggerService) {
-        super();
-    }
+    private logger = inject(LoggerService);
 
     public async getFilteredData(
         filters: INovaFilters
diff --git a/packages/dashboards/examples/src/components/docs/overview/hero/data/table/random-user-data-source.ts b/packages/dashboards/examples/src/components/docs/overview/hero/data/table/random-user-data-source.ts
index 070f9b020..b22eb074e 100644
--- a/packages/dashboards/examples/src/components/docs/overview/hero/data/table/random-user-data-source.ts
+++ b/packages/dashboards/examples/src/components/docs/overview/hero/data/table/random-user-data-source.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import { BehaviorSubject } from "rxjs";
@@ -72,9 +72,7 @@ export class RandomUserDataSource extends DataSourceService<IRandomUserTableMode
         { id: "cell", label: $localize`Cell`, dataType: "string" },
     ];
 
-    constructor(private logger: LoggerService) {
-        super();
-    }
+    private logger = inject(LoggerService);
 
     public async getFilteredData(
         filters: INovaFilters
diff --git a/packages/dashboards/examples/src/components/docs/overview/overview.module.ts b/packages/dashboards/examples/src/components/docs/overview/overview.module.ts
index f7412b4b2..d49061075 100644
--- a/packages/dashboards/examples/src/components/docs/overview/overview.module.ts
+++ b/packages/dashboards/examples/src/components/docs/overview/overview.module.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { CommonModule } from "@angular/common";
-import { NgModule } from "@angular/core";
+import { inject, NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import {
@@ -94,7 +94,9 @@ const routes = [
     providers: [ConfiguratorHeadingService],
 })
 export default class OverviewModule {
-    constructor(private widgetTypesService: WidgetTypesService) {
+    private widgetTypesService = inject(WidgetTypesService);
+
+    constructor() {
         this.setupDataSourceProviders();
         this.setupProportionalLegendFormatters();
     }
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/customization/configurator-section/custom-configurator-section/custom-configurator-section.example.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/customization/configurator-section/custom-configurator-section/custom-configurator-section.example.component.ts
index d9f5307aa..4063782ab 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/customization/configurator-section/custom-configurator-section/custom-configurator-section.example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/customization/configurator-section/custom-configurator-section/custom-configurator-section.example.component.ts
@@ -24,6 +24,7 @@ import {
     ChangeDetectorRef,
     Component,
     EventEmitter,
+    inject,
     Injectable,
     Input,
     OnChanges,
@@ -205,10 +206,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -256,10 +254,7 @@ export class RatingsCountKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -313,18 +308,10 @@ export class CustomConfiguratorSectionExampleComponent implements OnInit {
     // Boolean which dashboard takes in as an input if its true it allows you to move widgets around.
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-
-        // Inject the ComponentRegistryService to make our custom component available for late loading by the dashboards framework
-        private componentRegistry: ComponentRegistryService,
-
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private componentRegistry = inject(ComponentRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         // Grab the widget's default template which will be needed as a parameter for setNode.
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/customization/data-source-configurator/example/custom-data-source-configurator-example.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/customization/data-source-configurator/example/custom-data-source-configurator-example.component.ts
index b685f0144..c3ed6f699 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/customization/data-source-configurator/example/custom-data-source-configurator-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/customization/data-source-configurator/example/custom-data-source-configurator-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Inject,
     Injectable,
     Injector,
@@ -241,10 +242,7 @@ export class AcmeKpiDataSource
     public busy = new BehaviorSubject<boolean>(false);
 
     public properties: IProperties;
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // This function MUST be implemented in order to receive property updates from our configurator
     public updateConfiguration(properties: IProperties): void {
@@ -311,16 +309,9 @@ export class CustomDataSourceConfiguratorExampleComponent implements OnInit {
     // Boolean which dashboard takes in as an input if its true it allows you to move widgets around.
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-
-        // Inject the ComponentRegistryService to make our custom component available for late loading by the dashboards framework
-        private componentRegistry: ComponentRegistryService
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private componentRegistry = inject(ComponentRegistryService);
 
     public ngOnInit(): void {
         // Registering the new data source configurator so it can be used.
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/donut-content-formatter-example/custom-donut-content-formatter-example.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/donut-content-formatter-example/custom-donut-content-formatter-example.component.ts
index c866bebd4..27823336a 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/donut-content-formatter-example/custom-donut-content-formatter-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/donut-content-formatter-example/custom-donut-content-formatter-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     Input,
     OnChanges,
@@ -121,7 +122,7 @@ export class CustomDonutContentFormatterComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     // The data we receive from the chart, including metrics names and their values
     @Input() data: IChartAssistSeries<IAccessors>[];
@@ -278,12 +279,13 @@ export class CustomDonutContentFormatterConfiguratorComponent
 {
     public static lateLoadKey = "CustomFormatterConfiguratorComponent";
 
+    public iconService = inject(IconService);
+    public configuratorHeading = inject(ConfiguratorHeadingService);
+
     constructor(
         changeDetector: ChangeDetectorRef,
         formBuilder: FormBuilder,
         logger: LoggerService,
-        public iconService: IconService,
-        public configuratorHeading: ConfiguratorHeadingService
     ) {
         super(changeDetector, formBuilder, logger);
     }
@@ -317,15 +319,12 @@ export class CustomDonutContentFormatterExampleComponent implements OnInit {
     // Pass this to the dashboard component's gridsterConfig input in the template.
     public gridsterConfig: GridsterConfig = {};
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-        // Inject the ComponentRegistryService to make our custom component available for late loading by the dashboards framework
-        private componentRegistry: ComponentRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private componentRegistry = inject(ComponentRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
+    constructor() {
         // Register the custom configurator component with the component registry to make it available
         // for late loading by the dashboard framework.
         this.componentRegistry.registerByLateLoadKey(
@@ -482,10 +481,7 @@ export class StatusesExampleDatasource
     public static providerId = "StatusesExampleDatasource";
 
     public busy = new Subject<boolean>();
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/formatter-example/custom-formatter-example.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/formatter-example/custom-formatter-example.component.ts
index c9331becf..c9f85ec8c 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/formatter-example/custom-formatter-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/customization/formatter/formatter-example/custom-formatter-example.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { ChangeDetectorRef, Component, Input, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, inject, Input, OnInit } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { GridsterConfig, GridsterItem } from "angular-gridster2";
 import isEqual from "lodash/isEqual";
@@ -81,7 +81,7 @@ export const BREW_API_URL = "https://api.punkapi.com/v2/beers";
 export class CustomFormatterComponent implements IHasChangeDetector {
     public static lateLoadKey = "CustomFormatterComponent";
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     @Input() public data: any;
     @Input() public icon: string;
@@ -216,12 +216,13 @@ export class CustomFormatterConfiguratorComponent
 {
     public static lateLoadKey = "CustomFormatterConfiguratorComponent";
 
+    public iconService = inject(IconService);
+
     constructor(
         changeDetector: ChangeDetectorRef,
         configuratorHeading: ConfiguratorHeadingService,
         formBuilder: FormBuilder,
         logger: LoggerService,
-        public iconService: IconService
     ) {
         super(changeDetector, configuratorHeading, formBuilder, logger);
     }
@@ -269,16 +270,13 @@ export class CustomFormatterExampleComponent implements OnInit {
     // Pass this to the dashboard component's gridsterConfig input in the template.
     public gridsterConfig: GridsterConfig = {};
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-        // Inject the ComponentRegistryService to make our custom component available for late loading by the dashboards framework
-        private componentRegistry: ComponentRegistryService,
-        private tableFormatterRegistryService: TableFormatterRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private componentRegistry = inject(ComponentRegistryService);
+    private tableFormatterRegistryService = inject(TableFormatterRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
+
+    constructor() {
         // Register the custom configurator component with the component registry to make it available
         // for late loading by the dashboard framework.
         this.componentRegistry.registerByLateLoadKey(
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/customization/widget/custom-widget.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/customization/widget/custom-widget.component.ts
index 90a708316..f388f0c68 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/customization/widget/custom-widget.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/customization/widget/custom-widget.component.ts
@@ -24,6 +24,7 @@ import {
     Component,
     EventEmitter,
     HostBinding,
+    inject,
     Input,
     OnChanges,
     OnInit,
@@ -91,7 +92,7 @@ export class CustomWidgetBodyContentComponent implements IHasChangeDetector {
 
     // Injecting the ChangeDetectorRef to implement IHasChangeDetector.
     // This allows the dashboard framework to reliably propagate component property changes to the DOM.
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 }
 
 /**
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/data-source-setup/data-source-setup.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/data-source-setup/data-source-setup.component.ts
index e1899e5c7..7ba28fecc 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/data-source-setup/data-source-setup.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/data-source-setup/data-source-setup.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Component, Injectable, OnDestroy, OnInit } from "@angular/core";
+import { Component, inject, Injectable, OnDestroy, OnInit } from "@angular/core";
 import { GridsterConfig, GridsterItem } from "angular-gridster2";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
@@ -55,10 +55,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -112,13 +109,8 @@ export class DataSourceSetupComponent implements OnInit {
     // Pass this to the dashboard component's gridsterConfig input in the template.
     public gridsterConfig: GridsterConfig = {};
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
 
     public ngOnInit(): void {
         // Registering the data source for injection into the KPI tile.
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/hello-dashboards/hello-dashboards-example/hello-dashboards-example.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/hello-dashboards/hello-dashboards-example/hello-dashboards-example.component.ts
index ba2e4a020..665376ecf 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/hello-dashboards/hello-dashboards-example/hello-dashboards-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/hello-dashboards/hello-dashboards-example/hello-dashboards-example.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import { GridsterConfig, GridsterItem } from "angular-gridster2";
 
 import {
@@ -48,7 +48,7 @@ export class HelloDashboardsExampleComponent implements OnInit {
     public gridsterConfig: GridsterConfig = {};
 
     // WidgetTypesService provides the widget's necessary structure information
-    constructor(private widgetTypesService: WidgetTypesService) {}
+    private widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         // Here we are hard-coding the widget config for this example, but this is where you
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/persistence-handler-setup/persistence-handler-setup.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/persistence-handler-setup/persistence-handler-setup.component.ts
index 83f09720b..862a690a4 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/persistence-handler-setup/persistence-handler-setup.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/persistence-handler-setup/persistence-handler-setup.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -66,7 +67,9 @@ export class PersistenceHandler implements IDashboardPersistenceHandler {
 
     // The example uses the toast service to demonstrate the
     // invocation of each of the persistence handler callbacks
-    constructor(private toastService: ToastService) {
+    private toastService = inject(ToastService);
+
+    constructor() {
         // toastService options to let it sit on the page for 2 seconds.
         this.toastService.setConfig({
             timeOut: 2000,
@@ -156,17 +159,10 @@ export class PersistenceHandlerSetupComponent implements OnInit {
     // Boolean which dashboard takes in as an input if its true it allows you to move widgets around.
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-
-        // We are injecting the PersistenceHandler we created and assigning it to a property we use in the template.
-        public persistenceHandler: PersistenceHandler,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    public persistenceHandler = inject(PersistenceHandler);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         // Grabbing the widget's default template which will be needed as a parameter for setNode
@@ -258,10 +254,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -309,10 +302,7 @@ export class RatingsCountKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/widget-creation/widget-creation.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/widget-creation/widget-creation.component.ts
index 1eef654a6..a51078aaa 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/widget-creation/widget-creation.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/widget-creation/widget-creation.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     Component,
     EventEmitter,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -105,7 +106,7 @@ export class WidgetTemplateSelectionComponent
     public widgetItems: IWidgetItem[] = [];
     public widgetSelection: IWidgetItem[];
 
-    constructor(private widgetTypesService: WidgetTypesService) {}
+    private widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         // Here we combine the widget structure from the WidgetTypesService with the corresponding widget
@@ -150,7 +151,9 @@ export class PersistenceHandler implements IDashboardPersistenceHandler {
 
     // The example uses the toast service to demonstrate the
     // invocation of each of the persistence handler callbacks
-    constructor(private toastService: ToastService) {
+    private toastService = inject(ToastService);
+
+    constructor() {
         // toastService options to let it sit on the page for 2 seconds.
         this.toastService.setConfig({
             timeOut: 2000,
@@ -252,19 +255,10 @@ export class WidgetCreationComponent implements OnInit {
     // Subject used for auto-unsubscribing from subscriptions on component destruction
     private readonly destroy$ = new Subject<void>();
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-
-        // Injecting the PersistenceHandler we created and assigning it to a property we use in the template.
-        public persistenceHandler: PersistenceHandler,
-
-        // Injecting the cloner service which is needed for opening up the cloner wizard.
-        private widgetClonerService: WidgetClonerService
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    public persistenceHandler = inject(PersistenceHandler);
+    private widgetClonerService = inject(WidgetClonerService);
 
     public ngOnInit(): void {
         // Grabbing the widget's default template which will be needed as a parameter for setNode
@@ -471,10 +465,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -522,10 +513,7 @@ export class RatingsCountKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/widget-editor-setup/widget-editor-setup.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/widget-editor-setup/widget-editor-setup.component.ts
index 5aa7325c2..0e0510364 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/widget-editor-setup/widget-editor-setup.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/widget-editor-setup/widget-editor-setup.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -62,10 +63,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -113,10 +111,7 @@ export class RatingsCountKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -170,14 +165,9 @@ export class WidgetEditorSetupComponent implements OnInit {
     // Boolean which dashboard takes in as an input if its true it allows you to move widgets around.
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         // Grabbing the widget's default template which will be needed as a parameter for setNode
diff --git a/packages/dashboards/examples/src/components/docs/tutorials/widget-error-handling/widget-error-handling.component.ts b/packages/dashboards/examples/src/components/docs/tutorials/widget-error-handling/widget-error-handling.component.ts
index a626c002b..384d980b2 100644
--- a/packages/dashboards/examples/src/components/docs/tutorials/widget-error-handling/widget-error-handling.component.ts
+++ b/packages/dashboards/examples/src/components/docs/tutorials/widget-error-handling/widget-error-handling.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -63,10 +64,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -145,10 +143,7 @@ export class ErrorForbiddenDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -189,10 +184,7 @@ export class ErrorNotFoundDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -242,14 +234,9 @@ export class WidgetErrorHandlingComponent implements OnInit {
     // Boolean which dashboard takes in as an input if its true it allows you to move widgets around.
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         // Grab the widget's default template which will be needed as a parameter for setNode.
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/drilldown/drilldown-multi-request-widget/drilldown-multi-request-widget-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/drilldown/drilldown-multi-request-widget/drilldown-multi-request-widget-example.component.ts
index 982b2f3ec..a708b2047 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/drilldown/drilldown-multi-request-widget/drilldown-multi-request-widget-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/drilldown/drilldown-multi-request-widget/drilldown-multi-request-widget-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -86,7 +87,10 @@ export class DrilldownDataSource
     private leafGroup: string = "country";
     private applyFilters$ = new Subject<IFilters>();
 
-    constructor(private http: HttpClient, private apollo: Apollo) {
+    private http = inject(HttpClient);
+    private apollo = inject(Apollo);
+
+    constructor() {
         super();
 
         // TODO: remove Partial in vNext after marking dataType field as optional - NUI-5838
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker-for-all-tiles/kpi-sync-broker-for-all-tiles-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker-for-all-tiles/kpi-sync-broker-for-all-tiles-example.component.ts
index 1ce4cebd8..0f988e0d0 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker-for-all-tiles/kpi-sync-broker-for-all-tiles-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker-for-all-tiles/kpi-sync-broker-for-all-tiles-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -58,10 +59,7 @@ export class AverageRatingKpiDataSource
 {
     public static providerId = "AverageRatingKpiDataSource";
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -107,10 +105,7 @@ export class RatingsCountKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -203,11 +198,9 @@ export class KpiSyncBrokerForAllTilesExampleComponent implements OnInit {
     public gridsterConfig: GridsterConfig = {};
     public editMode: boolean = false;
 
-    constructor(
-        private widgetTypesService: WidgetTypesService,
-        private providerRegistry: ProviderRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         this.setupDashboard();
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker/kpi-sync-broker-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker/kpi-sync-broker-example.component.ts
index 49d2bc903..47725174f 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker/kpi-sync-broker-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-sync-broker/kpi-sync-broker-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -58,10 +59,7 @@ export class AverageRatingKpiDataSource
 {
     public static providerId = "AverageRatingKpiDataSource";
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -107,10 +105,7 @@ export class RatingsCountKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -202,11 +197,9 @@ export class KpiSyncBrokerExampleComponent implements OnInit {
     public gridsterConfig: GridsterConfig = {};
     public editMode: boolean = false;
 
-    constructor(
-        private widgetTypesService: WidgetTypesService,
-        private providerRegistry: ProviderRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         this.setupDashboard();
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.ts
index a305a9a63..d041ed8fd 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnDestroy,
     OnInit,
@@ -60,10 +61,7 @@ export class AverageRatingKpiDataSource
 {
     public static providerId = "AverageRatingKpiDataSource";
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -114,11 +112,9 @@ export class KpiWidgetBackgroundColorExampleComponent implements OnInit {
     public gridsterConfig: GridsterConfig = {};
     public editMode: boolean = false;
 
-    constructor(
-        private widgetTypesService: WidgetTypesService,
-        private providerRegistry: ProviderRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         this.setupDashboard();
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-interactive/kpi-widget-interactive-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-interactive/kpi-widget-interactive-example.component.ts
index 7d6045fa8..0fb5699c4 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-interactive/kpi-widget-interactive-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-interactive/kpi-widget-interactive-example.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Component, Injectable, OnDestroy, OnInit } from "@angular/core";
+import { Component, inject, Injectable, OnDestroy, OnInit } from "@angular/core";
 import { GridsterConfig, GridsterItem } from "angular-gridster2";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
@@ -55,10 +55,7 @@ export class BookRatingDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -116,13 +113,8 @@ export class KpiWidgetInteractiveExampleComponent implements OnInit {
     // Boolean passed as an input to the dashboard. When true, widgets can be moved, resized, removed, or edited
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
 
     public ngOnInit(): void {
         // Grabbing the widget's default template which will be needed as a parameter for setNode
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget/kpi-widget-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget/kpi-widget-example.component.ts
index d0a5fc87c..290a6b191 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget/kpi-widget-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget/kpi-widget-example.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Component, Injectable, OnDestroy, OnInit } from "@angular/core";
+import { Component, inject, Injectable, OnDestroy, OnInit } from "@angular/core";
 import { GridsterConfig, GridsterItem } from "angular-gridster2";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
@@ -56,10 +56,7 @@ export class AverageRatingKpiDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -116,13 +113,8 @@ export class KpiWidgetExampleComponent implements OnInit {
     // Boolean passed as an input to the dashboard. When true, widgets can be moved, resized, removed, or edited
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
 
     public ngOnInit(): void {
         // Grabbing the widget's default template which will be needed as a parameter for setNode
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/risk-score/risk-score-widget-example/risk-score-widget-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/risk-score/risk-score-widget-example/risk-score-widget-example.component.ts
index 70fd435bf..3b5af8459 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/risk-score/risk-score-widget-example/risk-score-widget-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/risk-score/risk-score-widget-example/risk-score-widget-example.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Component, Injectable, OnDestroy, OnInit } from "@angular/core";
+import { Component, inject, Injectable, OnDestroy, OnInit } from "@angular/core";
 import { GridsterConfig, GridsterItem } from "angular-gridster2";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
@@ -56,10 +56,7 @@ export class AverageRatingRiskScoreDataSource
 
     // Use this subject to communicate the data source's busy state
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     // In this example, getFilteredData is invoked every 10 minutes (Take a look at the refresher
     // provider definition in the widget configuration below to see how the interval is set)
@@ -116,13 +113,8 @@ export class RiskScoreWidgetExampleComponent implements OnInit {
     // Boolean passed as an input to the dashboard. When true, widgets can be moved, resized, removed, or edited
     public editMode: boolean = false;
 
-    constructor(
-        // WidgetTypesService provides the widget's necessary structure information
-        private widgetTypesService: WidgetTypesService,
-
-        // In general, the ProviderRegistryService is used for making entities available for injection into dynamically loaded components.
-        private providerRegistry: ProviderRegistryService
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
 
     public ngOnInit(): void {
         // Grabbing the widget's default template which will be needed as a parameter for setNode
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-search/table-widget-search-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-search/table-widget-search-example.component.ts
index 3969c014f..26697359b 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-search/table-widget-search-example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-search/table-widget-search-example.component.ts
@@ -22,6 +22,7 @@ import { HttpClient } from "@angular/common/http";
 import {
     ChangeDetectorRef,
     Component,
+    inject,
     Injectable,
     OnInit,
 } from "@angular/core";
@@ -141,7 +142,10 @@ export class AcmeTableGBooksDataSource
         },
     ];
 
-    constructor(private logger: LoggerService, private http: HttpClient) {
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
+    constructor() {
         super();
         // Using Nova DataSourceFeatures implementation for the features
         this.features = new DataSourceFeatures(this.supportedFeatures);
@@ -256,11 +260,9 @@ export class TableWidgetSearchExampleComponent implements OnInit {
     public gridsterConfig: GridsterConfig = {};
     public editMode: boolean = false;
 
-    constructor(
-        private widgetTypesService: WidgetTypesService,
-        private providerRegistry: ProviderRegistryService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    private widgetTypesService = inject(WidgetTypesService);
+    private providerRegistry = inject(ProviderRegistryService);
+    private changeDetectorRef = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         const widgetTemplate = this.widgetTypesService.getWidgetType(
diff --git a/packages/dashboards/examples/src/components/prototypes/data/kpi-datasources.ts b/packages/dashboards/examples/src/components/prototypes/data/kpi-datasources.ts
index ada8d81e0..dc9d64839 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/kpi-datasources.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/kpi-datasources.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
+import { inject, Injectable, OnDestroy } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
 
@@ -40,10 +40,7 @@ export class AcmeKpiDataSource
     public static mockError = false;
 
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
@@ -98,10 +95,7 @@ export class AcmeKpiDataSource2
     });
 
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public properties: any;
 
diff --git a/packages/dashboards/examples/src/components/prototypes/data/proportional-datasources.ts b/packages/dashboards/examples/src/components/prototypes/data/proportional-datasources.ts
index 9045a541f..cbb749847 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/proportional-datasources.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/proportional-datasources.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
+import { inject, Injectable, OnDestroy } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import { finalize } from "rxjs/operators";
 
@@ -47,15 +47,12 @@ export class AcmeProportionalDataSource
     public static mockError = false;
 
     public busy = new Subject<boolean>();
+    private http = inject(HttpClient);
 
     public properties: IProperties = {
         isEuropeOnly: false,
     };
 
-    constructor(private http: HttpClient) {
-        super();
-    }
-
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
 
diff --git a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source-no-data-fields.service.ts b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source-no-data-fields.service.ts
index b55c34fb9..beeb13cf2 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source-no-data-fields.service.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source-no-data-fields.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import { BehaviorSubject } from "rxjs";
@@ -53,10 +53,7 @@ export class AcmeTableDataSourceNoDataFields
     public busy = new BehaviorSubject(false);
 
     public dataFields: Array<IDataField> = [];
-
-    constructor(private logger: LoggerService) {
-        super();
-    }
+    private logger = inject(LoggerService);
 
     public async getFilteredData(
         filters: INovaFilters
diff --git a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source.service.ts b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source.service.ts
index 39505bd7d..030eac4d0 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source.service.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source.service.ts
@@ -20,7 +20,7 @@
 
 import { ListRange } from "@angular/cdk/collections";
 import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import { BehaviorSubject } from "rxjs";
@@ -101,9 +101,8 @@ export class AcmeTableDataSource
         { id: "cell", label: $localize`Cell`, dataType: "string" },
     ];
 
-    constructor(private logger: LoggerService, private http: HttpClient) {
-        super();
-    }
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
 
     public async getFilteredData(
         filters: INovaFilters
diff --git a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source2.service.ts b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source2.service.ts
index 8abb99607..e794f0328 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source2.service.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source2.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import { BehaviorSubject } from "rxjs";
diff --git a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source3.service.ts b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source3.service.ts
index 586b3b9d5..bfbea8d4c 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source3.service.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-data-source3.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ListRange } from "@angular/cdk/collections";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import { BehaviorSubject } from "rxjs";
diff --git a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-gbooks-data-source.service.ts b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-gbooks-data-source.service.ts
index 1bffae6d0..64b2bf957 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-gbooks-data-source.service.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/table/acme-table-gbooks-data-source.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import isNil from "lodash/isNil";
 import { BehaviorSubject, firstValueFrom, Observable, of, Subject } from "rxjs";
@@ -114,7 +114,10 @@ export class AcmeTableGBooksDataSource
         { id: "authors", label: $localize`Authors`, dataType: "string" },
     ];
 
-    constructor(private logger: LoggerService, private http: HttpClient) {
+    private logger = inject(LoggerService);
+    private http = inject(HttpClient);
+
+    constructor() {
         super();
         // Using Nova DataSourceFeatures implementation for the features
         this.features = new DataSourceFeatures(this.supportedFeatures);
diff --git a/packages/dashboards/examples/src/components/prototypes/data/timeseries-data-sources.ts b/packages/dashboards/examples/src/components/prototypes/data/timeseries-data-sources.ts
index 244dc1415..d4d6b7005 100644
--- a/packages/dashboards/examples/src/components/prototypes/data/timeseries-data-sources.ts
+++ b/packages/dashboards/examples/src/components/prototypes/data/timeseries-data-sources.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import moment from "moment/moment";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
@@ -53,10 +53,7 @@ export class AcmeTimeseriesDataSource
 {
     public static providerId = "AcmeTimeseriesDataSource";
     public static mockError = false;
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public busy = new BehaviorSubject(false);
 
diff --git a/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-clone-selection/acme-clone-selection.component.ts b/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-clone-selection/acme-clone-selection.component.ts
index 31ef85e6c..b3252cca7 100644
--- a/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-clone-selection/acme-clone-selection.component.ts
+++ b/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-clone-selection/acme-clone-selection.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { TitleCasePipe } from "@angular/common";
-import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 
@@ -53,7 +53,7 @@ export class AcmeCloneSelectionComponent
     public widgetItems: IWidgetItem[] = [];
     public widgetSelection: IWidgetItem[];
 
-    constructor(protected widgetTypesService: WidgetTypesService) {}
+    protected widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         const titleCasePipe = new TitleCasePipe();
diff --git a/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-form-submit-handler.ts
index 50895ad0d..b6e222b9b 100644
--- a/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/prototypes/many-widgets/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService } from "@nova-ui/bits";
@@ -32,8 +32,9 @@ import {
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/prototypes/many-widgets/datasources.ts b/packages/dashboards/examples/src/components/prototypes/many-widgets/datasources.ts
index 8fbe383e3..eb3197967 100644
--- a/packages/dashboards/examples/src/components/prototypes/many-widgets/datasources.ts
+++ b/packages/dashboards/examples/src/components/prototypes/many-widgets/datasources.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
+import { inject, Injectable, OnDestroy } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { finalize } from "rxjs/operators";
 
@@ -39,10 +39,7 @@ export class AcmeKpiDataSource
     public static mockError = false;
 
     public busy = new BehaviorSubject<boolean>(false);
-
-    constructor(private http: HttpClient) {
-        super();
-    }
+    private http = inject(HttpClient);
 
     public async getFilteredData(): Promise<IFilteringOutputs> {
         this.busy.next(true);
diff --git a/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-clone-selection/acme-clone-selection.component.ts b/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-clone-selection/acme-clone-selection.component.ts
index 31ef85e6c..b3252cca7 100644
--- a/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-clone-selection/acme-clone-selection.component.ts
+++ b/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-clone-selection/acme-clone-selection.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { TitleCasePipe } from "@angular/common";
-import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 
@@ -53,7 +53,7 @@ export class AcmeCloneSelectionComponent
     public widgetItems: IWidgetItem[] = [];
     public widgetSelection: IWidgetItem[];
 
-    constructor(protected widgetTypesService: WidgetTypesService) {}
+    protected widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         const titleCasePipe = new TitleCasePipe();
diff --git a/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-form-submit-handler.ts
index 50895ad0d..b6e222b9b 100644
--- a/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/prototypes/prototype-1/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService } from "@nova-ui/bits";
@@ -32,8 +32,9 @@ import {
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/prototypes/table/acme-clone-selection/acme-clone-selection.component.ts b/packages/dashboards/examples/src/components/prototypes/table/acme-clone-selection/acme-clone-selection.component.ts
index 31ef85e6c..b3252cca7 100644
--- a/packages/dashboards/examples/src/components/prototypes/table/acme-clone-selection/acme-clone-selection.component.ts
+++ b/packages/dashboards/examples/src/components/prototypes/table/acme-clone-selection/acme-clone-selection.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { TitleCasePipe } from "@angular/common";
-import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 
@@ -53,7 +53,7 @@ export class AcmeCloneSelectionComponent
     public widgetItems: IWidgetItem[] = [];
     public widgetSelection: IWidgetItem[];
 
-    constructor(protected widgetTypesService: WidgetTypesService) {}
+    protected widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         const titleCasePipe = new TitleCasePipe();
diff --git a/packages/dashboards/examples/src/components/prototypes/table/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/prototypes/table/acme-form-submit-handler.ts
index 50895ad0d..b6e222b9b 100644
--- a/packages/dashboards/examples/src/components/prototypes/table/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/prototypes/table/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService } from "@nova-ui/bits";
@@ -32,8 +32,9 @@ import {
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/prototypes/timeseries/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/prototypes/timeseries/acme-form-submit-handler.ts
index 0f57d5e7f..1f3e776d5 100644
--- a/packages/dashboards/examples/src/components/prototypes/timeseries/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/prototypes/timeseries/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService, uuid } from "@nova-ui/bits";
@@ -32,8 +32,9 @@ import {
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/test/common/dashboard-test-harness.component.ts b/packages/dashboards/examples/src/components/test/common/dashboard-test-harness.component.ts
index 9bd447640..c69a471c8 100644
--- a/packages/dashboards/examples/src/components/test/common/dashboard-test-harness.component.ts
+++ b/packages/dashboards/examples/src/components/test/common/dashboard-test-harness.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, inject, Input, Output } from "@angular/core";
 
 import { ThemeSwitchService } from "@nova-ui/bits";
 
@@ -29,7 +29,7 @@ import { ThemeSwitchService } from "@nova-ui/bits";
     standalone: false,
 })
 export class DashboardTestHarnessComponent {
-    constructor(public themeSwitcher: ThemeSwitchService) {}
+    public themeSwitcher = inject(ThemeSwitchService);
 
     @Input() public editMode: boolean;
     @Input() public dsError: boolean;
diff --git a/packages/dashboards/examples/src/components/test/visual/configurator/acme-clone-selection/acme-clone-selection.component.ts b/packages/dashboards/examples/src/components/test/visual/configurator/acme-clone-selection/acme-clone-selection.component.ts
index c6053bbbe..48f626b51 100644
--- a/packages/dashboards/examples/src/components/test/visual/configurator/acme-clone-selection/acme-clone-selection.component.ts
+++ b/packages/dashboards/examples/src/components/test/visual/configurator/acme-clone-selection/acme-clone-selection.component.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { TitleCasePipe } from "@angular/common";
-import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 
@@ -48,7 +48,7 @@ export class AcmeCloneSelectionComponent
     public widgetItems: any[] = [];
     public widgetSelection: any[];
 
-    constructor(protected widgetTypesService: WidgetTypesService) {}
+    protected widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         const titleCasePipe = new TitleCasePipe();
diff --git a/packages/dashboards/examples/src/components/test/visual/configurator/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/test/visual/configurator/acme-form-submit-handler.ts
index 1ca8ca7c2..462606393 100644
--- a/packages/dashboards/examples/src/components/test/visual/configurator/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/test/visual/configurator/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService } from "@nova-ui/bits";
@@ -28,8 +28,9 @@ import { IDashboardPersistenceHandler, IWidget } from "@nova-ui/dashboards";
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/test/visual/configurator/configurator-test.module.ts b/packages/dashboards/examples/src/components/test/visual/configurator/configurator-test.module.ts
index f35d85a3b..49ce3dc35 100644
--- a/packages/dashboards/examples/src/components/test/visual/configurator/configurator-test.module.ts
+++ b/packages/dashboards/examples/src/components/test/visual/configurator/configurator-test.module.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { NgModule } from "@angular/core";
+import { inject, NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import {
@@ -91,7 +91,9 @@ const routes = [
     providers: [ProviderRegistryService],
 })
 export class ConfiguratorTestModule {
-    constructor(private widgetTypesService: WidgetTypesService) {
+    private widgetTypesService = inject(WidgetTypesService);
+
+    constructor() {
         const widgetTemplate = this.widgetTypesService.getWidgetType(
             "proportional",
             1
diff --git a/packages/dashboards/examples/src/components/test/visual/overview/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/test/visual/overview/acme-form-submit-handler.ts
index 50895ad0d..b6e222b9b 100644
--- a/packages/dashboards/examples/src/components/test/visual/overview/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/test/visual/overview/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService } from "@nova-ui/bits";
@@ -32,8 +32,9 @@ import {
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/test/visual/overview/overview.module.ts b/packages/dashboards/examples/src/components/test/visual/overview/overview.module.ts
index 6155a8bce..e21a501ff 100644
--- a/packages/dashboards/examples/src/components/test/visual/overview/overview.module.ts
+++ b/packages/dashboards/examples/src/components/test/visual/overview/overview.module.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { NgModule } from "@angular/core";
+import { inject, NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import {
@@ -83,7 +83,9 @@ const routes = [
     providers: [ProviderRegistryService],
 })
 export class OverviewModule {
-    constructor(private widgetTypesService: WidgetTypesService) {
+    private widgetTypesService = inject(WidgetTypesService);
+
+    constructor() {
         const widgetTemplate = this.widgetTypesService.getWidgetType(
             "proportional",
             1
diff --git a/packages/dashboards/examples/src/components/test/visual/timeseries/acme-form-submit-handler.ts b/packages/dashboards/examples/src/components/test/visual/timeseries/acme-form-submit-handler.ts
index 1ca8ca7c2..462606393 100644
--- a/packages/dashboards/examples/src/components/test/visual/timeseries/acme-form-submit-handler.ts
+++ b/packages/dashboards/examples/src/components/test/visual/timeseries/acme-form-submit-handler.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { ToastService } from "@nova-ui/bits";
@@ -28,8 +28,9 @@ import { IDashboardPersistenceHandler, IWidget } from "@nova-ui/dashboards";
 export class AcmeFormSubmitHandler implements IDashboardPersistenceHandler {
     public allowSubmit = true;
     public allowRemoval = true;
+    private toastService = inject(ToastService);
 
-    constructor(private toastService: ToastService) {
+    constructor() {
         this.toastService.setConfig({
             timeOut: 2000,
         });
diff --git a/packages/dashboards/examples/src/components/test/visual/timeseries/timeseries-test.module.ts b/packages/dashboards/examples/src/components/test/visual/timeseries/timeseries-test.module.ts
index f07af4882..dc020647e 100644
--- a/packages/dashboards/examples/src/components/test/visual/timeseries/timeseries-test.module.ts
+++ b/packages/dashboards/examples/src/components/test/visual/timeseries/timeseries-test.module.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { NgModule } from "@angular/core";
+import { inject, NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import {
@@ -78,7 +78,9 @@ const routes = [
     providers: [ProviderRegistryService],
 })
 export class TimeseriesTestModule {
-    constructor(private widgetTypesService: WidgetTypesService) {
+    private widgetTypesService = inject(WidgetTypesService);
+
+    constructor() {
         this.setupDataSourceProviders();
     }
 
diff --git a/packages/dashboards/src/lib/common/components/widget-error/widget-error.component.ts b/packages/dashboards/src/lib/common/components/widget-error/widget-error.component.ts
index 54f73fe2b..7e072ab64 100644
--- a/packages/dashboards/src/lib/common/components/widget-error/widget-error.component.ts
+++ b/packages/dashboards/src/lib/common/components/widget-error/widget-error.component.ts
@@ -24,6 +24,7 @@ import {
     HostBinding,
     Input,
     OnInit,
+    inject,
 } from "@angular/core";
 
 import { IWidgetErrorDisplayProperties } from "../../../components/widget/types";
@@ -54,7 +55,7 @@ export class WidgetErrorComponent
 
     @HostBinding("class") public classNames: string;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         this.classNames = `${this.defaultClasses} ${this.elementClass}`;
diff --git a/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts b/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts
index d445bf0c7..114bd6b99 100644
--- a/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts
+++ b/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Pipe, PipeTransform } from "@angular/core";
+import { Pipe, PipeTransform, inject } from "@angular/core";
 
 import {
     UnitConversionService,
@@ -37,7 +37,7 @@ import { DEFAULT_UNIT_CONVERSION_THRESHOLD } from "../constants";
     standalone: false,
 })
 export class DashboardUnitConversionPipe implements PipeTransform {
-    constructor(private unitConversionService: UnitConversionService) {}
+    private unitConversionService = inject(UnitConversionService);
 
     /**
      * Transforms a large number value to its abbreviated counterpart
diff --git a/packages/dashboards/src/lib/components/list-widget/list-elements/list-group-item/list-group-item.component.ts b/packages/dashboards/src/lib/components/list-widget/list-elements/list-group-item/list-group-item.component.ts
index 87dc9f85a..4fee44915 100644
--- a/packages/dashboards/src/lib/components/list-widget/list-elements/list-group-item/list-group-item.component.ts
+++ b/packages/dashboards/src/lib/components/list-widget/list-elements/list-group-item/list-group-item.component.ts
@@ -25,6 +25,7 @@ import {
     EventEmitter,
     Input,
     Output,
+    inject,
 } from "@angular/core";
 
 import { IHasChangeDetector } from "../../../../types";
@@ -60,7 +61,7 @@ export class ListGroupItemComponent implements IHasChangeDetector {
     public isMedium: boolean;
     public isSmall: boolean;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     public onButtonClick(): void {
         if (this.canNavigate) {
diff --git a/packages/dashboards/src/lib/components/loading/loading.component.ts b/packages/dashboards/src/lib/components/loading/loading.component.ts
index 24b295dfd..cb4ebced9 100644
--- a/packages/dashboards/src/lib/components/loading/loading.component.ts
+++ b/packages/dashboards/src/lib/components/loading/loading.component.ts
@@ -25,7 +25,7 @@ import {
     transition,
     trigger,
 } from "@angular/animations";
-import { ChangeDetectorRef, Component, Input } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, inject } from "@angular/core";
 
 import { IHasChangeDetector } from "../../types";
 
@@ -47,5 +47,5 @@ export class LoadingComponent implements IHasChangeDetector {
 
     @Input() public active = false;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 }
diff --git a/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.ts b/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.ts
index 3ee9d48fd..5677d9d1b 100644
--- a/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.ts
+++ b/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, OnDestroy } from "@angular/core";
+import { Injectable, OnDestroy, inject } from "@angular/core";
 import get from "lodash/get";
 import { Observable, Subscription } from "rxjs";
 import { distinctUntilChanged, map } from "rxjs/operators";
@@ -39,7 +39,7 @@ export class PizzagnaBroadcasterService implements IConfigurable, OnDestroy {
     private componentId: string;
     private parentComponentId: string;
 
-    constructor(private pizzagnaService: PizzagnaService) {}
+    private pizzagnaService = inject(PizzagnaService);
 
     public setComponent(component: any, componentId: string): void {
         this.component = component;
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/donut-content-percentage-formatter/donut-content-percentage-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/donut-content-percentage-formatter/donut-content-percentage-formatter.component.ts
index 58fa2bf24..08ed53656 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/donut-content-percentage-formatter/donut-content-percentage-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/donut-content-percentage-formatter/donut-content-percentage-formatter.component.ts
@@ -25,6 +25,7 @@ import {
     OnChanges,
     OnInit,
     SimpleChanges,
+    inject,
 } from "@angular/core";
 import sumBy from "lodash/sumBy";
 import { Subject } from "rxjs";
@@ -61,7 +62,7 @@ export class DonutContentPercentageFormatterComponent
 
     private readonly destroy$ = new Subject<void>();
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     @Input() data: IChartAssistSeries<IAccessors>[];
     @Input() chartAssist: ChartAssist;
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/donut-content-sum-formatter/donut-content-sum-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/donut-content-sum-formatter/donut-content-sum-formatter.component.ts
index 69a1dc1e6..0268334f2 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/donut-content-sum-formatter/donut-content-sum-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/donut-content-sum-formatter/donut-content-sum-formatter.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input, OnChanges } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnChanges, inject } from "@angular/core";
 import sumBy from "lodash/sumBy";
 
 import { IFormatterData } from "../types";
@@ -35,7 +35,7 @@ export class DonutContentSumFormatterComponent implements OnChanges {
 
     public sum: number;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     @Input() data: IFormatterData[];
 
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/link-formatter/link-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/link-formatter/link-formatter.component.ts
index 8aaa614ce..e8a8f6069 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/link-formatter/link-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/link-formatter/link-formatter.component.ts
@@ -24,6 +24,7 @@ import {
     Input,
     OnChanges,
     SimpleChanges,
+    inject,
 } from "@angular/core";
 
 import { IHasChangeDetector } from "../../../../types";
@@ -54,13 +55,13 @@ import { ILinkFormatterData } from "../types";
 export class LinkFormatterComponent implements OnChanges, IHasChangeDetector {
     static lateLoadKey = "LinkFormatterComponent";
 
+    public changeDetector = inject(ChangeDetectorRef);
+
     @Input() data: ILinkFormatterData;
     @Input() targetSelf?: boolean;
 
     public isValid = false;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         this.isValid = Boolean(this.data && this.data.value && this.data.link);
     }
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/raw-formatter/raw-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/raw-formatter/raw-formatter.component.ts
index 50f217606..b0fde3b8b 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/raw-formatter/raw-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/raw-formatter/raw-formatter.component.ts
@@ -23,6 +23,7 @@ import {
     Component,
     HostBinding,
     Input,
+    inject,
 } from "@angular/core";
 
 import { IFormatterData } from "../types";
@@ -35,7 +36,7 @@ import { IFormatterData } from "../types";
 export class RawFormatterComponent {
     static lateLoadKey = "RawFormatterComponent";
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     @Input() data: IFormatterData;
 
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/si-units-formatter/si-units-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/si-units-formatter/si-units-formatter.component.ts
index 556b429e4..71df46553 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/si-units-formatter/si-units-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/si-units-formatter/si-units-formatter.component.ts
@@ -25,6 +25,7 @@ import {
     Input,
     OnChanges,
     SimpleChanges,
+    inject,
 } from "@angular/core";
 import toNumber from "lodash/toNumber";
 import toString from "lodash/toString";
@@ -53,6 +54,8 @@ export class SiUnitsFormatterComponent implements OnChanges {
     // e.g. setting "shiftPoint" to "1" makes "1000k" to be displayed instead of "1M"
     static SHIFT_POINT_DEFAULT = 0;
 
+    public changeDetector = inject(ChangeDetectorRef);
+
     @Input() public data: IFormatterData;
 
     @Input()
@@ -62,8 +65,6 @@ export class SiUnitsFormatterComponent implements OnChanges {
     public value: string = "0";
     public modifier: string | undefined;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes.data) {
             const { value } = changes.data.currentValue;
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/status-with-icon-formatter/status-with-icon-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/status-with-icon-formatter/status-with-icon-formatter.component.ts
index 6b8335952..6f6094c22 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/status-with-icon-formatter/status-with-icon-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/status-with-icon-formatter/status-with-icon-formatter.component.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input, OnChanges } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnChanges, inject } from "@angular/core";
 
 import { IHasChangeDetector } from "../../../../types";
 
@@ -70,7 +70,7 @@ export class StatusWithIconFormatterComponent
 {
     static lateLoadKey = "StatusWithIconFormatterComponent";
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     public isValid: boolean = false;
     @Input() data: {
diff --git a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/data-source-error.component.ts b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/data-source-error.component.ts
index 8cb8b7b7e..8c7461403 100644
--- a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/data-source-error.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/data-source-error.component.ts
@@ -28,6 +28,7 @@ import {
     OnDestroy,
     Output,
     SimpleChanges,
+    inject,
 } from "@angular/core";
 import isUndefined from "lodash/isUndefined";
 import { Subject } from "rxjs";
@@ -56,7 +57,7 @@ export class DataSourceErrorComponent implements OnDestroy, OnChanges {
 
     private dataSourceClear$: Subject<void> = new Subject<void>();
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes.dataSource) {
diff --git a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/table/table-data-source-error.component.ts b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/table/table-data-source-error.component.ts
index a6feba549..6dd0762dc 100644
--- a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/table/table-data-source-error.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/data-source-error/table/table-data-source-error.component.ts
@@ -23,6 +23,7 @@ import {
     ChangeDetectorRef,
     Component,
     OnDestroy,
+    inject,
 } from "@angular/core";
 
 import { DataSourceErrorComponent } from "../data-source-error.component";
@@ -39,8 +40,10 @@ export class TableDataSourceErrorComponent
 {
     public static lateLoadKey = "TableDataSourceErrorComponent";
 
-    constructor(public changeDetector: ChangeDetectorRef) {
-        super(changeDetector);
+    public changeDetector = inject(ChangeDetectorRef);
+
+    constructor() {
+        super();
     }
 
     public ngOnDestroy(): void {
diff --git a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/info-message-configuration/info-message-configuration.component.ts b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/info-message-configuration/info-message-configuration.component.ts
index ab7a2173f..33aeafd69 100644
--- a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/info-message-configuration/info-message-configuration.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/info-message-configuration/info-message-configuration.component.ts
@@ -23,6 +23,7 @@ import {
     ChangeDetectorRef,
     Component,
     Input,
+    inject,
 } from "@angular/core";
 
 import { ILinkDefinition } from "../../../../../components/types";
@@ -42,5 +43,5 @@ export class InfoMessageConfigurationComponent implements IHasChangeDetector {
     @Input() link: ILinkDefinition;
     @Input() allowDismiss: boolean;
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 }
diff --git a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/refresher-configuration/refresh-rate-configurator/refresh-rate-configurator.component.ts b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/refresher-configuration/refresh-rate-configurator/refresh-rate-configurator.component.ts
index 84f1998e5..054a5832b 100644
--- a/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/refresher-configuration/refresh-rate-configurator/refresh-rate-configurator.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/widgets/configurator-items/refresher-configuration/refresh-rate-configurator/refresh-rate-configurator.component.ts
@@ -26,6 +26,7 @@ import {
     Input,
     OnDestroy,
     OnInit,
+    inject,
 } from "@angular/core";
 import {
     ControlValueAccessor,
@@ -85,7 +86,8 @@ export class RefreshRateConfiguratorComponent
     private onChange: (value: number | null) => void;
     private destroy$ = new Subject<void>();
 
-    constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {}
+    private fb = inject(FormBuilder);
+    private cd = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
         this.generateUnitItems();
diff --git a/packages/dashboards/src/lib/configurator/components/wizard/dashwiz/dashwiz-buttons.component.ts b/packages/dashboards/src/lib/configurator/components/wizard/dashwiz/dashwiz-buttons.component.ts
index 407e8b55c..3d6bde516 100644
--- a/packages/dashboards/src/lib/configurator/components/wizard/dashwiz/dashwiz-buttons.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/wizard/dashwiz/dashwiz-buttons.component.ts
@@ -24,6 +24,7 @@ import {
     EventEmitter,
     Input,
     Output,
+    inject,
 } from "@angular/core";
 
 import { IDashwizButtonsComponent } from "../types";
@@ -82,7 +83,7 @@ import { IDashwizButtonsComponent } from "../types";
 export class DashwizButtonsComponent implements IDashwizButtonsComponent {
     static lateLoadKey = "DashwizButtonsComponent";
 
-    constructor(public changeDetector: ChangeDetectorRef) {}
+    public changeDetector = inject(ChangeDetectorRef);
 
     @Input() public busy = false;
     @Input() public canFinish = false;
diff --git a/packages/dashboards/src/lib/configurator/pipe/pizzagna-root.pipe.ts b/packages/dashboards/src/lib/configurator/pipe/pizzagna-root.pipe.ts
index eea8c45b0..542a8691c 100644
--- a/packages/dashboards/src/lib/configurator/pipe/pizzagna-root.pipe.ts
+++ b/packages/dashboards/src/lib/configurator/pipe/pizzagna-root.pipe.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Pipe, PipeTransform } from "@angular/core";
+import { Pipe, PipeTransform, inject } from "@angular/core";
 
 import { IWidget } from "../../components/widget/types";
 import { WidgetTypesService } from "../../services/widget-types.service";
@@ -29,7 +29,7 @@ import { WidgetTypesService } from "../../services/widget-types.service";
     standalone: false,
 })
 export class PizzagnaRootPipe implements PipeTransform {
-    constructor(private widgetTypesService: WidgetTypesService) {}
+    private widgetTypesService = inject(WidgetTypesService);
 
     public transform(
         widget: IWidget | null,
diff --git a/packages/dashboards/src/lib/pizzagna/services/component-registry.service.ts b/packages/dashboards/src/lib/pizzagna/services/component-registry.service.ts
index dda513802..bb897ac50 100644
--- a/packages/dashboards/src/lib/pizzagna/services/component-registry.service.ts
+++ b/packages/dashboards/src/lib/pizzagna/services/component-registry.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, Type } from "@angular/core";
+import { Injectable, Type, inject } from "@angular/core";
 
 import { LoggerService } from "@nova-ui/bits";
 
@@ -33,7 +33,7 @@ export interface IComponentWithLateLoadKey extends Type<any> {
 export class ComponentRegistryService {
     private components: Record<string, any> = {};
 
-    constructor(private logger: LoggerService) {}
+    private logger = inject(LoggerService);
 
     public registerByLateLoadKey(component: IComponentWithLateLoadKey): void {
         this.registerComponentType(component.lateLoadKey, component);
diff --git a/packages/dashboards/src/lib/services/provider-registry.service.ts b/packages/dashboards/src/lib/services/provider-registry.service.ts
index 716e3e69e..a508e7aa4 100644
--- a/packages/dashboards/src/lib/services/provider-registry.service.ts
+++ b/packages/dashboards/src/lib/services/provider-registry.service.ts
@@ -25,6 +25,7 @@ import {
     NgZone,
     Optional,
     StaticProvider,
+    inject,
 } from "@angular/core";
 
 import {
@@ -125,7 +126,9 @@ import { WidgetToDashboardEventProxyService } from "./widget-to-dashboard-event-
 export class ProviderRegistryService {
     public staticProviders: IStaticProviders = {};
 
-    constructor(private logger: LoggerService) {
+    private logger = inject(LoggerService);
+
+    constructor() {
         this.setProviders({
             [NOVA_DATASOURCE_INTERVAL_REFRESHER]: {
                 provide: Refresher,
diff --git a/packages/dashboards/src/lib/services/url-interaction.service.ts b/packages/dashboards/src/lib/services/url-interaction.service.ts
index 464db3d09..26b2009f3 100644
--- a/packages/dashboards/src/lib/services/url-interaction.service.ts
+++ b/packages/dashboards/src/lib/services/url-interaction.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 
 import { LoggerService } from "@nova-ui/bits";
 
@@ -26,7 +26,7 @@ import { LoggerService } from "@nova-ui/bits";
     providedIn: "root",
 })
 export class UrlInteractionService {
-    constructor(private logger: LoggerService) {}
+    private logger = inject(LoggerService);
 
     public template(url: string, data: any): string {
         const regex = new RegExp(/\$\{([a-zA-Z0-9.]*)\}/g);
diff --git a/packages/dashboards/src/lib/services/widget-removal.service.ts b/packages/dashboards/src/lib/services/widget-removal.service.ts
index 760a8def6..57a1a3f8f 100644
--- a/packages/dashboards/src/lib/services/widget-removal.service.ts
+++ b/packages/dashboards/src/lib/services/widget-removal.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import isFunction from "lodash/isFunction";
 import { EMPTY, Observable, of } from "rxjs";
 import { catchError } from "rxjs/operators";
@@ -31,7 +31,7 @@ import { WidgetRemovalOperation } from "../configurator/services/types";
 
 @Injectable({ providedIn: "root" })
 export class WidgetRemovalService {
-    constructor(private logger: LoggerService) {}
+    private logger = inject(LoggerService);
 
     public handleRemove(
         dashboardComponent: DashboardComponent,

From 18bb5129bf0f4dcc7a2c7739ebecf038a9c683fb Mon Sep 17 00:00:00 2001
From: pavlo poimanov <pavlo.poimanov@solarwinds.com>
Date: Mon, 4 May 2026 15:04:30 +0300
Subject: [PATCH 3/7] chore(bits): add missing inject import in
 MenuKeyControlService

---
 packages/bits/src/lib/menu/menu-key-control.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bits/src/lib/menu/menu-key-control.service.ts b/packages/bits/src/lib/menu/menu-key-control.service.ts
index f8e92b850..4f48b178e 100644
--- a/packages/bits/src/lib/menu/menu-key-control.service.ts
+++ b/packages/bits/src/lib/menu/menu-key-control.service.ts
@@ -27,7 +27,7 @@ import {
     QueryList,
     Renderer2,
     Inject,
-    inject
+    inject,
 } from "@angular/core";
 import isNull from "lodash/isNull";
 import { Subject, Subscription } from "rxjs";

From 39c926ad9538106cfd0e35a50f3a59ec7bcc2cf5 Mon Sep 17 00:00:00 2001
From: pavlo poimanov <pavlo.poimanov@solarwinds.com>
Date: Tue, 5 May 2026 11:30:34 +0300
Subject: [PATCH 4/7] chore(bits): update component tests to use TestBed for
 dependency injection

Co-authored-by: Copilot <copilot@github.com>
---
 .../bits/src/lib/button/button.component.ts   |  2 +-
 .../src/lib/chips/chips.component.spec.ts     | 19 +++++-
 .../date-picker-day-picker.component.spec.ts  | 12 +++-
 ...date-picker-month-picker.component.spec.ts | 12 +++-
 .../date-picker-year-picker.component.spec.ts | 12 +++-
 .../freetype-query-builder.component.spec.ts  | 35 ++++++-----
 .../menu-action/menu-action.component.spec.ts | 21 ++++++-
 .../menu-link/menu-link.component.spec.ts     | 21 ++++++-
 .../menu-switch/menu-switch.component.spec.ts | 21 ++++++-
 .../overlay.component.spec.ts                 |  2 +-
 .../lib/popover/popover-modal.service.spec.ts | 36 ++++++-----
 .../option-key-control.service.spec.ts        | 12 +++-
 ...selected-items-key-control.service.spec.ts | 11 +++-
 .../src/lib/selector/selector.service.spec.ts |  5 +-
 .../table/table-state-handler.service.spec.ts | 17 ++++--
 .../bits/src/lib/table/table.component.ts     |  2 +-
 .../quick-picker.component.spec.ts            | 14 ++++-
 .../src/lib/toast/toast.component.spec.ts     | 59 ++++++-------------
 .../wizard-step-header.component.spec.ts      | 12 ++--
 .../src/pipes/unit-conversion.pipe.spec.ts    |  4 +-
 .../src/services/data-filter.service.spec.ts  | 30 ++++++----
 ...ocal-filtering-data-source.service.spec.ts |  4 +-
 .../src/services/dom-util.service.spec.ts     |  2 +-
 .../services/edge-detection.service.spec.ts   | 24 ++++++--
 .../bits/src/services/list.service.spec.ts    |  8 ++-
 .../transient-cache-factory.service.spec.ts   | 12 +++-
 .../transient-cache-factory.service.ts        |  7 ++-
 .../services/transient-cache.service.spec.ts  | 12 +++-
 .../services/unit-conversion.service.spec.ts  | 19 +++++-
 .../bits/src/services/util.service.spec.ts    | 14 ++++-
 30 files changed, 329 insertions(+), 132 deletions(-)

diff --git a/packages/bits/src/lib/button/button.component.ts b/packages/bits/src/lib/button/button.component.ts
index 07c224209..f83c83857 100644
--- a/packages/bits/src/lib/button/button.component.ts
+++ b/packages/bits/src/lib/button/button.component.ts
@@ -41,7 +41,7 @@ import { LoggerService } from "../../services/log-service";
     standalone: false,
 })
 export class ButtonComponent implements OnInit, OnDestroy, AfterContentChecked {
-    private type = inject(new HostAttributeToken("type"));
+    private type = inject(new HostAttributeToken("type"), { optional: true });
     private el = inject(ElementRef);
     private logger = inject(LoggerService);
 
diff --git a/packages/bits/src/lib/chips/chips.component.spec.ts b/packages/bits/src/lib/chips/chips.component.spec.ts
index 46ba11307..7f61b1861 100644
--- a/packages/bits/src/lib/chips/chips.component.spec.ts
+++ b/packages/bits/src/lib/chips/chips.component.spec.ts
@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { NgZone } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 
 import { ChipsOverflowService } from "./chips-overflow.service";
 import { ChipsComponent } from "./chips.component";
@@ -39,9 +40,21 @@ describe("components >", () => {
         let subject: ChipsComponent;
 
         beforeEach(() => {
-            subject = new ChipsComponent(
-                {} as NgZone,
-                {} as ChipsOverflowService
+            TestBed.configureTestingModule({
+                providers: [
+                    {
+                        provide: NgZone,
+                        useValue: new NgZone({ enableLongStackTrace: false }),
+                    },
+                    {
+                        provide: ChipsOverflowService,
+                        useValue: {} as ChipsOverflowService,
+                    },
+                ],
+            });
+
+            subject = TestBed.runInInjectionContext(
+                () => new ChipsComponent()
             );
         });
 
diff --git a/packages/bits/src/lib/date-picker/date-picker-day-picker.component.spec.ts b/packages/bits/src/lib/date-picker/date-picker-day-picker.component.spec.ts
index e73eb3fd9..2534e9704 100644
--- a/packages/bits/src/lib/date-picker/date-picker-day-picker.component.spec.ts
+++ b/packages/bits/src/lib/date-picker/date-picker-day-picker.component.spec.ts
@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
 import _isUndefined from "lodash/isUndefined";
 import _keys from "lodash/keys";
 import moment from "moment/moment";
@@ -32,7 +33,16 @@ describe("components >", () => {
 
         beforeEach(() => {
             inner = new DatePickerInnerComponent();
-            dayPicker = new DayPickerComponent(inner);
+
+            TestBed.configureTestingModule({
+                providers: [
+                    { provide: DatePickerInnerComponent, useValue: inner },
+                ],
+            });
+
+            dayPicker = TestBed.runInInjectionContext(
+                () => new DayPickerComponent()
+            );
         });
 
         it("should check setting year step", () => {
diff --git a/packages/bits/src/lib/date-picker/date-picker-month-picker.component.spec.ts b/packages/bits/src/lib/date-picker/date-picker-month-picker.component.spec.ts
index e3ef4a8ca..cf56bf937 100644
--- a/packages/bits/src/lib/date-picker/date-picker-month-picker.component.spec.ts
+++ b/packages/bits/src/lib/date-picker/date-picker-month-picker.component.spec.ts
@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
 import _isUndefined from "lodash/isUndefined";
 import _keys from "lodash/keys";
 
@@ -31,7 +32,16 @@ describe("components >", () => {
 
         beforeEach(() => {
             inner = new DatePickerInnerComponent();
-            monthPicker = new MonthPickerComponent(inner);
+
+            TestBed.configureTestingModule({
+                providers: [
+                    { provide: DatePickerInnerComponent, useValue: inner },
+                ],
+            });
+
+            monthPicker = TestBed.runInInjectionContext(
+                () => new MonthPickerComponent()
+            );
         });
 
         it("should check setting year step", () => {
diff --git a/packages/bits/src/lib/date-picker/date-picker-year-picker.component.spec.ts b/packages/bits/src/lib/date-picker/date-picker-year-picker.component.spec.ts
index ad3952862..c69d1e857 100644
--- a/packages/bits/src/lib/date-picker/date-picker-year-picker.component.spec.ts
+++ b/packages/bits/src/lib/date-picker/date-picker-year-picker.component.spec.ts
@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
 import _isUndefined from "lodash/isUndefined";
 import _keys from "lodash/keys";
 
@@ -31,7 +32,16 @@ describe("components >", () => {
 
         beforeEach(() => {
             inner = new DatePickerInnerComponent();
-            yearPicker = new YearPickerComponent(inner);
+
+            TestBed.configureTestingModule({
+                providers: [
+                    { provide: DatePickerInnerComponent, useValue: inner },
+                ],
+            });
+
+            yearPicker = TestBed.runInInjectionContext(
+                () => new YearPickerComponent()
+            );
         });
 
         it("should check setting year step", () => {
diff --git a/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.spec.ts b/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.spec.ts
index b95812967..6b711302e 100644
--- a/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.spec.ts
+++ b/packages/bits/src/lib/freetype-query-builder/freetype-query-builder.component.spec.ts
@@ -18,10 +18,15 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { ChangeDetectorRef, Renderer2 } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { FormBuilder } from "@angular/forms";
 import { Subject } from "rxjs";
 import { take } from "rxjs/operators";
 
 import { FreetypeQueryBuilderComponent } from "./freetype-query-builder.component";
+import { FreeTypeQueryUtilsService } from "./helpers/freetype-query-utils.service";
+import { ToastService } from "../toast/toast.service";
 
 describe("FreetypeQueryBuilderComponent", () => {
     describe("UnitTests", () => {
@@ -71,22 +76,24 @@ describe("FreetypeQueryBuilderComponent", () => {
         });
         let tooLongDropEvent: jasmine.SpyObj<DragEvent>;
         let keyDownEvent: KeyboardEvent;
-        let instance: FreetypeQueryBuilderComponent<any> =
-            new FreetypeQueryBuilderComponent(
-                renderer2,
-                formBuilder,
-                cd,
-                toastService,
-                utils
-            );
+        let instance: FreetypeQueryBuilderComponent<any>;
 
         beforeEach(() => {
-            instance = new FreetypeQueryBuilderComponent(
-                renderer2,
-                formBuilder,
-                cd,
-                toastService,
-                utils
+            TestBed.configureTestingModule({
+                providers: [
+                    { provide: Renderer2, useValue: renderer2 },
+                    { provide: FormBuilder, useValue: formBuilder },
+                    { provide: ChangeDetectorRef, useValue: cd },
+                    { provide: ToastService, useValue: toastService },
+                    {
+                        provide: FreeTypeQueryUtilsService,
+                        useValue: utils,
+                    },
+                ],
+            });
+
+            instance = TestBed.runInInjectionContext(
+                () => new FreetypeQueryBuilderComponent<any>()
             );
             instance.querySelect = qs;
             instance.messageTextarea = ta;
diff --git a/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.spec.ts b/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.spec.ts
index ef87338b7..0436a409f 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.spec.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-action/menu-action.component.spec.ts
@@ -18,6 +18,9 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { ChangeDetectorRef } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+
 import { MenuActionComponent } from "./menu-action.component";
 import { MockedChangeDetectorRef } from "../../../../spec-helpers/angular";
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
@@ -33,9 +36,21 @@ describe("components >", () => {
                     "preventDefault",
                     "stopPropagation",
                 ]);
-                menuAction = new MenuActionComponent(
-                    new MenuGroupComponent(),
-                    new MockedChangeDetectorRef()
+                TestBed.configureTestingModule({
+                    providers: [
+                        {
+                            provide: MenuGroupComponent,
+                            useValue: new MenuGroupComponent(),
+                        },
+                        {
+                            provide: ChangeDetectorRef,
+                            useValue: new MockedChangeDetectorRef(),
+                        },
+                    ],
+                });
+
+                menuAction = TestBed.runInInjectionContext(
+                    () => new MenuActionComponent()
                 );
             });
 
diff --git a/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.spec.ts b/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.spec.ts
index c28c6753e..9a47a38af 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.spec.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.spec.ts
@@ -18,6 +18,9 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { ChangeDetectorRef } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+
 import { MenuLinkComponent } from "./menu-link.component";
 import { MockedChangeDetectorRef } from "../../../../spec-helpers/angular";
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
@@ -33,9 +36,21 @@ describe("components >", () => {
                     "preventDefault",
                     "stopPropagation",
                 ]);
-                menuLink = new MenuLinkComponent(
-                    new MenuGroupComponent(),
-                    new MockedChangeDetectorRef()
+                TestBed.configureTestingModule({
+                    providers: [
+                        {
+                            provide: MenuGroupComponent,
+                            useValue: new MenuGroupComponent(),
+                        },
+                        {
+                            provide: ChangeDetectorRef,
+                            useValue: new MockedChangeDetectorRef(),
+                        },
+                    ],
+                });
+
+                menuLink = TestBed.runInInjectionContext(
+                    () => new MenuLinkComponent()
                 );
             });
 
diff --git a/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.spec.ts b/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.spec.ts
index 8e2bdcd0c..8ba2f7dce 100644
--- a/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.spec.ts
+++ b/packages/bits/src/lib/menu/menu-item/menu-switch/menu-switch.component.spec.ts
@@ -18,6 +18,9 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { ChangeDetectorRef } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+
 import { MenuSwitchComponent } from "./menu-switch.component";
 import { MockedChangeDetectorRef } from "../../../../spec-helpers/angular";
 import { MenuGroupComponent } from "../menu-group/menu-group.component";
@@ -34,9 +37,21 @@ describe("components >", () => {
                     "preventDefault",
                     "stopPropagation",
                 ]);
-                menuSwitch = new MenuSwitchComponent(
-                    new MenuGroupComponent(),
-                    new MockedChangeDetectorRef()
+                TestBed.configureTestingModule({
+                    providers: [
+                        {
+                            provide: MenuGroupComponent,
+                            useValue: new MenuGroupComponent(),
+                        },
+                        {
+                            provide: ChangeDetectorRef,
+                            useValue: new MockedChangeDetectorRef(),
+                        },
+                    ],
+                });
+
+                menuSwitch = TestBed.runInInjectionContext(
+                    () => new MenuSwitchComponent()
                 );
                 spyForSwitchEmit = spyOn(menuSwitch.actionDone, "emit");
             });
diff --git a/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts b/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts
index 0d92c265e..112210565 100644
--- a/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts
+++ b/packages/bits/src/lib/overlay/overlay-component/overlay.component.spec.ts
@@ -71,7 +71,7 @@ describe("components >", () => {
                     EventBusService,
                     {
                         provide: NUI_SELECT_V2_OPTION_PARENT_COMPONENT,
-                        useClass: PopupWrapperComponent,
+                        useValue: { selectOption: () => {}, selectedOptions: [], multiselect: false },
                     },
                 ],
                 schemas: [NO_ERRORS_SCHEMA],
diff --git a/packages/bits/src/lib/popover/popover-modal.service.spec.ts b/packages/bits/src/lib/popover/popover-modal.service.spec.ts
index 8f6be3b0d..31845e0b0 100644
--- a/packages/bits/src/lib/popover/popover-modal.service.spec.ts
+++ b/packages/bits/src/lib/popover/popover-modal.service.spec.ts
@@ -18,6 +18,9 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { DOCUMENT } from "@angular/common";
+import { TestBed } from "@angular/core/testing";
+
 import {
     IPopoverPosition,
     PopoverAlignment,
@@ -329,18 +332,21 @@ describe("services >", () => {
         let popover: HTMLDivElement;
         let triggerElement: HTMLDivElement;
 
-        beforeAll(() => {
-            edgeDetectionService = new EdgeDetectionService(
-                new DomUtilService(document),
-                document,
-                new LoggerService()
-            );
-            positionService = new PositionService(document);
-            popoverModalService = new PopoverModalService(
-                positionService,
-                document,
-                edgeDetectionService
-            );
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                providers: [
+                    DomUtilService,
+                    EdgeDetectionService,
+                    LoggerService,
+                    PositionService,
+                    PopoverModalService,
+                    { provide: DOCUMENT, useValue: document },
+                ],
+            });
+
+            edgeDetectionService = TestBed.inject(EdgeDetectionService);
+            positionService = TestBed.inject(PositionService);
+            popoverModalService = TestBed.inject(PopoverModalService);
 
             popover = document.createElement("div");
             popover.innerHTML =
@@ -351,8 +357,10 @@ describe("services >", () => {
             document.body.appendChild(triggerElement);
         });
 
-        afterAll(() => {
-            document.body.removeChild(triggerElement);
+        afterEach(() => {
+            if (triggerElement.parentNode === document.body) {
+                document.body.removeChild(triggerElement);
+            }
         });
 
         beforeEach(() => {
diff --git a/packages/bits/src/lib/select-v2/option-key-control.service.spec.ts b/packages/bits/src/lib/select-v2/option-key-control.service.spec.ts
index 6e2610cfc..cb21268f7 100644
--- a/packages/bits/src/lib/select-v2/option-key-control.service.spec.ts
+++ b/packages/bits/src/lib/select-v2/option-key-control.service.spec.ts
@@ -18,6 +18,9 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { LiveAnnouncer } from "@angular/cdk/a11y";
+import { TestBed } from "@angular/core/testing";
+
 import { OptionKeyControlService } from "./option-key-control.service";
 import { KEYBOARD_CODE } from "../../constants/keycode.constants";
 
@@ -50,7 +53,14 @@ describe("components > ", () => {
 
     describe("combobox > OptionKeyControlService", () => {
         beforeEach(() => {
-            service = new OptionKeyControlService<any>(announcerMock);
+            TestBed.configureTestingModule({
+                providers: [
+                    OptionKeyControlService,
+                    { provide: LiveAnnouncer, useValue: announcerMock },
+                ],
+            });
+
+            service = TestBed.inject(OptionKeyControlService<any>);
             service.popup = popupMock;
             service.optionItems = options as any;
             service.initKeyboardManager();
diff --git a/packages/bits/src/lib/select-v2/selected-items-key-control.service.spec.ts b/packages/bits/src/lib/select-v2/selected-items-key-control.service.spec.ts
index 5c14e94fd..666a6b471 100644
--- a/packages/bits/src/lib/select-v2/selected-items-key-control.service.spec.ts
+++ b/packages/bits/src/lib/select-v2/selected-items-key-control.service.spec.ts
@@ -18,7 +18,9 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { LiveAnnouncer } from "@angular/cdk/a11y";
 import { EventEmitter } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 
 import { SelectedItemsKeyControlService } from "./selected-items-key-control.service";
 import { KEYBOARD_CODE } from "../../constants/keycode.constants";
@@ -54,7 +56,14 @@ describe("components > ", () => {
     describe("combobox >", () => {
         describe(SelectedItemsKeyControlService.name, () => {
             beforeEach(() => {
-                testService = new SelectedItemsKeyControlService(announcerMock);
+                TestBed.configureTestingModule({
+                    providers: [
+                        SelectedItemsKeyControlService,
+                        { provide: LiveAnnouncer, useValue: announcerMock },
+                    ],
+                });
+
+                testService = TestBed.inject(SelectedItemsKeyControlService);
 
                 testService.initSelectedItemsKeyManager(
                     queryListMock as any,
diff --git a/packages/bits/src/lib/selector/selector.service.spec.ts b/packages/bits/src/lib/selector/selector.service.spec.ts
index 3e73ed9d3..43554aae0 100644
--- a/packages/bits/src/lib/selector/selector.service.spec.ts
+++ b/packages/bits/src/lib/selector/selector.service.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { CheckboxStatus, SelectionType } from "./public-api";
 import { SelectorService } from "./selector.service";
 import { ISelection, SelectionModel } from "../../services/public-api";
@@ -93,7 +95,8 @@ describe("services >", () => {
         });
 
         beforeEach(() => {
-            selectorService = new SelectorService();
+            TestBed.configureTestingModule({});
+            selectorService = TestBed.inject(SelectorService);
         });
 
         describe("applySelector >", () => {
diff --git a/packages/bits/src/lib/table/table-state-handler.service.spec.ts b/packages/bits/src/lib/table/table-state-handler.service.spec.ts
index aef4ad860..ae406656b 100644
--- a/packages/bits/src/lib/table/table-state-handler.service.spec.ts
+++ b/packages/bits/src/lib/table/table-state-handler.service.spec.ts
@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { NgZone } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 
 import { TableSpecHelpers } from "./table-spec-helpers/table-spec-helpers";
 import {
@@ -91,10 +92,18 @@ describe("services >", () => {
         let serviceInstance: TableStateHandlerService;
 
         beforeEach(() => {
-            serviceInstance = new TableStateHandlerService(
-                NgZone as any,
-                SelectorService as any
-            );
+            TestBed.configureTestingModule({
+                providers: [
+                    TableStateHandlerService,
+                    {
+                        provide: NgZone,
+                        useValue: new NgZone({ enableLongStackTrace: false }),
+                    },
+                    SelectorService,
+                ],
+            });
+
+            serviceInstance = TestBed.inject(TableStateHandlerService);
             serviceInstance.tableColumns = ["first", "second", "third"];
         });
 
diff --git a/packages/bits/src/lib/table/table.component.ts b/packages/bits/src/lib/table/table.component.ts
index 1508b0b22..39db56da9 100644
--- a/packages/bits/src/lib/table/table.component.ts
+++ b/packages/bits/src/lib/table/table.component.ts
@@ -155,7 +155,7 @@ export class TableComponent<T>
         const _differs = inject(IterableDiffers);
         const _changeDetectorRef = inject(ChangeDetectorRef);
         const _elementRef = inject<ElementRef<any>>(ElementRef);
-        const role = inject(new HostAttributeToken("role"));
+        const role = inject(new HostAttributeToken("role"), { optional: true });
         const _dir = inject(Directionality);
         const document = inject<Document>(DOCUMENT);
         const platform = inject(Platform);
diff --git a/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.spec.ts b/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.spec.ts
index f314d6733..d643cbb5e 100644
--- a/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.spec.ts
+++ b/packages/bits/src/lib/time-frame-picker/quick-picker/quick-picker.component.spec.ts
@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { ChangeDetectorRef } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 
 import { QuickPickerComponent } from "./quick-picker.component";
 
@@ -27,7 +28,18 @@ describe("components >", () => {
         let quickPicker: QuickPickerComponent;
 
         beforeEach(() => {
-            quickPicker = new QuickPickerComponent(<ChangeDetectorRef>{});
+            TestBed.configureTestingModule({
+                providers: [
+                    {
+                        provide: ChangeDetectorRef,
+                        useValue: <ChangeDetectorRef>{},
+                    },
+                ],
+            });
+
+            quickPicker = TestBed.runInInjectionContext(
+                () => new QuickPickerComponent()
+            );
         });
 
         describe("if selectedPreset is defined", () => {
diff --git a/packages/bits/src/lib/toast/toast.component.spec.ts b/packages/bits/src/lib/toast/toast.component.spec.ts
index e66dc6447..983372c9e 100644
--- a/packages/bits/src/lib/toast/toast.component.spec.ts
+++ b/packages/bits/src/lib/toast/toast.component.spec.ts
@@ -26,6 +26,7 @@ import { ToastPackage } from "./toast-package";
 import { ToastRef } from "./toast-ref";
 import { ToastComponent } from "./toast.component";
 import { ToastService } from "./toast.service";
+import { ToastServiceBase } from "./toast.servicebase";
 import { IconComponent } from "../../lib/icon/icon.component";
 import { NotificationService } from "../../services/notification-service";
 
@@ -34,13 +35,6 @@ describe("components >", () => {
         let toastService: IToastService;
         let toastPackage: ToastPackage;
         let toastRef: ToastRef<ToastComponent>;
-        const mockNgZone = jasmine.createSpyObj("mockNgZone", [
-            "run",
-            "runOutsideAngular",
-        ]);
-        mockNgZone.run.and.callFake(() => false);
-        mockNgZone.runOutsideAngular.and.callFake(() => {});
-
         const defaultToastConfig: IToastConfig = {
             maxOpened: 2,
             autoDismiss: false,
@@ -82,6 +76,8 @@ describe("components >", () => {
                     NotificationService,
                     ToastContainerService,
                     ToastService,
+                    { provide: ToastServiceBase, useExisting: ToastService },
+                    { provide: ToastPackage, useFactory: () => toastPackage },
                 ],
             });
 
@@ -91,11 +87,8 @@ describe("components >", () => {
         });
 
         it("Title and body of a component should be set correctly", fakeAsync(() => {
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             expect(componentInstance.body).toEqual("Test message");
             expect(componentInstance.title).toEqual("Test title");
@@ -104,11 +97,8 @@ describe("components >", () => {
         }));
 
         it("Class 'success' should be put on success toast", fakeAsync(() => {
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             expect(
                 componentInstance.toastClasses.indexOf("success")
@@ -119,11 +109,8 @@ describe("components >", () => {
 
         it("Class 'info' should be put on info toast", fakeAsync(() => {
             toastPackage.toastType = "info";
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             expect(componentInstance.toastClasses.indexOf("info")).not.toEqual(
                 -1
@@ -134,11 +121,8 @@ describe("components >", () => {
 
         it("Class 'error' should be put on error toast", fakeAsync(() => {
             toastPackage.toastType = "error";
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             expect(componentInstance.toastClasses.indexOf("error")).not.toEqual(
                 -1
@@ -149,11 +133,8 @@ describe("components >", () => {
 
         it("Class 'warning' should be put on warning toast", fakeAsync(() => {
             toastPackage.toastType = "warning";
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             expect(
                 componentInstance.toastClasses.indexOf("warning")
@@ -164,11 +145,8 @@ describe("components >", () => {
 
         // TODO: enable after NUI-3641 is fixed
         xit("After activation toast should be shown", () => {
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             toastRef.activate();
             expect(componentInstance.display).toEqual("block");
@@ -178,11 +156,8 @@ describe("components >", () => {
 
         // TODO: enable after NUI-3641 is fixed
         xit("After remove toast should be removed", fakeAsync(() => {
-            // @ts-ignore: Suppressing error for testing purposes
-            const componentInstance = new ToastComponent(
-                toastService,
-                toastPackage,
-                mockNgZone
+            const componentInstance = TestBed.runInInjectionContext(
+                () => new ToastComponent()
             );
             toastRef.activate();
             componentInstance.remove();
diff --git a/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.spec.ts b/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.spec.ts
index 07d2a220e..7ceedb2d9 100644
--- a/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.spec.ts
+++ b/packages/bits/src/lib/wizard-v2/wizard-step-header/wizard-step-header.component.spec.ts
@@ -28,6 +28,7 @@ import { WizardStepV2Component } from "../wizard-step/wizard-step.component";
 import { WizardStepLabelDirective } from "../wizard-step-label.directive";
 
 const fakeStep = {} as WizardStepV2Component;
+const fakeTemplateRef = {} as TemplateRef<any>;
 
 describe("components >", () => {
     describe("WizardStepHeader", () => {
@@ -38,6 +39,9 @@ describe("components >", () => {
             TestBed.configureTestingModule({
                 declarations: [WizardStepHeaderComponent],
                 imports: [IconComponent],
+                providers: [
+                    { provide: TemplateRef, useValue: fakeTemplateRef },
+                ],
             });
 
             fixture = TestBed.createComponent(WizardStepHeaderComponent);
@@ -121,8 +125,8 @@ describe("components >", () => {
             });
 
             it("should return null if user pass template as input for label", () => {
-                const label = new WizardStepLabelDirective(
-                    {} as TemplateRef<any>
+                const label = TestBed.runInInjectionContext(
+                    () => new WizardStepLabelDirective()
                 );
 
                 component.label = label;
@@ -143,8 +147,8 @@ describe("components >", () => {
             });
 
             it("should return wizardDirective if user pass template as input for label", () => {
-                const label = new WizardStepLabelDirective(
-                    {} as TemplateRef<any>
+                const label = TestBed.runInInjectionContext(
+                    () => new WizardStepLabelDirective()
                 );
 
                 component.label = label;
diff --git a/packages/bits/src/pipes/unit-conversion.pipe.spec.ts b/packages/bits/src/pipes/unit-conversion.pipe.spec.ts
index a95cdd4fd..d55fc4200 100644
--- a/packages/bits/src/pipes/unit-conversion.pipe.spec.ts
+++ b/packages/bits/src/pipes/unit-conversion.pipe.spec.ts
@@ -33,8 +33,8 @@ describe("pipes >", () => {
                 providers: [LoggerService, UnitConversionService],
             });
 
-            pipe = new UnitConversionPipe(
-                TestBed.inject(UnitConversionService)
+            pipe = TestBed.runInInjectionContext(
+                () => new UnitConversionPipe()
             );
         });
 
diff --git a/packages/bits/src/services/data-filter.service.spec.ts b/packages/bits/src/services/data-filter.service.spec.ts
index 1955964fd..413feef9e 100644
--- a/packages/bits/src/services/data-filter.service.spec.ts
+++ b/packages/bits/src/services/data-filter.service.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { DataFilterService } from "./data-filter.service";
 import {
     IFilter,
@@ -114,10 +116,12 @@ const expectedFiltersAfterUnregistering: IStubFilters = {
 describe("DataFilterService >", () => {
     let service: DataFilterService;
 
+    const createService = <T extends DataFilterService>(factory: () => T): T =>
+        TestBed.runInInjectionContext(factory);
+
     describe("without parent >", () => {
         it("should correctly register and get filters", () => {
-            // @ts-ignore: Suppressing error for testing purposes
-            service = new DataFilterService(null);
+            service = createService(() => new DataFilterService());
             const filterComponents = {
                 sorter: {
                     componentInstance: new SorterStub(),
@@ -134,8 +138,7 @@ describe("DataFilterService >", () => {
         });
 
         it("should correctly register, unregister and get filters", () => {
-            // @ts-ignore: Suppressing error for testing purposes
-            service = new DataFilterService(null);
+            service = createService(() => new DataFilterService());
             const filterComponents = {
                 sorter: {
                     componentInstance: new SorterStub(),
@@ -158,9 +161,9 @@ describe("DataFilterService >", () => {
 
     describe("with parent >", () => {
         it("should correctly register and get filters with one parent", () => {
-            service = new DataFilterService(
-                // @ts-ignore: Suppressing error for testing purposes
-                new DataFilterServiceSearchClassStub(null)
+            service = createService(() => new DataFilterService());
+            service.parent = createService(
+                () => new DataFilterServiceSearchClassStub()
             );
             const filterComponents = {
                 sorter: {
@@ -175,12 +178,15 @@ describe("DataFilterService >", () => {
         });
 
         it("should correctly register and get filters with multiple parents", () => {
-            service = new DataFilterService(
-                new DataFilterServiceSearchClassStub(
-                    // @ts-ignore: Suppressing error for testing purposes
-                    new DataFilterServicePaginatorClassStub(null)
-                )
+            const grandParent = createService(
+                () => new DataFilterServicePaginatorClassStub()
+            );
+            const parent = createService(
+                () => new DataFilterServiceSearchClassStub()
             );
+            parent.parent = grandParent;
+            service = createService(() => new DataFilterService());
+            service.parent = parent;
             const filterComponents = {
                 sorter: {
                     componentInstance: new SorterStub(),
diff --git a/packages/bits/src/services/data-source/local-filtering-data-source.service.spec.ts b/packages/bits/src/services/data-source/local-filtering-data-source.service.spec.ts
index aeb9acc23..f7333432c 100644
--- a/packages/bits/src/services/data-source/local-filtering-data-source.service.spec.ts
+++ b/packages/bits/src/services/data-source/local-filtering-data-source.service.spec.ts
@@ -67,8 +67,8 @@ describe("LocalFilteringDataSource >", () => {
         loggerService = TestBed.inject(LoggerService);
         spyOnProperty(loggerService, "warn").and.returnValue(noop);
         datePipe = TestBed.inject(DatePipe);
-        service = new LocalFilteringDataSource<INovaFilteringOutputs>(
-            new SearchService(loggerService, datePipe)
+        service = TestBed.runInInjectionContext(
+            () => new LocalFilteringDataSource<INovaFilteringOutputs>()
         );
         service.setData(RANDOM_ARRAY);
         expectedFilters = new ExpectedFilters().expectedFilters;
diff --git a/packages/bits/src/services/dom-util.service.spec.ts b/packages/bits/src/services/dom-util.service.spec.ts
index 99a578db0..d187b3244 100644
--- a/packages/bits/src/services/dom-util.service.spec.ts
+++ b/packages/bits/src/services/dom-util.service.spec.ts
@@ -55,13 +55,13 @@ describe("services >", () => {
         };
 
         beforeEach(() => {
-            domUtilService = new DomUtilService(document);
             TestBed.configureTestingModule({
                 declarations: [DomUtilServiceTestComponent],
             });
         });
         beforeEach(async () => {
             fixture = await createTestComponent();
+            domUtilService = TestBed.inject(DomUtilService);
             sourceElement = fixture.debugElement.query(
                 By.css("#source-element")
             ).nativeElement;
diff --git a/packages/bits/src/services/edge-detection.service.spec.ts b/packages/bits/src/services/edge-detection.service.spec.ts
index f3c60a83e..a54e26181 100644
--- a/packages/bits/src/services/edge-detection.service.spec.ts
+++ b/packages/bits/src/services/edge-detection.service.spec.ts
@@ -96,32 +96,42 @@ describe("services >", () => {
                 },
             });
             await TestBed.compileComponents();
+            edgeDetectionService = TestBed.inject(EdgeDetectionService);
             return TestBed.createComponent(EdgeDetectionTestComponent);
         };
 
         beforeEach(() => {
-            logger = new LoggerService();
+            logger = {
+                get error() {
+                    return noop;
+                },
+                get warn() {
+                    return noop;
+                },
+            } as LoggerService;
 
             logErrorSpy = spyOnProperty(logger, "error").and.returnValue(noop);
             spyOnProperty(logger, "warn").and.returnValue(noop);
-            edgeDetectionService = new EdgeDetectionService(
-                new DomUtilService(document),
-                document,
-                logger
-            );
             TestBed.configureTestingModule({
                 declarations: [EdgeDetectionTestComponent],
+                providers: [
+                    EdgeDetectionService,
+                    DomUtilService,
+                    { provide: LoggerService, useValue: logger },
+                ],
             });
         });
 
         describe("canBe", () => {
             it("logs errors if arguments were not passed", () => {
+                edgeDetectionService = TestBed.inject(EdgeDetectionService);
                 (edgeDetectionService as any).canBe();
 
                 expect(logErrorSpy).toHaveBeenCalled();
             });
 
             it("uses private 'offset' method to calculate element offset", () => {
+                edgeDetectionService = TestBed.inject(EdgeDetectionService);
                 basePoint = document.createElement("div");
                 deposit = document.createElement("div");
 
@@ -131,6 +141,7 @@ describe("services >", () => {
             });
 
             it("uses private 'outer' method to calculate either element outerWith or outerHeight", () => {
+                edgeDetectionService = TestBed.inject(EdgeDetectionService);
                 basePoint = document.createElement("div");
                 deposit = document.createElement("div");
 
@@ -142,6 +153,7 @@ describe("services >", () => {
 
         describe("getEdgeDefinerMeasurements (private)", () => {
             it("returns window measurements if no edgeDefiner element passed", () => {
+                edgeDetectionService = TestBed.inject(EdgeDetectionService);
                 const container = (
                     edgeDetectionService as any
                 ).getEdgeDefinerMeasurements(null);
diff --git a/packages/bits/src/services/list.service.spec.ts b/packages/bits/src/services/list.service.spec.ts
index aea21717e..cb6ceb7df 100644
--- a/packages/bits/src/services/list.service.spec.ts
+++ b/packages/bits/src/services/list.service.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { INovaFilteringOutputs } from "./data-source/public-api";
 import { ListService } from "./list.service";
 import { ISelection, SelectionModel } from "./public-api";
@@ -59,7 +61,11 @@ describe("services >", () => {
         });
 
         beforeEach(() => {
-            listService = new ListService(new SelectorService());
+            TestBed.configureTestingModule({
+                providers: [ListService, SelectorService],
+            });
+
+            listService = TestBed.inject(ListService);
             state = {
                 repeat: {
                     itemsSource: FIRST_PAGE,
diff --git a/packages/bits/src/services/transient-cache-factory.service.spec.ts b/packages/bits/src/services/transient-cache-factory.service.spec.ts
index 5f62ae774..d9d3cfa36 100644
--- a/packages/bits/src/services/transient-cache-factory.service.spec.ts
+++ b/packages/bits/src/services/transient-cache-factory.service.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { ITransientCache } from "./public-api";
 import { TransientCacheFactory } from "./transient-cache-factory.service";
 import { UtilService } from "./util.service";
@@ -29,7 +31,15 @@ describe("services >", () => {
 
         beforeEach(() => {
             utilService = <UtilService>{};
-            cacheFactory = new TransientCacheFactory(utilService);
+
+            TestBed.configureTestingModule({
+                providers: [
+                    TransientCacheFactory,
+                    { provide: UtilService, useValue: utilService },
+                ],
+            });
+
+            cacheFactory = TestBed.inject(TransientCacheFactory);
         });
 
         it("should create a new transientCache", () => {
diff --git a/packages/bits/src/services/transient-cache-factory.service.ts b/packages/bits/src/services/transient-cache-factory.service.ts
index d0127ffff..756c582cf 100644
--- a/packages/bits/src/services/transient-cache-factory.service.ts
+++ b/packages/bits/src/services/transient-cache-factory.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable, inject } from "@angular/core";
+import { EnvironmentInjector, Injectable, inject } from "@angular/core";
 import size from "lodash/size";
 
 import { ITransientCache } from "./public-api";
@@ -33,6 +33,7 @@ export interface IMap<T> {
 @Injectable()
 export class TransientCacheFactory {
     private utilService = inject(UtilService);
+    private environmentInjector = inject(EnvironmentInjector);
 
     private cacheMap: IMap<ITransientCache> = {};
 
@@ -54,8 +55,8 @@ export class TransientCacheFactory {
      */
     public create = (cacheId: string): ITransientCache => {
         if (this.cacheMap[cacheId] == null) {
-            this.cacheMap[cacheId] = new TransientCacheService(
-                this.utilService
+            this.cacheMap[cacheId] = this.environmentInjector.runInContext(
+                () => new TransientCacheService()
             );
             return this.get(cacheId);
         } else {
diff --git a/packages/bits/src/services/transient-cache.service.spec.ts b/packages/bits/src/services/transient-cache.service.spec.ts
index 76c97f894..81f35e09c 100644
--- a/packages/bits/src/services/transient-cache.service.spec.ts
+++ b/packages/bits/src/services/transient-cache.service.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { ITransientCache } from "./public-api";
 import { TransientCacheService } from "./transient-cache.service";
 import { UtilService } from "./util.service";
@@ -36,7 +38,15 @@ describe("services >", () => {
         beforeEach(() => {
             utilService = <UtilService>{};
             utilService.sizeof = () => 1;
-            cache = new TransientCacheService(utilService);
+
+            TestBed.configureTestingModule({
+                providers: [
+                    TransientCacheService,
+                    { provide: UtilService, useValue: utilService },
+                ],
+            });
+
+            cache = TestBed.inject(TransientCacheService);
         });
 
         it("should add object to the cache", () => {
diff --git a/packages/bits/src/services/unit-conversion.service.spec.ts b/packages/bits/src/services/unit-conversion.service.spec.ts
index 09b531101..6f8a76346 100644
--- a/packages/bits/src/services/unit-conversion.service.spec.ts
+++ b/packages/bits/src/services/unit-conversion.service.spec.ts
@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
 import noop from "lodash/noop";
 
 import { LoggerService } from "./log-service";
@@ -34,11 +35,25 @@ describe("services >", () => {
         let subject: UnitConversionService;
 
         beforeEach(() => {
-            logger = new LoggerService();
+            logger = {
+                get error() {
+                    return noop;
+                },
+                get warn() {
+                    return noop;
+                },
+            } as LoggerService;
             spyOnProperty(logger, "error").and.returnValue(noop);
             spyOnProperty(logger, "warn").and.returnValue(noop);
 
-            subject = new UnitConversionService(logger);
+            TestBed.configureTestingModule({
+                providers: [
+                    UnitConversionService,
+                    { provide: LoggerService, useValue: logger },
+                ],
+            });
+
+            subject = TestBed.inject(UnitConversionService);
         });
 
         describe("convert > ", () => {
diff --git a/packages/bits/src/services/util.service.spec.ts b/packages/bits/src/services/util.service.spec.ts
index 9f38dd369..36647b41b 100644
--- a/packages/bits/src/services/util.service.spec.ts
+++ b/packages/bits/src/services/util.service.spec.ts
@@ -18,6 +18,10 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { DOCUMENT } from "@angular/common";
+import { PLATFORM_ID } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+
 import { BrowserName, UtilService } from "./util.service";
 
 describe("services >", () => {
@@ -32,7 +36,15 @@ describe("services >", () => {
         };
 
         beforeEach(() => {
-            utilService = new UtilService(fakeDocument, "browser" as any);
+            TestBed.configureTestingModule({
+                providers: [
+                    UtilService,
+                    { provide: DOCUMENT, useValue: fakeDocument },
+                    { provide: PLATFORM_ID, useValue: "browser" },
+                ],
+            });
+
+            utilService = TestBed.inject(UtilService);
         });
 
         describe("when sizeof() is called", () => {

From 98b3087f83216dd35d26f6b674fbeaf89a9b941a Mon Sep 17 00:00:00 2001
From: pavlo poimanov <pavlo.poimanov@solarwinds.com>
Date: Tue, 5 May 2026 12:51:35 +0300
Subject: [PATCH 5/7] chore(charts): migrate to inject() for dependency
 injection in components and directives

---
 .../src/chart-popover/chart-popover.component.ts      |  9 ++++-----
 .../src/chart-tooltips/chart-tooltip.directive.ts     | 11 +++++------
 packages/charts/src/chart/chart.component.ts          | 11 +++++------
 .../legend/legend-series/legend-series.component.ts   |  6 ++----
 .../rich-legend-tile.component.spec.ts                |  7 ++++---
 .../rich-legend-tile/rich-legend-tile.component.ts    | 11 ++++-------
 .../charts/src/thresholds/thresholds-service.spec.ts  |  9 ++++++++-
 7 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/charts/src/chart-popover/chart-popover.component.ts b/packages/charts/src/chart-popover/chart-popover.component.ts
index 13b0e783e..e60f5e936 100644
--- a/packages/charts/src/chart-popover/chart-popover.component.ts
+++ b/packages/charts/src/chart-popover/chart-popover.component.ts
@@ -23,6 +23,7 @@ import {
     Component,
     ElementRef,
     EventEmitter,
+    inject,
     Input,
     OnChanges,
     OnDestroy,
@@ -56,14 +57,12 @@ export class ChartPopoverComponent implements OnChanges, OnInit, OnDestroy {
 
     @ViewChild(PopoverComponent) popover: PopoverComponent;
 
+    private changeDetector = inject(ChangeDetectorRef);
+    public element = inject(ElementRef);
+
     private readonly destroy$ = new Subject<void>();
     private initPlugin$ = new Subject<void>();
 
-    constructor(
-        private changeDetector: ChangeDetectorRef,
-        public element: ElementRef
-    ) {}
-
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes.plugin && !changes.plugin.isFirstChange()) {
             this.initPlugin();
diff --git a/packages/charts/src/chart-tooltips/chart-tooltip.directive.ts b/packages/charts/src/chart-tooltips/chart-tooltip.directive.ts
index 033af5bd9..d3f618233 100644
--- a/packages/charts/src/chart-tooltips/chart-tooltip.directive.ts
+++ b/packages/charts/src/chart-tooltips/chart-tooltip.directive.ts
@@ -34,6 +34,7 @@ import { ComponentPortal } from "@angular/cdk/portal";
 import {
     Directive,
     ElementRef,
+    inject,
     Input,
     OnDestroy,
     OnInit,
@@ -61,12 +62,10 @@ export class ChartTooltipDirective implements OnInit, OnDestroy {
     private closeSubscription: Subscription;
     private positionStrategy: FlexibleConnectedPositionStrategy;
 
-    constructor(
-        private overlay: Overlay,
-        private overlayPositionBuilder: OverlayPositionBuilder,
-        private scrollStrategyOptions: ScrollStrategyOptions,
-        public elementRef: ElementRef<HTMLElement>
-    ) {}
+    private overlay = inject(Overlay);
+    private overlayPositionBuilder = inject(OverlayPositionBuilder);
+    private scrollStrategyOptions = inject(ScrollStrategyOptions);
+    public elementRef = inject(ElementRef<HTMLElement>);
 
     public ngOnInit(): void {
         this.positionStrategy = this.overlayPositionBuilder
diff --git a/packages/charts/src/chart/chart.component.ts b/packages/charts/src/chart/chart.component.ts
index c51bcd738..8a2023579 100644
--- a/packages/charts/src/chart/chart.component.ts
+++ b/packages/charts/src/chart/chart.component.ts
@@ -25,6 +25,7 @@ import {
     Component,
     ElementRef,
     forwardRef,
+    inject,
     Input,
     NgZone,
     OnChanges,
@@ -67,16 +68,14 @@ export class ChartComponent
 {
     @Input() public chart: IChart;
 
+    private elRef = inject(ElementRef);
+    private ngZone = inject(NgZone);
+    private cd = inject(ChangeDetectorRef);
+
     public resizeObserver?: ResizeObserver;
     private resizeHandler: Function;
     private intersectionObserver: IntersectionObserver;
 
-    constructor(
-        private elRef: ElementRef,
-        private ngZone: NgZone,
-        private cd: ChangeDetectorRef
-    ) {}
-
     public ngOnInit(): void {
         this.intersectionObserver = new IntersectionObserver(
             this.intersectionObserverCallback
diff --git a/packages/charts/src/legend/legend-series/legend-series.component.ts b/packages/charts/src/legend/legend-series/legend-series.component.ts
index b451ffba7..8c9603209 100644
--- a/packages/charts/src/legend/legend-series/legend-series.component.ts
+++ b/packages/charts/src/legend/legend-series/legend-series.component.ts
@@ -24,11 +24,10 @@ import {
     Component,
     ElementRef,
     EventEmitter,
-    Host,
     HostBinding,
     HostListener,
+    inject,
     Input,
-    Optional,
     Output,
     ViewChild,
 } from "@angular/core";
@@ -138,8 +137,7 @@ export class LegendSeriesComponent implements AfterContentInit {
     private _seriesRenderState: RenderState;
     private _active = false;
     private _interactive: boolean;
-
-    constructor(@Optional() @Host() private legend: LegendComponent) {}
+    private legend = inject(LegendComponent, { optional: true, host: true });
 
     public ngAfterContentInit(): void {
         if (this.legend) {
diff --git a/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.spec.ts b/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.spec.ts
index 62217516e..519af5e64 100644
--- a/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.spec.ts
+++ b/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.spec.ts
@@ -72,9 +72,10 @@ describe("components >", () => {
             });
 
             testLegendComponent = new LegendComponent();
-            testLegendSeriesComponent = new LegendSeriesComponent(
-                testLegendComponent
-            );
+            testLegendSeriesComponent = {
+                hasInputDescription: () => false,
+                hasProjectedDescription: () => false,
+            } as unknown as LegendSeriesComponent;
         });
 
         describe("template conditionals >", () => {
diff --git a/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.ts b/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.ts
index 65564f255..43067fcb3 100644
--- a/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.ts
+++ b/packages/charts/src/legend/legend-tile/rich-legend-tile/rich-legend-tile.component.ts
@@ -23,9 +23,8 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
-    Host,
+    inject,
     Input,
-    Optional,
     ViewEncapsulation,
 } from "@angular/core";
 import _isNil from "lodash/isNil";
@@ -65,11 +64,9 @@ export class RichLegendTileComponent
 
     public seriesHasAdditionalContent: boolean;
 
-    constructor(
-        @Host() private legendSeries: LegendSeriesComponent,
-        @Optional() @Host() private legend: LegendComponent,
-        private changeDetector: ChangeDetectorRef
-    ) {}
+    private legendSeries = inject(LegendSeriesComponent, { host: true });
+    private legend = inject(LegendComponent, { optional: true, host: true });
+    private changeDetector = inject(ChangeDetectorRef);
 
     public ngAfterContentInit(): void {
         if (this.legend) {
diff --git a/packages/charts/src/thresholds/thresholds-service.spec.ts b/packages/charts/src/thresholds/thresholds-service.spec.ts
index 9e52b8c13..5ad4fb9f8 100644
--- a/packages/charts/src/thresholds/thresholds-service.spec.ts
+++ b/packages/charts/src/thresholds/thresholds-service.spec.ts
@@ -21,6 +21,7 @@
 import uniq from "lodash/uniq";
 import moment from "moment/moment";
 
+import { TestBed } from "@angular/core/testing";
 import { LoggerService } from "@nova-ui/bits";
 
 import { ThresholdsService } from "./thresholds-service";
@@ -52,7 +53,13 @@ describe("thresholds service", () => {
     const format = "YYYY-MM-DDTHH:mm:ssZ";
 
     beforeEach(() => {
-        thresholdsService = new ThresholdsService(new LoggerService());
+        TestBed.configureTestingModule({
+            providers: [
+                ThresholdsService,
+                { provide: LoggerService, useValue: { warn: () => {}, error: () => {} } },
+            ],
+        });
+        thresholdsService = TestBed.inject(ThresholdsService);
         scales = {
             x: new TimeScale(),
             y: new LinearScale(),

From 182d14a95d9588ed1908f15be22f3f1872a6f7df Mon Sep 17 00:00:00 2001
From: pavlo poimanov <pavlo.poimanov@solarwinds.com>
Date: Tue, 5 May 2026 15:01:22 +0300
Subject: [PATCH 6/7] chore(charts): update provider to use NuiEnvironment
 instead of LoggerService

---
 .../components/demo/development/core/core-example.module.ts  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/charts/examples/src/components/demo/development/core/core-example.module.ts b/packages/charts/examples/src/components/demo/development/core/core-example.module.ts
index ac572eeb3..eb3c3d4dc 100644
--- a/packages/charts/examples/src/components/demo/development/core/core-example.module.ts
+++ b/packages/charts/examples/src/components/demo/development/core/core-example.module.ts
@@ -22,7 +22,6 @@ import { NgModule, Provider } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import {
-    LoggerService,
     LogLevel,
     NuiButtonModule,
     NuiCheckboxModule,
@@ -80,8 +79,8 @@ environment.logLevel = LogLevel.debug;
     ],
     providers: [
         {
-            provide: LoggerService,
-            useValue: new LoggerService(environment),
+            provide: NuiEnvironment,
+            useValue: environment,
         } as Provider,
     ],
 })

From 84fcd71afe8f12ab27a59032414293519c2c60aa Mon Sep 17 00:00:00 2001
From: pavlo poimanov <pavlo.poimanov@solarwinds.com>
Date: Fri, 15 May 2026 13:23:28 +0300
Subject: [PATCH 7/7] refactor: streamline dependency injection and testing
 setup across components and services

- Updated various components and services to utilize Angular's `inject` function for dependency injection, improving code readability and maintainability.
- Refactored test setups to use `TestBed` for injecting dependencies, reducing boilerplate code and enhancing test clarity.
- Removed unnecessary constructor parameters and simplified service instantiation in tests.
- Ensured consistent usage of `PIZZAGNA_EVENT_BUS` across services and components for event handling.
---
 .../src/lib/common/common.module.ts           |  1 +
 .../pipes/dashboard-unit-conversion-pipe.ts   | 12 +++++-
 .../dashboard-unit-conversion.pipe.spec.ts    | 18 ++++++++-
 .../kpi-widget/kpi.component.spec.ts          | 11 +----
 .../components/layouts/base-layout.spec.ts    | 15 ++-----
 .../list-widget/list-widget.component.ts      | 22 +++++-----
 .../proportional-widget.component.spec.ts     | 12 ++----
 .../proportional-widget.component.ts          | 24 +++++------
 .../providers/data-source-adapter.spec.ts     | 18 +++++----
 .../providers/kpi-data-source-adapter.spec.ts | 16 +++++---
 .../providers/kpi-scale-sync-broker.ts        |  9 ++---
 ...pi-status-content-fallback-adapter.spec.ts | 18 +++++----
 .../providers/loading-adapter.spec.ts         | 18 +++++----
 .../pizzagna-broadcaster.service.spec.ts      | 16 +++++---
 .../status-content-fallback-adapter.spec.ts   | 18 +++++----
 .../timeseries-data-source-adapter.spec.ts    | 17 ++++----
 .../risk-score-tile.component.spec.ts         | 11 +----
 .../timeframe-selection.component.spec.ts     | 12 ++----
 .../timeseries-scales.service.ts              | 12 ++----
 .../widget-body-content.component.spec.ts     | 12 +-----
 .../widget-body/widget-body.component.spec.ts | 14 ++-----
 .../donut-content-raw-formatter.component.ts  | 15 ++-----
 ...collection-configuration.component.spec.ts | 18 ++-------
 .../kpi-section-converter.service.spec.ts     | 18 +++++----
 .../generic-converter.service.spec.ts         | 18 +++++----
 ...-and-description-converter.service.spec.ts | 17 ++++----
 .../table-columns-converter.service.spec.ts   | 20 +++++++---
 .../table-filters-converter.service.spec.ts   | 20 +++++++---
 ...able-scroll-type-converter.service.spec.ts | 20 +++++++---
 .../gridster-item-widget-id.directive.ts      |  5 +--
 .../widget-editor/widget-editor.directive.ts  | 13 +++---
 .../components/pizzagna/pizzagna.component.ts | 13 +++---
 .../component-portal.directive.ts             | 14 +++----
 .../services/component-portal.service.spec.ts | 15 +++++--
 .../services/component-portal.service.ts      |  8 ++--
 .../services/pizzagna.service.spec.ts         | 15 +++++--
 .../lib/pizzagna/services/pizzagna.service.ts |  8 ++--
 ...al-content-aggregators-registry.service.ts |  6 +--
 .../src/lib/services/registry-service.ts      |  9 ++---
 .../table-formatter-registry.service.ts       | 22 +++++-----
 ...t-to-dashboard-event-proxy.service.spec.ts | 40 +++++++++----------
 ...widget-to-dashboard-event-proxy.service.ts | 19 ++++-----
 42 files changed, 317 insertions(+), 322 deletions(-)

diff --git a/packages/dashboards/src/lib/common/common.module.ts b/packages/dashboards/src/lib/common/common.module.ts
index 693f03cb6..356d8a8bc 100644
--- a/packages/dashboards/src/lib/common/common.module.ts
+++ b/packages/dashboards/src/lib/common/common.module.ts
@@ -33,5 +33,6 @@ const commonComponents = [PreviewOverlayComponent, WidgetErrorComponent];
     imports: [CommonModule, NuiImageModule],
     declarations: [DashboardUnitConversionPipe, ...commonComponents],
     exports: [CommonModule, DashboardUnitConversionPipe, ...commonComponents],
+    providers: [DashboardUnitConversionPipe],
 })
 export class NuiDashboardsCommonModule {}
diff --git a/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts b/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts
index 114bd6b99..4b556d999 100644
--- a/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts
+++ b/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion-pipe.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Pipe, PipeTransform, inject } from "@angular/core";
+import { InjectionToken, Pipe, PipeTransform, inject } from "@angular/core";
 
 import {
     UnitConversionService,
@@ -28,6 +28,14 @@ import {
 
 import { DEFAULT_UNIT_CONVERSION_THRESHOLD } from "../constants";
 
+export const UNIT_CONVERSION_SERVICE = new InjectionToken<UnitConversionService>(
+    "UNIT_CONVERSION_SERVICE",
+    {
+        providedIn: "root",
+        factory: () => inject(UnitConversionService),
+    }
+);
+
 /**
  * Pipe for transforming large values to their abbreviated counterparts.
  * Conversions are applied for values 10000 or greater
@@ -37,7 +45,7 @@ import { DEFAULT_UNIT_CONVERSION_THRESHOLD } from "../constants";
     standalone: false,
 })
 export class DashboardUnitConversionPipe implements PipeTransform {
-    private unitConversionService = inject(UnitConversionService);
+    private unitConversionService = inject(UNIT_CONVERSION_SERVICE);
 
     /**
      * Transforms a large number value to its abbreviated counterpart
diff --git a/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion.pipe.spec.ts b/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion.pipe.spec.ts
index ecdef1295..02416255d 100644
--- a/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion.pipe.spec.ts
+++ b/packages/dashboards/src/lib/common/pipes/dashboard-unit-conversion.pipe.spec.ts
@@ -18,10 +18,15 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { LoggerService, UnitBase, UnitConversionService } from "@nova-ui/bits";
 
 import { DEFAULT_UNIT_CONVERSION_THRESHOLD } from "../constants";
-import { DashboardUnitConversionPipe } from "./dashboard-unit-conversion-pipe";
+import {
+    DashboardUnitConversionPipe,
+    UNIT_CONVERSION_SERVICE,
+} from "./dashboard-unit-conversion-pipe";
 
 describe("DashboardUnitConversionPipe >", () => {
     let pipe: DashboardUnitConversionPipe;
@@ -30,7 +35,16 @@ describe("DashboardUnitConversionPipe >", () => {
     );
 
     beforeEach(() => {
-        pipe = new DashboardUnitConversionPipe(unitConversionService);
+        TestBed.configureTestingModule({
+            providers: [
+                DashboardUnitConversionPipe,
+                {
+                    provide: UNIT_CONVERSION_SERVICE,
+                    useValue: unitConversionService,
+                },
+            ],
+        });
+        pipe = TestBed.inject(DashboardUnitConversionPipe);
     });
 
     it(`should not abbreviate the value if it's less than DEFAULT_UNIT_CONVERSION_THRESHOLD`, () => {
diff --git a/packages/dashboards/src/lib/components/kpi-widget/kpi.component.spec.ts b/packages/dashboards/src/lib/components/kpi-widget/kpi.component.spec.ts
index e0004e6bc..fd58375b2 100644
--- a/packages/dashboards/src/lib/components/kpi-widget/kpi.component.spec.ts
+++ b/packages/dashboards/src/lib/components/kpi-widget/kpi.component.spec.ts
@@ -67,11 +67,6 @@ describe("KpiComponent", () => {
     let component: KpiComponent;
     let fixture: ComponentFixture<KpiComponent>;
     const eventBus = new EventBus<IEvent>();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
     let dataSource: IDataSource;
 
     beforeEach(waitForAsync(() => {
@@ -81,6 +76,7 @@ describe("KpiComponent", () => {
             imports: [NuiDashboardsModule],
             providers: [
                 ProviderRegistryService,
+                DynamicComponentCreator,
                 {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
@@ -89,10 +85,7 @@ describe("KpiComponent", () => {
                     provide: DATA_SOURCE,
                     useValue: dataSource,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
diff --git a/packages/dashboards/src/lib/components/layouts/base-layout.spec.ts b/packages/dashboards/src/lib/components/layouts/base-layout.spec.ts
index e6f0847c3..b7f97ec98 100644
--- a/packages/dashboards/src/lib/components/layouts/base-layout.spec.ts
+++ b/packages/dashboards/src/lib/components/layouts/base-layout.spec.ts
@@ -59,7 +59,6 @@ describe("BaseLayout", () => {
     let component: TestLayoutComponent;
     let fixture: ComponentFixture<TestLayoutComponent>;
     let eventBus: EventBus<IEvent>;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let pizzagnaService: PizzagnaService;
     const testComponents: IPizza = {
         component1: {
@@ -74,20 +73,12 @@ describe("BaseLayout", () => {
 
     beforeEach(waitForAsync(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
-        pizzagnaService.updateComponents(testComponents);
 
         TestBed.configureTestingModule({
             imports: [NuiDashboardsModule],
             providers: [
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                DynamicComponentCreator,
+                PizzagnaService,
                 {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
@@ -98,6 +89,8 @@ describe("BaseLayout", () => {
     }));
 
     beforeEach(() => {
+        pizzagnaService = TestBed.inject(PizzagnaService);
+        pizzagnaService.updateComponents(testComponents);
         fixture = TestBed.createComponent(TestLayoutComponent);
         component = fixture.componentInstance;
     });
diff --git a/packages/dashboards/src/lib/components/list-widget/list-widget.component.ts b/packages/dashboards/src/lib/components/list-widget/list-widget.component.ts
index e6c74108c..a7b098f13 100644
--- a/packages/dashboards/src/lib/components/list-widget/list-widget.component.ts
+++ b/packages/dashboards/src/lib/components/list-widget/list-widget.component.ts
@@ -23,13 +23,15 @@ import {
     Component,
     ElementRef,
     HostBinding,
-    Inject,
+    Injector,
     Input,
     NgZone,
     OnChanges,
     OnDestroy,
     OnInit,
     SimpleChanges,
+    inject,
+    runInInjectionContext,
 } from "@angular/core";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -61,13 +63,11 @@ export class ListWidgetComponent
     private itemFormatterProps = new Map();
     private readonly destroy$ = new Subject<void>();
     private widgetWidth: number;
-
-    constructor(
-        public changeDetector: ChangeDetectorRef,
-        private zone: NgZone,
-        private host: ElementRef,
-        @Inject(PIZZAGNA_EVENT_BUS) private eventBus: EventBus<IEvent>
-    ) {}
+    public changeDetector = inject(ChangeDetectorRef);
+    private zone = inject(NgZone);
+    private host = inject(ElementRef);
+    private eventBus = inject<EventBus<IEvent>>(PIZZAGNA_EVENT_BUS);
+    private injector = inject(Injector);
 
     public ngOnInit(): void {
         this.initResizeObserver();
@@ -116,9 +116,9 @@ export class ListWidgetComponent
 
     // think of using eventBus to let widget entities know about it's width. - mb some formatters for widget doesn't care about it's width.
     private initResizeObserver() {
-        const resizeDirective = new ResizeObserverDirective(
-            this.host,
-            this.zone
+        const resizeDirective = runInInjectionContext(
+            this.injector,
+            () => new ResizeObserverDirective()
         );
         resizeDirective.debounceTime = RESIZE_DEBOUNCE_TIME;
         resizeDirective.ngAfterViewInit();
diff --git a/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.spec.ts b/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.spec.ts
index 4d733cb90..9da12e69b 100644
--- a/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.spec.ts
+++ b/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.spec.ts
@@ -64,12 +64,8 @@ describe(ProportionalWidgetComponent.name, () => {
     let component: ProportionalWidgetComponent;
     let fixture: ComponentFixture<ProportionalWidgetComponent>;
     const eventBus = new EventBus<IEvent>();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
     const dataSource = new MockDataSource();
+    let pizzagnaService: PizzagnaService;
     let ngZone: NgZone;
 
     beforeAll(() => {
@@ -82,6 +78,7 @@ describe(ProportionalWidgetComponent.name, () => {
             imports: [NuiDashboardsModule],
             providers: [
                 ProviderRegistryService,
+                DynamicComponentCreator,
                 {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
@@ -90,10 +87,7 @@ describe(ProportionalWidgetComponent.name, () => {
                     provide: DATA_SOURCE,
                     useValue: dataSource,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
diff --git a/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.ts b/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.ts
index 259860dc9..fc38847be 100644
--- a/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.ts
+++ b/packages/dashboards/src/lib/components/proportional-widget/proportional-widget.component.ts
@@ -24,7 +24,6 @@ import {
     Component,
     ElementRef,
     HostBinding,
-    Inject,
     Input,
     KeyValueDiffer,
     KeyValueDiffers,
@@ -34,6 +33,7 @@ import {
     SimpleChanges,
     ViewChild,
     ViewEncapsulation,
+    inject,
 } from "@angular/core";
 import isEqual from "lodash/isEqual";
 import some from "lodash/some";
@@ -44,7 +44,6 @@ import {
     IDataSource,
     IEvent,
     LoggerService,
-    UnitConversionService,
 } from "@nova-ui/bits";
 import {
     Chart,
@@ -117,13 +116,19 @@ export class ProportionalWidgetComponent
 
     private differ: KeyValueDiffer<any, any>;
 
+    public changeDetector = inject(ChangeDetectorRef);
+    private ngZone = inject(NgZone);
+    private kvDiffers = inject(KeyValueDiffers);
+    private eventBus = inject<EventBus<IEvent>>(PIZZAGNA_EVENT_BUS);
+    private dataSource = inject<IDataSource>(DATA_SOURCE);
+    private logger = inject(LoggerService);
     private renderer: Renderer<IAccessors>;
     private scales: Scales;
     private chartPalette: IChartPalette = new ChartPalette(
         defaultColorProvider()
     );
     private proportionalWidgetResizeObserver: ResizeObserver;
-    private unitConversionPipe: DashboardUnitConversionPipe;
+    private unitConversionPipe = inject(DashboardUnitConversionPipe);
 
     @ViewChild("gridContainer", { static: true })
     private gridContainer: ElementRef;
@@ -140,19 +145,8 @@ export class ProportionalWidgetComponent
         );
     }
 
-    constructor(
-        public changeDetector: ChangeDetectorRef,
-        private ngZone: NgZone,
-        private kvDiffers: KeyValueDiffers,
-        @Inject(PIZZAGNA_EVENT_BUS) private eventBus: EventBus<IEvent>,
-        @Inject(DATA_SOURCE) private dataSource: IDataSource,
-        private logger: LoggerService,
-        unitConversionService: UnitConversionService
-    ) {
+    constructor() {
         this.differ = this.kvDiffers.find(this.prioritizedGridRows).create();
-        this.unitConversionPipe = new DashboardUnitConversionPipe(
-            unitConversionService
-        );
     }
 
     // Note: Using this helper method to be able to use
diff --git a/packages/dashboards/src/lib/components/providers/data-source-adapter.spec.ts b/packages/dashboards/src/lib/components/providers/data-source-adapter.spec.ts
index 6fb060d15..596b68310 100644
--- a/packages/dashboards/src/lib/components/providers/data-source-adapter.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/data-source-adapter.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { fakeAsync, flush } from "@angular/core/testing";
+import { fakeAsync, flush, TestBed } from "@angular/core/testing";
 import { Subject } from "rxjs";
 
 import {
@@ -35,7 +35,7 @@ import { DATA_SOURCE_OUTPUT } from "../../configurator/types";
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
 import { REFRESH } from "../../services/types";
-import { IConfigurable, IProperties, PizzagnaLayer } from "../../types";
+import { IConfigurable, IProperties, PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../types";
 
 class MockDataSource implements IDataSource, IConfigurable {
     public outputsSubject = new Subject<
@@ -61,16 +61,18 @@ describe("DataSourceAdapter > ", () => {
     let dataSource: MockDataSource;
     let eventBus: EventBus<IEvent>;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus();
         dataSource = new MockDataSource();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         adapter = new DataSourceAdapter(eventBus, dataSource, pizzagnaService);
         (<any>adapter).componentId = "testId";
     });
diff --git a/packages/dashboards/src/lib/components/providers/kpi-data-source-adapter.spec.ts b/packages/dashboards/src/lib/components/providers/kpi-data-source-adapter.spec.ts
index b18df2c22..6c948985e 100644
--- a/packages/dashboards/src/lib/components/providers/kpi-data-source-adapter.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/kpi-data-source-adapter.spec.ts
@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { DecimalPipe } from "@angular/common";
+import { TestBed } from "@angular/core/testing";
 import { Subject } from "rxjs";
 
 import {
@@ -37,6 +38,7 @@ import { KpiWidgetThresholdColors } from "../../configurator/components/widgets/
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
 import { IKpiData } from "../kpi-widget/types";
+import { PIZZAGNA_EVENT_BUS } from "../../types";
 
 class MockDataSource implements IDataSource {
     public outputsSubject = new Subject<IFilteringOutputs>();
@@ -60,18 +62,20 @@ describe("KpiDataSourceAdapter > ", () => {
     let pizzagnaService: PizzagnaService;
     let configuration: IKpiDataSourceAdapterConfiguration;
     let testData: IKpiData;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let numberPipe: DecimalPipe;
 
     beforeEach(() => {
         eventBus = new EventBus();
         dataSource = new MockDataSource();
-        dynamicComponentCreator = new DynamicComponentCreator();
         numberPipe = new DecimalPipe("en-US");
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         adapter = new KpiDataSourceAdapter(
             eventBus,
             dataSource,
diff --git a/packages/dashboards/src/lib/components/providers/kpi-scale-sync-broker.ts b/packages/dashboards/src/lib/components/providers/kpi-scale-sync-broker.ts
index f845df672..5340b947e 100644
--- a/packages/dashboards/src/lib/components/providers/kpi-scale-sync-broker.ts
+++ b/packages/dashboards/src/lib/components/providers/kpi-scale-sync-broker.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, Injectable } from "@angular/core";
+import { Inject, Injectable, inject } from "@angular/core";
 import isArray from "lodash/isArray";
 import { BehaviorSubject, Observable, Subject } from "rxjs";
 import { distinctUntilChanged, filter, takeUntil, tap } from "rxjs/operators";
@@ -40,16 +40,15 @@ export class KpiScaleSyncBroker implements IConfigurable {
     protected properties: IProperties;
     protected componentId: string;
 
+    private eventBus = inject<EventBus<IEvent>>(PIZZAGNA_EVENT_BUS);
+    private pizzagnaService = inject(PizzagnaService);
     private valuesObject: Record<string, Array<Partial<IBrokerValue>>>;
     private brokers: IBroker[] = [];
     private builder = new KpiScaleSyncBrokerBuilder(this.brokers);
     private destroySubscriptions$ = new Subject<void>();
     private tileNodes: string[];
 
-    constructor(
-        @Inject(PIZZAGNA_EVENT_BUS) private eventBus: EventBus<IEvent>,
-        private pizzagnaService: PizzagnaService
-    ) {
+    constructor() {
         this.valuesObject = this.builder.valuesObject;
     }
 
diff --git a/packages/dashboards/src/lib/components/providers/kpi-status-content-fallback-adapter.spec.ts b/packages/dashboards/src/lib/components/providers/kpi-status-content-fallback-adapter.spec.ts
index 369a68e25..02e1eb50b 100644
--- a/packages/dashboards/src/lib/components/providers/kpi-status-content-fallback-adapter.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/kpi-status-content-fallback-adapter.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { EventBus, IEvent } from "@nova-ui/bits";
 
 import { KpiStatusContentFallbackAdapter } from "./kpi-status-content-fallback-adapter";
@@ -29,22 +31,24 @@ import {
 import { IPizzagnaProperty } from "../../pizzagna/functions/get-pizzagna-property-path";
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
-import { PizzagnaLayer } from "../../types";
+import { PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../types";
 
 describe("KpiStatusContentFallbackAdapter > ", () => {
     let adapter: KpiStatusContentFallbackAdapter;
     let eventBus: EventBus<IEvent>;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let firstSetPropArg: IPizzagnaProperty;
 
     beforeEach(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         adapter = new KpiStatusContentFallbackAdapter(
             eventBus,
             pizzagnaService
diff --git a/packages/dashboards/src/lib/components/providers/loading-adapter.spec.ts b/packages/dashboards/src/lib/components/providers/loading-adapter.spec.ts
index a23d1c9af..917060398 100644
--- a/packages/dashboards/src/lib/components/providers/loading-adapter.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/loading-adapter.spec.ts
@@ -18,27 +18,31 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { EventBus, IEvent } from "@nova-ui/bits";
 
 import { LoadingAdapter } from "./loading-adapter";
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
 import { DATA_SOURCE_BUSY } from "../../services/types";
-import { PizzagnaLayer } from "../../types";
+import { PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../types";
 
 describe("LoadingAdapter > ", () => {
     let adapter: LoadingAdapter;
     let eventBus: EventBus<IEvent>;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         adapter = new LoadingAdapter(eventBus, pizzagnaService);
         adapter.setComponent(null, "loading");
     });
diff --git a/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.spec.ts b/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.spec.ts
index 131f802b0..7e9c7414b 100644
--- a/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/pizzagna-broadcaster.service.spec.ts
@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { ChangeDetectorRef } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 import { FormBuilder } from "@angular/forms";
 
 import { EventBus, IEvent, LoggerService } from "@nova-ui/bits";
@@ -29,6 +30,7 @@ import { TitleAndDescriptionConfigurationComponent } from "../../configurator/co
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
 import { SET_PROPERTY_VALUE } from "../../services/types";
+import { PIZZAGNA_EVENT_BUS } from "../../types";
 
 const cdRefMock: ChangeDetectorRef = {
     markForCheck() {},
@@ -42,16 +44,18 @@ describe("PizzagnaBroadcasterService > ", () => {
     let broadcaster: PizzagnaBroadcasterService;
     let eventBus: EventBus<IEvent>;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let mockComponent: TitleAndDescriptionConfigurationComponent;
 
     beforeEach(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         broadcaster = new PizzagnaBroadcasterService(pizzagnaService);
 
         mockComponent = new TitleAndDescriptionConfigurationComponent(
diff --git a/packages/dashboards/src/lib/components/providers/status-content-fallback-adapter.spec.ts b/packages/dashboards/src/lib/components/providers/status-content-fallback-adapter.spec.ts
index 3f459b32c..391e1c7df 100644
--- a/packages/dashboards/src/lib/components/providers/status-content-fallback-adapter.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/status-content-fallback-adapter.spec.ts
@@ -18,6 +18,8 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { EventBus, IEvent } from "@nova-ui/bits";
 
 import { StatusContentFallbackAdapter } from "./status-content-fallback-adapter";
@@ -26,22 +28,24 @@ import { DATA_SOURCE_OUTPUT } from "../../configurator/types";
 import { IPizzagnaProperty } from "../../pizzagna/functions/get-pizzagna-property-path";
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
-import { PizzagnaLayer } from "../../types";
+import { PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../types";
 
 describe("StatusContentFallbackAdapter > ", () => {
     let adapter: StatusContentFallbackAdapter;
     let eventBus: EventBus<IEvent>;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let firstSetPropArg: IPizzagnaProperty;
 
     beforeEach(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         adapter = new StatusContentFallbackAdapter(eventBus, pizzagnaService);
         (<any>adapter).componentId = "testId";
 
diff --git a/packages/dashboards/src/lib/components/providers/timeseries-data-source-adapter.spec.ts b/packages/dashboards/src/lib/components/providers/timeseries-data-source-adapter.spec.ts
index 8f03da729..27ea8cb17 100644
--- a/packages/dashboards/src/lib/components/providers/timeseries-data-source-adapter.spec.ts
+++ b/packages/dashboards/src/lib/components/providers/timeseries-data-source-adapter.spec.ts
@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
 import { Subject } from "rxjs";
 
 import {
@@ -33,7 +34,7 @@ import { ITimeseriesDataSourceAdapterConfiguration } from "./types";
 import { DynamicComponentCreator } from "../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../pizzagna/services/pizzagna.service";
 import { REFRESH } from "../../services/types";
-import { PizzagnaLayer } from "../../types";
+import { PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../types";
 
 class MockDataSource implements IDataSource {
     public outputsSubject = new Subject<IFilteringOutputs>();
@@ -55,16 +56,18 @@ describe("TimeseriesDataSourceAdapter > ", () => {
     let dataSource: MockDataSource;
     let eventBus: EventBus<IEvent>;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus();
         dataSource = new MockDataSource();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         adapter = new TimeseriesDataSourceAdapter(
             eventBus,
             dataSource,
diff --git a/packages/dashboards/src/lib/components/risk-score-tile/risk-score-tile.component.spec.ts b/packages/dashboards/src/lib/components/risk-score-tile/risk-score-tile.component.spec.ts
index 58f0a3cf7..e64a83538 100644
--- a/packages/dashboards/src/lib/components/risk-score-tile/risk-score-tile.component.spec.ts
+++ b/packages/dashboards/src/lib/components/risk-score-tile/risk-score-tile.component.spec.ts
@@ -67,11 +67,6 @@ describe("RiskScoreTileComponent", () => {
     let component: RiskScoreTileComponent;
     let fixture: ComponentFixture<RiskScoreTileComponent>;
     const eventBus = new EventBus<IEvent>();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
     let dataSource: IDataSource;
 
     beforeEach(waitForAsync(() => {
@@ -81,6 +76,7 @@ describe("RiskScoreTileComponent", () => {
             imports: [NuiDashboardsModule],
             providers: [
                 ProviderRegistryService,
+                DynamicComponentCreator,
                 {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
@@ -89,10 +85,7 @@ describe("RiskScoreTileComponent", () => {
                     provide: DATA_SOURCE,
                     useValue: dataSource,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
diff --git a/packages/dashboards/src/lib/components/time-frame-selection/timeframe-selection.component.spec.ts b/packages/dashboards/src/lib/components/time-frame-selection/timeframe-selection.component.spec.ts
index bdb1f7222..cd8c31d09 100644
--- a/packages/dashboards/src/lib/components/time-frame-selection/timeframe-selection.component.spec.ts
+++ b/packages/dashboards/src/lib/components/time-frame-selection/timeframe-selection.component.spec.ts
@@ -75,11 +75,7 @@ describe("TimeframeSelectionComponent", () => {
     let fixture: ComponentFixture<TimeframeSelectionComponent>;
     const tfSerializationService = new TimeframeSerializationService();
     const eventBus = new EventBus<IEvent>();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
+    let pizzagnaService: PizzagnaService;
     const dataSource = new MockDataSource();
 
     beforeEach(waitForAsync(() => {
@@ -87,6 +83,7 @@ describe("TimeframeSelectionComponent", () => {
             imports: [NuiDashboardsModule],
             providers: [
                 ProviderRegistryService,
+                DynamicComponentCreator,
                 {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
@@ -95,10 +92,7 @@ describe("TimeframeSelectionComponent", () => {
                     provide: DATA_SOURCE,
                     useValue: dataSource,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
diff --git a/packages/dashboards/src/lib/components/timeseries-widget/timeseries-scales.service.ts b/packages/dashboards/src/lib/components/timeseries-widget/timeseries-scales.service.ts
index baecac94b..03a6e133d 100644
--- a/packages/dashboards/src/lib/components/timeseries-widget/timeseries-scales.service.ts
+++ b/packages/dashboards/src/lib/components/timeseries-widget/timeseries-scales.service.ts
@@ -18,10 +18,10 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { duration } from "moment/moment";
 
-import { UnitBase, UnitConversionService, UnitOption } from "@nova-ui/bits";
+import { UnitBase, UnitOption } from "@nova-ui/bits";
 import {
     IScale,
     LinearScale,
@@ -44,13 +44,7 @@ import { timeSeriesDatetimeFormatter } from "../../functions/timeseries-datetime
  */
 @Injectable()
 export class TimeseriesScalesService {
-    private unitConversionPipe: DashboardUnitConversionPipe;
-
-    constructor(private unitConversionService: UnitConversionService) {
-        this.unitConversionPipe = new DashboardUnitConversionPipe(
-            this.unitConversionService
-        );
-    }
+    private unitConversionPipe = inject(DashboardUnitConversionPipe);
 
     /**
      * Creates a scale based on given configuration
diff --git a/packages/dashboards/src/lib/components/widget/widget-body-content/widget-body-content.component.spec.ts b/packages/dashboards/src/lib/components/widget/widget-body-content/widget-body-content.component.spec.ts
index aa3887761..06d30e71e 100644
--- a/packages/dashboards/src/lib/components/widget/widget-body-content/widget-body-content.component.spec.ts
+++ b/packages/dashboards/src/lib/components/widget/widget-body-content/widget-body-content.component.spec.ts
@@ -33,16 +33,10 @@ describe("WidgetBodyContentComponent", () => {
     let component: WidgetBodyContentComponent;
     let fixture: ComponentFixture<WidgetBodyContentComponent>;
     let eventBus: EventBus<IEvent>;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let pizzagnaService: PizzagnaService;
 
     beforeEach(waitForAsync(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
 
         TestBed.configureTestingModule({
             imports: [NuiDashboardsModule],
@@ -52,15 +46,13 @@ describe("WidgetBodyContentComponent", () => {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
 
     beforeEach(() => {
+        pizzagnaService = TestBed.inject(PizzagnaService);
         fixture = TestBed.createComponent(WidgetBodyContentComponent);
         component = fixture.componentInstance;
         component.componentId = "bodyContent";
diff --git a/packages/dashboards/src/lib/components/widget/widget-body/widget-body.component.spec.ts b/packages/dashboards/src/lib/components/widget/widget-body/widget-body.component.spec.ts
index 7510051e1..a3761b456 100644
--- a/packages/dashboards/src/lib/components/widget/widget-body/widget-body.component.spec.ts
+++ b/packages/dashboards/src/lib/components/widget/widget-body/widget-body.component.spec.ts
@@ -33,7 +33,6 @@ describe("WidgetBodyComponent", () => {
     let component: WidgetBodyComponent;
     let fixture: ComponentFixture<WidgetBodyComponent>;
     let eventBus: EventBus<IEvent>;
-    let dynamicComponentCreator: DynamicComponentCreator;
     let pizzagnaService: PizzagnaService;
     const testComponents: IPizza = {
         component1: {
@@ -48,12 +47,6 @@ describe("WidgetBodyComponent", () => {
 
     beforeEach(waitForAsync(() => {
         eventBus = new EventBus();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
-        pizzagnaService.updateComponents(testComponents);
 
         TestBed.configureTestingModule({
             imports: [NuiDashboardsModule],
@@ -63,15 +56,14 @@ describe("WidgetBodyComponent", () => {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
 
     beforeEach(() => {
+        pizzagnaService = TestBed.inject(PizzagnaService);
+        pizzagnaService.updateComponents(testComponents);
         fixture = TestBed.createComponent(WidgetBodyComponent);
         component = fixture.componentInstance;
         component.componentId = "body";
diff --git a/packages/dashboards/src/lib/configurator/components/formatters/donut-content-raw-formatter/donut-content-raw-formatter.component.ts b/packages/dashboards/src/lib/configurator/components/formatters/donut-content-raw-formatter/donut-content-raw-formatter.component.ts
index ccc0a2fc3..1f9c2a299 100644
--- a/packages/dashboards/src/lib/configurator/components/formatters/donut-content-raw-formatter/donut-content-raw-formatter.component.ts
+++ b/packages/dashboards/src/lib/configurator/components/formatters/donut-content-raw-formatter/donut-content-raw-formatter.component.ts
@@ -18,10 +18,10 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { ChangeDetectorRef, Component, Input, OnChanges } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnChanges, inject } from "@angular/core";
 import sumBy from "lodash/sumBy";
 
-import { UnitConversionService } from "@nova-ui/bits";
+
 
 import { DEFAULT_UNIT_CONVERSION_THRESHOLD } from "../../../../common/constants";
 import { DashboardUnitConversionPipe } from "../../../../common/pipes/dashboard-unit-conversion-pipe";
@@ -54,19 +54,12 @@ import { IFormatterData } from "../types";
 export class DonutContentRawFormatterComponent implements OnChanges {
     static lateLoadKey = "DonutContentRawFormatterComponent";
 
+    public changeDetector = inject(ChangeDetectorRef);
     public sum: number;
     public convertedValue: string;
     public conversionThreshold = DEFAULT_UNIT_CONVERSION_THRESHOLD;
 
-    private unitConversionPipe: DashboardUnitConversionPipe;
-    constructor(
-        public changeDetector: ChangeDetectorRef,
-        unitConversionService: UnitConversionService
-    ) {
-        this.unitConversionPipe = new DashboardUnitConversionPipe(
-            unitConversionService
-        );
-    }
+    private unitConversionPipe = inject(DashboardUnitConversionPipe);
 
     @Input() data: IFormatterData[];
     @Input() config: IProportionalWidgetConfig;
diff --git a/packages/dashboards/src/lib/configurator/components/widgets/timeseries/timeseries-series-collection-configuration/timeseries-series-collection-configuration.component.spec.ts b/packages/dashboards/src/lib/configurator/components/widgets/timeseries/timeseries-series-collection-configuration/timeseries-series-collection-configuration.component.spec.ts
index de285abb9..bb191d35b 100644
--- a/packages/dashboards/src/lib/configurator/components/widgets/timeseries/timeseries-series-collection-configuration/timeseries-series-collection-configuration.component.spec.ts
+++ b/packages/dashboards/src/lib/configurator/components/widgets/timeseries/timeseries-series-collection-configuration/timeseries-series-collection-configuration.component.spec.ts
@@ -39,34 +39,24 @@ describe("TimeseriesSeriesCollectionConfigurationComponent", () => {
     let component: TimeseriesSeriesCollectionConfigurationComponent;
     let fixture: ComponentFixture<TimeseriesSeriesCollectionConfigurationComponent>;
     const eventBus = new EventBus();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        // @ts-ignore: Suppressed for test purposes
-        eventBus,
-        dynamicComponentCreator
-    );
+    let pizzagnaService: PizzagnaService;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [NuiDashboardsModule],
             providers: [
-                {
-                    provide: DynamicComponentCreator,
-                    useValue: dynamicComponentCreator,
-                },
+                DynamicComponentCreator,
                 {
                     provide: PIZZAGNA_EVENT_BUS,
                     useValue: eventBus,
                 },
-                {
-                    provide: PizzagnaService,
-                    useValue: pizzagnaService,
-                },
+                PizzagnaService,
             ],
         }).compileComponents();
     }));
 
     beforeEach(() => {
+        pizzagnaService = TestBed.inject(PizzagnaService);
         fixture = TestBed.createComponent(
             TimeseriesSeriesCollectionConfigurationComponent
         );
diff --git a/packages/dashboards/src/lib/configurator/services/converters/kpi/kpi-section-converter/kpi-section-converter.service.spec.ts b/packages/dashboards/src/lib/configurator/services/converters/kpi/kpi-section-converter/kpi-section-converter.service.spec.ts
index 9a1bba8ff..9388141ed 100644
--- a/packages/dashboards/src/lib/configurator/services/converters/kpi/kpi-section-converter/kpi-section-converter.service.spec.ts
+++ b/packages/dashboards/src/lib/configurator/services/converters/kpi/kpi-section-converter/kpi-section-converter.service.spec.ts
@@ -18,12 +18,14 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { EventBus, IEvent } from "@nova-ui/bits";
 
 import { KpiSectionConverterService } from "./kpi-section-converter.service";
 import { DynamicComponentCreator } from "../../../../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../../../../pizzagna/services/pizzagna.service";
-import { IPizzagnaLayer, PizzagnaLayer } from "../../../../../types";
+import { IPizzagnaLayer, PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../../../../types";
 import { PreviewService } from "../../../preview.service";
 
 const testKey = "providerId";
@@ -40,17 +42,19 @@ describe("KpiSectionConverterService > ", () => {
     let eventBus: EventBus<IEvent>;
     let previewService: PreviewService;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus();
         previewService = new PreviewService();
         previewService.preview = {};
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         service = new KpiSectionConverterService(
             eventBus,
             previewService,
diff --git a/packages/dashboards/src/lib/configurator/services/converters/shared/generic-converter/generic-converter.service.spec.ts b/packages/dashboards/src/lib/configurator/services/converters/shared/generic-converter/generic-converter.service.spec.ts
index f641e5ac0..0281e0b30 100644
--- a/packages/dashboards/src/lib/configurator/services/converters/shared/generic-converter/generic-converter.service.spec.ts
+++ b/packages/dashboards/src/lib/configurator/services/converters/shared/generic-converter/generic-converter.service.spec.ts
@@ -18,12 +18,14 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { EventBus, IEvent } from "@nova-ui/bits";
 
 import { GenericConverterService } from "./generic-converter.service";
 import { DynamicComponentCreator } from "../../../../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../../../../pizzagna/services/pizzagna.service";
-import { IPizzagnaLayer, PizzagnaLayer } from "../../../../../types";
+import { IPizzagnaLayer, PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../../../../types";
 import { PreviewService } from "../../../preview.service";
 
 const testKey = "providerId";
@@ -40,17 +42,19 @@ describe("GenericConverterService > ", () => {
     let eventBus: EventBus<IEvent>;
     let previewService: PreviewService;
     let pizzagnaService: PizzagnaService;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus();
         previewService = new PreviewService();
         previewService.preview = {};
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         service = new GenericConverterService(
             eventBus,
             previewService,
diff --git a/packages/dashboards/src/lib/configurator/services/converters/shared/title-and-description-converter/title-and-description-converter.service.spec.ts b/packages/dashboards/src/lib/configurator/services/converters/shared/title-and-description-converter/title-and-description-converter.service.spec.ts
index c7ca6abee..c19121f76 100644
--- a/packages/dashboards/src/lib/configurator/services/converters/shared/title-and-description-converter/title-and-description-converter.service.spec.ts
+++ b/packages/dashboards/src/lib/configurator/services/converters/shared/title-and-description-converter/title-and-description-converter.service.spec.ts
@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { FormBuilder, FormGroup } from "@angular/forms";
+import { TestBed } from "@angular/core/testing";
 import get from "lodash/get";
 
 import { EventBus, IEvent } from "@nova-ui/bits";
@@ -26,7 +27,7 @@ import { EventBus, IEvent } from "@nova-ui/bits";
 import { TitleAndDescriptionConverterService } from "./title-and-description-converter.service";
 import { DynamicComponentCreator } from "../../../../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../../../../pizzagna/services/pizzagna.service";
-import { IPizzagnaLayer, IProperties } from "../../../../../types";
+import { IPizzagnaLayer, IProperties, PIZZAGNA_EVENT_BUS } from "../../../../../types";
 import { PreviewService } from "../../../preview.service";
 import { BaseConverter } from "../../base-converter";
 
@@ -37,16 +38,18 @@ describe("TitleAndDescriptionConverterService", () => {
     let pizzagnaService: PizzagnaService;
     let previewService: PreviewService;
     let form: FormGroup;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus();
         previewService = new PreviewService();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        pizzagnaService = new PizzagnaService(
-            eventBus,
-            dynamicComponentCreator
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
         service = new TitleAndDescriptionConverterService(
             eventBus,
             previewService,
diff --git a/packages/dashboards/src/lib/configurator/services/converters/table/table-columns-converter.service.spec.ts b/packages/dashboards/src/lib/configurator/services/converters/table/table-columns-converter.service.spec.ts
index 5f2d2c991..e42ac7e6d 100644
--- a/packages/dashboards/src/lib/configurator/services/converters/table/table-columns-converter.service.spec.ts
+++ b/packages/dashboards/src/lib/configurator/services/converters/table/table-columns-converter.service.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { fakeAsync, flush, tick } from "@angular/core/testing";
+import { fakeAsync, flush, TestBed, tick } from "@angular/core/testing";
 import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
 
 import { EventBus, IEvent } from "@nova-ui/bits";
@@ -28,6 +28,7 @@ import { TableColumnsConverterService } from "./table-columns-converter.service"
 import { DynamicComponentCreator } from "../../../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../../../pizzagna/services/pizzagna.service";
 import { PreviewService } from "../../preview.service";
+import { PIZZAGNA_EVENT_BUS } from "../../../../types";
 
 class MockComponent {
     public static lateLoadKey = "MockComponent";
@@ -59,14 +60,21 @@ describe("TableColumnsConverterService >", () => {
     const formBuilder = new FormBuilder();
     const component = new MockComponent(formBuilder);
     const previewService = new PreviewService();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
+    let pizzagnaService: PizzagnaService;
 
     let service: TableColumnsConverterService;
 
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
+    });
+
     beforeEach(fakeAsync(() => {
         spyOn(pizzagnaService, "createComponentsFromTemplate");
         previewService.preview =
diff --git a/packages/dashboards/src/lib/configurator/services/converters/table/table-filters-converter.service.spec.ts b/packages/dashboards/src/lib/configurator/services/converters/table/table-filters-converter.service.spec.ts
index 6835ab90a..077625a13 100644
--- a/packages/dashboards/src/lib/configurator/services/converters/table/table-filters-converter.service.spec.ts
+++ b/packages/dashboards/src/lib/configurator/services/converters/table/table-filters-converter.service.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { fakeAsync, tick } from "@angular/core/testing";
+import { fakeAsync, TestBed, tick } from "@angular/core/testing";
 import { FormBuilder, FormGroup } from "@angular/forms";
 
 import { EventBus, IEvent } from "@nova-ui/bits";
@@ -28,6 +28,7 @@ import { TableFiltersConverterService } from "./table-filters-converter.service"
 import { DynamicComponentCreator } from "../../../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../../../pizzagna/services/pizzagna.service";
 import { PreviewService } from "../../preview.service";
+import { PIZZAGNA_EVENT_BUS } from "../../../../types";
 
 class MockComponent {
     public static lateLoadKey = "MockComponent";
@@ -53,14 +54,21 @@ describe("TableFiltersConverterService >", () => {
     const formBuilder = new FormBuilder();
     const component = new MockComponent(formBuilder);
     const previewService = new PreviewService();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
+    let pizzagnaService: PizzagnaService;
 
     let service: TableFiltersConverterService;
 
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
+    });
+
     beforeEach(() => {
         previewService.preview =
             TABLE_WIDGET_PREVIEW_PIZZAGNA.pizzagna.configuration;
diff --git a/packages/dashboards/src/lib/configurator/services/converters/table/table-scroll-type-converter.service.spec.ts b/packages/dashboards/src/lib/configurator/services/converters/table/table-scroll-type-converter.service.spec.ts
index 1a88db758..50519e555 100644
--- a/packages/dashboards/src/lib/configurator/services/converters/table/table-scroll-type-converter.service.spec.ts
+++ b/packages/dashboards/src/lib/configurator/services/converters/table/table-scroll-type-converter.service.spec.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { fakeAsync, tick } from "@angular/core/testing";
+import { fakeAsync, TestBed, tick } from "@angular/core/testing";
 import { FormBuilder, FormGroup } from "@angular/forms";
 
 import { EventBus, IEvent } from "@nova-ui/bits";
@@ -29,6 +29,7 @@ import { TableScrollTypeConverterService } from "./table-scroll-type-converter.s
 import { DynamicComponentCreator } from "../../../../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../../../../pizzagna/services/pizzagna.service";
 import { PreviewService } from "../../preview.service";
+import { PIZZAGNA_EVENT_BUS } from "../../../../types";
 
 class MockComponent {
     public static lateLoadKey = "MockComponent";
@@ -56,14 +57,21 @@ describe("TableScrollTypeConverterService >", () => {
     const formBuilder = new FormBuilder();
     const component = new MockComponent(formBuilder);
     const previewService = new PreviewService();
-    const dynamicComponentCreator = new DynamicComponentCreator();
-    const pizzagnaService = new PizzagnaService(
-        eventBus,
-        dynamicComponentCreator
-    );
+    let pizzagnaService: PizzagnaService;
 
     let service: TableScrollTypeConverterService;
 
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        pizzagnaService = TestBed.inject(PizzagnaService);
+    });
+
     beforeEach(() => {
         previewService.preview =
             TABLE_WIDGET_PREVIEW_PIZZAGNA.pizzagna.configuration;
diff --git a/packages/dashboards/src/lib/directives/gridster-item-widget-id/gridster-item-widget-id.directive.ts b/packages/dashboards/src/lib/directives/gridster-item-widget-id/gridster-item-widget-id.directive.ts
index e4621db4f..e20bd30f0 100644
--- a/packages/dashboards/src/lib/directives/gridster-item-widget-id/gridster-item-widget-id.directive.ts
+++ b/packages/dashboards/src/lib/directives/gridster-item-widget-id/gridster-item-widget-id.directive.ts
@@ -20,11 +20,10 @@
 
 import {
     Directive,
-    Host,
     Input,
     OnChanges,
-    Self,
     SimpleChanges,
+    inject,
 } from "@angular/core";
 import { GridsterItemComponent } from "angular-gridster2";
 
@@ -39,7 +38,7 @@ import { GridsterItemComponent } from "angular-gridster2";
 export class GridsterItemWidgetIdDirective implements OnChanges {
     @Input() nuiGridsterItemWidgetId: string;
 
-    constructor(@Host() @Self() private gridsterItem: GridsterItemComponent) {}
+    private gridsterItem = inject(GridsterItemComponent, { host: true, self: true });
 
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes.nuiGridsterItemWidgetId) {
diff --git a/packages/dashboards/src/lib/directives/widget-editor/widget-editor.directive.ts b/packages/dashboards/src/lib/directives/widget-editor/widget-editor.directive.ts
index 99814995d..8191b0087 100644
--- a/packages/dashboards/src/lib/directives/widget-editor/widget-editor.directive.ts
+++ b/packages/dashboards/src/lib/directives/widget-editor/widget-editor.directive.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Directive, Host, Input, OnDestroy, OnInit, Self } from "@angular/core";
+import { Directive, Input, OnDestroy, OnInit, inject } from "@angular/core";
 import cloneDeep from "lodash/cloneDeep";
 import { Subject } from "rxjs";
 // eslint-disable-next-line import/no-deprecated
@@ -44,13 +44,10 @@ export class WidgetEditorDirective implements OnInit, OnDestroy {
     dashboardPersistenceHandler: IDashboardPersistenceHandler;
 
     private readonly destroy$ = new Subject<void>();
-
-    constructor(
-        @Host() @Self() private dashboardComponent: DashboardComponent,
-        private widgetEditorService: WidgetEditorService,
-        private widgetRemovalService: WidgetRemovalService,
-        private widgetTypesService: WidgetTypesService
-    ) {}
+    private dashboardComponent = inject(DashboardComponent, { host: true, self: true });
+    private widgetEditorService = inject(WidgetEditorService);
+    private widgetRemovalService = inject(WidgetRemovalService);
+    private widgetTypesService = inject(WidgetTypesService);
 
     public ngOnInit(): void {
         this.dashboardComponent.eventBus
diff --git a/packages/dashboards/src/lib/pizzagna/components/pizzagna/pizzagna.component.ts b/packages/dashboards/src/lib/pizzagna/components/pizzagna/pizzagna.component.ts
index 3c33311c9..822bd16be 100644
--- a/packages/dashboards/src/lib/pizzagna/components/pizzagna/pizzagna.component.ts
+++ b/packages/dashboards/src/lib/pizzagna/components/pizzagna/pizzagna.component.ts
@@ -21,11 +21,11 @@
 import {
     Component,
     EventEmitter,
-    Inject,
     Input,
     OnChanges,
     Output,
     SimpleChanges,
+    inject,
 } from "@angular/core";
 
 import { EventBus, IEvent, immutableSet, LoggerService } from "@nova-ui/bits";
@@ -81,13 +81,12 @@ export class PizzagnaComponent implements OnChanges {
     @Output() output = new EventEmitter<IEvent>();
 
     public pizza: Record<string, IComponentConfiguration>;
+    public pizzagnaService = inject(PizzagnaService);
+    public logger = inject(LoggerService);
+    public eventBus = inject<EventBus<IEvent>>(PIZZAGNA_EVENT_BUS);
 
-    constructor(
-        public pizzagnaService: PizzagnaService,
-        public logger: LoggerService,
-        @Inject(PIZZAGNA_EVENT_BUS) public eventBus: EventBus<IEvent>
-    ) {
-        eventBus
+    constructor() {
+        this.eventBus
             .getStream(SET_PROPERTY_VALUE)
             .subscribe((event: IEvent<ISetPropertyPayload>) => {
                 // TODO: Ensure that payload is defined
diff --git a/packages/dashboards/src/lib/pizzagna/directives/component-portal/component-portal.directive.ts b/packages/dashboards/src/lib/pizzagna/directives/component-portal/component-portal.directive.ts
index 734d88a09..15dcbcbcc 100644
--- a/packages/dashboards/src/lib/pizzagna/directives/component-portal/component-portal.directive.ts
+++ b/packages/dashboards/src/lib/pizzagna/directives/component-portal/component-portal.directive.ts
@@ -34,6 +34,7 @@ import {
     SimpleChange,
     SimpleChanges,
     StaticProvider,
+    inject,
 } from "@angular/core";
 import isArray from "lodash/isArray";
 import values from "lodash/values";
@@ -64,6 +65,11 @@ export class ComponentPortalDirective
     @Output() public output = new EventEmitter<IEvent>();
 
     public portal: Portal<any>;
+    private injector = inject(Injector);
+    private logger = inject(LoggerService);
+    private portalService = inject(ComponentPortalService);
+    private renderer = inject(Renderer2);
+    private providerRegistry = inject(ProviderRegistryService);
     private component: any;
     private propertiesChanges = new ReplaySubject<SimpleChange>();
     private providerInstances: Record<string, any> = {};
@@ -71,14 +77,6 @@ export class ComponentPortalDirective
     private changesSubscription?: Subscription;
     private listenerUnsubscriber?: () => void;
 
-    constructor(
-        private injector: Injector,
-        private logger: LoggerService,
-        private portalService: ComponentPortalService,
-        private renderer: Renderer2,
-        private providerRegistry: ProviderRegistryService
-    ) {}
-
     public ngOnInit(): void {
         this.logger.debug("Portal created:", this.componentId);
         this.recreatePortal();
diff --git a/packages/dashboards/src/lib/pizzagna/services/component-portal.service.spec.ts b/packages/dashboards/src/lib/pizzagna/services/component-portal.service.spec.ts
index cf14d2265..936cd2dac 100644
--- a/packages/dashboards/src/lib/pizzagna/services/component-portal.service.spec.ts
+++ b/packages/dashboards/src/lib/pizzagna/services/component-portal.service.spec.ts
@@ -19,6 +19,9 @@
 //  THE SOFTWARE.
 
 import { Injector } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+
+import { LoggerService } from "@nova-ui/bits";
 
 import { ComponentPortalService } from "./component-portal.service";
 import { ComponentRegistryService } from "./component-registry.service";
@@ -38,10 +41,14 @@ describe("ComponentPortalService > ", () => {
 
     beforeEach(() => {
         componentRegistry = new ComponentRegistryService(mockLoggerService);
-        service = new ComponentPortalService(
-            componentRegistry,
-            mockLoggerService
-        );
+        TestBed.configureTestingModule({
+            providers: [
+                ComponentPortalService,
+                { provide: ComponentRegistryService, useValue: componentRegistry },
+                { provide: LoggerService, useValue: mockLoggerService },
+            ],
+        });
+        service = TestBed.inject(ComponentPortalService);
     });
 
     describe("createComponentPortal > ", () => {
diff --git a/packages/dashboards/src/lib/pizzagna/services/component-portal.service.ts b/packages/dashboards/src/lib/pizzagna/services/component-portal.service.ts
index 620939f1d..96f9f1ec3 100644
--- a/packages/dashboards/src/lib/pizzagna/services/component-portal.service.ts
+++ b/packages/dashboards/src/lib/pizzagna/services/component-portal.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ComponentPortal } from "@angular/cdk/portal";
-import { Injectable, Injector } from "@angular/core";
+import { Injectable, Injector, inject } from "@angular/core";
 
 import { LoggerService } from "@nova-ui/bits";
 
@@ -32,10 +32,8 @@ import { IPortalEnvironment } from "../../types";
     providedIn: "root",
 })
 export class ComponentPortalService {
-    constructor(
-        private componentRegistry: ComponentRegistryService,
-        private logger: LoggerService
-    ) {}
+    private componentRegistry = inject(ComponentRegistryService);
+    private logger = inject(LoggerService);
 
     public createComponentPortal(
         componentType: string | Function,
diff --git a/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.spec.ts b/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.spec.ts
index c2823f13a..737a0d51c 100644
--- a/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.spec.ts
+++ b/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.spec.ts
@@ -18,12 +18,14 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
+
 import { EventBus, IEvent } from "@nova-ui/bits";
 
 import { DynamicComponentCreator } from "./dynamic-component-creator.service";
 import { PizzagnaService } from "./pizzagna.service";
 import { ISetPropertyPayload, SET_PROPERTY_VALUE } from "../../services/types";
-import { IPizzagna, PizzagnaLayer } from "../../types";
+import { IPizzagna, PIZZAGNA_EVENT_BUS, PizzagnaLayer } from "../../types";
 import {
     getPizzagnaPropertyPath,
     IPizzagnaProperty,
@@ -32,12 +34,17 @@ import {
 describe("PizzagnaService > ", () => {
     let service: PizzagnaService;
     let eventBus: EventBus<IEvent>;
-    let dynamicComponentCreator: DynamicComponentCreator;
 
     beforeEach(() => {
         eventBus = new EventBus<IEvent>();
-        dynamicComponentCreator = new DynamicComponentCreator();
-        service = new PizzagnaService(eventBus, dynamicComponentCreator);
+        TestBed.configureTestingModule({
+            providers: [
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: eventBus },
+            ],
+        });
+        service = TestBed.inject(PizzagnaService);
     });
 
     describe("setProperty > ", () => {
diff --git a/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.ts b/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.ts
index d5977de5d..6ee70c8a5 100644
--- a/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.ts
+++ b/packages/dashboards/src/lib/pizzagna/services/pizzagna.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import isArray from "lodash/isArray";
 import omit from "lodash/omit";
 import { ReplaySubject } from "rxjs";
@@ -44,10 +44,8 @@ import {
  */
 @Injectable()
 export class PizzagnaService {
-    constructor(
-        @Inject(PIZZAGNA_EVENT_BUS) private eventBus: EventBus<IEvent>,
-        private dynamicComponentCreator: DynamicComponentCreator
-    ) {}
+    private eventBus = inject<EventBus<IEvent>>(PIZZAGNA_EVENT_BUS);
+    private dynamicComponentCreator = inject(DynamicComponentCreator);
 
     public pizzagna: IPizzagna;
     public pizzaChanged = new ReplaySubject<IPizza>(1);
diff --git a/packages/dashboards/src/lib/services/proportional-content-aggregators-registry.service.ts b/packages/dashboards/src/lib/services/proportional-content-aggregators-registry.service.ts
index 1275e5694..385e7dd7f 100644
--- a/packages/dashboards/src/lib/services/proportional-content-aggregators-registry.service.ts
+++ b/packages/dashboards/src/lib/services/proportional-content-aggregators-registry.service.ts
@@ -20,15 +20,13 @@
 
 import { Injectable } from "@angular/core";
 
-import { LoggerService } from "@nova-ui/bits";
-
 import { RegistryService } from "./registry-service";
 import { IProportionalDonutContentAggregatorDefinition } from "../functions/proportional-aggregators/types";
 
 @Injectable({ providedIn: "root" })
 export class ProportionalContentAggregatorsRegistryService extends RegistryService<IProportionalDonutContentAggregatorDefinition> {
-    constructor(logger: LoggerService) {
-        super(logger, "ProportionalContentAggregatorsRegistryService");
+    constructor() {
+        super("ProportionalContentAggregatorsRegistryService");
     }
 
     getItemKey(item: IProportionalDonutContentAggregatorDefinition): string {
diff --git a/packages/dashboards/src/lib/services/registry-service.ts b/packages/dashboards/src/lib/services/registry-service.ts
index acaf9d598..fb972b9fa 100644
--- a/packages/dashboards/src/lib/services/registry-service.ts
+++ b/packages/dashboards/src/lib/services/registry-service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Directive, OnDestroy } from "@angular/core";
+import { Directive, OnDestroy, inject } from "@angular/core";
 import { BehaviorSubject, Observable } from "rxjs";
 import { map } from "rxjs/operators";
 
@@ -50,10 +50,9 @@ export abstract class RegistryService<T = object> implements OnDestroy {
         return this._isEmpty;
     }
 
-    protected constructor(
-        private logger: LoggerService,
-        private className?: string
-    ) {}
+    protected logger = inject(LoggerService);
+
+    protected constructor(private className?: string) {}
 
     public addItems(
         items: T[],
diff --git a/packages/dashboards/src/lib/services/table-formatter-registry.service.ts b/packages/dashboards/src/lib/services/table-formatter-registry.service.ts
index cc3bebd93..f258c1892 100644
--- a/packages/dashboards/src/lib/services/table-formatter-registry.service.ts
+++ b/packages/dashboards/src/lib/services/table-formatter-registry.service.ts
@@ -21,8 +21,6 @@
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
 
-import { LoggerService } from "@nova-ui/bits";
-
 import { RegistryService } from "./registry-service";
 import { IAddFormattersOptions } from "./types";
 import {
@@ -57,35 +55,35 @@ export abstract class FormatterRegistryService<
 
 @Injectable({ providedIn: "root" })
 export class TableFormatterRegistryService extends FormatterRegistryService<ITableFormatterDefinition> {
-    constructor(logger: LoggerService) {
-        super(logger, "TableFormatterRegistryService");
+    constructor() {
+        super("TableFormatterRegistryService");
     }
 }
 
 @Injectable({ providedIn: "root" })
 export class KpiFormattersRegistryService extends FormatterRegistryService<IFormatterDefinition> {
-    constructor(logger: LoggerService) {
-        super(logger, "KpiFormattersRegistryService");
+    constructor() {
+        super("KpiFormattersRegistryService");
     }
 }
 
 @Injectable({ providedIn: "root" })
 export class RiskScoreFormattersRegistryService extends FormatterRegistryService<IFormatterDefinition> {
-    constructor(logger: LoggerService) {
-        super(logger, "RiskScoreFormattersRegistryService");
+    constructor() {
+        super("RiskScoreFormattersRegistryService");
     }
 }
 
 @Injectable({ providedIn: "root" })
 export class ProportionalDonutContentFormattersRegistryService extends FormatterRegistryService<IFormatterDefinition> {
-    constructor(logger: LoggerService) {
-        super(logger, "ProportionalDonutContentFormattersRegistryService");
+    constructor() {
+        super("ProportionalDonutContentFormattersRegistryService");
     }
 }
 
 @Injectable({ providedIn: "root" })
 export class ProportionalLegendFormattersRegistryService extends FormatterRegistryService<IFormatterDefinition> {
-    constructor(logger: LoggerService) {
-        super(logger, "ProportionalLegendFormattersRegistryService");
+    constructor() {
+        super("ProportionalLegendFormattersRegistryService");
     }
 }
diff --git a/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.spec.ts b/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.spec.ts
index ca0c8ab65..23179e63f 100644
--- a/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.spec.ts
+++ b/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.spec.ts
@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { TestBed } from "@angular/core/testing";
 import { Subscription } from "rxjs";
 
 import { EventBus, EventDefinition, IEvent } from "@nova-ui/bits";
@@ -26,7 +27,9 @@ import { EventRegistryService } from "./event-registry.service";
 import { WidgetConfigurationService } from "./widget-configuration.service";
 import { WidgetToDashboardEventProxyService } from "./widget-to-dashboard-event-proxy.service";
 import { IWidget } from "../components/widget/types";
+import { DynamicComponentCreator } from "../pizzagna/services/dynamic-component-creator.service";
 import { PizzagnaService } from "../pizzagna/services/pizzagna.service";
+import { DASHBOARD_EVENT_BUS, PIZZAGNA_EVENT_BUS } from "../types";
 
 describe("WidgetToDashboardEventProxyService", () => {
     let service: WidgetToDashboardEventProxyService;
@@ -44,36 +47,31 @@ describe("WidgetToDashboardEventProxyService", () => {
     beforeEach(() => {
         pizzagnaBus = new EventBus<IEvent>();
         dashboardBus = new EventBus<IEvent>();
-        widgetConfigService = new WidgetConfigurationService();
-        // @ts-ignore: Suppressed for testing purposes
-        pizzagnaService = new PizzagnaService(null, null);
-
-        eventRegistry = new EventRegistryService();
+        TestBed.configureTestingModule({
+            providers: [
+                WidgetToDashboardEventProxyService,
+                EventRegistryService,
+                WidgetConfigurationService,
+                PizzagnaService,
+                DynamicComponentCreator,
+                { provide: PIZZAGNA_EVENT_BUS, useValue: pizzagnaBus },
+                { provide: DASHBOARD_EVENT_BUS, useValue: dashboardBus },
+            ],
+        });
+        widgetConfigService = TestBed.inject(WidgetConfigurationService);
+        pizzagnaService = TestBed.inject(PizzagnaService);
+        eventRegistry = TestBed.inject(EventRegistryService);
         eventRegistry.registerEvent(UPSTREAM_TEST_EVENT_1);
         eventRegistry.registerEvent(UPSTREAM_TEST_EVENT_2);
         eventRegistry.registerEvent(DOWNSTREAM_TEST_EVENT_1);
         eventRegistry.registerEvent(DOWNSTREAM_TEST_EVENT_2);
-
         widgetConfigService.updateWidget({ id: testWidgetId } as IWidget);
-        service = new WidgetToDashboardEventProxyService(
-            pizzagnaBus,
-            dashboardBus,
-            widgetConfigService,
-            eventRegistry,
-            pizzagnaService
-        );
+        service = TestBed.inject(WidgetToDashboardEventProxyService);
     });
 
     describe("updateConfiguration > ", () => {
         it("should not register subscriptions if the dashboard bus is not defined", () => {
-            service = new WidgetToDashboardEventProxyService(
-                pizzagnaBus,
-                // @ts-ignore: Suppressed for testing purposes
-                undefined,
-                widgetConfigService,
-                eventRegistry,
-                pizzagnaService
-            );
+            (<any>service).dashboardBus = undefined;
             service.updateConfiguration({
                 upstreams: [UPSTREAM_TEST_EVENT_1.id],
                 downstreams: [DOWNSTREAM_TEST_EVENT_1.id],
diff --git a/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.ts b/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.ts
index 0dde279b1..10860f5a5 100644
--- a/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.ts
+++ b/packages/dashboards/src/lib/services/widget-to-dashboard-event-proxy.service.ts
@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Inject, Injectable, OnDestroy, Optional } from "@angular/core";
+import { Injectable, OnDestroy, inject } from "@angular/core";
 import keyBy from "lodash/keyBy";
 import uniq from "lodash/uniq";
 import { Subject } from "rxjs";
@@ -68,21 +68,16 @@ export class WidgetToDashboardEventProxyService
     private readonly destroy$ = new Subject<void>();
     private component: { componentId: string };
 
+    private pizzagnaBus = inject<EventBus<IEvent>>(PIZZAGNA_EVENT_BUS);
+    private dashboardBus = inject<EventBus<IEvent>>(DASHBOARD_EVENT_BUS, { optional: true });
+    private widgetConfigurationService = inject(WidgetConfigurationService, { optional: true });
+    private eventRegistry = inject(EventRegistryService);
+    private pizzagnaService = inject(PizzagnaService);
+
     private upstreams?: string[];
     private downstreams?: string[];
     public providerKey: string;
 
-    constructor(
-        @Inject(PIZZAGNA_EVENT_BUS) private pizzagnaBus: EventBus<IEvent>,
-        @Optional()
-        @Inject(DASHBOARD_EVENT_BUS)
-        private dashboardBus: EventBus<IEvent>,
-        @Optional()
-        private widgetConfigurationService: WidgetConfigurationService,
-        private eventRegistry: EventRegistryService,
-        private pizzagnaService: PizzagnaService
-    ) {}
-
     public ngOnDestroy(): void {
         this.destroy$.next();
         this.destroy$.complete();