chore: update examples to signals

Author: AtofStryker

angular-zoneless/src/app/button/button.component.cy.ts

@@ -3,15 +3,13 @@ import { ButtonComponent } from './button.component';
 
 @Component({
   template: ` <app-button> Click Me </app-button> `,
-  standalone: false,
+  imports: [ButtonComponent],
 })
 class WrapperComponent {}
 
 describe('ButtonComponent', () => {
   it('can mount using WrapperComponent', () => {
-    cy.mount(WrapperComponent, {
-      imports: [ButtonComponent],
-    });
+    cy.mount(WrapperComponent);
     cy.get('button').contains('Click Me');
   });
 

angular-zoneless/src/app/button/button.component.ts

@@ -1,9 +1,9 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, output } from '@angular/core';
 
 @Component({
   selector: 'app-button',
   templateUrl: './button.component.html',
 })
 export class ButtonComponent {
-  @Output() onClick = new EventEmitter()
+  onClick = output<void>()
 }

angular-zoneless/src/app/login-form/login-form.component.html

@@ -13,7 +13,7 @@
                 <span *ngIf="submitted && !password" class="text-red-500 mt-2">Password is required</span>
             </label>
             <app-button type="submit">Login</app-button>
-            <div *ngIf="errorMessage" class="text-red-500 mt-2">{{ errorMessage }}</div>
+            <div *ngIf="errorMessage()" class="text-red-500 mt-2">{{ errorMessage() }}</div>
         </fieldset>
     </form>
 </div>

angular-zoneless/src/app/login-form/login-form.component.ts

@@ -1,17 +1,16 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup, FormsModule } from '@angular/forms';
+import { Component, input, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { ButtonComponent } from '../button/button.component';
-import { LoginService } from '../login.service';
 
 @Component({
   imports: [FormsModule, ButtonComponent, CommonModule],
   selector: 'app-login-form',
   templateUrl: './login-form.component.html',
 })
 export class LoginFormComponent {
-  @Input() errorMessage = ''
-  @Output() onLogin: EventEmitter<{ username: string, password: string }> = new EventEmitter()
+  errorMessage = input<string>('')
+  onLogin = output<{ username: string, password: string }>()
   username = ''
   password = ''
   submitted = false

angular-zoneless/src/app/welcome/welcome.component.html

@@ -1,4 +1,4 @@
 <div class="max-w-screen-sm p-12 mx-auto bg-gray-50 rounded-md shadow-lg">
-    <h1 class="test-2xl">Welcome {{ username }}</h1>
+    <h1 class="test-2xl">Welcome {{ username() }}</h1>
     <app-button (onClick)="onLogout.emit()">Log Out</app-button>
 </div>

angular-zoneless/src/app/welcome/welcome.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
 
 @Component({
@@ -7,6 +7,6 @@ import { ButtonComponent } from '../button/button.component';
   templateUrl: './welcome.component.html',
 })
 export class WelcomeComponent {
-  @Input() username = '';
-  @Output() onLogout = new EventEmitter();
+  username = input<string>('')
+  onLogout = output<void>()
 }