Template variables

These variables are available inside a component's template via the component_vars object (e.g. {{ component_vars.args }}). They are the fields of ComponentVars.

args

args: Any

The args argument as passed to Component.get_template_data().

This is the same Component.args that's available on the component instance.

If you defined the Component.Args class, then the args property will return an instance of that class.

Otherwise, args will be a plain list.

Example

With Args class:

from django_components import Component, register

@register("table")
class Table(Component):
    class Args:
        page: int
        per_page: int

    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.args.page }}</p>
            <p>Per page: {{ component_vars.args.per_page }}</p>
        </div>
    '''

Without Args class:

from django_components import Component, register

@register("table")
class Table(Component):
    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.args.0 }}</p>
            <p>Per page: {{ component_vars.args.1 }}</p>
        </div>
    '''

kwargs

kwargs: Any

The kwargs argument as passed to Component.get_template_data().

This is the same Component.kwargs that's available on the component instance.

If you defined the Component.Kwargs class, then the kwargs property will return an instance of that class.

Otherwise, kwargs will be a plain dict.

Example

With Kwargs class:

from django_components import Component, register

@register("table")
class Table(Component):
    class Kwargs:
        page: int
        per_page: int

    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.kwargs.page }}</p>
            <p>Per page: {{ component_vars.kwargs.per_page }}</p>
        </div>
    '''

Without Kwargs class:

from django_components import Component, register

@register("table")
class Table(Component):
    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.kwargs.page }}</p>
            <p>Per page: {{ component_vars.kwargs.per_page }}</p>
        </div>
    '''

slots

slots: Any

The slots argument as passed to Component.get_template_data().

This is the same Component.slots that's available on the component instance.

If you defined the Component.Slots class, then the slots property will return an instance of that class.

Otherwise, slots will be a plain dict.

Example

With Slots class:

from django_components import Component, SlotInput, register

@register("table")
class Table(Component):
    class Slots:
        footer: SlotInput

    template = '''
        <div>
            {% component "pagination" %}
                {% fill "footer" body=component_vars.slots.footer / %}
            {% endcomponent %}
        </div>
    '''

Without Slots class:

from django_components import Component, SlotInput, register

@register("table")
class Table(Component):
    template = '''
        <div>
            {% component "pagination" %}
                {% fill "footer" body=component_vars.slots.footer / %}
            {% endcomponent %}
        </div>
    '''

is_filled

is_filled: dict[str, bool]

Deprecated. Will be removed in v1. Use component_vars.slots instead. Note that component_vars.slots no longer escapes the slot names.

Dictonary describing which component slots are filled (True) or are not (False).

New in version 0.70

Use as {{ component_vars.is_filled }}

Example

{# Render wrapping HTML only if the slot is defined #}
{% if component_vars.is_filled.my_slot %}
    <div class="slot-wrapper">
        {% slot "my_slot" / %}
    </div>
{% endif %}

This is equivalent to checking if a given key is among the slot fills:

class MyTable(Component):
    def get_template_data(self, args, kwargs, slots, context):
        return {
            "my_slot_filled": "my_slot" in slots
        }