Concorde directive — sub(). Read-only Lit directive: displays the current DataProvider value and updates whenever it is assigned. Doc ID: docs/_directives/sub. Keywords: Concorde, supersoniks, docs/_directives/sub, sub, sub(), directive, ${prop}, @subscribe, null, "", skipEmptyPlaceholder, ${…}, get, set. URL: https://concorde.supersoniks.org/crawl/docs/_directives/sub.html.

sub()

Read-only Lit directive: displays the current DataProvider value and updates whenever it is assigned.

Import

import { sub } from "@supersoniks/concorde/directives";

String path

render() {
  return html`<p>Count: ${sub("myCounter.count")}</p>`;
}

DataProviderKey (static)

import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
import { sub } from "@supersoniks/concorde/directives";

const counterKey = new DataProviderKey<{ count: number }>("myCounter");

render() {
  return html`<p>${sub(counterKey.count)}</p>`;
}

Dynamic DataProviderKey (${prop})

Like @subscribe: the path is resolved on the template host component; the directive re-subscribes when observed props change. Placeholder values (null, "", 0, …): Dynamic path placeholders (skipEmptyPlaceholder not available on sub() yet).

import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
import { sub } from "@supersoniks/concorde/directives";

type User = { firstName: string; lastName: string; email: string };
const userKey = new DataProviderKey<User, { userIndex: number }>(
  "demoUsers.${userIndex}",
);

@customElement("demo-sub-dynamic")
export class DemoSubDynamic extends LitElement {
  @property({ type: Number }) userIndex = 0;

  render() {
    return html`
      <p>${sub(userKey.email)}</p>
    `;
  }
}

Demo

<docs-demo-sources for="demo-sub-template"></docs-demo-sources>
    <demo-sub-template></demo-sub-template>

Concatenation (forms)

html`<span>${sub(this.formDataProvider + ".email")}</span>`

sub() vs get() / set() / dp()

Do not replace sub(path) with get(path) in a template: get returns a one-time snapshot.

See DataProviderKey, @subscribe, and the concorde-get-set-dp migration skill.