Can Paper-Dialog be Used with AngularDart

Issue

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>

Solution

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

Answered By – curt

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *