0

I am using ngx-popover, when try to open it from another component it was showing the following error Cannot read property 'show' of undefined below is the following code. home.html is the parent component In

home.html

<button (click)="onShowPopOver()">Device</span>
<device-popover *ngIf="showPopover"></device-popover>

home.component.ts

onShowPopOver() {
  this.showPopover=true;
}

and my devicePopover component looks follows

@ViewChild('myPopover')  popover: Popover;

 constructor() {
      this.popover.show();
  }

and my devicePopover.html looks as follows:

     <popover-content #myPopover class="myPopover"
                 title="Add/remove an Emulator"
                 placement="bottom"
                 [animation]="true"
                 [closeOnClickOutside]="true" >
 <span>Hello</span>
</popover-content>

device-popover is my selector for devicePopover component. when i try to call the child component it was hitting the constructor but throwing the error as "show of undefined"

sravanthi
  • 175
  • 1
  • 1
  • 15
  • Possible duplicate of [Angular 2: Get reference to a directive used in a component](http://stackoverflow.com/questions/36345618/angular-2-get-reference-to-a-directive-used-in-a-component) – n00dl3 Apr 26 '17 at 08:22
  • there is no popover directive in your template code, only its content. – n00dl3 Apr 26 '17 at 10:07
  • yes. I am using only popover-content – sravanthi Apr 26 '17 at 10:09
  • Then how do you want to get a `Popover` directive instance ? – n00dl3 Apr 26 '17 at 10:11
  • i tried to place the entire popover-content in the popover directive. bt then i got a error 'popover' is not a known element: – sravanthi Apr 26 '17 at 10:29
  • popover is a directive, not a component, you should use it like `
    `. where `myPopover` refers to the `popover-content` component. Did you read the docs ?     – n00dl3 Apr 26 '17 at 10:46

1 Answers1

3

@ViewChild refer to a child View, and this view is not created yet when your component is instanciated. You need to rely on a lifecycle hook to be able to access this popover property:

According to the docs :

ngAfterViewInit() Respond after Angular initializes the component's views and child views.

Called once after the first ngAfterContentChecked().

A component-only hook.

@ViewChild() will get populated just before ngAfterViewInit is called.

You also need to put a template reference on your element if you want to use a string as argument to @ViewChild():

@ViewChild("myPopover")


<div popover #myPopover=popover *ngIf="showPopover"></div>

otherwise you should use a class as argument :

@ViewChild(Popover) //the popover from ngx-popover, not yours


<div popover *ngIf="showPopover"></div>

So this should work :

@ViewChild("myPopover")  popover: Popover;

ngAfterViewInit() {
  this.popover.show();
}


<div popover #myPopover=popover *ngIf="showPopover"></div>
n00dl3
  • 21,213
  • 7
  • 66
  • 76
  • 2
    If you want some help, you need to give more informations. "not working" doesn't help anyone. you don't even provide the template of your component, do you think anyone is able to guess it ? This is seriously getting on my nerves. – n00dl3 Apr 26 '17 at 09:47