I want to create a `popover` component which will have api like below:

```
<button  popover [content]="popover_content" >popover test</button>

<ng-template #popover_content>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</ng-template>

```

I have tried to some extent, pls see [stackblitz](https://stackblitz.com/edit/angular-bj2ke4?file=src%2Fapp%2Fhello.component.ts)

The problem is:

1. Content is appearing inside the button. How do I avoid it?

[![enter image description here](https://i.stack.imgur.com/eBtPA.png)](https://i.stack.imgur.com/eBtPA.png)

2. I want the content to give it some css class but when I access it I just get a comment node.

```
      @Input() set content(val: TemplateRef<void>) {
        this.popoverContent = val;
        console.log(val.elementRef.nativeElement);//this is a comment node. WHY??
      }

```

I am not sure how to solve above two problems. Would be great if someone could advice.