TypeScript · Angular

Angular (standalone components, signals) rules for Cursor

Standalone components, signals and built-in control flow rules that stop agents from writing NgModule-era Angular.

The rule

Save as .cursor/rules/angular.mdc. Cursor picks it up on the next request.

.cursor/rules/angular.mdc

---
description: Modern Angular conventions
globs: src/**/*.ts, src/**/*.html
alwaysApply: false
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.

How Cursor loads this rule

Read from the frontmatter above, per Cursor's rules documentation.

  • alwaysApply: false with globs: src/**/*.ts, src/**/*.html: attached automatically when a matching file is in context.
  • Keep the .mdc extension. A plain .md file in .cursor/rules is ignored by the rules system.
  • Prefer to generate your own? Type /create-rule in Agent and describe what you want; Cursor saves the file to .cursor/rules.
  • Team Rules come first, then Project Rules like this one, then User Rules. Earlier sources win when guidance conflicts.

Cursor rules setup guideCursor Team RulesLet Cursor run commands without asking

Angular (standalone components, signals) rules for Claude Code, Copilot, Kiro and other agents

The same instructions work as plain Markdown in AGENTS.md, which Codex, Gemini CLI, GitHub Copilot and most other coding agents read.

AGENTS.md (section)

## Angular (standalone components, signals)

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for Claude Code.claude/rules/angular.md

.claude/rules/angular.md

---
paths:
  - "src/**/*.ts"
  - "src/**/*.html"
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for GitHub Copilot.github/instructions/angular.instructions.md

.github/instructions/angular.instructions.md

---
applyTo: "src/**/*.ts,src/**/*.html"
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for Kiro.kiro/steering/angular.md

.kiro/steering/angular.md

---
inclusion: fileMatch
fileMatchPattern: ["src/**/*.ts", "src/**/*.html"]
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for Antigravity.agents/rules/angular.md

.agents/rules/angular.md

---
trigger: glob
globs: "src/**/*.ts, src/**/*.html"
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for Devin Desktop (Windsurf).devin/rules/angular.md

.devin/rules/angular.md

---
trigger: glob
globs: src/**/*.ts, src/**/*.html
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for Cline.clinerules/angular.md

.clinerules/angular.md

---
paths:
  - "src/**/*.ts"
  - "src/**/*.html"
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.
Angular (standalone components, signals) rules for Continue.continue/rules/angular.md

.continue/rules/angular.md

---
name: "angular"
globs: ["src/**/*.ts", "src/**/*.html"]
---

- Use standalone components, directives and pipes. Do not create NgModules, and do not set standalone: true; it is the default.
- Use input(), output() and model() functions instead of @Input and @Output decorators.
- Use signals for component state, computed() for derived values, and update() or set() to change them.
- Use the inject() function instead of constructor injection. Singleton services use providedIn: 'root'.
- Use built-in control flow (@if, @for, @switch) instead of *ngIf, *ngFor and *ngSwitch. Every @for needs a track expression.
- Use class and style bindings instead of ngClass and ngStyle, and do not import CommonModule.
- Put host bindings and listeners in the host object of the decorator, not @HostBinding or @HostListener.
- Lazy load feature routes with loadComponent or loadChildren.
- Use NgOptimizedImage for static images.
- Keep templates simple; move logic into computed() signals or component methods.

Edit this rule and convert it for 11 agents →

More templates

Next.js App RouterTypeScript (strict)React componentsPythonFastAPIFastifyNode.js and ExpressGoRustData science notebooks and pipelinesTesting disciplineSecurity guardrailsVue 3 (Composition API)NuxtSvelteKit (Svelte 5 runes)DjangoLaravelRuby on RailsNestJSSpring BootASP.NET CoreFlutterSwiftUI (iOS)Android (Kotlin, Jetpack Compose)React Native (Expo)Tailwind CSS (v4)Prisma ORM

Get Cursor rules and settings changes by email

When Cursor changes how rules, run modes or settings work, we update these templates from the docs and send a short note. One email a week at most.

Reviewed Oct 20, 2026. Written by AgentAtlas. Adapt it to your codebase before relying on it.