feat: enhance hobbies section with remove button and update add hobby button style

Author: sonusindhu

src/app/examples/signal-form/example4/example4.component.html

@@ -40,20 +40,20 @@ <h2>Example 4: Signal Form Signup with Dynamic Hobbies & Validation</h2>
  <div>
  <h3>Hobbies</h3>
  @for (hobby of userForm.hobbies; track hobby; let i = $index) {
- <div>
- <input [control]="hobby.name" placeholder="Enter hobby" />
+ <div class="flex gap-2 items-center mb-2">
+ <input [control]="hobby.name" placeholder="Enter hobby" /> 
+ <button mat-flat-button color="warn" type="button" (click)="removeHobby(i)" >X</button>
  @if(hobby.name().touched() || hobby.name().dirty()) {
  @for (err of hobby.name().errors(); track err.kind) {
  <p style="color:red">{{ err.message }}</p>
  }
  }
- <button mat-stroked-button color="primary" type="button" (click)="removeHobby(i)" >Remove</button>
  </div>
  }
  @empty {
  <p class="text-gray-500 py-2">No hobbies added yet.</p>
  }
- <button mat-stroked-button color="primary" type="button" (click)="addHobby()" >+ Add Hobby</button>
+ <button mat-flat-button color="primary" type="button" (click)="addHobby()" >+ Add</button>
  </div>
 
  <div>