![Published on webcomponents.org](https://www.webcomponents.org/element/aggregator-fn)

![Actions Status](https://github.com/bahrus/aggregator-fn/actions?query=workflow%3ACI)

aggregator-fn

\ (or \ for short) is a non-visual custom element that aggregates properties together using an inline JS expression, and which can act as a "piping" processor between two or more elements.

It is most useful for markup-centric applications, consisting of web components that are not controlled by some state managed component container -- for example a "peer-to-peer" binding framework.

The initial motivator for this component is being able to build url's from a form consisting of input elements -- declaratively.

See form-matter for an alternative.

Syntax:

html

or

html





does the following:



1)  Dynamically attaches properties to the aggregator-fn element for each of the function arguments -- "operation" and "expression" in this case.

2)  Any time any of the property values change, the aggregator function is evaluated (allowing for some debouncing), and the result is stored in the element's value property.  An event, "value-changed" is fired every time the value changes.



aggregator-fn doesn't make much sense standing on its own.  Let's see how we can use it in the markup below, to handle sending a request to the Newton Api Advanced Math microservice.

html



    Operation:

    

    

    

    Expression:





Demo







Post IE/11 Support



Accessing the custom element itself, containing host



In some circumstances, you may need the aggregator function to have access to the context from which it is being called.  To do this, add an argument, "self":

html





You can also reference the host component if it is available.  The host is obtained via self.getRootNode().host.  This makes sense if aggregator-fn/ag-fn is used within a traditional web component that uses Shadow DOM.  If it is used inside a web component that doesn't use shadowDOM, or some other containing DOM element you want to give special access to and call it "host", use property/attribute hostSelector/host-selector.











API Reference



Viewing Your Element



1.  Install node.js

2.  Install git.  Fork or clone this repo.

3.  From a command window, navigate to the folder created in step 2.

4.  Now run:



$ npm run serve





Running Tests



$ npm run test

![Published on webcomponents.org](https://www.webcomponents.org/element/aggregator-fn)

![Actions Status](https://github.com/bahrus/aggregator-fn/actions?query=workflow%3ACI)

aggregator-fn

Syntax:

html

or

html





does the following:



1)  Dynamically attaches properties to the aggregator-fn element for each of the function arguments -- "operation" and "expression" in this case.

2)  Any time any of the property values change, the aggregator function is evaluated (allowing for some debouncing), and the result is stored in the element's value property.  An event, "value-changed" is fired every time the value changes.



aggregator-fn doesn't make much sense standing on its own.  Let's see how we can use it in the markup below, to handle sending a request to the Newton Api Advanced Math microservice.

html



    Operation:

    

    

    

    Expression:





Demo







Post IE/11 Support



Accessing the custom element itself, containing host



In some circumstances, you may need the aggregator function to have access to the context from which it is being called.  To do this, add an argument, "self":

html





You can also reference the host component if it is available.  The host is obtained via self.getRootNode().host.  This makes sense if aggregator-fn/ag-fn is used within a traditional web component that uses Shadow DOM.  If it is used inside a web component that doesn't use shadowDOM, or some other containing DOM element you want to give special access to and call it "host", use property/attribute hostSelector/host-selector.











API Reference



Viewing Your Element



1.  Install node.js

2.  Install git.  Fork or clone this repo.

3.  From a command window, navigate to the folder created in step 2.

4.  Now run:



$ npm run serve





Running Tests



$ npm run test