In general there is no need to create template instances yourself. They areautomatically created for you when packaging your Mahalo application. It willalso be linked to its code behind in a .ts file with the same name andlocation.

The content of your template file is standard HTML but you should not useany html, head or body tags. Just define the HTML structure of yourcomponent. For every HTML tag defined Mahalo will later create a componentinstance. Which class and template are used to instantiate that component isdefined with a special tags at top of your template file as explained below.

Outputting computed text

For outputting the evaluated result of an expression you can use the specialoutput tag that start with and ends with }. For example likeseen below.

${ user.points + 100 }

This text will automatically change when the data in your scope changes whichleads to a different result for the used expression.

Including components

To use components inside of each other you have to include them first. Thisis done by the special use tag. Let's assume we have a User componentinside of a subfolder named components. Let's include it an app.mhmlwhich can be found in the web root folder and is our entry template. We addthe following.

<use component="./components/user"/>

To use the component we can define it later in the HTML. The tag name willbe the same as the name of your template or component file without anyextension. Therefore valid file names must also be valid tag names. Thatmeans they should start with a letter followed by any number of: letters,numbers, underscores, hyphens or dots. In our example we would use the below.

<user></user>

If you want to be more specific about which elements to use for a componentyou can provide a selector that will be matched against every element in thetemplate. Let's use our User component for every element with a data-userattribute.

<use component="./components/user" selector="[data-user]"/><div data-user></div>

Including behaviors

Similar to components you can also add a Behavior to components.Or any number of them to be exact. Let's say we want our User componentto use a custom draggable behavior in a subfolder named behaviors.We need to change the top of our app.mhml and add the following.

<use component="./components/user" selector="[data-user]"/><use behavior="./behaviors/draggable" attribute="data-draggable"/><div data-user data-draggable></div>

As you can see we change the attribute to use for our behavior to data-draggable.Otherwise the file name would be used again.

Built-in components and behaviors

Of course there is always an exeption to the rule. Mahalo ships with a fewbuilt-in components and behaviors that are very commonly needed. Thesedon't have to be included with the special use tag. They are alwaysavailable in every template.

You can find an overview on the page of the mahalo module. If you wantto change the default selector/attribute they use you can do so in theconfig.

alias

{ default } from mahalo/template/index