Add buttons to list field

src/app/list-field/list-field.component.scss

@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+.row-wrapper {
+  display: flex;
+}

src/app/list-field/list-field.component.ts

@@ -18,17 +18,34 @@ import {
   selector: 'app-list-field',
   standalone: true,
   imports: [CommonModule, MatButton, MatIconModule, ProtoFieldComponent],
-  template: ` @for(value of values(); track values()) {
+  template: ` @for(value of values(); track $index) {
-    <app-proto-field
+    <div class="row-wrapper">
-      [configuration]="configuration().subConfiguration"
+      <app-proto-field
-      [value]="value"
+        [configuration]="configuration().subConfiguration"
-    ></app-proto-field>
+        [value]="value"
+      ></app-proto-field>
+      <button mat-icon-button (click)="remove($index)">
+        <mat-icon>remove</mat-icon>
+      </button>
+    </div>
     }
-    <button mat-icon-button><mat-icon>add</mat-icon></button>`,
+    <button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>`,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListFieldComponent {
   configuration = input.required<ListMessage>();
   values = model<any[]>();
+
+  add() {
+    const newValues = this.values();
+    newValues?.push(null);
+    this.values.set(newValues);
+  }
+
+  remove(index: number) {
+    const newValues = this.values();
+    newValues?.splice(index, 1);
+    this.values.set(newValues);
+  }
 }