javascript - Ionic 5 / Angular 8 toggle a div on clicking outside

Question

I have a settings screen with 4 radio buttons. If I click on any of the radio button a success message should be displayed and if I click anywhere else the message should be hidden.

Here is the code:

settings.component.html:

<ion-content>
  <div class="flex-container">
    <ion-card>
      <div class="message">
        <div class="message-inner" *ngIf="isMessageDisplay">
          <ion-icon name="checkmark"></ion-icon>
          <p>Success message</p>
        </div>
      </div>
      <div class="home-screen">
        <ion-card-header>
          <ion-card-title class="ion-text-center">Select the home page to display</ion-card-title>
        </ion-card-header>
      
        <ion-card-content class="home-screen-buttons">
       

          <ion-list class="radio-buttons">
            <ion-radio-group name="homeButtons"
            >
              <ion-row>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label>home 1</ion-label>
                    <ion-radio [value]="home.home1"
                    (ionSelect)="home1()"
                    color="secondary"
                    ></ion-radio>
                  </ion-item>
                </ion-col>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label color="lightgray">home 2</ion-label>
                    <ion-radio [value]="home.home2"
                    (ionSelect)="home2()"
                    color="secondary"
                    ></ion-radio>
                  </ion-item>
                </ion-col>
  
  
              </ion-row>
            </ion-radio-group>
          </ion-list>

        </ion-card-content>
      </div>

      <div class="products">
        <ion-card-header>
          <ion-card-title class="ion-text-center">Select the product to display</ion-card-title>
        </ion-card-header>
  
        <ion-card-content class="products-buttons">

          <ion-list class="radio-buttons">
            <ion-radio-group name="productButtons">
              <ion-row>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label>Product 1</ion-label>
                    <ion-radio [value]="product.product1"
                    (ionSelect)="product1()"
                    color="secondary"></ion-radio>
                  </ion-item>
                </ion-col>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label color="lightgray">Product 2</ion-label>
                    <ion-radio [value]="product.product2"
                    (ionSelect)="product2()"
                    color="secondary"></ion-radio>
                  </ion-item>
                </ion-col>
              </ion-row>
            </ion-radio-group>
          </ion-list>

        </ion-card-content>
      </div>

    </ion-card>
  </div>
</ion-content>

settings.component.ts:

import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-settings-menu',
  templateUrl: './settings-menu.page.html',
  styleUrls: ['./settings-menu.page.scss'],
})

export class SettingsMenuPage implements OnInit, OnDestroy {

  isMessageDisplay: boolean = false;
        
  subscriptions$: Subscription[] = [];

  constructor(
    private store: Store<any>,
    private elemRef: ElementRef
  ) {
 
   }

   ngOnInit() {
   }

   @HostListener('document:click', ['$event.target'])
   onClickOutside(targetElement) {
     const target = this.elemRef.nativeElement.querySelector('ion-radio');
     if (targetElement.tagName != target.tagName)
      this.isMessageDisplay= false;
   }

  home1() {
    // some other logic
    this.isMessageDisplay= true;
  }

  home2() {
    // some other logic
    this.isMessageDisplay= true;
  }

  product1() {
   // some other logic
    this.isMessageDisplay= true;
  }

  product2() {
    // some other logic
    this.isMessageDisplay = true;
  }


   ngOnDestroy() {
    this.subscriptions$.forEach(subscription => subscription.unsubscribe());
  }
}

The above code does the task well during development when I run ionic serve command. But once I build the code for browser using ionic cordova build browser --prod --release and deploy it in some server then success message does not toggle right away, it takes much time when I click anywhere else in the screen.

Please help!

Answer 1

The porblem was in the HostListener. Instead of using @HostListener('document:click', ['$event.target']) I used @HostListener('click', ['$event.target']) and removed document. This solved the problem I had during the production. I don't know the exact reason why this happened.