launch navigator with a FAB

Question

hello to those who see this, I'm a beginner in typescript development so i try my best I'm trying to launched a navigator (like waze, gmap or other...) with a FAB. this is my code in TS:

ngOnInit() {
        this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
            lieu.adresse = adresse;
          });
      });
  this.lieux = lieux;
 });
}

ionViewDidEnter() {
this.lieuId = this.route.snapshot.params['id'];
if (this.lieuId)  {
  this.loadLieuWithMap();
}
console.log('ionViewDidEnter');
}

async loadLieu() {

this.lieuService.getLieu(this.lieuId).subscribe(res => {

  this.lieu = res;
  this.concertService.getUpcomingConcertsForLieuById(this.lieuId)
  .subscribe(interne_next_concert => this.lieu.prochaine_concerts = this.getConcertsReadyToExpose( interne_next_concert));
  this.concertService.getPreviousConcertsForLieuById(this.lieuId)
  .subscribe(interne_previous_concert => this.lieu.concerts_passes = this.getConcertsReadyToExpose( interne_previous_concert));

  this.adresseService.getAdresse(res.adresse.id).subscribe(resadd => {
    this.lieu.adresse = resadd;
    console.log(this.lieu);
  });
});
}

 async loadLieuWithMap() {

this.lieuService.getLieu(this.lieuId).subscribe(lieu => {
  // loading address
  this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
    this.adresse = adresse;
    this.map = L.map('mapIdDetail').setView([adresse.latitude, adresse.longitude], 13)  ;
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="http://www.openstreetmap.org/copyright',
              }).addTo(this.map);
              // get full address
    const adresseComp = adresse.numero + ' ' + adresse.rue + '<br>' + adresse.ville + ' ' + adresse.cp;
              // popup Content 
    const popupContent = '<h2>' + lieu.nom + '</a></h2></br>' + adresseComp + '</div>';
    L.marker([adresse.latitude, adresse.longitude]).addTo(this.map)
              .bindPopup(popupContent);
        });
  this.lieu = lieu;
  });
}

LaunchRoute() {
console.log('ADRESSE:', );
this.launchNavigator.navigate()
.then(
  success => console.log('Launched navigator'),
  error => console.log('Error launching navigator', error)
 );
}

and the HTML parts is :

    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="primary" (click)="LaunchRoute()" >J'y vais</ion-fab-button>
    </ion-fab>

the problem is that I can't send the info (number, street, city ...etc) without putting it in the middle of the button like this:

    <ion-fab-button color="primary" (click)="LaunchRoute()" >{{Lieu.nom}}</ion-fab-button>

it's not very nice, but of course it works fine when I do this. so i think my LaunchRoute isn't good maybe i miss something i dunno.

sorry for my writing skill in english (and for the part french of code). [EDIT]

Answer 1

Well, I finally got unblocked after consulting several other forums, and finally I found a solution. in my TS file :

LaunchRoute(adresse) {
  console.log('ADRESSE:', adresse);
  this.launchNavigator.navigate(adresse)
  .then(
    success => console.log('Launched navigator'),
    error => console.log('Error launching navigator', adresse, error)
  );
}

and in the html file :

    <ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button vertical="bottom" horizontal="end" color="primary" (click)="LaunchRoute([ lieu.nom, adresse.numero, adresse.rue, adresse.ville])" ><img src="../../assets/img/navto.png" /></ion-fab-button>
    </ion-fab>