Conditional text rendering

How to make the content render based on specific conditions, just like it was done with the templating langage like here?

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: