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

---
 .../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  |  13 +-
 .../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 |   6 +-
 ...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 | 364 +++++++++---------
 ...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           |  18 +-
 ...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       |  16 +-
 ...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   |  27 +-
 .../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  |  17 +-
 .../bits/src/lib/image/image.component.ts     |  30 +-
 .../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          |  22 +-
 .../menu-link/menu-link.component.ts          |  23 +-
 .../menu-option/menu-option.component.ts      |  25 +-
 .../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   |  13 +-
 .../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      |  13 +-
 ...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     |  70 ++--
 .../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    |   6 +-
 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 +-
 446 files changed, 2416 insertions(+), 4542 deletions(-)

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 a42bc2559..bd3a5d550 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 022ec106c..9ec95cf8a 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 7157617a1..c1e3fe035 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 32b895166..057bc2a89 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 980d4fc36..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,6 +72,9 @@ class HttpMock {
     standalone: false,
 })
 export class TreeLazyExampleComponent {
+    private http = inject(HttpMock);
+    private differ = inject(IterableDiffers);
+
     treeControl = new NestedTreeControl<FoodNode>((node) => node.children);
     dataSource = new ArrayDataSource(TREE_DATA);
 
@@ -85,8 +82,6 @@ export class TreeLazyExampleComponent {
 
     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 54e011f30..11cd3953b 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 } = {};
 
@@ -87,12 +86,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 1e0fb3ba3..5ce3d206d 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 } = {};
 
@@ -89,12 +88,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 96d0913e5..19748ee1b 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 6c353459c..d554a8634 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 } = {};
 
@@ -57,12 +56,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 d17869ecb..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,6 +68,8 @@ const TREE_DATA: FoodNode[] = [
     standalone: false,
 })
 export class TreeWithAdditionalContentExampleComponent {
+    private eventBusService = inject(EventBusService);
+
     treeControl = new NestedTreeControl<FoodNode>((node) => node.children);
     dataSource = new ArrayDataSource(TREE_DATA);
 
@@ -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 b557f006d..6995f0461 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,
@@ -37,7 +37,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 b32e1ad28..ded3ea932 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 369e1cb68..f92341209 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 8b3f5f828..7c247280f 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 3f880d017..a4dda40de 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 521736585..c4314c784 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";
@@ -29,12 +29,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 db7af9aa7..b45893aa3 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({
@@ -27,9 +27,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 92ec83dd7..b891c9d00 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 cbfb54099..aa911427e 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 ce93c5470..80b1a79ed 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 bdd58cb4d..3ca75df68 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 e510a679e..f4a29fdec 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 9b1e18b99..b1626c097 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 69ce8e0c7..b456f268b 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 76272921a..317042748 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",
@@ -29,6 +29,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupHorizontalWithIconsOnlyExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -78,8 +80,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 46e41bbf0..a513c70cc 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",
@@ -29,6 +29,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupHorizontalWithIconsExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -78,8 +80,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 1155a57ff..9928d1b30 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",
@@ -26,6 +26,8 @@ import { ChangeDetectorRef, Component } from "@angular/core";
     standalone: false,
 })
 export class TabHeadingGroupVerticalWithIconsExampleComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     public currentTabId: string;
 
     public tabsetContent = [
@@ -75,8 +77,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 f69c26ebf..d967c606a 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 2ec0b950a..1ddf3de13 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";
 
@@ -56,6 +56,8 @@ interface IExampleTableModel {
 export class TableSearchWithSelectAndPaginationComponent
     implements AfterViewInit, OnDestroy
 {
+    dataSourceService = inject<ClientSideDataSource<IExampleTableModel>>(ClientSideDataSource);
+
     public displayedColumns = [
         "position",
         "name",
@@ -86,9 +88,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 0c33034ad..fc3644303 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 6b7e4cbf9..b88ee6e27 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 1dffe6eea..87c9d8e2e 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";
 
@@ -56,6 +47,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
@@ -95,10 +89,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 3f8fdb398..fabd677e6 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";
 
@@ -56,6 +47,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
@@ -95,10 +89,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 2f39a1ab7..3d7aaa784 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";
@@ -54,6 +46,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;
 
@@ -87,11 +83,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 4276e6439..bcfaaa03a 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 a060d7618..2e48d681a 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
@@ -58,6 +52,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
@@ -87,9 +83,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 a85c19ec6..6acf86a5d 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 {
@@ -48,6 +42,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;
@@ -83,12 +81,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 6659b052d..de3b3d462 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";
@@ -55,6 +49,8 @@ interface IRandomUserTableModel {
 export class TableVirtualScrollStickyHeaderTestExampleComponent
     implements AfterViewInit
 {
+    dataSourceService = inject<ClientSideDataSource<IRandomUserTableModel>>(ClientSideDataSource);
+
     @ViewChild(CdkVirtualScrollViewport)
     public viewport: CdkVirtualScrollViewport;
     // Note: Used only for demo purposes
@@ -84,9 +80,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 839cd9abe..804e24e86 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
@@ -1,186 +1,180 @@
-// © 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 {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    QueryList,
-    ViewChildren,
-} from "@angular/core";
-import { Subject } from "rxjs";
-
-import {
-    ITimeframe,
-    ITimeFramePresetDictionary,
-    TimeframeService,
-} from "@nova-ui/bits";
-
-interface IPicker {
-    id: string;
-    presets: ITimeFramePresetDictionary;
-    timeframeService?: TimeframeService;
-    tf?: ITimeframe;
-    acceptedTimeframe?: ITimeframe;
-    selectedPresetKey: string;
-}
-
-@Component({
-    selector: "nui-time-frame-picker-multiple-custom-pickers",
-    templateUrl: "./time-frame-picker-multiple-custom-pickers.example.component.html",
-    standalone: false,
-})
-export class TimeFramePickerMultipleCustomPickersExampleComponent
-    implements AfterViewInit
+// © 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 { AfterViewInit, ChangeDetectorRef, Component, QueryList, ViewChildren, inject } from "@angular/core";
+import { Subject } from "rxjs";
+
+import {
+    ITimeframe,
+    ITimeFramePresetDictionary,
+    TimeframeService,
+} from "@nova-ui/bits";
+
+interface IPicker {
+    id: string;
+    presets: ITimeFramePresetDictionary;
+    timeframeService?: TimeframeService;
+    tf?: ITimeframe;
+    acceptedTimeframe?: ITimeframe;
+    selectedPresetKey: string;
+}
+
+@Component({
+    selector: "nui-time-frame-picker-multiple-custom-pickers",
+    templateUrl: "./time-frame-picker-multiple-custom-pickers.example.component.html",
+    standalone: false,
+})
+export class TimeFramePickerMultipleCustomPickersExampleComponent
+    implements AfterViewInit
 {
-    @ViewChildren("scoper")
-    private tfScopers: QueryList<TimeframeServiceScoperExampleComponent>;
-
-    public pickers: IPicker[] = [
-        {
-            id: "1",
-            presets: {
-                last42Hours: {
-                    name: $localize`Last 42 hours`,
-                    startDatetimePattern: { hours: -42 },
-                    endDatetimePattern: {},
-                },
-                last749Days: {
-                    name: $localize`Last 749 days`,
-                    startDatetimePattern: { days: -749 },
-                    endDatetimePattern: {},
-                },
-            },
-            selectedPresetKey: "last749Days",
-        },
-        {
-            id: "2",
-            presets: {
-                last42Hours: {
-                    name: $localize`Last 42 hours`,
-                    startDatetimePattern: { hours: -42 },
-                    endDatetimePattern: {},
-                },
-            },
-            selectedPresetKey: "last42Hours",
-        },
-        {
-            id: "3",
-            presets: {
-                lastYear: {
-                    name: $localize`Last year`,
-                    startDatetimePattern: { year: -1 },
-                    endDatetimePattern: {},
-                },
-                last10Years: {
-                    name: $localize`Last 10 years`,
-                    startDatetimePattern: { year: -10 },
-                    endDatetimePattern: {},
-                },
-            },
-            selectedPresetKey: "lastYear",
-        },
-    ];
-
-    public presets: ITimeFramePresetDictionary = {
-        last42Hours: {
-            name: $localize`Last 42 hours`,
-            startDatetimePattern: { hours: -42 },
-            endDatetimePattern: {},
-        },
-        last749Days: {
-            name: $localize`Last 749 days`,
-            startDatetimePattern: { days: -749 },
-            endDatetimePattern: {},
-        },
-    };
-
-    public showFooter: boolean = false;
-
-    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;
-
-        const timeFrameDatesValid = () =>
-            picker.timeframeService?.areTimeFrameDatesValid(value);
-        const timeFrameDatesEqual = () =>
-            picker.timeframeService?.isEqual(
-                <ITimeframe>picker.tf,
-                <ITimeframe>picker.acceptedTimeframe
-            );
-        if (timeFrameDatesValid() && !timeFrameDatesEqual()) {
-            this.showFooter = true;
-        }
-
-        picker.selectedPresetKey = <string>picker.tf.selectedPresetId;
-    }
-
-    public ngAfterViewInit(): void {
-        this.tfScopers.forEach((scoper, i) => {
-            const picker = this.pickers[i];
-            const timeframeService = scoper.timeframeService;
-
-            picker.timeframeService = timeframeService;
-            timeframeService.currentPresets = picker.presets;
-            picker.acceptedTimeframe = timeframeService.getTimeframeByPresetId(
-                picker.selectedPresetKey
-            );
-            picker.tf = picker.acceptedTimeframe;
-        });
-        this.cdRef.detectChanges();
-    }
-
-    public confirmPopover(index: number): void {
-        const picker = this.pickers[index];
-
-        this.showFooter = false;
-        this.closePopoverSubject.next();
-        picker.acceptedTimeframe = picker.tf;
-    }
-
-    public cancelPopover(index: number): void {
-        this.showFooter = false;
-        this.closePopoverSubject.next();
-    }
-
-    public handlePresetSelection(presetKey: string, index: number): void {
-        const picker = this.pickers[index];
-
-        picker.selectedPresetKey = presetKey;
-        picker.tf = picker.timeframeService?.getTimeframeByPresetId(presetKey);
-        picker.acceptedTimeframe = picker.tf;
-        this.closePopoverSubject.next();
-    }
-}
-
-@Component({
-    selector: "nui-time-frame-service-scoper",
-    providers: [TimeframeService],
-    template: `<ng-content></ng-content>`,
-    standalone: false,
-})
-export class TimeframeServiceScoperExampleComponent {
-    constructor(public timeframeService: TimeframeService) {}
-}
+    private cdRef = inject(ChangeDetectorRef);
+
+    @ViewChildren("scoper")
+    private tfScopers: QueryList<TimeframeServiceScoperExampleComponent>;
+
+    public pickers: IPicker[] = [
+        {
+            id: "1",
+            presets: {
+                last42Hours: {
+                    name: $localize`Last 42 hours`,
+                    startDatetimePattern: { hours: -42 },
+                    endDatetimePattern: {},
+                },
+                last749Days: {
+                    name: $localize`Last 749 days`,
+                    startDatetimePattern: { days: -749 },
+                    endDatetimePattern: {},
+                },
+            },
+            selectedPresetKey: "last749Days",
+        },
+        {
+            id: "2",
+            presets: {
+                last42Hours: {
+                    name: $localize`Last 42 hours`,
+                    startDatetimePattern: { hours: -42 },
+                    endDatetimePattern: {},
+                },
+            },
+            selectedPresetKey: "last42Hours",
+        },
+        {
+            id: "3",
+            presets: {
+                lastYear: {
+                    name: $localize`Last year`,
+                    startDatetimePattern: { year: -1 },
+                    endDatetimePattern: {},
+                },
+                last10Years: {
+                    name: $localize`Last 10 years`,
+                    startDatetimePattern: { year: -10 },
+                    endDatetimePattern: {},
+                },
+            },
+            selectedPresetKey: "lastYear",
+        },
+    ];
+
+    public presets: ITimeFramePresetDictionary = {
+        last42Hours: {
+            name: $localize`Last 42 hours`,
+            startDatetimePattern: { hours: -42 },
+            endDatetimePattern: {},
+        },
+        last749Days: {
+            name: $localize`Last 749 days`,
+            startDatetimePattern: { days: -749 },
+            endDatetimePattern: {},
+        },
+    };
+
+    public showFooter: boolean = false;
+
+    public closePopoverSubject = new Subject<void>();
+    public openPopoverSubject = new Subject<void>();
+
+    public updateTf(value: ITimeframe, index: number): void {
+        const picker = this.pickers[index];
+        picker.tf = value;
+
+        const timeFrameDatesValid = () =>
+            picker.timeframeService?.areTimeFrameDatesValid(value);
+        const timeFrameDatesEqual = () =>
+            picker.timeframeService?.isEqual(
+                <ITimeframe>picker.tf,
+                <ITimeframe>picker.acceptedTimeframe
+            );
+        if (timeFrameDatesValid() && !timeFrameDatesEqual()) {
+            this.showFooter = true;
+        }
+
+        picker.selectedPresetKey = <string>picker.tf.selectedPresetId;
+    }
+
+    public ngAfterViewInit(): void {
+        this.tfScopers.forEach((scoper, i) => {
+            const picker = this.pickers[i];
+            const timeframeService = scoper.timeframeService;
+
+            picker.timeframeService = timeframeService;
+            timeframeService.currentPresets = picker.presets;
+            picker.acceptedTimeframe = timeframeService.getTimeframeByPresetId(
+                picker.selectedPresetKey
+            );
+            picker.tf = picker.acceptedTimeframe;
+        });
+        this.cdRef.detectChanges();
+    }
+
+    public confirmPopover(index: number): void {
+        const picker = this.pickers[index];
+
+        this.showFooter = false;
+        this.closePopoverSubject.next();
+        picker.acceptedTimeframe = picker.tf;
+    }
+
+    public cancelPopover(index: number): void {
+        this.showFooter = false;
+        this.closePopoverSubject.next();
+    }
+
+    public handlePresetSelection(presetKey: string, index: number): void {
+        const picker = this.pickers[index];
+
+        picker.selectedPresetKey = presetKey;
+        picker.tf = picker.timeframeService?.getTimeframeByPresetId(presetKey);
+        picker.acceptedTimeframe = picker.tf;
+        this.closePopoverSubject.next();
+    }
+}
+
+@Component({
+    selector: "nui-time-frame-service-scoper",
+    providers: [TimeframeService],
+    template: `<ng-content></ng-content>`,
+    standalone: false,
+})
+export class TimeframeServiceScoperExampleComponent {
    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 0cb45d6fb..050f7b76a 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 e96a4dad9..4e4d6930a 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 0cc02d244..a86448ca6 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 e856fa0c4..b1ee198ac 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 cf9abe343..0626b38e5 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 34d5546d3..ad93747db 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 {
@@ -45,17 +38,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 8c3d4a7e4..d5f8ac66d 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 cdbb979db..7bac32a18 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 bbd2c4d01..17f0f19fa 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 226bad66c..3081905ab 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 4a55dff02..28c8dff14 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 f0d53697e..db9a83a75 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 bfac463d0..548f55118 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 86abf74a4..ca32bbe29 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 de9beeece..50766f8fe 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 e4d8d7d09..0846ca16f 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 c60f5ddf9..d67c03ccd 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 ebac1b840..38a1397b3 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 2b40eebcc..65a0e457a 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 766913c8c..af5841cec 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 b7d8229f0..10e5355b6 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 0150c1c73..f316e9140 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 e0d960b19..7ca0ea4a4 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 e735eb5c9..092033e3a 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 7123e0db4..cf21dc503 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 6aa86db40..c7fbad8b0 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 0baee3a1f..842c76af1 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 842f17360..35fb93ba1 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 9aa4f8d8a..46108e4d9 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 5a221c9e9..274ed92be 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 e735eb5c9..092033e3a 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 cd6f9ebdf..9596ed1ce 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 6aa86db40..c7fbad8b0 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 c692cf182..aa28dd9a9 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 eea5937c0..2a9754841 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 d87832b9e..ccecccf22 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 396c38310..4f7bbbe8c 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 e735eb5c9..092033e3a 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 7b2543672..39c45b4a9 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 6aa86db40..c7fbad8b0 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 c192b4e35..ba572ff9d 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 57f77fc65..959934b32 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 b68976a64..6a027f09c 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";
 
@@ -68,6 +58,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",
@@ -130,14 +123,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 676677aac..964bc0de3 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 e735eb5c9..092033e3a 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 9a6b52d24..69d44e6c7 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 6aa86db40..c7fbad8b0 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 39daed0d1..ec2ff658d 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 7612d0f36..716265ffa 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 53b9b1ee7..30a72f5be 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 15ed85e0d..d8d79a390 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 e735eb5c9..092033e3a 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 3403d5665..5591c94b3 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 6aa86db40..c7fbad8b0 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 525c9f0d9..6ce24c6d7 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 5141577c2..079834047 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 66a64250c..05f8f481d 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 f943465eb..fb11dfabd 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 e735eb5c9..092033e3a 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 692c1c8af..be146cdd2 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 6aa86db40..c7fbad8b0 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 3787b7389..6354b6079 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 65a4b97f6..eac035747 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 1b013d0aa..70b4782ef 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";
 
@@ -68,6 +58,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",
@@ -130,14 +123,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 1d86f0246..e40627871 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 e735eb5c9..092033e3a 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 73ab22568..dc39287a5 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 6aa86db40..c7fbad8b0 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 5d9f4cd0a..6038c2d9e 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 eb4c6d926..54753d7f4 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 df09cad09..9548ae130 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 5ce8d67af..4dda2ae21 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 e735eb5c9..092033e3a 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 4b82a1045..d6c55c008 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 6aa86db40..c7fbad8b0 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 94219f266..a702caeed 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 72a99d232..bfcc4c7fb 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 e735eb5c9..092033e3a 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 78079485c..9143cfada 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 6aa86db40..c7fbad8b0 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 5a7913338..d0fdc0b92 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 38140df81..a1ae953fd 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 26980d139..ad0745ddf 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 36d62ffca..f8bf67e9c 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 66745097e..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,6 +43,9 @@ import { IServer } from "../types";
     standalone: false,
 })
 export class FilteredViewTreeComponent implements OnDestroy, AfterViewInit {
+    private dataSource = inject(DataSourceService) as FilteredViewWithTreeDataSource<IServer>;
+    private cdRef = inject(ChangeDetectorRef);
+
     treeControl = new NestedTreeControl<any>((node) => node.children);
     dataSourceTree: ArrayDataSource<any>;
 
@@ -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 cbab32941..661a75bbd 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 c346777c3..dcdc417ad 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 e65256071..9ce7250ec 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 5fc233848..625814463 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 958957f6b..05864e0a8 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 227e80e37..1d08c33ee 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 a6e5a9a45..6f6af1eb7 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 8f6a3d241..3ab0fb970 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 9e564d02f..983a66c0f 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 ddea70777..1635bf8d8 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 f7f3609ef..8d5fd2cba 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 a1ed37bfa..ed885b45a 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 8b6e294e9..af200807b 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 3baa64646..07b18c26e 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 73812a8d7..122392695 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 dd3524348..9b2555493 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 3bb41f10e..d1388b793 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 4fdbbe9ed..e6f072156 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 49c62c338..3718e84fa 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 c757d75de..4adb32570 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 9614209db..dac7e0717 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,10 +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 2ebdf9c35..a7d01e603 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;
@@ -193,11 +187,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 cb6478987..fc7ff4541 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 a654fb679..f87f8cd65 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 85d1c94ab..734940518 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 71fb69779..d78db5d1a 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 49d2b68dc..fdd0245f3 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 3ee0f277e..77dd7291e 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 7105ec955..c1b790cbb 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 d7ca4b059..a44cd80f0 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 cc5eb2241..62fc6b07e 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 ee5a56611..ceb3f98ac 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 91d702fe9..8c9f599f5 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 c4ebaa686..3cd764552 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 06db809c0..a656ec6ec 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";
@@ -56,7 +47,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;
@@ -68,7 +60,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;
@@ -81,7 +74,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");
@@ -117,6 +111,8 @@ export class WithActiveDialogComponent {
     standalone: false,
 })
 class TestComponent {
+    dialogService = inject(DialogService);
+
     name = "World";
     openedDialog: NuiDialogRef;
     show = true;
@@ -128,8 +124,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 54ed1fa93..6ad4805a5 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";
 
@@ -62,6 +49,11 @@ const FOCUSABLE_SELECTOR =
     standalone: false,
 })
 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 329abd31b..387505857 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,
@@ -55,6 +46,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>;
 
@@ -84,11 +78,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 79ee63137..6c005b999 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 3fbd99a42..1a064db4e 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 61e80ef2c..88135a8bc 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 f1ddab908..a12a6deb8 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 a46bb9587..eda4f15a4 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 f2e43b3e7..c41538fc2 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 c411dfd7e..70d44c069 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 3bb4c4106..05ffddce0 100644
--- a/packages/bits/src/lib/icon/icon.component.ts
+++ b/packages/bits/src/lib/icon/icon.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,
-    Component,
-    Input,
-    OnChanges,
-    SimpleChanges,
-    ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, inject } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 import _isInteger from "lodash/isInteger";
 import isNil from "lodash/isNil";
@@ -56,6 +49,9 @@ export class IconComponent implements OnChanges {
         small: "nui-icon-size-sm",
     };
 
+    private iconService = inject(IconService);
+    private sanitizer = inject(DomSanitizer);
+
     @Input()
     iconColor: string;
     @Input()
@@ -81,11 +77,6 @@ export class IconComponent implements OnChanges {
     private iconFound: boolean;
     private iconData: IconData;
 
-    constructor(
-        private iconService: IconService,
-        private sanitizer: DomSanitizer
-    ) {}
-
     getIconByStatus(status: string): string {
         if (!status) {
             return "";
diff --git a/packages/bits/src/lib/image/image.component.ts b/packages/bits/src/lib/image/image.component.ts
index e9b165827..fc88bfa62 100644
--- a/packages/bits/src/lib/image/image.component.ts
+++ b/packages/bits/src/lib/image/image.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,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Inject,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges,
-    ViewEncapsulation,
-} from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation, inject } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 import _find from "lodash/find";
 import _has from "lodash/has";
@@ -61,6 +49,13 @@ import { UtilService } from "../../services/util.service";
     standalone: false,
 })
 export class ImageComponent implements OnInit, AfterViewInit, OnChanges {
+    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
      */
@@ -100,15 +95,6 @@ export class ImageComponent implements OnInit, AfterViewInit, OnChanges {
     public imageName: string | null;
     public hasAlt: boolean;
 
-    constructor(
-        private logger: LoggerService,
-        private utilService: UtilService,
-        private changeDetector: ChangeDetectorRef,
-        @Inject(imagesPresetToken) private images: Array<IImagesPresetItem>,
-        private domSanitizer: DomSanitizer,
-        private el: ElementRef
-    ) {}
-
     public ngOnInit(): void {
         const dimensionImputs: string[] = [this.height, this.width];
 
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 27864f53a..f298044f3 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 d08e7e1eb..8b0ae473a 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";
@@ -73,6 +64,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
      */
@@ -82,11 +75,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 5f7cb989f..37a73fd9d 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,15 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    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";
@@ -63,13 +55,17 @@ import { MenuGroupComponent } from "../menu-group/menu-group.component";
     standalone: false,
 })
 export class MenuItemComponent extends MenuItemBaseComponent {
+    readonly group: MenuGroupComponent;
+
     @ViewChild("menuItemDefault") 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-link/menu-link.component.ts b/packages/bits/src/lib/menu/menu-item/menu-link/menu-link.component.ts
index 0a4191777..a421a570c 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 1d5e093ce..3a403b6bb 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";
@@ -69,6 +58,8 @@ import { MenuItemBaseComponent } from "../menu-item/menu-item-base";
     standalone: false,
 })
 export class MenuOptionComponent extends MenuItemBaseComponent {
+    readonly group: MenuGroupComponent;
+
     /**
      * Sets inner input "name" attribute
      */
@@ -99,11 +90,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 3024c569b..87cfdfeb8 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";
@@ -69,6 +58,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
      */
@@ -92,11 +83,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 1b48f24ae..1682256c7 100644
--- a/packages/bits/src/lib/menu/menu-key-control.service.ts
+++ b/packages/bits/src/lib/menu/menu-key-control.service.ts
@@ -19,7 +19,7 @@
 //  THE SOFTWARE.
 
 import { ActiveDescendantKeyManager, LiveAnnouncer } from "@angular/cdk/a11y";
-import { ElementRef, Injectable, OnDestroy, QueryList } from "@angular/core";
+import { ElementRef, Injectable, OnDestroy, QueryList, inject } from "@angular/core";
 import isNull from "lodash/isNull";
 import { Subject, Subscription } from "rxjs";
 
@@ -34,6 +34,8 @@ import { IPopupActiveOptions } from "../public-api";
 
 @Injectable()
 export class MenuKeyControlService implements OnDestroy {
+    private live = inject(LiveAnnouncer);
+
     public popup: PopupComponent;
     public menuGroups: QueryList<MenuGroupComponent>;
     public menuItems: QueryList<MenuItemBaseComponent>;
@@ -54,8 +56,6 @@ export class MenuKeyControlService implements OnDestroy {
         return this._scrollContainer || this.popup?.popupAreaContainer;
     }
 
-    constructor(private live: LiveAnnouncer) {}
-
     public initKeyboardManager(): void {
         this.keyboardEventsManager = this.keyControlItemsSource
             ? new ActiveDescendantKeyManager(
diff --git a/packages/bits/src/lib/menu/menu/menu.component.ts b/packages/bits/src/lib/menu/menu/menu.component.ts
index 47365beab..107890b3e 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 { Subject, Subscription } from "rxjs";
 
@@ -64,6 +49,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;
@@ -120,11 +109,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 fd63d31cc..e6833064b 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>
@@ -67,6 +56,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";
@@ -85,8 +77,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 0981b3321..24ba4964c 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 a5e9911f4..23f22d6d3 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 1432b9cee..82e64b70d 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 2122f39b4..dbd754d98 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 e520e35c8..eb2b7fabb 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 c91fe6d79..a313a3153 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 02f08862d..30f4761a7 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) */
@@ -40,8 +35,6 @@ export class PopupToggleDirective {
 
     @Output() toggle = new EventEmitter();
 
-    constructor(public host: ElementRef) {}
-
     @HostListener("click", ["$event"])
     public handleElementFocus(event: Event): void {
         if (!this.isDisabled && !this.disabled) {
diff --git a/packages/bits/src/lib/popup/popup.component.ts b/packages/bits/src/lib/popup/popup.component.ts
index 60389edf8..c50d6e29e 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 2f2b49eb9..ac9f1153f 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 4a9d8edc5..ece384329 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 4061f4075..a51cb0628 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 2aad16aa2..f15103b69 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 0f0abe3ee..327378f2f 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 5ca1af4da..f535f5072 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 b0a64457a..c2c4d82e7 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 30605e7ad..0a45ff17e 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 4a25d916e..cb8176bac 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 ab74028d5..6aca772a6 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 0d8eeac99..63b3c97f2 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 9fe881983..b6b78fb35 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 cbed95ef7..73e0ed32b 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,14 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import {
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    HostBinding,
-    Input,
-    Output,
-} from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, inject } from "@angular/core";
 
 /** @ignore */
 
@@ -37,6 +30,8 @@ import {
     standalone: false,
 })
 export class TabHeadingComponent {
+    private changeDetector = inject(ChangeDetectorRef);
+
     /** This adds 'disabled' class to the host component depending on the 'disabled' @Input to properly style disabled tabs */
     @HostBinding("class.disabled")
     get isDisabled(): boolean {
@@ -64,8 +59,6 @@ export class TabHeadingComponent {
 
     protected _active: boolean;
 
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
     public selectTab(): void {
         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 bfb8341cc..e68140256 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 ca7f2e9d7..17f9672ec 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 7a6bb78ac..61dc2f8ac 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 6c132a5f9..1cf984c4a 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 ed7d8ada3..70f431577 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 e22000c8c..e9d5910b9 100644
--- a/packages/bits/src/lib/table/table.component.ts
+++ b/packages/bits/src/lib/table/table.component.ts
@@ -38,28 +38,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";
@@ -104,6 +83,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;
@@ -145,25 +132,19 @@ 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>>,
-        @Inject(_COALESCED_STYLE_SCHEDULER)
-        coalescedStyleScheduler: _CoalescedStyleScheduler,
-        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 coalescedStyleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER);
+        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(
@@ -179,6 +160,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 009fc2eac..3c3409bc0 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 11002db0b..dbc32719c 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 092098a9b..43050339c 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 9df4d3546..872c9e484 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 3acdfca47..32c345e28 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 b0a05b7f3..fe5ef5d44 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 f84faba1c..30c7a86b4 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";
@@ -76,6 +62,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;
@@ -109,13 +101,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 c3cabea5b..ac5508fba 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 aa6ff2200..d8409140a 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 b2b79fafa..198fa6613 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 f4e233c52..60a79a31b 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 cc618f0e6..8b7f96165 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 a527fab72..7d93d9687 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 92215966e..7e683d33e 100644
--- a/packages/bits/src/services/event-bus.service.ts
+++ b/packages/bits/src/services/event-bus.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, 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";
@@ -32,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 8cb3998cf..4ede04539 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 c1cec47ad..df5053a82 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 3a7c40a5d..b8f26d8d9 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 f760c9084..d5cede9f8 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 2bb1cf815..69c16405a 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)