fad

bookie/src/app/users/user-detail/user-detail.component.html

@@ -3,7 +3,7 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
-      <input matInput #nameElement [formField]="form.name" />
+      <input matInput [formField]="form.name" />
     </mat-form-field>
   </div>
   <div class="row-container">

bookie/src/app/users/user-detail/user-detail.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, ViewChild, computed, inject, linkedSignal, input } from '@angular/core';
+import { Component, computed, inject, linkedSignal, input, afterNextRender } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -35,8 +35,7 @@ export interface UserDetailFormData {
     FormField,
   ],
 })
-export class UserDetailComponent implements AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
+export class UserDetailComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
@@ -64,15 +63,10 @@ export class UserDetailComponent implements AfterViewInit {
   hide = true;
 
   constructor() {
-    this.hide = true;
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.nameElement !== undefined) {
-        this.nameElement.nativeElement.focus();
-      }
-    }, 0);
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+      // this.formModel().root.focus("name");
+    });
   }
 
   save() {