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


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


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">


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 (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>



Router link:

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


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 ) { = value } } Attribute.registerAttribute('mycolor', MyColor);

Use your custom attribute:

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


Hi! How are you today?