angular-material-app documentation
  1. Directives
  2. PopoverDirective

File

src/app/component/popover/popover.directive.ts

Implements

AfterViewInit OnDestroy

Metadata

Providers PopoverService
Selector [stbuiPopover],[popoverTriggerFor]

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(_elementRef: ElementRef, _viewContainerRef: ViewContainerRef, _popoverService: PopoverService)
Defined in src/app/component/popover/popover.directive.ts:49
Parameters :
Name Type Optional
_elementRef ElementRef No
_viewContainerRef ViewContainerRef No
_popoverService PopoverService No

Inputs

cancelText
Type : string
Defined in src/app/component/popover/popover.directive.ts:48
confirmText
Type : string
Defined in src/app/component/popover/popover.directive.ts:47
placement
Type : string
Defined in src/app/component/popover/popover.directive.ts:49
popoverMessage
Type : string
Defined in src/app/component/popover/popover.directive.ts:46
popoverTitle
Type : string
Defined in src/app/component/popover/popover.directive.ts:45
popoverTriggerFor
Defined in src/app/component/popover/popover.directive.ts:33

Methods

Private _checkPopover
_checkPopover()
Defined in src/app/component/popover/popover.directive.ts:81
Returns : void
closePopover
closePopover()
Defined in src/app/component/popover/popover.directive.ts:69
Returns : void
destoryPopover
destoryPopover()
Defined in src/app/component/popover/popover.directive.ts:73
Returns : void
ngAfterViewInit
ngAfterViewInit()
Defined in src/app/component/popover/popover.directive.ts:57
Returns : void
ngOnDestroy
ngOnDestroy()
Defined in src/app/component/popover/popover.directive.ts:61
Returns : void
openPopover
openPopover()
Defined in src/app/component/popover/popover.directive.ts:65
Returns : void
togglePopover
togglePopover()
Defined in src/app/component/popover/popover.directive.ts:77
Returns : void

Properties

Private _attach
Type : PopoverComponent
Defined in src/app/component/popover/popover.directive.ts:31
Private _popoverOpen
Default value : false
Defined in src/app/component/popover/popover.directive.ts:29
Public _popoverService
Type : PopoverService
Defined in src/app/component/popover/popover.directive.ts:54
Private portal
Type : TemplatePortal<any>
Defined in src/app/component/popover/popover.directive.ts:28

Accessors

attach
getattach()
Defined in src/app/component/popover/popover.directive.ts:41
setattach(value)
Defined in src/app/component/popover/popover.directive.ts:33
Parameters :
Name Optional
value No
Returns : void 
import {
  Directive,
  Input,
  ElementRef,
  AfterViewInit,
  OnDestroy,
  ViewContainerRef
} from '@angular/core';
import { TemplatePortal } from '@angular/cdk/portal';
import { PopoverService } from './popover.service';
import { PopoverComponent } from './popover.component';

@Directive({
  selector: '[stbuiPopover],[popoverTriggerFor]',
  host: {
    '(click)': 'togglePopover()'
  },
  providers: [PopoverService],
  exportAs: 'popoverTrigger'
})
export class PopoverDirective implements AfterViewInit, OnDestroy {
  private portal: TemplatePortal<any>;
  private _popoverOpen = false;

  private _attach: PopoverComponent;
  @Input('popoverTriggerFor')
  set attach(value: PopoverComponent) {
    this._attach = value;
    this._popoverService.anchor(
      this.attach,
      this._viewContainerRef,
      this._elementRef
    );
  }
  get attach() {
    return this._attach;
  }

  @Input() popoverTitle: string;
  @Input() popoverMessage: string;
  @Input() confirmText: string;
  @Input() cancelText: string;
  @Input() placement: string;

  constructor(
    private _elementRef: ElementRef,
    private _viewContainerRef: ViewContainerRef,
    public _popoverService: PopoverService
  ) {}

  ngAfterViewInit() {
    this._checkPopover();
  }

  ngOnDestroy() {
    this.destoryPopover();
  }

  openPopover(): void {
    this._popoverService.open();
  }

  closePopover(): void {
    this._popoverService.close();
  }

  destoryPopover(): void {
    this._popoverService.dismiss();
  }

  togglePopover(): void {
    this._popoverOpen ? this.closePopover() : this.openPopover();
  }

  private _checkPopover() {
    if (!this.attach) {
      throw new Error(`
      Example:
        <stbui-popover #popover="stbPopover"></stbui-popover>
        <button [popoverTriggerFor]="popover"></button>
      `);
    }
  }
}
Copy

result-matching ""

    No results matching ""