I have a component nested like the following:
<first-component>
<second-component>
<third-component></third-component>
</second-component>
</first-component>
How do I query select third-component?
In Chrome, document.querySelector('third-component') works, but it does not in Firefox.
Thanks guys :)
If you are in a Polymer definition, you can use this.$$(third-component).
Otherwise you should just set an id on the tag. Then you can use document.querySelector('#id') or this.$.id if using Polymer.
Related
Iam Looking for something similar to the fieldset tag present in html that allows us to group a set of similar/related fields together in a group box-https://www.w3schools.com/tags/tag_fieldset.asp.
Sample Screen Shot of the grouping-
Iam using buefy with vue js and so far i could not find anything similar to the fieldset tag in vue js ?Please help on how can i group a set of b-fields/b-inputs together.
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I got an error when i put a nested ng-show attributes for custom directive,
one attribute in the markup of the directive and the second inside the root element of the directive template.
My real scenario are complex so i will simplify it to this example:
Suppose i have my-custom-directive below which already contains ng-show:
<my-custom-directive ng-show="someValue >= 5"></my-custom-directive>
And then the template of 'my-custom-directive' look like this:
<div ng-show="options != null">My Custom Directive</div>
Those multiple ng-show together cause an error.
if i remove one of them or move the inner ng-show at least one level deeper in it's dom tree the error gone (it's happen when it's location is on the root template element).
this error tested on angular v1.4.8.
Is this angular bug? or there is a reasonable explanation for this behavior?
here is the Plunker example:
http://embed.plnkr.co/ZTZVcfc5bfmjPo9t0Isw
Thank you in advance,
Menachem
Because the directive has replace: trueit is trying to merge the two ng-show values together resulting in an error. The simplest solution I believe is to just do replace: false
Or you can inject the value via isolate scope and use a single ng-show value within the directive. I believe this is considered the cleaner solution.
Example: http://plnkr.co/edit/5oc8c1Hrz8N1F2klCio7?p=info
scope: {
someValue: '=someValue'
}
Please refer to this JSBin, basically I would like to create an instance of an element in its parent element scope. Wondering how should I do this?
If possible, is there a declarative way to do this?
Thanks.
PS. Please open the link in Chrome only.
There are several ways to instantiate and element.
Declarative:
<my-element>
JS:
document.createElement('my-element');
Constructor (if one is find):
new MyElement();
See http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#instantiating
I believe you are looking for the constructor (see here) attribute.
You need to include it in your polymer element declaration.
<polymer-element name="p-paper"
attributes="content"
constructor="Paper"
noscript>
And then you can create instances of your element like this -
// How to create an instance of <p-paper> here?
var paper = new Paper();
I'm developing a rails 3.0.9 app, I'm using "accept nested attributes
for" to add dynamically new "child" items to its "parentW. the thing is
every child has the same id (html attribute), and I need every child with its own id,
because I need to make some jquery functions to work with them.
Is there a way to achieve this?
Tanks for your help
Adding an new element to a Nested Form was handled brilliantly in a Railscast. In it, Ryan uses javascript to replace the ID attribute with something more meaningful.
Hope this helps.