glintReadonly

Directive that injects a readonly context to disable edits. This is used to visualize imported modules, where editing is not possible.

• Glint form fields will be replaced with a readonly variant.
• Context menu's will be disabled.
• The actions part of <glint-form> will be hidden.

<div id="readonly-form" [glintReadonly]="true">
  <glint-form>
    <!-- ... -->
  </glint-form>
</div>

• [glintReadonly]: If true, edit functionality will be disabled.

Readonly mode as a boolean

You can inject the ReadonlyService to access the disableEdit signal.

export class MyComponent {
  private readonly = inject(ReadonlyService, {optional: true})

  enabled = computed(() => {
    if (this.readonly) {
      return !this.readonly.disableEdit()
    }
    return true
  })

}

glintReadonlySubstitution

This directive can be used to replace the content of a component with a simple non-editable representation.

<div *glintReadonlySubstitution="value; label: 'My field'; description: 'Some description'">
  <!-- actual component content -->
</div>