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

What is the process for attaching a key signature onto a string in order for it to function as an index for an object?

How can I specify a signature in TypeScript to indicate that the current value might be used as an index for accessing a specific object? I am encountering the error: Element implicitly has an 'any' type because expression of type 'string&ap ...

reactjstypescript

Inject parameter into MdDialog in Angular Material 2

I am currently utilizing Angular Material 2 and I have a requirement to display a dialog window using MdDialog that contains information about a user stored in Firebase. @Injectable() export class TweetService { dialogRef: MdDialogRef<TweetDialogCom ...

angularangular-material2

Setting a default value for a null Select Option in React: a guide

I am currently working with an array of values and looping through them to display in a Select Option. <Form.Item label="Status"> <Select value={user.status} onChange={handleStatusChange} > ...

reactjstypescriptantd

Angular: Employing Pipes for Date Formatting

Looking for assistance with my elevator component. I need to store the date in dd/MM/yy format each time the elevator reaches the first floor. if floor === 1 show Date else return(empty) Check out my StackBlitz project ...

angular

Strategies for ensuring that code does not execute in Angular until the API response has been received

Currently, I am facing an issue where I need to wait for data from an API in order to set the value of a variable and use it in an if condition. The problem lies in my uncertainty about how to properly handle this asynchronous task using async and await. ...

angulartypescriptasync-await

Ways to specify certain columns for presentation in Angular Material Table

When retrieving data from a WebApi with 10 columns, I am utilizing Angular Material Grid on the Front-End. user: User; dataSource: UsersDataSource; displayedColumns = ['UserName', 'RoleName', 'ISShared', 'IsDeleted'] ...

angularangular-material

Building a High-Performance Angular 2 Application: A Comprehensive Guide from Development to

Recently, I began developing an Angular2 project using the quickstart template. My main concern now is determining which files are essential for deployment on my live server. I am unsure about the specific requirements and unnecessary files within the qu ...

javascriptangularjsangulargruntjs

Retrieve information from the API prior to rendering the controller components

Hello there! I am looking to retrieve data from a factory before any of my controllers are loaded. After some research, I discovered that it can be achieved using the resolve function in AngularJS: angular.module('agent', ['ngRoute',&a ...

javascriptangularjsangularjs-directiveangularjs-serviceangularjs-routing

An endless cascade of dots appears as the list items are being rendered

Struggling to display intricately nested list elements, Take a look at the JSON configuration below: listItems = { "text": "root", "children": [{ "text": "Level 1", "children": [{ "text": "Level 2", "children": [{ "text": ...

angulartypescript

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

The issue with session storage persisting even after closing the iframe

Encountering a persistent issue where the sessionStorage remains populated even after closing an iframe and opening another one with the same destination. I assumed that the sessionStorage would be reset and start afresh each time. The iframe is contained ...

javascriptangulariframesession-storage

Deploying Angular to a shared drive can be done in a

My angular.json file contains the following line: "outputPath": "Y:\Sites\MySite", After running ng build, I encountered the error message: An unhandled exception occurred: ENOENT: no such file or directory, mkdir 'D:& ...

angulartypescript

Struggling to accurately convert the string into a date object

I have an array of objects structured like this: const days = [ { _id: 12312323, date : '30/12/2021', dateStatus : 'presence' }, ... ] I am looking to convert the date property from a string to a Date object using the follo ...

javascripttypescript

Angular Route seems unreachable

These are my guidelines for routes: export const appRoutes: Routes = [ { path: "", component: HomeComponent }, { path: '/signup', component: AppComponent }, { path: "**", redirectTo: "/" } ]; Upon attempting to access the URL: http ...

angularangular-router

Typescript, creating multiple definitions for a function with an object parameter

My dilemma lies in a function that takes an argument object and returns another object. This returned object will have a "bar" key based on the presence of the "includeBar" key as an option. I attempted to handle this scenario with different overloads: int ...

typescript

What is preventing me from connecting to dockerized npm from my host machine?

Issue - A server running inside a docker container is not responding when accessed from outside the container on an OSX host. web: image: my_web build: context: ./ dockerfile: web.docker container_name: my_web networks: ...

angulardockernpmdocker-compose

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

javascriptangularpowershellangular-cli

Welcome to Ng-Zorro, your destination for all things innovative and cutting

After including the NG-Zorro library in my project, every page I navigate to within my App displays only the NG-Zorro logo and the message "You have Arrived". I'm curious about removing this logo/text so that I can properly view my pages. I referred ...

angularng-zorro-antd

Are items placed into an array passed by reference or by value?

When working with custom Objects in an Angular context, I define two objects "a" and "b" using an interface. These are created as class attributes along with an empty array of these objects. public a: CustomObj; public b: CustomObj; public array: ...

javascriptarraysangular

Unable to locate a type definition file for module 'vue-xxx'

I keep encountering an error whenever I attempt to add a 3rd party Vue.js library to my project: Could not find a declaration file for module 'vue-xxx' Libraries like 'vue-treeselect', 'vue-select', and 'vue-multiselect ...

javascriptnode.jstypescriptvue.js