Estoy tratando de usar getElementById("id"+i) donde de "i" se importa de un *ngIf, obtengo el parámetro correcto para de getElementById("id"+i) pero cuando lo uso, aparece como " indefinido"

 sendDeleteRequest( id: string): Observable<any> {const requestOptions: Object = { responseType: 'text' } return this.http.delete<any>(`https://arg-prog-backend.herokuapp.com/educacion/borrar/${id}`, requestOptions); } delete_paragraph(i : number){ const elementId = i const elementIdStr= elementId.toString() const id =(<HTMLInputElement>document.getElementById(elementIdStr))?.value; this.sendDeleteRequest(id).subscribe((res:any)=>{}); console.log(elementIdStr) }

y el código HTML:

 <h3 style="display: block;" id = "{{i}}" >{{educacion?.id}}</h3> <h2>{{educacion?.school}}</h2> <h3>{{educacion?.years}}</h3> <p>{{educacion?.carreer}}</p>