rebirth-ng-app documentation
  1. Components
  2. PopoverPopupComponent

File

projects/rebirth-ng/src/lib/popover/popover-popup.component.ts

Extends

TooltipPopup

Metadata

host {
}
selector re-popover-popup
templateUrl ./popover-popup.component.html

Index

Properties
Methods
Inputs
HostListeners

Constructor

constructor(elementRef: ElementRef, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef)
Defined in projects/rebirth-ng/src/lib/popover/popover-popup.component.ts:27
Parameters :
Name Type Optional
elementRef ElementRef no
renderer Renderer2 no
changeDetectorRef ChangeDetectorRef no

Inputs

title

Type: string | TemplateRef<any>

Defined in projects/rebirth-ng/src/lib/popover/popover-popup.component.ts:27
content

Type: string | TemplateRef<any>

Inherited from TooltipPopup
Defined in TooltipPopup:8
context

Type: any

Inherited from TooltipPopup
Defined in TooltipPopup:9
cssClass

Type: string

Inherited from TooltipPopup
Defined in TooltipPopup:10
placement

Type: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right"

Default value: 'top'

Inherited from TooltipPopup
Defined in TooltipPopup:7

HostListeners

click
Arguments : '$event'
click($event: Event)
Inherited from TooltipPopup
Defined in TooltipPopup:18

Methods

afterVisibilityAnimation
afterVisibilityAnimation(e: AnimationEvent)
Inherited from TooltipPopup
Defined in TooltipPopup:45
Parameters :
Name Type Optional
e AnimationEvent no
Returns : void
hide
hide()
Inherited from TooltipPopup
Defined in TooltipPopup:35
Returns : void
isTemplateRef
isTemplateRef(obj: )
Inherited from TooltipPopup
Defined in TooltipPopup:52
Parameters :
Name Optional
obj no
Returns : boolean
show
show()
Inherited from TooltipPopup
Defined in TooltipPopup:22
Returns : void

Properties

Static ACTIVE_CLASS
ACTIVE_CLASS: string
Type : string
Default value : 'in'
Inherited from TooltipPopup
Defined in TooltipPopup:6
animateState
animateState: string
Type : string
Default value : 'initial'
Inherited from TooltipPopup
Defined in TooltipPopup:12
isOpen
isOpen: boolean
Type : boolean
Inherited from TooltipPopup
Defined in TooltipPopup:11
 
import { Component, Renderer2, ElementRef, Input, TemplateRef, ChangeDetectorRef } from '@angular/core';
import { TooltipPopup } from '../tooltip/tooltip-popup';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 're-popover-popup',
  templateUrl: './popover-popup.component.html',
  host: {
    '[class]': '"popover fade  " + placement',
    'style': 'display:none;',
    'role': 'tooltip',
    '[@state]': 'animateState',
    '(@state.done)': 'afterVisibilityAnimation($event)'
  },
  animations: [
    trigger('state', [
      state('void', style({ transform: 'scale(0)' })),
      state('initial', style({ transform: 'scale(0)' })),
      state('visible', style({ transform: 'scale(1)' })),
      state('hidden', style({ transform: 'scale(0)' })),
      transition('* => visible', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
      transition('* => hidden', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
    ])
  ]
})
export class PopoverPopupComponent extends TooltipPopup {
  @Input() title: string | TemplateRef<any>;

  constructor(elementRef: ElementRef, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef) {
    super(elementRef, renderer, changeDetectorRef);
  }
}

<div class="arrow"></div>
<h3 class="popover-title" *ngIf="title">
  <span *ngIf="!isTemplateRef(title)" [innerHTML]="title"></span>
  <ng-template *ngIf="isTemplateRef(title)" [ngTemplateOutlet]="title"
               [ngTemplateOutletContext]="{ $implicit: context }"></ng-template>
</h3>
<div class="popover-content">
  <span *ngIf="!isTemplateRef(content)" [innerHTML]="content"></span>
  <ng-template *ngIf="isTemplateRef(content)" [ngTemplateOutlet]="content"
               [ngTemplateOutletContext]="{ $implicit: context }"></ng-template>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""