Attributes¶

The dj-angles approach is shown first and then the equivalent Django Template Language is second.

`if`¶

<div dj-if="True">...</div>

{% if True %}<div>...</div>{% endif %}

<div dj-if="some_list.0">
  if
</div>
<div dj-elif="some_list.1">
  elif
</div>

{% if some_list.0 %}
<div>
  if
</div>
{% elif some_list.1 %}
<div>
  elif
</div>
{% endif %}

<div dj-if="some_variable == 1">
  if
</div>
<div dj-elif="some_variable == 2">
  elif
</div>
<div dj-else>
  else
</div>

{% if some_variable == 1 %}
<div>
  if
</div>
{% elif some_variable == 2 %}
<div>
  elif
</div>
{% else %}
<div>
  else
</div>
{% endif %}

<li dj-for="i in items">{{ i }}</li>

{% for i in items %}<li>{{ i }}</li>{% endfor %}

Self-closing tags are automatically paired so the loop has an element to render:

<li dj-for="i in items" dj-value="i" />

{% for i in items %}<li>{{ i }}</li>{% endfor %}

Nested loops work as expected:

<tr dj-for="row in rows">
  <td dj-for="cell in row">{{ cell }}</td>
</tr>

{% for row in rows %}<tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>{% endfor %}

Django’s forloop variables (forloop.counter, forloop.first, etc.) work without any special handling:

<li dj-for="row in rows" dj-value="forloop.counter"></li>

{% for row in rows %}<li>{{ forloop.counter }}</li>{% endfor %}

Use a sibling element with dj-empty to render content when the loop has no items — equivalent to Django’s {% empty %}:

<li dj-for="i in items">{{ i }}</li>
<li dj-empty>No items.</li>

{% for i in items %}<li>{{ i }}</li>{% empty %}<li>No items.</li>{% endfor %}

An explicit dj-endfor on the closing tag can be used instead of relying on automatic {% endfor %} insertion:

<li dj-for="i in items">{{ i }}</li dj-endfor>

{% for i in items %}<li>{{ i }}</li>{% endfor %}

<div dj-value="request.user"></div>

<div>{{ request.user }}</div>

dj-value replaces the element’s inner content with the value wrapped in {{ }}. It can be combined with dj-if to conditionally render a value:

<div dj-if="is_authenticated" dj-value="request.user"></div>

{% if is_authenticated %}<div>{{ request.user }}</div>{% endif %}

Filters and expressions are passed through as-is:

<div dj-value="user.name|upper"></div>

<div>{{ user.name|upper }}</div>

Void and self-closing tags are turned into paired tags so the value has a place to render:

<img dj-value="avatar.url" />

<img>{{ avatar.url }}</img>