Ionic 4 pass variable to modal

Question

I am trying to pass data to modal but the variable is undefined. The problem is that I have a 'uid' variable in addtocart() function and trying to send this 'uid' variable to modal function opencart(). I just can't call the modal function() inside addtocart() function because modal will be opened every time addtocart() function will be called.
Is there any way I can use the variable from one function into another

Function on button click()

addToCart(product, price) {

    this.afauth.authState.subscribe(user =>{
      if(user) {
        this.id = user.uid
        console.log("firebase uid " + this.id)

        this.userService.findUserId(this.id).subscribe(data=>{
          console.log(data)
          this.user_id = data;

          for(let i =0 ; i<this.user_id.length; i++) {
            this.uid = this.user_id[i].id
            console.log("user id" + this.uid)
          }

          let cart = {
            date : new Date(),
            quantity : Number (this.selected_quant),
            price : this.price,
            user_id :this.uid,
            product_id : product.product_id 

          }

          this.cartService.addTocart(cart).subscribe(data =>{
            console.log(data)
            this.cartItemCount.next(this.cartItemCount.value + 1);

          })


        })
      }
    })

  }

Modal function :

async openCart() {

        this.animateCSS('bounceOutLeft', true);
        let modal = await this.modalCtrl.create({
          component: CartModalPage,
          cssClass: 'cart-modal',
          componentProps: { 

            user_id : this.uid // undefined
          }
        });
        modal.onWillDismiss().then(() => {
          this.fab.nativeElement.classList.remove('animated', 'bounceOutLeft')
          this.animateCSS('bounceInLeft');
        });
        modal.present();
      }

Answer 1

to help with this duly I think ideally you should share more of your code and the use case, since it is still unclear why can't you just update such a core value once at ngAfterViewInit hook of the component. But out of context I would solve it this way:

addToCart(product, price) {

    this.afauth.authState.subscribe( user => {

      if (user) {

        this.id = user.uid
        console.log("firebase uid " + this.id)

        this.userService.findUserId(this.id).subscribe(data=>{

          this.user_id = data;


          // unclear why would you loop through the array if the only thing you do is grabbing last item?
          /* for(let i =0 ; i<this.user_id.length; i++) {
            this.uid = this.user_id[i].id
            console.log("user id" + this.uid)
          } */
          this.uid = this.user_id[this.user_id.length-1].id;

          let cart = {
            date : new Date(),
            quantity : Number (this.selected_quant),
            price : this.price,
            user_id :this.uid,
            product_id : product.product_id 
          }

          this.cartService.addTocart(cart).subscribe(data => {

            this.cartItemCount.next(this.cartItemCount.value + 1);

          })


        })

      } else {

        console.log("such user does not exist")

      };

    })

}

async openCart() {

    if (this.uid) {

        this.animateCSS('bounceOutLeft', true);

        let modal = await this.modalCtrl.create({
          component: CartModalPage,
          cssClass: 'cart-modal',
          componentProps: { 
            user_id : this.uid
          }
        });

        modal.onWillDismiss().then(() => {
          this.fab.nativeElement.classList.remove('animated', 'bounceOutLeft')
          this.animateCSS('bounceInLeft');
        });

        modal.present();

    } else {

        this.afauth.authState.subscribe( user => {

            if (user) {

              this.id = user.uid

              this.userService.findUserId(this.id).subscribe( data => {

                this.user_id = data;

                this.uid = this.user_id[this.user_id.length-1].id;

                this.opencart();

              })

            }
        })

    }

}

There is no change to your addToCart() method, the only thing I changed is instead of for loop I just grabbed last item in the array that you were iterating on.

Now with the second method (the modal) - I added condition that if 'this.uid' does not exist - we do need to fetch it and then call this same function again. If it does exist - you proceed normally to call the modal.

Hope this helps.