First use col-md-10/col-md-2 and NOT col-10-md/col-2-md
I set col-sm-10 only for snnipet for see the changes
However I think you have to set col-md-4 and col-md-8 but it is for your decision...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card border-primary m-3" *ngIf='product'>
<div class="card-header bg-primary text-light text-center">
{{ pageTitle + ': ' + product?.productName }}
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Id:</td>
<td>{{ product.productId }}</td>
</tr>
<tr>
<td>Name:</td>
<td>{{ product.productName }}</td>
</tr>
<tr>
<td>Code:</td>
<td>{{ product.productCode }}</td>
</tr>
<tr>
<td>Release Date:</td>
<td>{{ product.releaseDate }}</td>
</tr>
<tr>
<td>Price:</td>
<td>{{ product.price }}</td>
</tr>
<tr>
<td>Description:</td>
<td>{{ product.description }}</td>
</tr>
<tr>
<td>Rating:</td>
<td>
<app-star
[rating]='product.starRating'></app-star>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-10">
<img class="card-img-top" src='https://material.angular.io/assets/img/examples/shiba1.jpg'>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-secondary" (click)='onBackClicked()'> <i class="fa fa-chevron-left"></i> Back to List</button>
</div>
</div>