import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdPopoverTplcontent } from './popover-tplcontent';

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid">

    <hr>
    <p>
      This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
      Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
    </p>
    <hr>

    <ngbd-popover-tplcontent></ngbd-popover-tplcontent>
  </div>
  `
})
export class App {
}

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()],
  declarations: [App, NgbdPopoverTplcontent]
  bootstrap: [App]
})
export class AppModule {}

<p>
  Popovers can contain any arbitrary HTML, Angular bindings and even directives!
  Simply enclose desired content in a <code><ng-template></code> element.
</p>

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content" placement="right">
  I've got markup and bindings in my popover!
</button>

[placement]="getPlacement()"

public getPlacement(): string {
    return window.innerHeight <= 600 ? 'top' : 'right';
}