diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts
index 7b46b274d8e..140c529e14a 100755
--- a/src/app/components/accordion/accordion.ts
+++ b/src/app/components/accordion/accordion.ts
@@ -40,7 +40,7 @@ import { UniqueComponentId } from 'primeng/utils';
             <div class="p-accordion-header" role="heading" [attr.aria-level]="headerAriaLevel" [class.p-highlight]="selected" [class.p-disabled]="disabled" [attr.data-p-disabled]="disabled" [attr.data-pc-section]="'header'">
                 <a
                     [ngClass]="headerStyleClass"
-                    [style]="headerStyle"
+                    [ngStyle]="headerStyle"
                     role="button"
                     class="p-accordion-header-link"
                     (click)="toggle($event)"
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
index da00d7b009a..21c479145b6 100755
--- a/src/app/components/autocomplete/autocomplete.ts
+++ b/src/app/components/autocomplete/autocomplete.ts
@@ -194,7 +194,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                 (onAnimationStart)="onOverlayAnimationStart($event)"
                 (onHide)="hide()"
             >
-                <div [ngClass]="panelClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [ngClass]="panelClass" [ngStyle]="panelStyles" [class]="panelStyleClass">
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                     <p-scroller
                         *ngIf="virtualScroll"
@@ -825,6 +825,13 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
         };
     }
 
+    get panelStyles() {
+        return {
+          'max-height': this.virtualScroll ? 'auto' : this.scrollHeight,
+          ...this.panelStyle
+        };
+      }
+
     get inputClass() {
         return {
             'p-autocomplete-input p-inputtext p-component': !this.multiple,
diff --git a/src/app/components/chart/chart.ts b/src/app/components/chart/chart.ts
index 3d34a8ab0d1..fd6842e5ba2 100755
--- a/src/app/components/chart/chart.ts
+++ b/src/app/components/chart/chart.ts
@@ -8,8 +8,23 @@ import Chart from 'chart.js/auto';
 @Component({
     selector: 'p-chart',
     template: `
-        <div style="position:relative" [style.width]="responsive && !width ? null : width" [style.height]="responsive && !height ? null : height">
-            <canvas role="img" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.width]="responsive && !width ? null : width" [attr.height]="responsive && !height ? null : height" (click)="onCanvasClick($event)"></canvas>
+        <div
+            [ngStyle]="{
+                position: 'relative',
+                width: responsive && !width ? null : width,
+                height: responsive && !height ? null : height
+            }"
+        >
+            <canvas
+                role="img"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [ngStyle]="{
+                    width: responsive && !width ? null : width,
+                    height: responsive && !height ? null : height
+                }"
+                (click)="onCanvasClick($event)"
+            ></canvas>
         </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -92,7 +107,11 @@ export class UIChart implements AfterViewInit, OnDestroy {
 
     chart: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, private zone: NgZone) {}
+    constructor(
+        @Inject(PLATFORM_ID) private platformId: any,
+        public el: ElementRef,
+        private zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         this.initChart();
diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
index 963b9f9182f..616d1205004 100755
--- a/src/app/components/contextmenu/contextmenu.ts
+++ b/src/app/components/contextmenu/contextmenu.ts
@@ -62,7 +62,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 0f9b9c9e3bb..48ad86f3e86 100755
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -51,7 +51,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
         <div
             *ngIf="maskVisible"
             [class]="maskStyleClass"
-            [style]="maskStyle"
+            [ngStyle]="maskStyle"
             [ngClass]="{
                 'p-dialog-mask': true,
                 'p-component-overlay p-component-overlay-enter': this.modal,
@@ -267,7 +267,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
      * Style of the mask.
      * @group Props
      */
-    @Input() maskStyle: string | undefined;
+    @Input() maskStyle: { [klass: string]: any } | null | undefined;
     /**
      * Whether to show the header or not.
      * @group Props
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index 4e918cc7def..0f91b59c237 100755
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -268,7 +268,13 @@ export class DropdownItem {
                                 </div>
                             </ng-template>
                         </div>
-                        <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" tabindex="0">
+                        <div
+                            class="p-dropdown-items-wrapper"
+                            [ngStyle]="{
+                                'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'
+                            }"
+                            tabindex="0"
+                        >
                             <p-scroller
                                 *ngIf="virtualScroll"
                                 #scroller
@@ -294,7 +300,7 @@ export class DropdownItem {
                             </ng-container>
 
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                                <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="scrollerOptions.contentStyle" role="listbox">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                                         <ng-container *ngIf="isOptionGroup(option)">
                                             <li class="p-dropdown-item-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
@@ -1012,7 +1018,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        public zone: NgZone,
+        public filterService: FilterService,
+        public config: PrimeNGConfig
+    ) {
         effect(() => {
             const modelValue = this.modelValue();
             const visibleOptions = this.visibleOptions();
diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts
index 3dd07d191ca..2a7b1158967 100755
--- a/src/app/components/dynamicdialog/dynamicdialog.ts
+++ b/src/app/components/dynamicdialog/dynamicdialog.ts
@@ -58,7 +58,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
             <div
                 #container
                 [ngClass]="{ 'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-resizable': config.resizable, 'p-dialog-draggable': config.draggable, 'p-dialog-maximized': maximized }"
-                [ngStyle]="config.style"
+                [ngStyle]="containerStyle"
                 [class]="config.styleClass"
                 [@animation]="{ value: 'visible', params: { transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)' } }"
                 (@animation.start)="onAnimationStart($event)"
@@ -67,8 +67,6 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 *ngIf="visible"
                 pFocusTrap
                 [pFocusTrapDisabled]="config.focusTrap === false"
-                [style.width]="config.width"
-                [style.height]="config.height"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
             >
@@ -274,6 +272,14 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
         return dynamicDialogCount;
     }
 
+    get containerStyle() {
+        return {
+            ...this.config.style, 
+            'width': this.config.width, 
+            'height': this.config.height 
+        };
+    }
+
     constructor(
         @Inject(DOCUMENT) private document: Document,
         @Inject(PLATFORM_ID) private platformId: any,
diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts
index 9ca43b9f911..22213e59284 100755
--- a/src/app/components/listbox/listbox.ts
+++ b/src/app/components/listbox/listbox.ts
@@ -117,7 +117,14 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                     </span>
                 </ng-template>
             </div>
-            <div [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+            <div
+                [ngClass]="'p-listbox-list-wrapper'"
+                [ngStyle]="listStyle"
+                [class]="listStyleClass"
+                [ngStyle]="{
+                    'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'
+                }"
+            >
                 <p-scroller
                     #scroller
                     *ngIf="virtualScroll"
@@ -151,7 +158,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                         [tabindex]="-1"
                         [attr.aria-multiselectable]="true"
                         [ngClass]="scrollerOptions.contentStyleClass"
-                        [style]="scrollerOptions.contentStyle"
+                        [ngStyle]="scrollerOptions.contentStyle"
                         [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                         [attr.aria-label]="ariaLabel"
                         [attr.aria-multiselectable]="multiple"
@@ -671,7 +678,13 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
         } else return filterValue ? this.filterService.filter(options, this.searchFields, filterValue, this.filterMatchMode, this.filterLocale) : options;
     });
 
-    constructor(public el: ElementRef, public cd: ChangeDetectorRef, public filterService: FilterService, public config: PrimeNGConfig, private renderer: Renderer2) {}
+    constructor(
+        public el: ElementRef,
+        public cd: ChangeDetectorRef,
+        public filterService: FilterService,
+        public config: PrimeNGConfig,
+        private renderer: Renderer2
+    ) {}
 
     ngOnInit() {
         this.id = this.id || UniqueComponentId();
diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
index fe320732195..e15fe600ade 100755
--- a/src/app/components/megamenu/megamenu.ts
+++ b/src/app/components/megamenu/megamenu.ts
@@ -52,12 +52,12 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
             (focus)="menuFocus.emit($event)"
             (blur)="menuBlur.emit($event)"
         >
-            <li *ngIf="submenu" [ngClass]="getSubmenuHeaderClass(submenu)" [style]="getItemProp(submenu, 'style')" role="presentation">{{ getItemLabel(submenu) }}</li>
+            <li *ngIf="submenu" [ngClass]="getSubmenuHeaderClass(submenu)" [ngStyle]="getItemProp(submenu, 'style')" role="presentation">{{ getItemLabel(submenu) }}</li>
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"
diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
index a169503ff41..29e99334286 100755
--- a/src/app/components/menubar/menubar.ts
+++ b/src/app/components/menubar/menubar.ts
@@ -73,7 +73,7 @@ export class MenubarService {
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index a6cf3d381a4..5bc73ae2e21 100755
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -25,7 +25,6 @@ import {
     Renderer2,
     Signal,
     signal,
-    SimpleChanges,
     TemplateRef,
     ViewChild,
     ViewEncapsulation
@@ -346,7 +345,7 @@ export class MultiSelectItem {
                                 </button>
                             </ng-template>
                         </div>
-                        <div class="p-multiselect-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                        <div class="p-multiselect-items-wrapper" [ngStyle]="{ 'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto' }">
                             <p-scroller
                                 *ngIf="virtualScroll"
                                 #scroller
@@ -373,7 +372,7 @@ export class MultiSelectItem {
                             </ng-container>
 
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true" [attr.aria-label]="listLabel">
+                                <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true" [attr.aria-label]="listLabel">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                                         <ng-container *ngIf="isOptionGroup(option)">
                                             <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-multiselect-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
@@ -1189,7 +1188,15 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue();
     });
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        public zone: NgZone,
+        public filterService: FilterService,
+        public config: PrimeNGConfig,
+        public overlayService: OverlayService
+    ) {
         effect(() => {
             const modelValue = this.modelValue();
 
diff --git a/src/app/components/progressbar/progressbar.ts b/src/app/components/progressbar/progressbar.ts
index 70274c69ddd..ae67e2e999c 100755
--- a/src/app/components/progressbar/progressbar.ts
+++ b/src/app/components/progressbar/progressbar.ts
@@ -20,14 +20,37 @@ import { QueryList } from '@angular/core';
             [attr.data-pc-section]="'root'"
             [ngClass]="{ 'p-progressbar p-component': true, 'p-progressbar-determinate': mode === 'determinate', 'p-progressbar-indeterminate': mode === 'indeterminate' }"
         >
-            <div *ngIf="mode === 'determinate'" class="p-progressbar-value p-progressbar-value-animate" [style.width]="value + '%'" style="display:flex" [style.background]="color" [attr.data-pc-section]="'value'">
+            <div
+                *ngIf="mode === 'determinate'"
+                class="p-progressbar-value p-progressbar-value-animate"
+                [ngStyle]="{
+                    width: value + '%',
+                    display: 'flex',
+                    background: color
+                }"
+                [attr.data-pc-section]="'value'"
+            >
                 <div class="p-progressbar-label">
-                    <div *ngIf="showValue && !contentTemplate" [style.display]="value != null && value !== 0 ? 'flex' : 'none'" [attr.data-pc-section]="'label'">{{ value }}{{ unit }}</div>
+                    <div
+                        *ngIf="showValue && !contentTemplate"
+                        [ngStyle]="{
+                            display: value != null && value !== 0 ? 'flex' : 'none'
+                        }"
+                        [attr.data-pc-section]="'label'"
+                    >
+                        {{ value }}{{ unit }}
+                    </div>
                     <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: value }"></ng-container>
                 </div>
             </div>
             <div *ngIf="mode === 'indeterminate'" class="p-progressbar-indeterminate-container" [attr.data-pc-section]="'container'">
-                <div class="p-progressbar-value p-progressbar-value-animate" [style.background]="color" [attr.data-pc-section]="'value'"></div>
+                <div
+                    class="p-progressbar-value p-progressbar-value-animate"
+                    [ngStyle]="{
+                        background: color
+                    }"
+                    [attr.data-pc-section]="'value'"
+                ></div>
             </div>
         </div>
     `,
diff --git a/src/app/components/slidemenu/slidemenu.ts b/src/app/components/slidemenu/slidemenu.ts
index acc68f54c66..1692c30753f 100755
--- a/src/app/components/slidemenu/slidemenu.ts
+++ b/src/app/components/slidemenu/slidemenu.ts
@@ -45,11 +45,13 @@ import { CaretLeftIcon } from 'primeng/icons/caretleft';
             role="menu"
             [ngClass]="{ 'p-submenu-list': !root, 'p-slidemenu-root-list': root, 'p-active-submenu': isActive }"
             [id]="menuId + '_list'"
-            [style.width.px]="menuWidth"
-            [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth"
-            [style.transitionProperty]="root ? 'left' : 'none'"
-            [style.transitionDuration]="effectDuration + 'ms'"
-            [style.transitionTimingFunction]="easing"
+            [ngStyle]="{
+                'width.px': menuWidth,
+                'left.px': root ? slideMenu.left : slideMenu.menuWidth,
+                'transition-property': root ? 'left' : 'none',
+                'transition-duration': effectDuration + 'ms',
+                'transition-timing-function': easing
+            }"
             [tabindex]="tabindex"
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledBy]="ariaLabelledBy"
@@ -64,7 +66,7 @@ import { CaretLeftIcon } from 'primeng/icons/caretleft';
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"
@@ -242,7 +244,13 @@ export class SlideMenuSub {
         return -this.slideMenu.left == this.level * this.menuWidth;
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(forwardRef(() => SlideMenu)) public slideMenu: SlideMenu) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public renderer: Renderer2,
+        private cd: ChangeDetectorRef,
+        @Inject(forwardRef(() => SlideMenu)) public slideMenu: SlideMenu
+    ) {}
 
     getItemProp(processedItem: any, name: string, params: any | null = null) {
         return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
@@ -339,7 +347,13 @@ export class SlideMenuSub {
             (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
             *ngIf="!popup || visible"
         >
-            <div class="p-slidemenu-wrapper" [style.height]="left ? viewportHeight + 'px' : 'auto'" [style.width]="menuWidth + 'px'">
+            <div
+                class="p-slidemenu-wrapper"
+                [ngStyle]="{
+                    height: left ? viewportHeight + 'px' : 'auto',
+                    width: menuWidth + 'px'
+                }"
+            >
                 <div #slideMenuContent class="p-slidemenu-content" (focus)="logFocus($event, slideMenuContent)">
                     <p-slideMenuSub
                         #rootmenu
@@ -364,7 +378,17 @@ export class SlideMenuSub {
                         (itemMouseEnter)="onItemMouseEnter($event)"
                     ></p-slideMenuSub>
                 </div>
-                <a #backward class="p-slidemenu-backward p-menuitem-link" tabindex="0" [style.display]="left ? 'block' : 'none'" (click)="goBack($event)" (keydown)="onNavigationKeyDown($event)" [attr.data-pc-section]="'navigation'">
+                <a
+                    #backward
+                    class="p-slidemenu-backward p-menuitem-link"
+                    tabindex="0"
+                    [ngStyle]="{
+                        display: left ? 'block' : 'none'
+                    }"
+                    (click)="goBack($event)"
+                    (keydown)="onNavigationKeyDown($event)"
+                    [attr.data-pc-section]="'navigation'"
+                >
                     <CaretLeftIcon *ngIf="!backIconTemplate" [styleClass]="'p-slidemenu-backward-icon'" [ngStyle]="{ 'vertical-align': 'middle' }" />
                     <ng-template *ngTemplateOutlet="backIconTemplate"></ng-template>
                     <span>{{ backLabel }}</span>
diff --git a/src/app/components/speeddial/speeddial.ts b/src/app/components/speeddial/speeddial.ts
index 4db568de217..2a49051ac7c 100644
--- a/src/app/components/speeddial/speeddial.ts
+++ b/src/app/components/speeddial/speeddial.ts
@@ -45,7 +45,7 @@ import { asapScheduler } from 'rxjs';
                 pRipple
                 pButton
                 class="p-button-icon-only"
-                [style]="buttonStyle"
+                [ngStyle]="buttonStyle"
                 [icon]="buttonIconClass"
                 [ngClass]="buttonClass()"
                 [disabled]="disabled"
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index 760681c77fc..31ecece2bb1 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -221,7 +221,7 @@ export class TableService {
                         role="table"
                         [ngClass]="{ 'p-datatable-table': true, 'p-datatable-scrollable-table': scrollable, 'p-datatable-resizable-table': resizableColumns, 'p-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }"
                         [class]="tableStyleClass"
-                        [style]="tableStyle"
+                        [ngStyle]="tableStyle"
                         [attr.id]="id + '-table'"
                     >
                         <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
@@ -242,7 +242,7 @@ export class TableService {
                             role="rowgroup"
                             class="p-datatable-tbody"
                             [ngClass]="scrollerOptions.contentStyleClass"
-                            [style]="scrollerOptions.contentStyle"
+                            [ngStyle]="scrollerOptions.contentStyle"
                             [value]="dataToRender(scrollerOptions.rows)"
                             [pTableBody]="scrollerOptions.columns"
                             [pTableBodyTemplate]="bodyTemplate"
@@ -251,7 +251,7 @@ export class TableService {
                         <tbody
                             role="rowgroup"
                             *ngIf="scrollerOptions.spacerStyle"
-                            [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
+                            [ngStyle]="{ height: 'calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px)' }"
                             class="p-datatable-scroller-spacer"
                         ></tbody>
                         <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate" #tfoot class="p-datatable-tfoot">
@@ -309,12 +309,33 @@ export class TableService {
                 <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
             </div>
 
-            <div #resizeHelper class="p-column-resizer-helper" style="display:none" *ngIf="resizableColumns"></div>
-            <span #reorderIndicatorUp class="p-datatable-reorder-indicator-up" style="display: none;" *ngIf="reorderableColumns">
+            <div
+                #resizeHelper
+                class="p-column-resizer-helper"
+                [ngStyle]="{
+                    display: 'none'
+                }"
+                *ngIf="resizableColumns"
+            ></div>
+            <span
+                #reorderIndicatorUp
+                class="p-datatable-reorder-indicator-up"
+                [ngStyle]="{
+                    display: 'none'
+                }"
+                *ngIf="reorderableColumns"
+            >
                 <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate" />
                 <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate"></ng-template>
             </span>
-            <span #reorderIndicatorDown class="p-datatable-reorder-indicator-down" style="display: none;" *ngIf="reorderableColumns">
+            <span
+                #reorderIndicatorDown
+                class="p-datatable-reorder-indicator-down"
+                [ngStyle]="{
+                    display: 'none'
+                }"
+                *ngIf="reorderableColumns"
+            >
                 <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate" />
                 <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate"></ng-template>
             </span>
@@ -3182,7 +3203,12 @@ export class TableBody implements AfterViewInit, OnDestroy {
         }
     }
 
-    constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef, public el: ElementRef) {
+    constructor(
+        public dt: Table,
+        public tableService: TableService,
+        public cd: ChangeDetectorRef,
+        public el: ElementRef
+    ) {
         this.subscription = this.dt.tableService.valueSource$.subscribe(() => {
             if (this.dt.virtualScroll) {
                 this.cd.detectChanges();
@@ -3308,7 +3334,10 @@ export class FrozenColumn implements AfterViewInit {
 
     @Input() alignFrozen: string = 'left';
 
-    constructor(private el: ElementRef, private zone: NgZone) {}
+    constructor(
+        private el: ElementRef,
+        private zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         this.zone.runOutsideAngular(() => {
@@ -3467,7 +3496,10 @@ export class SortIcon implements OnInit, OnDestroy {
 
     sortOrder: number | undefined;
 
-    constructor(public dt: Table, public cd: ChangeDetectorRef) {
+    constructor(
+        public dt: Table,
+        public cd: ChangeDetectorRef
+    ) {
         this.subscription = this.dt.tableService.sortSource$.subscribe((sortMeta) => {
             this.updateSortState();
         });
@@ -3548,7 +3580,11 @@ export class SelectableRow implements OnInit, OnDestroy {
 
     subscription: Subscription | undefined;
 
-    constructor(public dt: Table, public tableService: TableService, private el: ElementRef) {
+    constructor(
+        public dt: Table,
+        public tableService: TableService,
+        private el: ElementRef
+    ) {
         if (this.isEnabled()) {
             this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
                 this.selected = this.dt.isSelected(this.data);
@@ -3796,7 +3832,10 @@ export class SelectableRowDblClick implements OnInit, OnDestroy {
 
     subscription: Subscription | undefined;
 
-    constructor(public dt: Table, public tableService: TableService) {
+    constructor(
+        public dt: Table,
+        public tableService: TableService
+    ) {
         if (this.isEnabled()) {
             this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
                 this.selected = this.dt.isSelected(this.data);
@@ -3851,7 +3890,11 @@ export class ContextMenuRow {
 
     subscription: Subscription | undefined;
 
-    constructor(public dt: Table, public tableService: TableService, private el: ElementRef) {
+    constructor(
+        public dt: Table,
+        public tableService: TableService,
+        private el: ElementRef
+    ) {
         if (this.isEnabled()) {
             this.subscription = this.dt.tableService.contextMenuSource$.subscribe((data) => {
                 this.selected = this.dt.equals(this.data, data);
@@ -3933,7 +3976,14 @@ export class ResizableColumn implements AfterViewInit, OnDestroy {
 
     documentMouseUpListener: VoidListener;
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public dt: Table, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private renderer: Renderer2,
+        public dt: Table,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -4042,7 +4092,13 @@ export class ReorderableColumn implements AfterViewInit, OnDestroy {
 
     mouseDownListener: VoidListener;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public dt: Table, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        @Inject(PLATFORM_ID) private platformId: any,
+        private renderer: Renderer2,
+        public dt: Table,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (this.isEnabled()) {
@@ -4149,7 +4205,11 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy {
 
     overlayEventListener: any;
 
-    constructor(public dt: Table, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        public dt: Table,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     public ngOnChanges(changes: SimpleChanges): void {
         if (this.el.nativeElement && !changes.data?.firstChange) {
@@ -4490,7 +4550,10 @@ export class EditableRow {
     }
 })
 export class InitEditableRow {
-    constructor(public dt: Table, public editableRow: EditableRow) {}
+    constructor(
+        public dt: Table,
+        public editableRow: EditableRow
+    ) {}
 
     @HostListener('click', ['$event'])
     onClick(event: Event) {
@@ -4506,7 +4569,10 @@ export class InitEditableRow {
     }
 })
 export class SaveEditableRow {
-    constructor(public dt: Table, public editableRow: EditableRow) {}
+    constructor(
+        public dt: Table,
+        public editableRow: EditableRow
+    ) {}
 
     @HostListener('click', ['$event'])
     onClick(event: Event) {
@@ -4522,7 +4588,10 @@ export class SaveEditableRow {
     }
 })
 export class CancelEditableRow {
-    constructor(public dt: Table, public editableRow: EditableRow) {}
+    constructor(
+        public dt: Table,
+        public editableRow: EditableRow
+    ) {}
 
     @HostListener('click', ['$event'])
     onClick(event: Event) {
@@ -4553,7 +4622,11 @@ export class CellEditor implements AfterContentInit {
 
     outputTemplate: Nullable<TemplateRef<any>>;
 
-    constructor(public dt: Table, @Optional() public editableColumn: EditableColumn, @Optional() public editableRow: EditableRow) {}
+    constructor(
+        public dt: Table,
+        @Optional() public editableColumn: EditableColumn,
+        @Optional() public editableRow: EditableRow
+    ) {}
 
     ngAfterContentInit() {
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
@@ -4613,7 +4686,10 @@ export class TableRadioButton {
 
     subscription: Subscription;
 
-    constructor(public dt: Table, public cd: ChangeDetectorRef) {
+    constructor(
+        public dt: Table,
+        public cd: ChangeDetectorRef
+    ) {
         this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
             this.checked = this.dt.isSelected(this.value);
             this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined;
@@ -4710,7 +4786,11 @@ export class TableCheckbox {
 
     subscription: Subscription;
 
-    constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef) {
+    constructor(
+        public dt: Table,
+        public tableService: TableService,
+        public cd: ChangeDetectorRef
+    ) {
         this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
             this.checked = this.dt.isSelected(this.value) && !this.disabled;
             this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined;
@@ -4790,7 +4870,11 @@ export class TableHeaderCheckbox {
 
     valueChangeSubscription: Subscription;
 
-    constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef) {
+    constructor(
+        public dt: Table,
+        public tableService: TableService,
+        public cd: ChangeDetectorRef
+    ) {
         this.valueChangeSubscription = this.dt.tableService.valueSource$.subscribe(() => {
             this.checked = this.updateCheckedState();
             this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectAll : this.dt.config.translation.aria.unselectAll) : undefined;
@@ -4889,7 +4973,12 @@ export class ReorderableRow implements AfterViewInit {
 
     dropListener: VoidListener;
 
-    constructor(private renderer: Renderer2, public dt: Table, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        private renderer: Renderer2,
+        public dt: Table,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (this.isEnabled()) {
@@ -5387,7 +5476,15 @@ export class ColumnFilter implements AfterContentInit {
         return this.config.translation ? this.config.translation.aria.filterConstraint : undefined;
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public dt: Table, public renderer: Renderer2, public config: PrimeNGConfig, public overlayService: OverlayService, private cd: ChangeDetectorRef) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public dt: Table,
+        public renderer: Renderer2,
+        public config: PrimeNGConfig,
+        public overlayService: OverlayService,
+        private cd: ChangeDetectorRef
+    ) {
         this.window = this.document.defaultView as Window;
     }
 
@@ -5895,7 +5992,10 @@ export class ColumnFilterFormElement implements OnInit {
 
     filterCallback: any;
 
-    constructor(public dt: Table, private colFilter: ColumnFilter) {}
+    constructor(
+        public dt: Table,
+        private colFilter: ColumnFilter
+    ) {}
 
     ngOnInit() {
         this.filterCallback = (value: any) => {
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
index f46d9d7801a..cb46c5b8daa 100755
--- a/src/app/components/tieredmenu/tieredmenu.ts
+++ b/src/app/components/tieredmenu/tieredmenu.ts
@@ -59,7 +59,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
index 2753e606001..123a3dbf719 100755
--- a/src/app/components/tree/tree.ts
+++ b/src/app/components/tree/tree.ts
@@ -85,7 +85,9 @@ import {
             >
                 <div
                     class="p-treenode-content"
-                    [style.paddingLeft]="level * indentation + 'rem'"
+                    [ngStyle]="{
+                        'padding-left': level * indentation + 'rem'
+                    }"
                     (click)="onNodeClick($event)"
                     (contextmenu)="onNodeRightClick($event)"
                     (touchend)="onNodeTouchEnd()"
@@ -134,7 +136,14 @@ import {
                         </span>
                     </span>
                 </div>
-                <ul class="p-treenode-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'block' : 'none'" role="group">
+                <ul
+                    class="p-treenode-children"
+                    [ngStyle]="{
+                        display: node.expanded ? 'block' : 'none'
+                    }"
+                    *ngIf="!tree.virtualScroll && node.children && node.expanded"
+                    role="group"
+                >
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy"
                         [node]="childNode"
@@ -202,7 +211,13 @@ import {
                                 </span>
                             </div>
                         </td>
-                        <td class="p-treenode-children-container" *ngIf="node.children && node.expanded" [style.display]="node.expanded ? 'table-cell' : 'none'">
+                        <td
+                            class="p-treenode-children-container"
+                            *ngIf="node.children && node.expanded"
+                            [ngStyle]="{
+                                display: node.expanded ? 'table-cell' : 'none'
+                            }"
+                        >
                             <div class="p-treenode-children">
                                 <p-treeNode *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; trackBy: tree.trackBy" [node]="childNode" [firstChild]="firstChild" [lastChild]="lastChild"></p-treeNode>
                             </div>
@@ -807,7 +822,7 @@ export class UITreeNode implements OnInit {
                     </ng-container>
                 </p-scroller>
                 <ng-container *ngIf="!virtualScroll">
-                    <div #wrapper class="p-tree-wrapper" [style.max-height]="scrollHeight">
+                    <div #wrapper class="p-tree-wrapper" [ngStyle]="{ 'max-height': scrollHeight }">
                         <ul class="p-tree-container" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
                             <p-treeNode
                                 *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy"
@@ -1166,7 +1181,12 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo
 
     public dragStopSubscription: Subscription | undefined | null;
 
-    constructor(public el: ElementRef, @Optional() public dragDropService: TreeDragDropService, public config: PrimeNGConfig, private cd: ChangeDetectorRef) {}
+    constructor(
+        public el: ElementRef,
+        @Optional() public dragDropService: TreeDragDropService,
+        public config: PrimeNGConfig,
+        private cd: ChangeDetectorRef
+    ) {}
 
     ngOnInit() {
         if (this.droppableNodes) {
diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts
index 36b758c73b1..4c46aed1d0b 100755
--- a/src/app/components/treetable/treetable.ts
+++ b/src/app/components/treetable/treetable.ts
@@ -239,12 +239,12 @@ export class TreeTableService {
                 <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
             </div>
 
-            <div #resizeHelper class="p-column-resizer-helper" style="display:none" *ngIf="resizableColumns"></div>
-            <span #reorderIndicatorUp class="p-treetable-reorder-indicator-up" style="display: none;" *ngIf="reorderableColumns">
+            <div #resizeHelper class="p-column-resizer-helper" [ngStyle]="{ display: 'none' }" *ngIf="resizableColumns"></div>
+            <span #reorderIndicatorUp class="p-treetable-reorder-indicator-up" [ngStyle]="{ display: 'none' }" *ngIf="reorderableColumns">
                 <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate" />
                 <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate"></ng-template>
             </span>
-            <span #reorderIndicatorDown class="p-treetable-reorder-indicator-down" style="display: none;" *ngIf="reorderableColumns">
+            <span #reorderIndicatorDown class="p-treetable-reorder-indicator-down" [ngStyle]="{ display: 'none' }" *ngIf="reorderableColumns">
                 <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate" />
                 <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate"></ng-template>
             </span>
@@ -2263,7 +2263,11 @@ export class TTBody {
 
     subscription: Subscription;
 
-    constructor(public tt: TreeTable, public treeTableService: TreeTableService, public cd: ChangeDetectorRef) {
+    constructor(
+        public tt: TreeTable,
+        public treeTableService: TreeTableService,
+        public cd: ChangeDetectorRef
+    ) {
         this.subscription = this.tt.tableService.uiUpdateSource$.subscribe(() => {
             if (this.tt.virtualScroll) {
                 this.cd.detectChanges();
@@ -2334,11 +2338,11 @@ export class TTBody {
         </ng-container>
 
         <ng-template #buildInItems let-items let-scrollerOptions="options">
-            <table role="table" #scrollTable [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
+            <table role="table" #scrollTable [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="getMergedTableStyles(scrollerOptions.contentStyle)">
                 <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
                 <tbody role="rowgroup" class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt.bodyTemplate : tt.bodyTemplate" [serializedNodes]="items" [frozen]="frozen"></tbody>
             </table>
-            <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
+            <div #scrollableAligner [ngStyle]="{ 'background-color': 'transparent' }" *ngIf="frozen"></div>
         </ng-template>
 
         <div #scrollFooter *ngIf="tt.footerTemplate" class="p-treetable-scrollable-footer">
@@ -2394,6 +2398,13 @@ export class TTScrollableView implements AfterViewInit, OnDestroy {
 
     preventBodyScrollPropagation: boolean | undefined;
 
+    getMergedTableStyles(contentStyle) {
+        return {
+            ...this.tt.tableStyle,
+            ...contentStyle
+        };
+    }
+
     @Input() get scrollHeight(): string | undefined | null {
         return this._scrollHeight;
     }
@@ -2404,7 +2415,13 @@ export class TTScrollableView implements AfterViewInit, OnDestroy {
         }
     }
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public tt: TreeTable, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        @Inject(PLATFORM_ID) private platformId: any,
+        private renderer: Renderer2,
+        public tt: TreeTable,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -2657,7 +2674,10 @@ export class TTSortIcon implements OnInit, OnDestroy {
 
     sortOrder: number | undefined;
 
-    constructor(public tt: TreeTable, public cd: ChangeDetectorRef) {
+    constructor(
+        public tt: TreeTable,
+        public cd: ChangeDetectorRef
+    ) {
         this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
             this.updateSortState();
             this.cd.markForCheck();
@@ -2705,7 +2725,14 @@ export class TTResizableColumn implements AfterViewInit, OnDestroy {
 
     documentMouseUpListener: VoidListener;
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public tt: TreeTable, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private renderer: Renderer2,
+        public tt: TreeTable,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -2788,7 +2815,14 @@ export class TTReorderableColumn implements AfterViewInit, OnDestroy {
 
     mouseDownListener: VoidListener;
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public tt: TreeTable, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private renderer: Renderer2,
+        public tt: TreeTable,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (this.isEnabled()) {
@@ -2887,7 +2921,10 @@ export class TTSelectableRow implements OnInit, OnDestroy {
 
     subscription: Subscription | undefined;
 
-    constructor(public tt: TreeTable, public tableService: TreeTableService) {
+    constructor(
+        public tt: TreeTable,
+        public tableService: TreeTableService
+    ) {
         if (this.isEnabled()) {
             this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
                 this.selected = this.tt.isSelected(this.rowNode.node);
@@ -2970,7 +3007,10 @@ export class TTSelectableRowDblClick implements OnInit, OnDestroy {
 
     subscription: Subscription | undefined;
 
-    constructor(public tt: TreeTable, public tableService: TreeTableService) {
+    constructor(
+        public tt: TreeTable,
+        public tableService: TreeTableService
+    ) {
         if (this.isEnabled()) {
             this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
                 this.selected = this.tt.isSelected(this.rowNode.node);
@@ -3022,7 +3062,11 @@ export class TTContextMenuRow {
 
     subscription: Subscription | undefined;
 
-    constructor(public tt: TreeTable, public tableService: TreeTableService, private el: ElementRef) {
+    constructor(
+        public tt: TreeTable,
+        public tableService: TreeTableService,
+        private el: ElementRef
+    ) {
         if (this.isEnabled()) {
             this.subscription = this.tt.tableService.contextMenuSource$.subscribe((node) => {
                 this.selected = this.tt.equals(this.rowNode.node, node);
@@ -3092,7 +3136,11 @@ export class TTCheckbox {
 
     subscription: Subscription | undefined;
 
-    constructor(public tt: TreeTable, public tableService: TreeTableService, public cd: ChangeDetectorRef) {
+    constructor(
+        public tt: TreeTable,
+        public tableService: TreeTableService,
+        public cd: ChangeDetectorRef
+    ) {
         this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
             if (this.tt.selectionKeys) {
                 this.checked = this.tt.isNodeSelected(this.rowNode.node);
@@ -3186,7 +3234,11 @@ export class TTHeaderCheckbox {
 
     valueChangeSubscription: Subscription;
 
-    constructor(public tt: TreeTable, public tableService: TreeTableService, private cd: ChangeDetectorRef) {
+    constructor(
+        public tt: TreeTable,
+        public tableService: TreeTableService,
+        private cd: ChangeDetectorRef
+    ) {
         this.valueChangeSubscription = this.tt.tableService.uiUpdateSource$.subscribe(() => {
             this.checked = this.updateCheckedState();
         });
@@ -3274,7 +3326,11 @@ export class TTEditableColumn implements AfterViewInit {
 
     @Input({ transform: booleanAttribute }) ttEditableColumnDisabled: boolean | undefined;
 
-    constructor(public tt: TreeTable, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        public tt: TreeTable,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         if (this.isEnabled()) {
@@ -3449,7 +3505,10 @@ export class TreeTableCellEditor implements AfterContentInit {
 
     outputTemplate: Nullable<TemplateRef<any>>;
 
-    constructor(public tt: TreeTable, public editableColumn: TTEditableColumn) {}
+    constructor(
+        public tt: TreeTable,
+        public editableColumn: TTEditableColumn
+    ) {}
 
     ngAfterContentInit() {
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
@@ -3493,7 +3552,11 @@ export class TTRow {
 
     @Input('ttRow') rowNode: any;
 
-    constructor(public tt: TreeTable, public el: ElementRef, public zone: NgZone) {}
+    constructor(
+        public tt: TreeTable,
+        public el: ElementRef,
+        public zone: NgZone
+    ) {}
 
     @HostListener('keydown', ['$event'])
     onKeyDown(event: KeyboardEvent) {
@@ -3671,8 +3734,10 @@ export class TTRow {
             (click)="onClick($event)"
             tabindex="-1"
             pRipple
-            [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
-            [style.marginLeft]="rowNode.level * 16 + 'px'"
+            [ngStyle]="{
+                visibility: rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden',
+                'margin-left': rowNode.level * 16 + 'px'
+            }"
             [attr.data-pc-section]="'rowtoggler'"
             [attr.data-pc-group-section]="'rowactionbutton'"
             [attr.aria-label]="toggleButtonAriaLabel"
@@ -3692,7 +3757,10 @@ export class TTRow {
 export class TreeTableToggler {
     @Input() rowNode: any;
 
-    constructor(public tt: TreeTable, private config: PrimeNGConfig) {}
+    constructor(
+        public tt: TreeTable,
+        private config: PrimeNGConfig
+    ) {}
 
     get toggleButtonAriaLabel() {
         return this.config.translation ? (this.rowNode.expanded ? this.config.translation.aria.collapseRow : this.config.translation.aria.expandRow) : undefined;