Variables Hook

Variables: :hook Scope

The :hook scope connects a variable to any variable of the same type and text within the entire project, loading all files that can include these references. This is the broadest scope available.

Syntax

<< name:hook >>

Example: Angular Component

TypeScript file (.ts):

@Component({
  selector: 'aaa-component',
  templateUrl: './aaa.component.html',
  styleUrls: ['./aaa.component.css'],
  standalone: true,
  imports: [ ],
})

HTML file (.html):

<aaa-component [title]=this.title></aaa-component>

Definition

<:ref:> section : ' <<name:hook>> ' ; <:>

<:element:> < <<name>> -->> > <---> < <<name>> > <:>

Behavior

The :hook variable name in the .ts file connects to matching variables across the project:

• The HTML template references aaa-component
• The CSS file is linked via path
• Any file in the project that uses aaa-component establishes a dependency

This is particularly useful for framework patterns (like Angular) where components are referenced across multiple file types (.ts, .html, .css).