Popover examples for nowzoo-angular-bootstrap-lite

popover-demo-0.html

<button class="btn btn-primary" nzbPopover
  [nzbPopoverTitle]="quickstartTitle"
  [nzbPopoverContent]="quickstartContent"
  data-placement="auto">Quick Example</button>
  <ng-template #quickstartTitle>Popover Title</ng-template>
  <ng-template #quickstartContent>Some popover content.</ng-template>

popover-demo-add-class.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
declare const jQuery: any;

import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-popover-demo-add-class',
  template: `
  <p>
    <button class="btn btn-primary"
      nzbPopover
      #popoverInstance="nzbPopover"
      title="Popover"
      [nzbPopoverContent]="popoverContent"
      data-placement="auto">
      Popover
    </button>
    <ng-template #popoverContent>
      This popover
      <strong *ngIf="!dangerClassOn">does not have</strong>
      <strong *ngIf="dangerClassOn">has</strong>
      the extra <code>.danger</code> class.
    </ng-template>

  </p>
  <p>
    <strong>dangerClassOn:</strong> {{dangerClassOn | json}}
    <br>
    <button class="btn btn-secondary btn-sm" (click)="toggle()">
      Toggle
    </button>
  </p>
  `,
  styles: []
})
export class PopoverDemoAddClassComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;

  dangerClassOn: boolean = true;

  private sub: Subscription;

  toggle() {
    // check to see that tip exists...
    let tip = this.popoverInstance.boostrapComponentData.tip || null;
    this.dangerClassOn  = ! this.dangerClassOn;
    if (tip) {
      jQuery(tip).toggleClass('danger', this.dangerClassOn);
    }

  }
  ngAfterViewInit() {
    // make sure we toggle the class at least once...
    this.sub = this.popoverInstance.events
      .filter((event:Event) => 'inserted' === event.type)
      .subscribe(() => {
        jQuery(this.popoverInstance.boostrapComponentData.tip)
          .toggleClass('danger', this.dangerClassOn);
      })
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

popover-demo-attributes.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-demo-attributes',
  template: `<p>
  <button class="btn btn-primary"
    nzbPopover
    title="Static Title"
    data-content="Some static popover content.">
    Simple Popover Example</button>
  </p>`
})
export class PopoverDemoAttributesComponent {}

popover-demo-disable.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-demo-disable',
  template: `
    <p>
      <button class="btn btn-primary"
        nzbPopover
        #popoverInstance="nzbPopover"
        title="Enable/Disable Demo"
        data-content="Hi there.">
        Popover
        <span *ngIf="popoverInstance.enabled">Enabled</span>
        <span *ngIf="!popoverInstance.enabled">Disabled</span>
      </button>
    </p>
    <p>
      <button class="btn btn-secondary btn-sm"
      [disabled]="popoverInstance.enabled"
      (click)="popoverInstance.enable()">enable()</button>
      <button class="btn btn-secondary btn-sm"
      [disabled]="!popoverInstance.enabled"
      (click)="popoverInstance.disable()">disable()</button>
      <button class="btn btn-secondary btn-sm"
      (click)="popoverInstance.toggleEnabled()">toggleEnabled()</button>
    </p>
  `
})
export class PopoverDemoDisableComponent {}

popover-demo-dismiss-on-click-outside.component.ts

import {
  Component,
  AfterViewInit,
  OnDestroy,
  ViewChild,
  Renderer2
} from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-popover-demo-dismiss-on-click-outside',
  template: `
  <p>
    <button class="btn btn-primary"
      nzbPopover
      #popoverInstance="nzbPopover"
      title="Enter your name..."
      [nzbPopoverContent]="popoverContent"
      data-placement="auto"
      data-trigger="click">
      Enter Name...
    </button>
    <ng-template #popoverContent>
      <div class="form-group">
        <label for="app-popover-demo-dismiss-on-click-outside-name">Name</label>
        <input type="text" class="form-control" [(ngModel)]="enteredInPopover">
      </div>
      <div class="form-group">
        <button
        class="btn btn-secondary"
        (click)="popoverInstance.hide();">
        Cancel</button>
        <button
        class="btn btn-success"
        (click)="name = enteredInPopover; popoverInstance.hide();">
        Save</button>
      </div>
    </ng-template>

  </p>
  <p>Hello, {{name}}</p>
  `
})
export class PopoverDemoDismissOnClickOutsideComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
  name: string = 'World';
  enteredInPopover: string = '';
  private eventsSub: Subscription;
  private bodyClickUnlisten: () => void | null = null;

  constructor(
    private renderer: Renderer2
  ){}

  ngAfterViewInit(){
    this.eventsSub = this.popoverInstance.events.subscribe((event:Event) => {
      if ('shown' === event.type){
        this.bodyClickUnlisten = this.renderer.listen(document.body, 'click', (event: Event) => {
          // don't respond to clicks in the popover
          if (! this.popoverInstance.boostrapComponentData.tip.contains(event.target)) {
            // the click occurred outside, so close the popover...
            this.popoverInstance.hide();
          }
          // the click is inside the popover, so do nothing

        })
        this.enteredInPopover = this.name;
      }
      if ('hide' === event.type){
        // clean up the listener...
        this.bodyClickUnlisten();
        this.bodyClickUnlisten = null;
      }
    })
  }
  ngOnDestroy() {
    if (this.bodyClickUnlisten){
      this.bodyClickUnlisten();
    }
    this.eventsSub.unsubscribe();
  }

}

popover-demo-get-instance.component.ts

import { Component, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
  selector: 'app-popover-demo-get-instance',
  template: `
    <p>
      <button class="btn btn-primary"
        nzbPopover
        #popoverInstance="nzbPopover"
        title="Popover Instance Demo"
        data-content="Hi there.">
        Popover
      </button>
    </p>
    <p>
      <strong>Status:</strong> {{popoverInstance.status | async | json}}
    </p>

    <p><strong>Last 5 Events (Newest First):</strong></p>
    <ol>
      <li *ngFor="let e of last5Events">{{e.type}}.{{e.namespace}} at {{e.timeStamp | amDateFormat: 'H:mm:ss.SSSS'}}</li>
    </ol>
  `
})
export class PopoverDemoGetInstanceComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
  private sub: Subscription;
  last5Events: Event[] = []

  ngAfterViewInit() {
    this.sub = this.popoverInstance.events.subscribe((boostrapEvent: Event) => {
      this.last5Events.unshift(boostrapEvent);
      this.last5Events = this.last5Events.slice(0, 5)
    })
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

popover-demo-hide-on-route-change.component.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-popover-demo-hide-on-route-change',
  template: `<p>
  <button class="btn btn-primary"
    nzbPopover
    #popoverInstance="nzbPopover"
    [nzbPopoverPlacement]="getPlacement"
    title="Popover"
    data-placement="bottom"
    [nzbPopoverContent]="popoverContent">
    Popover</button>
  </p>
  <ng-template #popoverContent>
    <p>
      Click on the link below to see how the popover
      gracefully disapears when its target
      is destroyed.
    </p>
    <p>
      <a routerLink="/popovers">
        Back to Popovers
      </a>
    </p>
  </ng-template>
  `
})
export class PopoverDemoHideOnRouteChangeComponent implements AfterViewInit {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
  ngAfterViewInit() {
    setTimeout(() => {
        this.popoverInstance.show();
    })
  }
}

popover-demo-no-title.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-demo-no-title',
  template: `<p>
  <button class="btn btn-primary"
    nzbPopover
    data-placement="auto"
    data-content="This popover does not have a title.">
    Popover Without Title</button>
  </p>`
})
export class PopoverDemoNoTitleComponent {}

popover-demo-placement-func.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-demo-placement-func',
  template: `<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverPlacement]="getPlacement"
    title="Placement Function"
    data-content="This popover was placed by a function.">
    Placement via function</button>
  </p>
  `
})
export class PopoverDemoPlacementFuncComponent  {
  getPlacement(tooltipEl, targetEl){
    // do some fancy calculation here based on the small breakpoint...
    if (window.innerWidth < 576){
      return 'top';
    } else {
      return 'left';
    }

  }
}

popover-demo-show-hide.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-popover-demo-show-hide',
  template: `
    <p>
      <button class="btn btn-primary"
        nzbPopover
        #popoverInstance="nzbPopover"
        title="Show/Hide/Toggle Example"
        data-placement="top"
        data-content="This popover was shown programmatically."
        data-trigger="manual">Manually Triggered Popover</button>
    </p>
    <p>
      <button class="btn btn-secondary btn-sm"
      [disabled]="popoverInstance.shown"
      (click)="popoverInstance.show()">show()</button>
      <button class="btn btn-secondary btn-sm"
      [disabled]="popoverInstance.hidden"
      (click)="popoverInstance.hide()">hide()</button>
      <button class="btn btn-secondary btn-sm"
      (click)="popoverInstance.toggle()">toggle()</button>
    </p>
  `,
})
export class PopoverDemoShowHideComponent  {}

popover-demo-templates.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';

@Component({
  selector: 'app-popover-demo-templates',
  template: `
  <!-- templates example -->
  <p>
    <button class="btn btn-primary"
      nzbPopover
      [nzbPopoverTitle]="titleTemplate"
      [nzbPopoverContent]="contentTemplate"
      #popoverInstance="nzbPopover">Fancy Popover from Template</button>
  </p>
  <ng-template #titleTemplate >
    <div class="clearfix">
      <div class="pull-left">
      Fancy Header
      </div>

      <i
      (click)="popoverInstance.hide()"
       type="button"
       class="fa fa-times pull-right"
       aria-label="Close"></i>
    </div>
  </ng-template>
  <ng-template #contentTemplate >
    <i class="fa fa-clock-o fa-spin"></i>
    This popover has been open for
    {{seconds}} second<span *ngIf="seconds!==1">s</span>!
  </ng-template>

  `
})
export class PopoverDemoTemplatesComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: any;
  interval: any = null;
  seconds: number = 0;
  constructor() { }

  ngAfterViewInit() {
    this.popoverInstance.events.subscribe((nativeBsEvent: Event) => {
      switch(nativeBsEvent.type){
        case 'show':
          this.seconds = 0;
          this.interval = setInterval(() => {
            this.seconds++;
          }, 1000);
          break;
        case 'hidden':
          clearInterval(this.interval);
          this.interval = null;
          break;
      }
    })
  }

  ngOnDestroy() {
    if (this.interval){
      clearInterval(this.interval);
    }
  }
}