In Aurelia 1, we had the children decorator which allows you to query HTML elements inside of a component and then access them. In Aurelia 2, we have a children decorator, but it works differently.
We are going to assume for this article that we have a bunch of custom elements being rendered called product-block which represent detail blocks for products in our custom element view
In Aurelia 1
@children('product-block') productBlocks;Simple and effective.
In Aurelia 2
@children({ filter: (e: HTMLElement) => e.tagName === 'PRODUCT-BLOCK' }) productBlocks;In Aurelia 2, we have to pass in a function with a filter property which we can then pass in a function that filters out the elements we need. This is akin to a Array.filter we loop through all elements inside of the component, check if the tagName value equals that of what we want to query and happy days.
The case is also important in this instance. Tag names are capitalised as per the spec, so when we query for our custom element, we have to write its tag name in capital letters.
It is possible that in Aurelia 2, the simple use case like Aurelia 1 will be supported, but until then this is what you can do.
