Angular 2 : how to open ngx-popover programmatically

user_5588829 0
Viewed 6265

I am using ngx-popover I am trying to open it from another component by clicking button

secondcomponent.html

<button popover #ChatPopover=popover (click)="ClickElement()">
                            <span class="glyphicon glyphicon-comment"></span>
                        </button>

secondcomponent.ts

ClickElement() {

   this.div = document.getElementById("ChatPopover")
   console.log(this.div);

}

popoverelement.html

<div class="chat" name="chatwindow">
            <div [ng2-draggable]="true">
                <popover-content #ChatPopover
                                 placement="right"
                                 [animation]="true"
                                 [closeOnClickOutside]="true">


                    <button type="button" class="close" aria-label="Close" (click)="ChatPopover.hide()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 style="color:#D25C50">Chat</h5>

                </popover-content>
            </div>
       </div>

Here secondcomponent is not a direct child component of popovercomponent. so I tried to implement through document getelementbyId, from this I'm getting popover reference but popover is not coming.

popover angular typescript
3 Answers

Hope it's not too late to this question.

  1. Define your popover directive

<a [routerLink]="null" #popoverDirective="popover" [popover]="selectorPopover" popoverPlacement="top" container="body"></a>

  1. Reference to your popover directive like this @ViewChild('popoverDirective') popoverDirective: PopoverDirective;

  2. Then in your code show or hide popover this.popoverDirective.show(); this.popoverDirective.hide();

user_89775410

I faced the same problem, and here is my code, hope it would help.

 @ViewChild('menuPopover')
 private popover: PopoverDirective;
 
 ......
 
 setConfigObject(imei:string, period: any):void{
    this.popover.hide();
    ...
  }
<a class="deviceAtag" [popover]="popover" placement="right" [outsideClick]="true" #menuPopover="bs-popover">{{item.devicename}}</a>
<ng-template #popover>... </ng-template>

I use angular7. I suppose the point is you should export your popover element as "bs-popover" type object, so that the object can be accessed from your angular code.

if you bump into another similar problem with ngx-bootstrap usage, i think you can find your answer from their homepage, because every api reference told what the element should be exported as.

screenshot from the homepage reference where you can find the "exported as" description

user_127678580
Related