Angular2 #2 Typescript

by gabriela b

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
<script src="https://requirejs.org/docs/release/2.1.22/minified/require.js"></script>
<script src="https://rawgit.com/FezVrasta/popper.js/master/packages/popper/index.d.ts"></script>
<my-app>test...</my-app>

TypeScript

import {bootstrap} from 'angular2/platform/browser'
import {Component, AfterViewInit, OnDestroy, ElementRef, OnChanges, SimpleChanges,
  ChangeDetectionStrategy
} from 'angular2/core';

@Component({
selector: 'test-popper',
  templateUrl: 'test-popper.component.html',
  styleUrls: ['./test-popper.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
class AppComponent implements AfterViewInit, OnDestroy, OnChanges  { 

  constructor(private el: ElementRef) {
  }

  ngAfterViewInit() {
    this.create();
  }

  create() {
    const refEl = document.getElementById('ref');
    const popEl = document.getElementById('pop');

    this.popper = new Popper(refEl, popEl, {
      hide: {
        enabled: true
      }
    });

  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.target && !changes.target.firstChange ||
    changes.placement && !changes.placement.firstChange) {
      this.destroy();
      this.create();
    }
  }

  ngOnDestroy() {
    this.destroy();
  }

  destroy() {
    if (this.popper) {
      this.popper.destroy();
      this.popper = null;
    }
  }

  onOpen() {
    this.show = true;
  }

  onClose() {
    this.show = false;
  }

}


bootstrap(AppComponent);