fad

bookie/src/app/roles/role-detail/role-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>
 

bookie/src/app/roles/role-detail/role-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';
@@ -24,8 +24,7 @@ export interface RoleDetailFormData {
   styleUrls: ['./role-detail.component.css'],
   imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, FormField],
 })
-export class RoleDetailComponent implements AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
+export class RoleDetailComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
@@ -60,12 +59,10 @@ export class RoleDetailComponent implements AfterViewInit {
     return implied;
   });
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.nameElement !== undefined) {
-        this.nameElement.nativeElement.focus();
-      }
-    }, 0);
+  constructor() {
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+    });
   }
 
   save() {