Conditional text rendering

How to make the content render based on specific conditions, just like it was done with the templating langage like here? https://stencil.erdos.dev/Syntax.html#conditional-display

You can use string interpolation in your cells. E.g. in a Markdown cell:

This text is always visible.

${!myCondition ? `` : `

This text will *only* be displayed if \`myCondition\` is true (or "truthy").

`}

Additionally, you can delay the execution of a cell by having it depend on another unresolved cell, or a promise. For example, Observable provides the visibility() promise which only resolves if a cell is scrolled into the visible area:

{
  await visibility();
  // do some other stuff.
}

(When Observable compiles this code, it wraps it in a function block and automatically adds the async keyword, which is why you can use await without problems.)

1 Like

Thank you! Looks clear now :slight_smile: