Closing Popover Instance from another Component (Ionic, Typescript)

I've been dealing with an issue where a function that I imported from another class isn't getting called and the parser isn't recognizing it. The Popover in my code also can't be closed. I've tried various similar solutions, but none of them seem to work for me. Since I'm not very familiar with TypeScript, I'm hoping I haven't made any mistakes.

export function dismissWindow() {}

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

export class UserPage implements OnInit {
  public popover;

 //Pop up Informationen rechts oben
  async notifications(ev: any) {  
    this.popover = await this.popoverCtrl.create({  
      component: NotificationsComponent,  
      event: ev,  
      animated: true,  
      showBackdrop: true  
    }); 

    return await this.popover.present();  
  }

  ngOnInit() {
  }

  public dismissWindow(){
    console.log("Dismiss got called");
    this.popover.dismiss();
  }
}
import { UserPage } from './../user/user.page';
import { dismissWindow} from './../user/user.page';

LogOut() {
  console.log("in logout method")
  dismissWindow();
  console.log("Call From Logout");
  this.router.navigate(['login'])
  }
}

Answer №1

Assuming that popoverCtrl is indeed a service instance, it is recommended to inject the service in the second file and either create a new service to manage open popovers or utilize an existing one.

The best practice is to maintain a central repository for tracking open popovers, such as a singleton service that can be injected into any component for easy access.

import {Injectable} from '@angular/core';
@Injectable({
  providedIn: 'root',
})
class UtilService {
    private _popover;

    set openedPopover(popover) {
        this._popover = popover;
    }

    closePopover() {
        if(this._popover) {
            this._popover.dismiss();
           this._popover = null;
       }
    }
}

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

export class UserPage implements OnInit {
   public popover;

   constructor(private utilService: UtilService) {}
 //Popup information on the top right
  async notifications(ev: any) {  
    this.popover = await this.popoverCtrl.create({  
      component: NotificationsComponent,  
      event: ev,  
      animated: true,  
      showBackdrop: true  
      }); 

      this.utilSerivce.openedPopover(this.popover);
      return await this.popover.present();  
    }

    ngOnInit() {
    }

    public dismissWindow(){
    console.log("Dismiss got called");
    //this.popover.dismiss();
    this.utilService.closePopover(this.popover);
  }
}

class YourClass {
    constructor(private utilService: UtilService) {}

    LogOut() {
        this.utilService.closePopover(this.popover);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Key factors to keep in mind when comparing JavaScript dates: months

Check the dates and determine if the enddate refers to the following month by returning a boolean value. Example startdate = January 15, 2020 enddate = February 02, 2020 Output : enddate is a future month startdate = January 15, 2020 enddate = January 2 ...

Challenge Encountered with Create-React-App TypeScript Template: Generating JS Files Instead of TSX Files

Encountering a problem setting up a new React application with TypeScript using the Create-React-App template. Followed the guidelines on the official documentation (https://create-react-app.dev/docs/adding-typescript/) and ran the command below: npx creat ...

Ways to allocate a random color within an array?

Hi there, I'm trying to create chips with random colors from an array in my code. I attempted to use a color string array and assign them to the chips one after the other, but it didn't work as expected. Any suggestions on how I can achieve this? ...

Tips on triggering a function when an Ionic or HTML event is initiated

I am facing a scenario on my HTML page where I need to display certain data when an if condition returns False, and execute a function when the condition returns true. However, I'm unsure about how to achieve this. <ng-container *ngIf="!(form.answ ...

Utilizing Typescript to extract type information from both keys and values of an object

I have a unique challenge of mapping two sets of string values from one constant object to another. The goal is to generate two distinct types: one for keys and one for values. const KeyToVal = { MyKey1: 'myValue1', MyKey2: 'myValue ...

Replacing a function in TypeScript

Looking to alter the behavior of the alert function in TypeScript? You can achieve this by creating a new function that wraps around the original alert and modifies its behavior. alert = (function (origAlert) { return function (...messages: any[]) { ...

HTML: Mark the chosen hyperlink or tag

In my HTML page, I am looking to keep the link selected when it is clicked on. Here is the initial HTML code: <table class="main-dev"> <tr> <td> <a class='titleForm' style="cursor:pointer"> ...

Utilizing conditional types for type narrowing within a function's body: A comprehensive guide

I created a conditional type in my code that constrains the second argument of my class constructor based on the type of the first argument. Although the type checker correctly limits what I can pass to the constructor, I am struggling to get the compiler ...

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

I'm currently experimenting with the CSS animation feature to display and conceal the angular material toolbar in this demonstration. Inside the application component, the hide attribute is toggled at intervals as shown below: hide:boolean = false ...

What is the level of efficiency of Ionic when used without AngularJS?

Considering developing a mobile app using ionic with meteor. Can ionic operate effectively without angularjs? How efficient is the combination of ionic without angular? ...

Creating TypeScript interfaces from Laravel backend

I'm currently exploring ways to automatically generate TypeScript code from the API of my Laravel application. I have been using scribe for generating API documentation and then utilizing it to create TypeScript definitions. However, I am facing an is ...

Tips for outputting data in TypeScript when a search form is updated

Below is the structure of my HTML file: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type"" content="text/html; charset=utf-8"/> </head> <body> <input ...

Developing middleware for managing event handlers

Scenario: I am tasked with managing multiple events that necessitate an "available client". Therefore, in each event handler, my first step is to attempt to acquire an available client. If no client is available, I will send a "Service unavailable" messag ...

Avoid triggering the onClick event on specific elements in React by utilizing event delegation or conditional rendering

programming environment react.js typescript next.js How can I prevent the onClick process from being triggered when the span tag is pressed? What is the best approach? return ( <div className="padding-16 flex gap-5 flex-container" ...

When performing the operation number.tofixed in Typescript, it will always return a string value instead of a double datatype as expected from parseFloat

let value = 100 value.toFixed(2) -> "100.00" parseFloat(value.toFixed(2)) -> 100 I am encountering an unexpected result with the double type when input is 100.36, but not with 100.00. Framework: loopback4 ...

Steps to insert a personalized attribute into a TypeScript interface

UPDATED EXPLANATION: I'm fairly new to TypeScript, so please bear with me if this question seems basic. I'm working with an existing library (ngx-logger) that I don't want to or can't modify. My goal is to create a service that generat ...

The extend keyword in TypeScript causing issues with type inference

Why is TypeScript showing an error in the code below? type A = { kind: "a" } type B = { kind: "b" } const a = (a: A): void => undefined const b = (b: B): void => undefined const c = <C extends A | B>(c: C): void => (c.kind == "a" ? a(c) : ...

Creating Production Files for Web using RxJs and TypeScript

I am interested in developing a JavaScript Library using RxJs (5.0.0-Beta.6) and TypeScript (1.8.10). My TypeScript file is successfully compiling. Below are the files I have: MyLib.ts: /// <reference path="../../typings/globals/es6-shim/index.d.ts" ...

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

How can you open a popover in Ionic from two different triggers but have it appear in the same place?

I am facing an issue with two buttons that trigger the same popover. The problem arises when I click on the second button, a popover is displayed in the wrong place (shown by the big blue plus icon) instead of the right corner (as shown in the second image ...