How can I print a field value in node.html.twig?

Question

I want to print a field value in node.html.twig. When I use {{ content.field_test }}, it prints the full HTML markup of the field.

How can I just print the field value?

Answer 1

While you can print the first value of the field without the surrounding div container with {{ content.field_test[0] }}, this is not a recommend way to do it.

The markup you want to change is in the field template. If you don't want for example any div's around the field field-test, then place a field template in the template folder of the theme:

field--field-test.html.twig:

<span{{ attributes }}>
  {%- for item in items -%}
    {{ item.content }}
  {%- endfor -%}
</span>

The benefit you get is that this outputs multi-value fields and that you keep the attributes of the field, which is important if you want the theme to work with core and third-party modules for client side functionality like, for example, quickedit.

Answer 2

This will help:

Twig Field Value : It gives them more control over the output without drilling deep into the render array or using preprocess functions.