Back

Attributes

for (Repeat content)

A for loop repeats its content for each object in the collection.

Repeat the content

<ul class="books" for="book of this.books"> <li class="book">{book}</li> </ul>
  • You can access the current index under book_index

Result

Clean HTML output

<ul class="books"> <li class="book">First Book</li> <li class="book">Second Book</li> <li class="book">Third Book</li> </ul>
  • The Hunger Games (Suzanne Collins)
  • Illuminati (Dan Brown)
  • Harry Potter (Joanne K. Rowling)

if (Condition)

Here we set a static string and a javascript array

<div if="this.active.value == '1'"> <loader></loader> </div> <p>Show Loader:</p> <dropdown element="active" (change)="this.update('this.active.value')"> <!-- event --> <options array=""> <option name="Yes" value="1"></option> <option name="No" value="0"></option> </options> </dropdown>

Result

Show Loader:

model (Bind a variable)

Here we set a static string and a javascript array

Bind a variable

<p>{this.welcome}</p> <input model="this.welcome">

Result

Hi, how are you today?

element (Reference HTML element)

Save the element reference to your tag, so you can access it later in your tag. You can save references to browser elements, but also custom tags.

Access HTML elements with this.xyz (JavaScript tab)

class MyTag extends Tag { reset() { this.firstname.value = ''; // access } }

Use the element-attribute to be able to access it with JS (HTML tab)

<div> <input type="text" element="firstname"> <!-- save the reference --> <button (click)="this.reset()">Reset</button> </div>

Result

link

Router link:

<a link="/page/rc.documentation.router">Router</a>

Result

Custom Attributes

You can register your custom attributes.

  • render( node, value )
    The render method will be called during the render and when the value changes.

class MyColor extends Attribute { render( node, value ) { node.style.color = value } } Attribute.registerAttribute('mycolor', MyColor);

Use your custom attribute:

<div mycolor="blue">Hi! How are you today?</div>

Result

Hi! How are you today?