Geek Answers Handbook

Using polymer paper dialog box in angular2 typescript application

I am importing paper dialogue from the gazebo. but I cannot show the dialog using the open () method.

app.component.html

<paper-icon-button icon="social:person-outline" data-dialog="dialog" id="sing_in_dialog" (click)="clickHandler()"></paper-icon-button>
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
   <h2>Dialog Title</h2>
   <p>cia deserunt mollit anim id est laborum.</p>
</paper-dialog>

app.component.ts

import { Component,ElementRef, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { PolymerElement } from '@vaadin/angular2-polymer';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  events: ['event: iron-overlay-opened', 'event: iron-overlay-closed'],
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [
ROUTER_DIRECTIVES,
PolymerElement('vaadin-combo-box'),
PolymerElement('paper-button'),
PolymerElement('paper-scroll-header-panel'),
PolymerElement('paper-toolbar'),
PolymerElement('paper-drawer-panel'),
PolymerElement('paper-header-panel'),
PolymerElement('paper-toolbar'),
PolymerElement('iron-icon'),
PolymerElement('paper-icon-button'),
PolymerElement('paper-toolbar'),
PolymerElement('paper-dialog')
]
})
export class AppComponent {

 constructor() {
 }
   title = "title";

 ngOnInit() {
 }

 clickHandler(e) {
  var dialog = document.getElementById('dialog');
  if (dialog) {
    dialog.open();
  }
}
}

he gives an error

that open () is not an HTMLelement function.

what is the error in my code and how do we run the polyemer element method in typescript and angular2. I am using angular cli for the creat project and vaadin for using polymer in my application. paper-scrol-header, paper-drawer and many other elements can be used without errors, but when we need to call the element method in typescript, get errors, and I can not resolve this, and help will be assigned ..

+4
1

clickHandler .

clickHandler(e) {
  var dialog :any = document.getElementById('dialog');
  if (dialog) {
     dialog.open();
}

: html.

+3

More articles:


All Articles