• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Working With the Children Decorator in Aurelia 2

Aurelia 2 · September 28, 2021

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.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How to Fast Launch Microsoft Flight Simulator 2020 (decrease game loading time)
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Perfectly Smoked Steak On A Charcoal BBQ Using Indirect Heat

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz