ViewChild is returning undefined (Angular 16)

Question

I know there are several topics on the matter, but I swear I read them all and none solved my issue. Here is what I have, very much simplified

AdministracionComponent.ts

export class AdministracionComponent implements OnInit, AfterViewInit {
  socios: any[] = []
  @ViewChild(DialogBodyComponent) dialogBodyComponent!: DialogBodyComponent;

  constructor(private matDialog: MatDialog, private memberService: MemberService)
  { 
   }
  ngAfterViewInit(): void {
    console.log("The dialog body component is: " + this.dialogBodyComponent);
  }

 ngOnInit() {
    this.memberService.findAll().subscribe((members: any) => {
      this.members = members;
    })

DialogBody.ts

export class DialogBodyComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<DialogBodyComponent>, private memberService: MemberService) {
  }
  editMode:boolean = false
  allMembers: any[] = []

  ngOnInit() {
    this.formData.patchValue({ //formData is a formgroup which works fine. 
      userType: null,
      memberType: null,
      area: null,
      province: null,
    });
    this.memberService.notifyComponent.subscribe((id: String) => {
      this.editMember(id)
    });
  }

Now the problem is that viewChild is returning undefined, no matter what I do. I tried using ViewChildren, but have the same problem. I think it's probably my fault, I'm new to Angular, so any help would be appreciated

EDIT: Since I read people asking for the HTML, here are both:

Administracion.Component.html

   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <button mat-raised-button color="primary" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 
    focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 mt-2" (click)="openDialog()" >Add member </button>
  
  <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
              <th scope="col" class="px-6 py-3">
                  Name
              </th>
          </tr>
      </thead>
      <tbody>
        <tr *ngFor="let member of members" class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
          <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {{ member.companyName }}
          </th>
          <td class="px-6 py-4">
            {{ member.postalCode }}
          </td>
            <button class="font-medium text-blue-600 dark:text-blue-500 hover:underline" (click)="editarSocio(socio.id)">Edit</button>
          </td>
          <td class="px-6 py-4">
            <button class="font-medium text-blue-600 dark:text-blue-500 hover:underline" (click)="deleteMember(member.id)">Delete</button>
          </td>
        </tr>
      </tbody>
  </table>
</div>

dialog-body.component.html

<button mat-icon-button style = "float: right;"[mat-dialog-close]="true">
        <mat-icon>close</mat-icon>
    </button>
    <mat-dialog-content>
        <header><h1>Add Member</h1></header>
        <form (ngSubmit)="saveData()" [formGroup]="formData"><div class="form-field">
            <mat-form-field>
                <input matInput placeholder="User" autocomplete="on" formControlName="username" maxlength="30" minlength="1">
                <mat-icon matSuffix>username</mat-icon>
            </mat-form-field>
        </div>
        <div class="form-field">
            <mat-form-field>
                <input matInput placeholder="Password" type="password" autocomplete="off" formControlName="password" maxlength="30" minlength="8">
            <mat-icon matSuffix>password</mat-icon>
            </mat-form-field>
        </div>
        <div class="form-field">
            <mat-form-field>
                <mat-select name="Province" placeholder="Select the province" formControlName="province">
                  <mat-option *ngFor="let province of Province" [value]="province">{{ province }}</mat-option>
                </mat-select>
              </mat-form-field>
        </div>
        <button mat-raised-button color="primary" type="submit" [disabled] = "!formData.valid">Save</button
    </form>
    </mat-dialog-content>

Also, info for clarification: I'm using tailwind on the html, not bootstrap, just in case you see the wall of text in the tags, it's tailwind's formatting style