Canopy Focus — Best Practices

SkillDev tools

Best practices for the Canopy Focus directive. Trigger when using lgFocus or LgFocusDirective to programmatically control keyboard focus in an Angular project using Canopy.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Canopy Focus — Best Practices skill

What this skill tells your AI

The instructions your AI receives, as published by legal-and-general/canopy in skills/best-practice/focus/SKILL.md and read by ahel’s review.

This skill provides usage guidance for the Canopy lgFocus directive from @legal-and-general/canopy.

Apply this skill when you need to programmatically set focus on a focusable element.


Import

import { LgFocusDirective } from '@legal-and-general/canopy';

Basic Usage

<button [lgFocus]="shouldFocus">Click me</button>

Bind lgFocus to a boolean expression. When the value becomes true, the element receives focus.


Inputs

InputTypeDefaultRequiredDescription
lgFocusbooleannullYesWhen true, focus is applied to the element.

Signals

GitHub stars
23
Forks
46
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
canopy-focus
Source
github.com/legal-and-general/canopy