diff --git a/skills/dev-skills/angular-developer/SKILL.md b/skills/dev-skills/angular-developer/SKILL.md index c598f219446..b0bf5689448 100644 --- a/skills/dev-skills/angular-developer/SKILL.md +++ b/skills/dev-skills/angular-developer/SKILL.md @@ -45,7 +45,7 @@ When asked to create a new Angular project, you must determine the correct execu When working with Angular components, consult the following references based on the task: -- **Fundamentals**: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read [components.md](references/components.md) +- **Fundamentals**: Anatomy, metadata, core concepts, self-closing tags, and template control flow (@if, @for, @switch). Read [components.md](references/components.md) - **Inputs**: Signal-based inputs, transforms, and model inputs. Read [inputs.md](references/inputs.md) - **Outputs**: Signal-based outputs and custom event best practices. Read [outputs.md](references/outputs.md) - **Host Elements**: Host bindings and attribute injection. Read [host-elements.md](references/host-elements.md) diff --git a/skills/dev-skills/angular-developer/references/components.md b/skills/dev-skills/angular-developer/references/components.md index 829a46d8002..4b2c031d3a0 100644 --- a/skills/dev-skills/angular-developer/references/components.md +++ b/skills/dev-skills/angular-developer/references/components.md @@ -48,6 +48,24 @@ To use a component, add it to the `imports` array of the consuming component and export class App {} ``` +### Self-Closing Tags + +Angular supports self-closing tags for custom components. + +**Rule:** Always use self-closing tags when a component does not contain projected content or child nodes: + +```html + + + + + + + + + +``` + ## Template Control Flow Angular uses built-in blocks for conditional rendering and loops.