[Component] Update input with booleanAttribute converter

louiiuol · Oct 17, 2024 · f3728d5 · f3728d5
1 parent 2886294
commit f3728d5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/src/app/components/atoms/button/button.component.ts b/src/app/components/atoms/button/button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { IconMaterialComponent } from '../icon-material/icon-material.component';
 
 /**
@@ -41,20 +41,19 @@ export class ButtonComponent {
    * Whether the button should take the full width.
    * @default false
    */
-  full = input(false);
+  full = input(false, { transform: booleanAttribute });
 
   /**
    * Whether the button should have rounded corners.
-   * @default true
+   * @default false
    */
-  rounded = input(true);
+  rounded = input(false, { transform: booleanAttribute });
 
   /**
    * Whether the button should be disabled.
    * @default false
    */
-  disabled = input(false);
-  // TODO Prevent click event when disabled
+  disabled = input(false, { transform: booleanAttribute });
 
   /**
    * Appearance of the button.

diff --git a/src/app/components/atoms/button/demos/demo-button.component.ts b/src/app/components/atoms/button/demos/demo-button.component.ts
@@ -10,7 +10,7 @@ import { ButtonComponent } from '../button.component';
       <lib-button (click)="notify()">My button</lib-button>
       <hr />
       <p>Button with text and icon</p>
-      <lib-button (click)="notify()">
+      <lib-button (click)="notify()" disabled rounded>
         <lib-icon-material name="favorite" />
         My button
         </lib-button>
@@ -20,9 +20,9 @@ import { ButtonComponent } from '../button.component';
         <lib-icon-material name="favorite" />
         </lib-button>
         <lib-button appearance="icon" color="accent">
-        <lib-icon-material name="favorite" />
+        <lib-icon-material name="favorite" rounded />
         </lib-button>
-        <lib-button appearance="icon-stroked">
+        <lib-button appearance="icon-stroked" rounded>
         <lib-icon-material name="favorite" />
         </lib-button>
   </div>