Quick tip: Adding a close 'X' button to an ng-bootstrap popover

As a newcomer to angular 5, I have been working on adding an 'x' button in the top right corner of a popover. Once this 'x' is clicked, the popover should be closed. Is there a way to achieve this using ng-bootstrap popover? Below is my code, where I am hoping to integrate this functionality.

  
<div>
    <a *ngIf="conditionA" [attr.disabled]="isDisabled">
      {{ authorName }}
    </a>
    <a *ngIf="!conditionB" href="#" (click)="showPopover(accountId)" placement="top"
      popover-trigger="'outsideClick'" [ngbPopover]="popContent" #p="ngbPopover" (document:click)="closeAccount(p, $event)">{{ Display_popover }}</a>
  </div>

<ng-template #popContent>
        <app-account-detail></app-account-detail>
      </ng-template>
angulartypescriptangularjs-directivepopoverng-bootstrap

Answer №1

It is essential for this to function properly (and no, there is no need to define a "close" function)

<!--in the template we write "p.close()"-->
<ng-template #popContent>
    Hello, !
    <button (click)="p.close()">click</button>
</ng-template>

<!--note that the button triggering the popover has "#p=ngbPopover" -->
<button type="button" [ngbPopover]="popContent" [autoClose]="false" 
      triggers="manual" #p="ngbPopover" (click)="p.open()" >
  Click me to open a popover
</button>

Update in *ngFor (I'm unsure if it will work) If the popOver is within an *ngFor loop, you can attempt a workaround

<section *ngFor="let account of accounts"> 
   <ng-template #popContent>
       Hello
       <button (click)="close(p)">click</button>
   </ng-template> 
   <button type="button" [ngbPopover]="popContent" 
         [autoClose]="false" triggers="manual" 
        #p="ngbPopover" (click)="open(p)" >Click me</button>  
</section>

In the .ts
  close(pop:any)
  {
    pop.close()
  }
  open(pop:any)
  {
    pop.open()
  }

View this stackblitz demo

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

Example of TypeScript Ambient Namespace Usage

The Namespaces chapter provides an example involving D3.d.ts that I find puzzling. Here is the complete example: declare namespace D3 { export interface Selectors { select: { (selector: string): Selection; (element: ...

typescriptnamespacesambient

Developing a universal SDK wrapper for Firebase services (Firestore, Cloud Storage, and additional functionalities)

Currently, I am on the quest to discover an abstraction that can facilitate the seamless operation of Firebase products (specifically Firestore, Storage, and Analytics) across any platform (be it React Native, React, or Node.js). While considering the REST ...

node.jstypescriptfirebasereact-nativegoogle-cloud-firestore

Utilize the standard error handler in Angular 4

In my Angular4 application, I have set up a custom error handler as follows: @Injectable() export class CustomErrorHandler implements ErrorHandler { handleError(error) { switch (error.type) { case 'custom': doTheThing(); defa ...

angular

Struggling to troubleshoot issues with asynchronous tasks in Angular? Encountering timeouts while waiting for elements on an Angular page? Learn

Edit: I have identified the source of my issue with guidance from @ernst-zwingli. If you are facing a similar error, one of his suggested solutions might be beneficial to you. My problem stems from a known Protractor issue itself. For those who suspect the ...

javascriptangularjasmineprotractor

A section of the URL path has been deleted, leading to a repetitive cycle of clicking back and forth in

While using the navigate function of Router in angular, I encountered a strange issue. It seems that when I navigate once, it actually creates two navigations in history. Additionally, the URL is automatically updated with part of the URL being stripped of ...

angular

What is the most effective method for importing the "exceljs" library into an Angular project?

In my Angular 7 app, I am utilizing exceljs (https://www.npmjs.com/package/exceljs) to handle importing and exporting of Excel files. Currently, I have imported it using the following code snippet: import {Workbook} from "exceljs";. While it functions perf ...

angularnpmimportangular7exceljs

What is the best way to dynamically assign formControlNames in Angular using *ngFor?

I am currently facing a challenge with setting form controls using *ngFor over objects in an Array. The number of objects in the array can vary, sometimes resulting in only 1 object while other times multiple objects are present. My specific issue revolve ...

angulartypescriptangular-material2ngfor

The color scheme detection feature for matching media is malfunctioning on Safari

As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...

javascripthtmlcsstypescript

Display completed survey

I am in the process of developing a mobile app that allows users to answer questions in a questionnaire. Once the questionnaire is completed, the user can save it in LocalStorage. Upon revisiting the page, the user will see all previously answered question ...

htmlangularionic-framework

Alert: Circular dependency detected!

In an effort to have cleaner imports, I've set up a typescript file that exports all the components I'm using. For example: import { Comp1, Comp2, Comp3 } from index/components However, when using this approach, I encounter a warning during bu ...

angular

Explain the interaction of cookies between Angular and C# controllers

Can anyone provide clarity on how cookies are utilized between an angular application and a C# server controller? After looking through various discussions and forums, here's what I've gathered: The angular client initiates an HTTP Request (e. ...

c#angularcookies

What are the steps for utilizing the useReducer Hook with TypeScript?

I have successfully converted a React app to Typescript, but I am facing an issue with the useReducer Hook. The error message I'm getting is preventing me from moving forward. I have attempted different approaches to passing TypeScript interfaces in ...

reactjstypescript

Get the jsonarray file using express, node, and angular by downloading it

Within my web application, I am generating jsonarray files. These files have a structure similar to this: [{attr1:"123",attr2:"456"},{attr1:"abc",attr2:"def"}] I need to send these jsonarray files to the client for ...

node.jsjsonangularexpresshttp-headers

React.js TypeScript Error: Property 'toLowerCase' cannot be used on type 'never'

In my ReactJS project with TSX, I encountered an issue while trying to filter data using multiple key values. The main component Cards.tsx is the parent, and the child component is ShipmentCard.tsx. The error message I'm receiving is 'Property &a ...

javascriptreactjstypescripttypesreact-tsx

In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

When attempting to examine values between operators in an rxjs pipe, I decided to use tap to log them to the console. I added two taps, one before a map operator used for sorting an Array, and one after. Surprisingly, both taps logged the same sorted Arra ...

angulartypescriptrxjsrxjs-pipeable-operators

Replacing the previous observation

My events app features an all-events component that showcases all the events created. Upon loading the all-events component, the events are fetched from the database. Below is a snippet of the relevant code from the Typescript file of the all-events compo ...

htmlangularrxjs

The concept of 'this' remains undefined when using a TypeScript Property Decorator

I've been delving into TypeScript decorators focusing on properties, and I crafted the following snippet inspired by various examples: decorator.ts export function logProperty(target: any, key: string) { let val = this[key]; const getter = () ...

javascripttypescriptpropertiesthisdecorator

Is there a way to trigger the ngOnInit() function in Angular 2 for a second time

I need help understanding how to re-trigger the ngOnInit() function when calling another method. Can you provide guidance on this in the following code snippet? ngOnInit(): void { this.route.params.subscribe((params: Params) => { this.model = th ...

angularangular-lifecycle-hooks

Is there any way to deactivate the saved query in react-admin without having to develop a new component?

The latest version of react-admin, version 4, introduced a new feature that allows saving filters. I'm curious about how to disable this functionality without having to create an additional filter button. https://i.stack.imgur.com/uTrUe.gif ...

reactjstypescriptadminreact-admin

Dealing with a sequence of deletions in Angular 4

When working with a ReplaySubject of size 3 and a delete chain that must be in order, I encountered an issue. After the deletion process is completed, I need to redirect the user. However, when subscribing to this ReplaySubject method, it sends "here fin ...

angularsubject