source: trip-planner-front/src/app/locations-form/locations-form.component.html@ eed0bf8

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<div class="example-form">

  <div class="d-block">
    <button class="btn" (click)="chooseCityOption()" >
      City
    </button>
    <button class="btn" (click)="chooseRegionOption()">
      Region
    </button>
  </div>
  <br>
  <br>
  <!--
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Please select a place</mat-label>
    <input type="text"
           placeholder="Pick one"
           aria-label="Place"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption  #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  -->


  <div *ngIf="cityOption">
    <label><h5>Please select a city</h5></label>
    <mat-form-field appearance="fill" class="example-full-width">
      <mat-label>Please select a city</mat-label>
      <mat-select [(ngModel)]="locationId" placeholder="Select city">
        <mat-option [value]="city.id" *ngFor="let city of cities" [value]="city.id"> {{city.name}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div *ngIf="regionOption">
    <label><h5>Please select a region</h5></label>
    <mat-form-field appearance="fill" class="example-full-width">
      <mat-label>Please select a region</mat-label>
      <mat-select [(ngModel)]="regionId" placeholder="Select region">
        <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <h5>Who are you travelling with?  </h5>
  <mat-form-field appearance="fill" class="example-full-width">
    <mat-label>Please select a companion</mat-label>
    <mat-select [(ngModel)]="companionId" placeholder="Please select a companion">
      <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
    </mat-select>
  </mat-form-field>

  <h5>How many days are you willing to stay ?</h5>
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Please select a number of days</mat-label>
    <input matInput placeholder="No. Days"  type="number" [(ngModel)]="lengthOfStay">
  </mat-form-field>

   <h5>What are your priorities to visit?</h5> 
  <mat-chip-list  selectable multiple>
    <mat-chip #c="matChip" selected *ngFor="let category of categories" 
    (click)="toggleSelection(c, category)" >
  <mat-icon *ngIf="!c.selected" >check</mat-icon>
  {{category.name}}
  </mat-chip>
  </mat-chip-list>
  <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>


</div>