feat(popover): component popover demo

Author: nnixaa

src/app/pages/ui-features/popovers/popovers.component.html

@@ -1,6 +1,6 @@
 <div class="row">
-  <div class="col-lg-4">
-    <nb-card>
+  <div class="col-lg-6">
+    <nb-card size="small">
       <nb-card-header>Popover Position</nb-card-header>
       <nb-card-body>
         <p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
@@ -12,8 +12,8 @@
     </nb-card>
   </div>
 
-  <div class="col-lg-4">
-    <nb-card>
+  <div class="col-lg-6">
+    <nb-card size="small">
       <nb-card-header>Simple Popovers</nb-card-header>
       <nb-card-body>
         <p>In a simples form popover can take a string of text to render.</p>
@@ -23,8 +23,10 @@
       </nb-card-body>
     </nb-card>
   </div>
+</div>
 
-  <div class="col-lg-4">
+<div class="row">
+  <div class="col-lg-6">
 
     <ng-template #tabs>
       <nb-tabset>
@@ -70,7 +72,7 @@
       </nb-card>
     </ng-template>
 
-    <nb-card>
+    <nb-card size="small">
       <nb-card-header>Template Popovers</nb-card-header>
       <nb-card-body>
         <p>You can pass a refference to `ng-template` to be rendered.</p>
@@ -80,6 +82,18 @@
       </nb-card-body>
     </nb-card>
   </div>
+
+  <div class="col-lg-6">
+    <nb-card size="small">
+      <nb-card-header>Component Popovers</nb-card-header>
+      <nb-card-body>
+        <p>Same way popover can render any angular compnoent.</p>
+        <button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button>
+      </nb-card-body>
+    </nb-card>
+  </div>
 </div>
 
 <div class="row">

src/app/pages/ui-features/popovers/popovers.component.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
-import { NgxPopoverCardComponent, NgxPopoverTabsComponent } from './popover-examples.component';
+import {
+  NgxPopoverCardComponent, NgxPopoverFormComponent,
+  NgxPopoverTabsComponent
+} from './popover-examples.component';
 
 @Component({
   selector: 'ngx-popovers',
@@ -9,5 +12,5 @@ import { NgxPopoverCardComponent, NgxPopoverTabsComponent } from './popover-exam
 export class PopoversComponent {
   tabsComponent = NgxPopoverTabsComponent;
   cardComponent = NgxPopoverCardComponent;
-  formComponent = NgxPopoverCardComponent;
+  formComponent = NgxPopoverFormComponent;
 }