Ionic modal fires twice

Question

My ionic app fires a modal twice when hitting ion-button. I cannot figured why it is happening.

 <ion-button (click)="editProduct(p.id)" fill="clear">
                                <ion-icon name="cloud-upload"></ion-icon>
                            </ion-button>

editProduct(id) {
        // obter dados do  produto pelo seu id
        this.afs.collection("products").doc(id)
            .valueChanges()
            .subscribe(data => {
                this.product = data
                // chamar o modal e enviar o id do produto
                this.modalProduct(id);
            });
    }

async modalProduct(id) {
        const modal = await this.modalCtrl.create({
            component: AdminProductPage,
            componentProps: {
                'id': id,
                'title': this.product.title,
                'description': this.product.description,
                'price': this.product.price,
                'image': this.product.image
            }
        });
        await modal.present();
    }

Answer 1

I figured out by myself.

I need to use a pipe from rxjs to prevent double execution of editProduct() subscrive method.

editProduct(id) {
        // obter dados do  produto pelo seu id
        this.afs.collection("products").doc(id)
            .valueChanges()
            .pipe(
                first()
            )
            .subscribe(data => {
                this.product = data
                // chamar o modal e enviar o id do produto
                this.modalProduct(id);
            });
    }