refactor: migration from NgStyle to style bindings

Author: xidedix

src/app/views/dashboard/dashboard.component.html

@@ -70,7 +70,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
     <c-chart
       [data]="mainChart.data"
       [height]="300"
-      [ngStyle]="{ 'marginTop.px': 40 }"
+      [style.marginTop.px]="40"
       [options]="mainChart.options"
       [type]="mainChart.type"
       (chartRef)="handleChartRef($event)"

src/app/views/dashboard/dashboard.component.ts

@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import { Component, DestroyRef, DOCUMENT, effect, inject, OnInit, Renderer2, signal, WritableSignal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ChartOptions } from 'chart.js';
@@ -41,7 +40,7 @@ interface IUser {
 @Component({
   templateUrl: 'dashboard.component.html',
   styleUrls: ['dashboard.component.scss'],
-  imports: [WidgetsDropdownComponent, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, IconDirective, ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ChartjsComponent, NgStyle, CardFooterComponent, GutterDirective, ProgressComponent, WidgetsBrandComponent, CardHeaderComponent, TableDirective, AvatarComponent]
+  imports: [WidgetsDropdownComponent, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, IconDirective, ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ChartjsComponent, CardFooterComponent, GutterDirective, ProgressComponent, WidgetsBrandComponent, CardHeaderComponent, TableDirective, AvatarComponent]
 })
 export class DashboardComponent implements OnInit {
 

src/app/views/forms/floating-labels/floating-labels.component.html

@@ -50,28 +50,28 @@
       </c-card-header>
       <c-card-body>
         <p class="text-body-secondary small">
-          By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
+          By default, <code>&lt;textarea&gt;</code>s will be the same height as
           <code>&lt;input&gt;</code>s.
         </p>
         <app-docs-example href="forms/floating-labels#textareas">
           <div cFormFloating>
-            <input
+            <textarea
               cFormControl
               id="floatingTextarea"
               placeholder="Leave a comment here"
               type="text"
-            >
+            ></textarea>
             <label cLabel for="floatingTextarea">Comments</label>
           </div>
         </app-docs-example>
         <p class="text-body-secondary small">
-          To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the
+          To set a custom height on your <code>&lt;textarea&gt;</code>, do not use the
           <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
           inline or via custom CSS).
         </p>
         <app-docs-example href="forms/floating-labels#textareas">
           <div cFormFloating>
-            <textarea [ngStyle]="{ 'height.px': 100 }"
+            <textarea [style.height.px]="100"
                       cFormControl
                       id="floatingTextarea2"
                       placeholder="Leave a comment here"

src/app/views/forms/floating-labels/floating-labels.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { NgStyle } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   CardBodyComponent,
@@ -19,6 +18,6 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/
 @Component({
   selector: 'app-floating-labels',
   templateUrl: './floating-labels.component.html',
-  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, FormFloatingDirective, FormControlDirective, FormLabelDirective, ReactiveFormsModule, FormsModule, FormDirective, NgStyle, FormSelectDirective, GutterDirective, DocsComponentsComponent]
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, FormFloatingDirective, FormControlDirective, FormLabelDirective, ReactiveFormsModule, FormsModule, FormDirective, FormSelectDirective, GutterDirective, DocsComponentsComponent]
 })
 export class FloatingLabelsComponent {}

src/app/views/forms/form-controls/form-controls.component.html

@@ -226,10 +226,10 @@
                      type="color">
             </c-col>
             <c-col xs="auto">
-              <div [ngStyle]="{'backgroundColor': favoriteColor}" class="color-box p-1 m-1"></div>
+              <div [style.backgroundColor]="favoriteColor()" class="color-box p-1 m-1"></div>
             </c-col>
             <c-col xs="auto">
-              <strong>{{ favoriteColor }}</strong>
+              <strong>{{ favoriteColor() }}</strong>
             </c-col>
           </c-row>
         </app-docs-example>

src/app/views/forms/form-controls/form-controls.component.ts

@@ -1,5 +1,4 @@
-import { Component } from '@angular/core';
-import { NgStyle } from '@angular/common';
+import { Component, signal } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   ButtonDirective,
@@ -21,10 +20,10 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/
   selector: 'app-form-controls',
   templateUrl: './form-controls.component.html',
   styleUrls: ['./form-controls.component.scss'],
-  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ReactiveFormsModule, FormsModule, FormDirective, FormLabelDirective, FormControlDirective, ButtonDirective, NgStyle, RowDirective, GutterDirective, ColDirective, DocsComponentsComponent]
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ReactiveFormsModule, FormsModule, FormDirective, FormLabelDirective, FormControlDirective, ButtonDirective, RowDirective, GutterDirective, ColDirective, DocsComponentsComponent]
 })
 export class FormControlsComponent {
 
-  public favoriteColor = '#26ab3c';
+  public favoriteColor = signal('#26ab3c');
 
 }

src/app/views/notifications/toasters/toasters.component.html

@@ -64,8 +64,8 @@ <h5>Add toast with following props:</h5>
                 </button>
               </form>
             </c-col>
-            <c-col lg="6" sm="12" class="mt-3" [ngStyle]="{position: 'relative'}">
-              <c-toaster [placement]="positionStatic" [ngStyle]="{display: 'contents'}">
+            <c-col lg="6" sm="12" class="mt-3" [style.position]="'relative'">
+              <c-toaster [placement]="positionStatic" [style.display]="'contents'">
                 <c-toast [autohide]="false" [fade]="true" [visible]="true" color="danger">
                   <c-toast-header>Toast title</c-toast-header>
                   <c-toast-body>This is a static toast in a static toaster</c-toast-body>

src/app/views/notifications/toasters/toasters.component.ts

@@ -1,4 +1,4 @@
-import { JsonPipe, NgStyle, SlicePipe } from '@angular/common';
+import { JsonPipe, SlicePipe } from '@angular/common';
 import { Component, OnInit, viewChildren } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -46,7 +46,7 @@ export enum Colors {
 @Component({
   selector: 'app-toasters',
   templateUrl: './toasters.component.html',
-  imports: [RowComponent, ColComponent, ToasterComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ContainerComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, FormSelectDirective, ButtonDirective, NgStyle, ToastComponent, ToastHeaderComponent, ToastBodyComponent, AppToastComponent, JsonPipe, SlicePipe, TextColorDirective, DocsComponentsComponent]
+  imports: [RowComponent, ColComponent, ToasterComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ContainerComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, FormSelectDirective, ButtonDirective, ToastComponent, ToastHeaderComponent, ToastBodyComponent, AppToastComponent, JsonPipe, SlicePipe, TextColorDirective, DocsComponentsComponent]
 })
 export class ToastersComponent implements OnInit {
 

src/app/views/pages/login/login.component.html

@@ -40,7 +40,7 @@ <h1>Login</h1>
               </form>
             </c-card-body>
           </c-card>
-          <c-card [ngStyle]="{'minWidth.%': 44}" class="text-white bg-primary py-5">
+          <c-card [style.minWidth.%]="44" class="text-white bg-primary py-5">
             <c-card-body class="text-center">
               <div>
                 <h2>Sign up</h2>

src/app/views/pages/login/login.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { NgStyle } from '@angular/common';
 import { IconDirective } from '@coreui/icons-angular';
 import {
   ButtonDirective,
@@ -18,6 +17,6 @@ import {
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  imports: [ContainerComponent, RowComponent, ColComponent, CardGroupComponent, CardComponent, CardBodyComponent, FormDirective, InputGroupComponent, InputGroupTextDirective, IconDirective, FormControlDirective, ButtonDirective, NgStyle]
+  imports: [ContainerComponent, RowComponent, ColComponent, CardGroupComponent, CardComponent, CardBodyComponent, FormDirective, InputGroupComponent, InputGroupTextDirective, IconDirective, FormControlDirective, ButtonDirective]
 })
 export class LoginComponent {}