feat: migrate Angular (at)Input() to input signal

templates/angular-example/src/app/components/backdrop/backdrop.component.html

@@ -1,7 +1,7 @@
 <div
   class="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl"
 >
-  @if (spinner) {
+  @if (spinner()) {
     <div
       class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
     ></div>

templates/angular-example/src/app/components/backdrop/backdrop.component.ts

@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, input, Input } from '@angular/core';
 
 @Component({
   selector: 'app-backdrop',
   templateUrl: './backdrop.component.html',
 })
 export class BackdropComponent {
-  @Input() spinner = false;
+  spinner = input(false);
 }

templates/angular-example/src/app/components/button/button.component.html

@@ -1,8 +1,8 @@
 <button
-  [disabled]="disabled"
+  [disabled]="disabled()"
   [ngClass]="[
     'dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex w-fit items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff]',
-    disabled
+    disabled()
       ? 'opacity-25'
       : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black',
   ]"

templates/angular-example/src/app/components/button/button.component.ts

@@ -1,11 +1,12 @@
 import { NgClass } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, input, Input } from '@angular/core';
 
 @Component({
   selector: 'app-button',
   imports: [NgClass],
   templateUrl: './button.component.html',
 })
 export class ButtonComponent {
-  @Input() disabled!: boolean;
+  disabled = input.required<boolean>()
+
 }

templates/angular-example/src/app/components/delete/delete.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { deleteAsset, deleteDoc, Doc } from '@junobuild/core';
 import { DocsService } from '../../services/docs.service';
 import { Note } from '../../types/note';
@@ -12,7 +12,7 @@ import { BackdropComponent } from '../backdrop/backdrop.component';
 export class DeleteComponent {
   private readonly docsServices = inject(DocsService);
 
-  @Input() doc!: Doc<Note>;
+  doc = input.required<Doc<Note>>();
 
   progress = false;
 
@@ -22,7 +22,7 @@ export class DeleteComponent {
     try {
       const {
         data: { url },
-      } = this.doc;
+      } = this.doc();
 
       if (url !== undefined) {
         const { pathname: fullPath } = new URL(url);
@@ -35,7 +35,7 @@ export class DeleteComponent {
 
       await deleteDoc({
         collection: 'notes',
-        doc: this.doc,
+        doc: this.doc(),
       });
 
       await this.docsServices.reload();

templates/angular-starter/src/app/components/article/article.component.html

@@ -1,8 +1,8 @@
 <a
-  [href]="href"
+  [href]="href()"
   rel="noreferrer noopener"
   target="_blank"
-  [attr.aria-label]="ariaLabel"
+  [attr.aria-label]="ariaLabel()"
   class="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
 >
   <h4

templates/angular-starter/src/app/components/article/article.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-article',
   imports: [],
   templateUrl: './article.component.html',
 })
 export class ArticleComponent {
-  @Input() href!: string;
-  @Input() ariaLabel!: string;
+  href = input.required<string>();
+  ariaLabel = input.required<string>();
 }

templates/angular-starter/src/app/components/hero/hero.component.html

@@ -1,8 +1,8 @@
 <a
-  [href]="href"
+  [href]="href()"
   rel="noreferrer noopener"
   target="_blank"
-  [attr.aria-label]="ariaLabel"
+  [attr.aria-label]="ariaLabel()"
   class="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
 >
   <ng-content></ng-content>

templates/angular-starter/src/app/components/hero/hero.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-hero',
   imports: [],
   templateUrl: './hero.component.html',
 })
 export class HeroComponent {
-  @Input() href!: string;
-  @Input() ariaLabel!: string;
+  href = input.required<string>();
+  ariaLabel = input.required<string>();
 }