I'm trying to use getElementById("id"+i) where de "i" is imported from an *ngIf, I get the correct parameter for de getElementById("id"+i) but when using it, it appears as "unDefined"

 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)
      }

and the HTML code:

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