Separate

Overview

Separates any number of given values with a custom separator while automatically ignoring content that did not render anything visible to the output, as to not inject unnecessary separators.

<separate

  value: markup

  ↪ Values to separate; empty values are ignored

  separator: markup

  ↪ Separator inserted in-between values

/>

Examples

Separate Conditionally Rendered Values

In some cases, one needs to separate multiple values which are themselves conditionally rendered, thereby making it become unreadable to implement all separator-permutations manually. Since the tag automatically ignores empty values, said values can be combined with containers and if-conditions, making for a highly maintainable and flexible solution.

Code-Blocks are only available within the browser

Separate Dynamic Content

In case that there already exists a list of values to separate, one can simply pass said list to the tag by making use of attribute-binding in combination with the spread-operator, as follows.

Code-Blocks are only available within the browser

Alternatively, if content-detection is of no concern or even unwanted, one could also employ a for-loop.

Code-Blocks are only available within the browser