Is there something in Polymer to do a switch statement in markup?
I have this component I want to build, and it could have a ton of "IFs" to simply display some code. I was wondering if Polymer has something like Angular's ng-switch?
Example:
<div ng-switch="selection">
<div ng-switch-when="settings">Settings Div</div>
<div ng-switch-when="home">Home Span</div>
<div ng-switch-default>default</div>
</div>
In Polymer you only have `
<template if="{{selection == 'settings'}}">....</template>
<template if="{{selection == 'home'}}">....</template>
<template if="{{!(selection == 'settings' && selection == 'home')}}">....</template>
which is obviously not as terse as ng-switch.
In Polymer 0.8 <template if...> and <template repeat...> are built as a custom element. The same can be done for switch.
Related
I am dynamically clearing the errors of my reactive form like:
this.courseForm.setErrors(null);
But the errors are still displayed in my template:
<form [formGroup]="courseForm" autocomplete="off">
<div class="alert-group" *ngIf="submitted && formGroup.errors?.coursedates">
<div *ngFor="let err of formGroup.errors?.coursedates?.value" role="alert" class="error">
{{err}}
</div>
</div>
</form>
Is there a way to clear formgroup errors in template as well?
thanks
Errors for each control doesn't populate for formgroup errors. So clearing formgroup errors doesn't remove the errors from each of its form-controls.
We need to setErrors(null) for each control inside formgroup. Here is how we do it.
Object.keys(this.courseForm.controls).forEach(key => {
this.form.get(key).setErrors(null);
});
Make sure to mark it as answer if the solution fixes your issue.
I have dom-repeat element and listing some items, (height:350px cartoons). I can give unique id while rendering the items. Everything is working perfectly. I wonder, How to access with a link, any item in dom-repeat, that I know the id. something like jobijoy.com/dashboard#-KwxUEjy2vl_XPkOXo3j to able to access directly to the item.
EDIT : jobijoy.com/dashboard#-KwxUEjy2vl_XPkOXo3j does not work.
<template id="document" is="dom-repeat" items="{{qdashboard}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
<div class="liste" id="{{item.key}}"> // id="-KwxUEjy2vl_XPkOXo3j"
...
</div>
</template>
Not: jobijoy.com is live and can check there how its look like)
You can wrap the div you are using with an anchor and set the href to the required url.
If the id of the item you want is in the 'key' property you can use:
<template id="document" is="dom-repeat" items="{{qdashboard}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
<a href="jobijoy.com/dashboard#{{item.key}}">
<div class="liste" id="{{item.key}}"> // id="-KwxUEjy2vl_XPkOXo3j"
...
</div>
</a>
</template>
Feels like a dumb question but I do not get it. How can I do fast string concatenation in Angular 2 Dart templates?
I have a seperate html file for my component lets say my_component.html:
Works:
....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...
Works:
....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...
Does not work:
....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...
Does not work:
....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...
Have tried to find an answer in the docs here (https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators) but no luck.
Of course I could use *ngIf on every element which I output conditionally but is there a way for simple string concatenation?
The best way is to declare a getter inside your Component controller that does the concatenation for you, you will get dart syntax support and the html template will looks cleaner.
String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";
<div id="abc">
{{myConcatenation}}
</div>
The last two examples can be made to work easily:
<div id="abc">
<br/>{{order.pickupPlace.email}}
</div>
And:
<div id="abc">
{{order.pickupPlace.name}} {{order.pickupPlace.email}}
</div>
Angular handles this pretty well. If you need some more complicated logic you can move it to the Dart code (but you cannot use HTML there easily).
If you find creating lot of weird logic consider creating more smaller components that can handle this for you.
I’ll do some work after a conditional template is instantiated.
Like this:
<polymer-element name="xyz-test">
<template>
<template if="{{xyz}}">
<div class="main">
<div class="sub1"> </div>
<div class="sub2"> </div>
</div>
</template>
</template>
<script type="application/dart" src="my_test.dart"></script>
</polymer-element>
.
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('xyz-test"')
class XyzText extends PolymerElement {
// After the Conditional Templates are created,
// I wish to work with the Elements in them.
DocumentFragment instanceTemplate(Element template) {
// Is not working for Conditional Templates
}
#override
Node shadowFromTemplate(Element template) {
// Is not working for Conditional Templates
}
}
Perhaps somebody can give me any Idea.
Thank you very much in advance.
You should be able to call a method (or getter) on your XyzTest class.
class="{{getClass()}}"
I have the following html:
<h3 class="accordion">My Accordion</h3>
<ul class="accordion">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
And I've mocked up the behavior I want by doing the following:
$('h3.accordion').click(function() {
$('h3.accordion+ul').toggle('slow');
});
But I'd like to style it like the Theme Switcher widget found at Admintasia.
Admintasia uses classes like: ui-widget ui-widget-content ui-helper-clearfix ui-corner-all, ui-widget-header.
Q: Is there documentation on these widget classes, or am I to read the code?
A list of classes jQuery UI uses and what they're for can be found here:
http://jqueryui.pbworks.com/jQuery-UI-CSS-Framework