by Before Semicolon

Inject HTML

The inject tag is a powerful tag that when used inside partial files works as placeholder much like the HTML slot tag.

Inject any markup

Simply adding a inject tag inside a partial file means that any content you put inside the inject tag will be injected at that spot.

<!-- _header.html -->
<header>
	<h1>{title}</h1>
	<p class="description">{description}</p>
	<inject></inject>
</header>
<!-- project.html -->
<include partial="header" data="{
            title: 'Projects',
            description: 'Welcome to the projects page'
         }">
	<nav>
		<a href="/project-1">Project 1</a>
		<a href="/project-2">Project 2</a>
		<a href="/project-3">Project 3</a>
	</nav>
</include>

The above project template will look like this:

<!-- project.html -->
<header>
	<h1>Projects</h1>
	<p class="description">Welcome to the projects page</p>
	<nav>
		<a href="/project-1">Project 1</a>
		<a href="/project-2">Project 2</a>
		<a href="/project-3">Project 3</a>
	</nav>
</header>

As you can see, any markup you put inside include tag is content to be injected inside the partial if it has an inject tag.

Inject specific markup

You can also be more specific of what type of content must be injected if you specify an id on the inject tag.

Take the following layout template

<!-- _layout.html -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<inject id="style"></inject>
</head>
<body>
	<inject></inject>
	<inject id="script"></inject>
</body>
</html>

When including this template we can specify the part to match the inject tags. That is done by adding the inject-id attribute on the tag you want to match the inject tag id.

<!-- index.html -->
<include partial="layout">
	<link rel="stylesheet" href="normalizer.css" inject-id="style">
	<link rel="stylesheet" href="style.scss" inject-id="style">
	<h1>Welcome!</h1>
	<script src="app.ts" inject-id="script"></script>
</include>

In the include tag content above, we specified all style links to be inject at style inject id, and the script to be injected at script inject id. The remainder unmarked tags will be injected at a inject tag with no id.

Note that you can inject multiple tags into the same inject id placeholder.

The above index.html template will resolve to be:

<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="normalizer.css">
	<link rel="stylesheet" href="style.scss">
</head>
<body>
	<h1>Welcome!</h1>
	<script src="app.ts"></script>
</body>
</html>

Default Content

You can also specify a default content to be used in case the include tag contain no inner content or inner content resolves into an empty string.

<!-- _search-results.html -->
<section class="searh-results">
	<h2>Search results for "{searchTerm}"</h2>
	<inject>
		<p>No Results matched your search</p>
	</inject>
</section>

The above search results partial will show a paragraph tag with "No Results matched your search" paragraph if the include tag resolves to have empty content.

<!-- search.html -->
<include partial="search-results" data="{searchTerm: term}">
	<div #if="results.length" #repeat="results">
		<h3>{$item.title}</h3>
		<p>{$item.description}</p>
	</div>
</include>

Inject markup from variables

Another thing the inject tag can do for you is allow you to inject HTML markup that is stored in a data variable.

You can always use template data binding to inject HTML into your template but if this markup is an HTML+ markup, nothing will compiled.

<!-- blog.html -->
<article>
	<h2>{$data.article.title}</h2>
	{$data.article.body}
</article>

The above example will show the HTML as is without compiling and if the HTML happens to be HTML+ the tags and attributes specific to it will not be compiled

The below example is better if you want the HTML+ markup to be compiled.

<!-- blog.html -->
<article>
	<h2>{$data.article.title}</h2>
	<inject html="$data.article.body"></inject>
</article>