Cannot style TDs added via JQuery in Angular

I'm setting up a form in Angular. In the middle of hotel.view.html file, I have a table:

<table id="rooms">
   <tr>
     <td>Room Type</td><td>Beds</td><td>Q.ty</td>
   </tr>
   <tr>
     <td><input [(ngModel)]="HotelModel.rooms[0].type" name="type" type="text"></td>
     <td><input [(ngModel)]="HotelModel.rooms[0].beds" name="beds" type="number" class="smallField"></td>
     <td><input [(ngModel)]="HotelModel.rooms[0].qty" name="qty" type="number" class="smallField"></td>
   </tr>      
 </table>

In hotel.component.css I have:

.smallField {
    display: inline-block; 
    width: 50px;
}
            
.bigField {
    display: inline-block; 
    width: 170px;
}

The reason for that "display: inline-block;" is that, initially, I was adding a DIV. However, nothing happens if I remove it.

The fields in the table row are displayed correctly.
Now, I need to add a line when pressing a button. I do it this way:

$("#addRoom").on("click", function() {
        $('#rooms tr:last').after(
          '<tr><td><input [(ngModel)]="HotelModel.rooms[' + rm + '].type" name="type" type="text"></td>' + 
              '<td><input [(ngModel)]="HotelModel.rooms[' + rm + '].beds" name="beds" type="number" class="smallField"></td>' + 
              '<td><input [(ngModel)]="HotelModel.rooms[' + rm + '].qty" name="qty" type="number" class="smallField"></td></tr>');
          rm = rm + 1;
        });

Now, the table row is correctly added and the fields are displayed, but they don't take the "class="smallField", so that I have something like this:

Any ideas about how to style them? Thanks

As I mentioned in a comment above never use jQuery in an Angular project. What you are doing here is fairly basic and it can be accomplished with Angular alone.

I assume your data is in an array, so all you have to do is add a new item to that array. Angular will know about it, and it's so much easier than trying to use a separate library to inject raw HTML that Angular will somehow need to know about and parse.

Just use an Angular ngFor loop to show the array. The button will add a new item to the array, and that's all you have to do.

<table id="rooms">
  <thead>
    <tr>
      <th>Room Type</th>
      <th>Beds</th>
      <th>Q.ty</th>
    </tr>
  <thead>
  <tbody>
    <tr *ngFor="let room of roomsList">
      <td><input [(ngModel)]="room.type" name="type" type="text"></td>
      <td><input [(ngModel)]="room.beds" name="beds" type="number" class="smallField"></td>
      <td><input [(ngModel)]="room.qty" name="qty" type="number" class="smallField"></td>
    </tr>
  </tbody>  
</table>

<button type="button" (click)="onAddRoomType()">Add Room Type</button>

roomsList = [...HotelModel.rooms]; //makes a copy of this array into this new array

onAddRoomType() {
  this.roomsList.push({ type: '', beds: 0, qty: 0 });
}