I have imported the paper-dialog from bower, but I am facing an issue with showing 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();
}
}
}
This code is throwing an error:
The open() function is not recognized as an HTMLelement function.
I am looking for a solution to this issue. Any help or guidance on how to call a polymer element's method in TypeScript and Angular 2 would be greatly appreciated. I'm using angular CLI for project creation and vaadin for incorporating polymer elements into my application. While most elements work without errors, calling their methods in TypeScript seems to be causing issues that I cannot resolve. Thank you in advance for your help.