page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Recommend Movies
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content style="background-color: gainsboro;" [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Movie Recommendation</ion-title>
    </ion-toolbar>
  </ion-header>

  <div style="margin-top: 10px" class="searchRow">
    <ion-input style="background-color: lightblue;" placeholder="Enter Movie Name" [(ngModel)]="MovieName"></ion-input>
    <div style="display: flex;justify-content: space-evenly;">
      <ion-button style="width: 40%" (click)="getRecommend()">
          Search
      </ion-button>
      <ion-button style="width: 40%" (click)="clearField()">
          Clear
      </ion-button>
    </div>
  </div>
  <div *ngIf="recommentList.length !== 0">
    <ion-list *ngFor="let item of recommentList">
      <ion-item>
      <ion-img [src]="item.poster_path"></ion-img>
        <ion-label>{{item.title}}</ion-label>
      </ion-item>
    </ion-list>
  </div>

</ion-content>