Angular: Add value to input from onClick event button - html

Question

I'm trying to make an Edit Modal using Angular. the td fields get a value from this table and send it to a modal using the (click) event
<tbody>
<tr *ngFor="let mascota of mascotas" class="text-center ">
<td>{{mascota.name}}</td>
<td>{{mascota.birthDate}}</td>
<td>{{mascota.species.name}}</td>
<td>
<button class="btn btn-info mx-2">Detalles</button>
<button class="btn btn-warning mx-2" (click)="openSM(contenido,mascota)">Editar</button>
<button class="btn btn-danger mx-2">Remover</button>
</td>
</tr>
</tbody>
This is the function that I made in the component, used a const in order to get the values and send it to the modal
openSM(contenido, mascota) {
const modalRef = this.modal.open(contenido,{size:'lg',centered:true});
modalRef["mascota"] = mascota;
console.log(modalRef);
}
And this is the modal where I'm tying to get the value
<ng-template #contenido let-modal>
<div class="modal-header">
<h4 class="modal-title">Editar datos de mascota</h4>
<button class="close" aria-label="close" type="button" (click)="modal.close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal form-material" id="editform" autocomplete="off">
<div class="form-group m-t-10">
<div class="col-sm-10">
<label>Nombre de Mascota:</label>
<input class="form-control" type="text" placeholder="Nombre" value="mascota.name" />
</div>
</div>
</form>
</div>
</ng-template>
But when I click on the Edit button it didn't recognize the value
And when I used {{}} the const get an 'undefined' value
Error from Inspect Element
Contenido Data
Is there any way to get that value and put it into the input tag? I want to do the same with the others td fields, but first this needs to work well
Console log of the inputs in the constructor