speech.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>speech</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button *ngIf='isSpeechAvailable' id='french' shape='round'
              (click)="startTravelListening_fr()"
              fill = 'outline'>
            <ion-icon slot="icon-only" name='mic'></ion-icon>
  </ion-button>

  <ion-button *ngIf='isSpeechAvailable' id='english' shape='round'
              (click)="startTravelListening_en()"
              fill = 'outline'>
            <ion-icon slot="icon-only" name='mic'></ion-icon>
  </ion-button>

  <ion-item *ngFor="let match of matches">
      <p>{{match}}</p>
      
  </ion-item>

  <ion-card class="CardFadeIn" *ngIf="bestTravel">
    <img [src]="'../../assets/icon/'+((bestTravel.Trajet).split('|'))[1] + '.jpg'" alt=""/>

    <ion-list>
        
           <ion-item>
            <ion-item>
              <ion-icon name='pin'></ion-icon>
            <ion-label>
              {{(bestTravel.Trajet).split('|')[0]}}
            </ion-label>
            </ion-item>

            <ion-item>
              <ion-icon name='locate'></ion-icon>
            <ion-label>
              {{(bestTravel.Trajet).split('|')[1]}}
            </ion-label>
            </ion-item>

            <ion-item>
              <ion-icon name='people'></ion-icon>
              <ion-label>
                {{bestTravel.NbPassager}}
              </ion-label>
            </ion-item>
          </ion-item>

            <ion-item >
               <ion-item>
                <ion-icon name='time'></ion-icon>
                <ion-label>
                  {{bestTravel.Date }}à{{ bestTravel.Heure}}
                </ion-label> 
               </ion-item>    
                
              <ion-item>
                
                <ion-icon  name='cash'></ion-icon>
                <ion-label>
                 {{bestTravel.Prix}} fcfa
                </ion-label>

              </ion-item>

          </ion-item>

  

      </ion-list>
</ion-card>
</ion-content>