Template Features#

Template Features avoid using creepy JavaScript for interactions and branches. You can use any of the following:

  • n-if, n-else
  • n-hide, n-show
  • n-on-<event> (see section Events)
  • n-expand

n-if, n-else#

The value will be evaluated and the element using this attribute does or does not render.

<div class="main-header"
     n-if={this.props.title !== 't1'}>
  <span>Any content will not render if container doesn't render</span>

If there is an else-branch it can direct to a slot template. <slot> elements are native web component parts.

<div class="main-header"
     n-if={this.props.title !== 't1'}
  <span>Any content will not render if container doesn't render</span>
<slot name="noShow">
  This is shown instead.

n-hide, n-show#

These attributes work the same as n-if, but just add an inline style display: none (or remove one) if true (n-hide) or false (n-show).


This attribute expands a group of HTML attributes. Imagine an element like this:

<input type="text" placeholder="Name"
       role="search" class="materialinput" id="a1 />

You may need this several times, each with different id. Instead of repeating the whole set of attributes, an expander can be used to add the static parts.

<input n-expand="search" id="a1" />
<input n-expand="search" id="a2" />
<input n-expand="search" id="a3" />

To define the expander shown above you create a class like this:

export class SearchExpander extends Expander {

And yes, these are equal signs in the class. The named 'quoted' properties are only required if the attribute name contains dashes. Finally, add the definition to the global provider:

  components: [...components], // as usual
  expanders: [SearchExpander]

That's it, a lot less to write without the effort to create components. It's just text-replacement before the renderer grabs the content, so no performance impact at runtime. The expander logic does not perform any kebab-pascal conversion as some other tools do (that means, the name myProp does not appear as my-prop automatically).

Quick Expanders#

Quick expanders are even easier, but more for local expanding.

const d = {
  'type': "text";
  'placeholder': "Name";
  'role': "search";
  'class': "materialinput";
<app-button  {...d} />

It's just pure ECMAScript magic, no code from ny@f required.