Updating Angular HTML page list after array update does not occur

I have a simple search method inside a component that updates an array to satisfaction. When the array is updated however, the list that should appear in the html page simply does not.

Here is my TypeScript:

export class AccommodationOverviewComponent implements OnInit {



    private resultMessage: string;
       private city: string;
       private inputvalue: string;
       accommodations: Array<Accommodation> = [];
       constructor(private accommodationService: AccommodationService, private router: Router, private route: ActivatedRoute, private changeDetection: ChangeDetectorRef) { }

      ngOnInit(): void {
      }

      getAllAccommodations()
      {
        this.accommodationService.getAllAccommodations()
        .subscribe(
          data => {
            console.log(data);
            this.accommodations = data;

          },
          error => {
            console.log(error);
            this.resultMessage = "Something went wrong";
          });
      }

      searchByCity(){
        this.city = (<HTMLInputElement>document.getElementById("searchbarCity")).value;
        this.accommodationService.getAccommodationByCity(this.city)
        .subscribe(
          data => {
            console.log(data);
            this.accommodations = data;
            console.log(this.accommodations);
            this.changeDetection.detectChanges();
          },
          error => {
            console.log(error);
            this.resultMessage = "Something went wrong"
          }
        )
      }

    }

and here the HTML:

 <div class="row">
    <div class="col">
      <div class="header-text">
        <h1>Find the desired accommodation</h1>
      </div>
    </div>
</div>

<div class="form-row">
  <div class="form-input">
    <label>Enter the city in which you want to find accommodations.</label>
    <input id="searchbarCity" type="text" value="" (submit)="searchByCity()"/>
    <button (click)="searchByCity()">Search</button>
  </div>
</div>


  <div class="form-row">
    <div class="form-input">
        <tr *ngFor="let accommodation of accommodations">
          {{accommodation.Country}} 
          {{accommodation.City}}
          {{accommodation.StreetandNumber}}
          {{accommodation.PostalCode}}
          {{accommodation.Size}}
          {{accommodation.PeopleAllowed}}
          {{accommodation.PrizePerNight}}
          {{accommodation.Roof}}
          {{accommodation.Ground}}
          {{accommodation.OwnerId}}
        </tr>
    </div>
  </div>

I am aware that most people get their data in onInit but I only want to update my array after a search request is made so the user does not have to hold an enormous set of data mostly seen in the getall method. As this is for a project with a large user base as criteria.

I want to update the HTML page list when the data array in the typescript changes. I only want to receive this data after a search request is made (which it does perfectly). Is this possible at all and if so what am I doing wrong?