Pass the Firebase's Download URL using Ion-Item-Option click event

Ionic Framework Ionic Angular
1

According to Ionic documentation, ion-item-option have a href attribute that sets hyperlinks or links.

Link of Documentation: ion-item-option: Ionic Framework API Docs

I used this type of method to list the Firebase Download URL of my files and when the user clicks ion-item-option , the file explorer will open and downloading of file will be possible but unfortunately the button (ion-item-option) is unresponsive. Is there any way to do it?

I try the following to check if file.downloadUrl is accessible or correct:

  1. I try the <a href> tags and this method is functional but I want to set the ion-item-option as a download button for my files.

html file

 <ion-list>
    <ion-item-sliding *ngFor="let file of files | async">
      <ion-item detail>
        <ion-icon name="document-attach-outline" slot="start"></ion-icon>
        <ion-label>
          <h2>{{ file.title }}</h2>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <!-- This is the href attribute -->
        <ion-item-option color="success" [href]="file.downloadUrl">
          <ion-icon name="cloud-download" slot="icon-only"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger">
          <ion-icon name="trash-bin" slot="icon-only"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
2

Maybe try a click handler instead? Even if it is just to check content?

Not sure about href

1 Like
3

If I used a click event, how can I manage to click the link? I try this method too but I just console.log it and the link was printed. My next target here is when the user clicks the button, the link will be opened.

4

Well u can use the router service, but because it is an exernal url (firebase), u can consider using window.open also to open the link in a new window

1 Like