I am using ngx-bootstrap popover . I want the popover should open on hover, and all opened ones should be closed if new one is opened.
As per requirement I want above sample should controlled by parent component and target popover lies in child component. I need this for modularity requirement
Demo ngFor in child component html this is wrong demo
Updated demo ngFor in parent component html
parent component
export class DemoPopoverFourDirectionsComponent implements
AfterViewInit{
@ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;
ngAfterViewInit() {
this.popovers.forEach((popover: PopoverDirective) => {
popover.onShown.subscribe(() => {
this.popovers
.filter(p => p !== popover)
.forEach(p => p.hide());
});
});
}
varArr=[1,2,3,4]
}
In popover there are buttons which need to be clicked. If I use triggers="mouseenter:mouseleave" I cannot click buttons inside the popover
Simply set triggers="mouseenter:mouseleave"
See: https://ng-bootstrap.github.io/#/components/popover/examples#triggers
Update:
Because of new requirements here is a changed version which closes an old popover and let us click a button inside:
HTML
<div *ngFor="let d of varArr; let i = index">
<button type="button" class="btn btn-default btn-secondary"
#pop="bs-popover"
[popover]="popover"
popoverTitle="Popover on top"
placement="right" triggers="mouseenter"
(onShown)="closeOldPopover(pop)"
[outsideClick]="true">
Popover on top
</button>
<ng-template #popover>
<button (click)="pop.hide()">Test</button>
</ng-template>
</div>
TS
private _currentPopover: any;
@Input() varArr;
ngOnInit() {
}
public closeOldPopover(popover: any): void {
if (this._currentPopover && this._currentPopover !== popover) {
this._currentPopover.hide();
}
this._currentPopover = popover;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.