1

Can Polymer's paper-dialog be used with Angular2 Dart? The only discussion I could find was a question here.

I tried incorporating the code into my angular component. It didn't like $['dialogArtist'] on the dialog open. I then create a new class

class ArtistDialog extends PolymerElement {...

The $['dialogArtist] worked there. Then I had problems with form data. It kept looking for it in the component and not the dialog. The dialog html is in the same file as the component html so that may have something to do with it. When I commented out the form. It complained about a missing intializer for the dialog class. Are there any examples of opening a Polymer paper-dialog from a Angular2 Dart component?

I think all I need to know is what I need to put in the component to open a dialog and get data from it. I presume the example in the link above is good one for a dialog class. Also where does the dialog html go?

Pertinent parts of my angular component:

@Component(selector: 'my-artists',
templateUrl: 'artists_component.html',
//encapsulation: ViewEncapsulation.Native,  // added for polymer
styleUrls: const['artist.css']
)

class ArtistsComponent implements OnInit {
  ...
  ArtistDialog editDialog;

  void ngOnInit() {
    getArtists();
    editDialog = new ArtistDialog.created();
  }

  void onEditArtist() {
    editArtist = selectedArtist;
    editDialog.open;
  }

My polymer component:

//@CustomTag('dialogArtist'); //uncomment this cause and error
class ArtistDialog extends PolymerElement {

  String birth_year;

  ArtistDialog.created() : super.created();
  //@observable int selected = 0; // uncommenting this causes and error

  void open() {
    $['dialogArtist'] as PaperDialog..open();
  }
}

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Jazz Cat</title>
<script>
  window.Polymer = window.Polymer || {};
  window.Polymer.dom = 'shadow';
</script>

<!-- For testing using pub serve directly use: -->
<base href="/">
<!-- For testing in WebStorm use: -->
<!-- <base href="/dart/web/"> -->

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">
<link rel="import" href="packages/polymer_elements/paper_header_panel.html">
<link rel="import" href="packages/polymer_elements/paper_toolbar.html">
<link rel="import" href="packages/polymer_elements/paper_menu.html">
<link rel="import" href="packages/polymer_elements/paper_item.html">
<link rel="import" href="packages/polymer_elements/paper_menu_button.html">
<link rel="import" href="packages/polymer_elements/paper_input.html">
<link rel="import" href="packages/polymer_elements/paper_dialog.html">
<link rel="import" href="packages/polymer_elements/iron_list.html">
<link href="master.css" rel="stylesheet" type="text/css" />

<style is="custom-style">

This is my html for the diaglog box. It's in the same file as the component html.

<polymer-element name="dialogArtist">
  <paper-dialog id="dialog">
    <p>This is a dialog.</p>
  </paper-dialog>
</polymer-element>
Community
  • 1
  • 1
curt
  • 4,422
  • 3
  • 42
  • 61
  • Why do you have `@ViewChild(...)` in the code block of the Polymer element? Did you enable shadow DOM and load full polyfills? – Günter Zöchbauer Aug 23 '16 at 05:00
  • The ViewChilds are for a form that I want to put in the dialog. The form worked fine when it was in the component html. I'm guessing that I have it enabled. I don't know about full polyfills. The new ArtistDialog.created() doesn't work because created can't be called outside of custom element creation. If I add a constructor, it gives and error about Polymer not having a constructor. I'm just guessing that I need a new here anyway. – curt Aug 23 '16 at 06:12
  • See `index.html` in http://plnkr.co/edit/kMuyWiNfDwrLSSc3JGDx?p=preview (webcomponentsjs` script tag and the inline script to enable full shadow DOM. It's the same for Dart (except you can load the script from the polymer package path instead). See also https://www.polymer-project.org/1.0/docs/devguide/settings and this excellent tutorial https://dart.academy/dart-angular-2-and-polymer-together/ – Günter Zöchbauer Aug 23 '16 at 06:17
  • I added my index.html. I'm using Dartium for testing. This project is based on the tutorial and worked fine with a number of other Polymer elements. I'm just guessing how a dialog would work. I web search didn't turn up any examples. I'm beginning to feel like you and I are the only people doing this work. – curt Aug 23 '16 at 17:18
  • I still don't get why you have `@ViewChild(...)` in the the same file as the code of the polymer element (ArtistDialog). `@ViewChild()` only works from within an Angular component. – Günter Zöchbauer Aug 23 '16 at 17:28
  • At this point, they serve no purpose whatsoever. I put them in when the form was in the component based up an example. Commenting them out has no effect. At least now, I know I don't need them in the dialog when I put the form back. At this point, I error out on a null pointer to editDialog. Trying to do a new on ArtistDialog doesn't work. – curt Aug 23 '16 at 20:45
  • Just realized I was missing the polymer-element tags. I've added them as shown above, but I haven't tested yet. – curt Aug 23 '16 at 20:57
  • It didn't work. I'm going to try a different approach. – curt Aug 24 '16 at 01:35
  • I got the dialog to appear. I'll post an answer once I get it to do something functional. – curt Aug 24 '16 at 02:26

1 Answers1

1

It turned out to be easier than I thought. It works like many other paper-elements. In my angular component dart file I have:

import 'package:polymer_elements/paper_input.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog.dart';
...
class ArtistsComponent implements OnInit {
...
 PaperDialog artistDialog;
 // Dialog fields
 String birth_year;
....
 void ngOnInit() {
    getArtists();
    artistDialog = querySelector('#artistDialog');
...
  void onEditArtist() {
    birth_year = selectedArtist.birth_year;
    artistDialog.open();
  }

  void onDialogSubmit([bool enter = false]) {
    selectedArtist.birth_year = birth_year;
  }
  void onDialogCancel() {
    print("canceled");
  }

In my component templateUrl file I have:

...
<paper-item (click)="onEditArtist()">Edit</paper-item>

That is how I invoke the dialog to give you an idea of one way to do it. In the same file at the bottom outside of the rest of the html:

<paper-dialog id="artistDialog">
  <form #artistForm="ngForm">
    <h3>Edit Artist</h3>
    <paper-input #artistInput type="text" ngDefaultControl
                                [(ngModel)]="birth_year" ngControl="artistInputCtrl"
                                label="Birth Year" required allowed-pattern="[0-9]" maxlength="4"
                                (keyup.enter)="onDialogSubmit(true)">
      {{ birth_year }}
    </paper-input>
    <div>
      <paper-button (click)="onDialogCancel()" raised dialog-dismiss>Cancel</paper-button>
      <paper-button (click)="onDialogSubmit()" raised dialog-confirm autofocus>Accept</paper-button>
    </div>
  </form>
</paper-dialog>

This is my first form in Polymer and my first dialog so this may not be the cleanest way to do it. Also, I've only tested in Dartium and Chrome. The code for the form is from this article

curt
  • 4,422
  • 3
  • 42
  • 61