Angular patterns — standalone components, signals, inject(), reactive forms, HTTP interceptors, and new control flow
95
94%
Does it follow best practices?
Impact
99%
2.75xAverage score across 4 eval scenarios
Passed
No known issues
{
"instruction": "Use @if/@for/@switch control flow (not *ngIf/*ngFor/*ngSwitch), OnPush change detection, and lazy-loaded routes with loadComponent.",
"relevant_when": "Agent writes Angular templates with conditionals or loops, configures change detection, or defines routes",
"context": "Modern Angular uses built-in control flow: @if/@for/@switch instead of *ngIf/*ngFor/*ngSwitch directives. @for requires a track expression. Components should use ChangeDetectionStrategy.OnPush. Routes should use loadComponent for lazy loading instead of eagerly importing component classes.",
"sources": [
{
"type": "file",
"filename": "skills/angular-best-practices/SKILL.md",
"tile": "tessl-labs/angular-best-practices@0.1.4"
}
],
"checklist": [
{
"name": "new-control-flow",
"rule": "Agent uses @if, @for (with track), @switch instead of *ngIf, *ngFor, *ngSwitch",
"relevant_when": "Agent writes Angular templates with conditionals, loops, or switch statements"
},
{
"name": "onpush-change-detection",
"rule": "Agent sets changeDetection: ChangeDetectionStrategy.OnPush on components",
"relevant_when": "Agent creates Angular components"
},
{
"name": "lazy-loaded-routes",
"rule": "Agent uses loadComponent for route definitions instead of eagerly importing components",
"relevant_when": "Agent defines Angular routes"
}
]
}