I added the below polyfills. However no luck on safari, it works fine on chrome.
The angular material form and animation works if I delete *ngfor from HTML
I am using angular 4.2.4
I read some posts where the advise is given to add the following:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?
features=Intl.~locale.en"></script>
Before the other libraries, however as I am quite new to angular and MEAN NODE js I am not sure where I am supposed to add this line.
I added it on the HTML page (this didn't do anything, didn't give any errors nor did it solve the issue)
I will try it with a seprate js file, however I am afraid this is not going to work. Any ideas?
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'web-animations-js';
import 'intl';
import 'intl/locale-data/jsonp/en';
my HTML file
<mat-form-field *ngFor="let key of arrayOfKeys"
class="halffull-width-
input">
<input id ="coin"
class="form-control"
matInput placeholder="Write Coin Name"
[(ngModel)]="key.coin"
formControlName="coin" required>
Related
I am at: https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
and decided to create a dialog by doing something like:
<dom-module id="sample-dialog">
<template>
<paper-dialog-impl>
<h2>{{title}}</h2>
<div>
<content></content>
</div>
<div class="buttons">
<paper-button dialog-dismiss on-tap="cancel">Cancel</paper-button>
<paper-button dialog-confirm on-tap="submit">Accept</paper-button>
</div>
</paper-dialog-impl>
</template>
</dom-module>
it renders to the screen, but has no styles. I read: paper-dialog-shared-styles.html provide styles for a header, content area, and an action area for buttons but i don't know how to implement it. I was trying to use a link tag but that wasn't working. Specifically I tried inside the template: <link rel="import" href="polymer_elements/src/paper-dialog-behavior/paper-dialog-shared-styles.html" />
In my dart file, i imported these too, thinking it woudl be resolved.
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog_behavior.dart';
Edit: Right now, I have the class Implementation extending Polymer Element, which makes sense. I just wasnt sure if it needed to extend something else as well.
Edit 2: Updated this to be a standard paper-dialog instead, except now it wont render the item at all, even after updating the import in the dart backend.
After updating it to a paper dialog, there is a property that needs to be applied to the paper-dialog for it to be visible or not. that is the opened attribute.
Adding that to the inner paper-dialog makes it visible.
So, therefore, passing it down to the paper dialog by way of an outer opened, will make it toggle open/closed.
//in the sample-dialog dart
#property bool opened = false;
in the markup:
<paper-dialog opened$="{{opened}}" ...>
then now i can say either:
<sample-dialog></sample-dialog>
<sample-dialog opened></sample-dialog>
I'm using polymer style-modules to implement theming. To do this I have packaged all the styles in a dom-module, like this:
<dom-module id='my-theme'>
<template>
<style>
:root {
--primary-text-color: yellow;
... more styles ..
}
...
paper-button.important {
--paper-button-color: red;
... more styles ..
}
</style>
</template>
</dom-module>
Also made a .dart package to be imported in index.dart:
#HtmlImport("my-style.html")
library my_style.lib;
import 'package:web_components/web_components.dart' show HtmlImport;
Then in the index.html I will use it this way :
<link type='import' href='packages/my-style.html'>
<style is='custom-style' include='my-theme'></style>
Everything is working (don't care possible typos in the example above) even though I had to import the module with an html import and not in the usual dart way with a package import to make it work.
The Question is : this is working with a fixed theme. Is there a way to switch theme dynamically ? i.e. doings something like :
<style is='custom-style' include='[[selectedTheme]]'></style>
I was wondering if this is the best way to import html dependancies in polymer-dart.
I want to use my-other-element inside my-element this way:
my-element.dart:
#HtmlImport('my-element.html')
library mypackage.my_element;
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
// HERE I import the dart file
import 'my-other-element.dart'
#PolymerRegister('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created();
}
my-element.html:
<!DOCTYPE html>
//HERE I import the element html
<link rel="import" href="my-other-element.html">
<dom-module id="my-element">
<template>
<my-other-element></my-other-element>
</template>
<script type="application/dart" src="my-element.dart"></script>
</dom-module>
Using #HtmlImport(...) and then only import using Darts import ...; directive is the recommended way.
Also:
Using - (dash) in Dart file names is discouraged. Prefer _ (underline)
You also don't need
<script type="application/dart" src="my-element.dart"></script>
in your <dom-module> if you import like suggested above.
After doing a Pub Get and Pub Upgrade my custom-PolymerElements don't work anymore. It seems to me that the
<script type="application/dart" src="view.dart"></script>
is interpreted incorrectly. In my index.html_bootstrap.dart it is listed as: import 'dialog%5Cview.dart' as smoke_1; The "%5C" ( \ ) should be a slash ( / ) anyway and I'm pretty sure that it shouldn't be escaped. I tried it with the dart stable (1.8.5) and dev (1.9.0) versions for 64bit Windows.
I already tried to revert my package to their previous version but since I hadn't constraint them in my pubspec file I have no way to determine which versions worked before my changes. In another dart polymer project I'm working on I use the same setup (extended polymer elements) and it still works . The equivalent position in the index.html_bootstrap.dart reads: import 'dialog/view.dart' as smoke_1;
(edit) some (shortened) code:
/web/dialog/error/view.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<polymer-element name="error-view">
<template>
<style>
paper-dialog {
margin-top: 20px;
height: 400px;
width: 600px; }
</style>
<paper-dialog id="extendedNode" heading="{{dialogtitle}}" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true>
<content>
<core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
<section id="0">
<p cross-fade>A system error occured while connecting with the server.</p>
<br>
<p cross-fade>Error message: {{dialogtext}}</p>
</section>
</core-animated-pages>
</content>
</paper-dialog>
</template>
<script type="application/dart" src="view.dart"></script>
</polymer-element>
/web/dialog/error/view.dart
import 'package:polymer/polymer.dart';
import '../view.dart'; // <- the base class 'DialogView'
#CustomTag('error-view')
class ErrorView extends DialogView{
ErrorView.created() : super.created(){
componentName = 'error-view';
this.dialogtitle = 'System Error';
}
}
/web/dialog/view.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:intl/intl.dart';
import '../locale/de.dart' as de;
class DialogView extends PolymerElement {
#observable int page;
//there are a lot of helper functions and variables in here
}
I use many pairs of those components extending the base component (which has no view.html but only a view.dart that allows me to hold and manipulate different dialogs within one List. This worked perfectly fine until I did the Pub Get / Upgrade and was not solved by repairing the cache. A project using a similar structure still works fine.
This resolves it for now:
pubspec.yaml
code_transformers: '<= 0.2.5'
I've created my library like so:
// web/com/jessewarden/workoutlogger/workoutloggerlib.dart
library workoutloggerlib;
import 'dart:async';
import 'dart:html';
import 'package:polymer/polymer.dart';
part "types/WorkoutTypes.dart";
part "vo/Exercise.dart";
part "vo/Set.dart";
part "vo/Workout.dart";
part "views/SetView.dart";
part "views/SetView.html";
My SetView.dart:
part of workoutloggerlib;
#CustomTag('set-view')
class SetView extends PolymerElement
{
#published
Set set;
SetView.created() : super.created();
}
And it's associated HTML:
<polymer-element name="set-vew" attributes="count">
<template>
<div>
<h3>{{set.name}}</h3>
<span class="label label-primary">Goal</span>
<div class="input-group">
<span class="input-group-addon">Reps</span>
<input type="text" class="form-control disabled" value={{set.goalReps}}>
</div>
<div class="input-group">
<span class="input-group-addon">Weight</span>
<input type="text" class="form-control" value="{{set.goalWeight}}">
<span class="input-group-addon">lbs</span>
</div>
</div>
</template>
<script type="application/dart" src="SetView.dart"></script>
</polymer-element>
However, while she compiles, upon running I get:
'http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart': error: line 1 pos 6: url expected
part of workoutloggerlib;
^: http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart
Internal error: 'http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart': error: line 1 pos 6: url expected
part of workoutloggerlib;
^
Internal error: 'http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart': error: line 1 pos 6: url expected
part of workoutloggerlib;
^
If I manually import classes for each and every file, abandoning my library, it works fine. Obviously this isn't desired as the code isn't manageable that way, has tighter dependencies, and is harder to refactor.
I'm not sure if this is still valid but I read that it is good practice to make each component it's own library (library is not package - you can have as many libraries in a package).
I do it always an I never had a problem with it.
You may take a look at to see some examples
polymer_elements
polymer_ui_elements
Worth mentioning is, that we have to use a separate package where we symlink the example pages to.
It's currently not possible to build pages in examples directory (only web) and it is not possible to have pages in web and elements in lib (within the same package) because the necessary polymer transformer settings conflict).
Either you have elements in web too or you have elements in lib and pages in their own packages in web and import the package with the elements in lib.
You have a typo - may be just in the code you pasted - but anyway
<!-- should be name="set-view" -->
<polymer-element name="set-vew" attributes="count">