Angular Prompts

Here is a set of prompts I use for Angular development. These prompts change over time as I find better ways to do things or as the AI tools improve. I will try to keep this file updated with the latest prompts I use.

Chat Interfaces (ChatGPT, Claude, etc.)

Simple Instructions

1. Generic Role/Assistant Prompt. You can move the negative instructions to the “Never” section if you want by making them positive.

You are:

An Angular [version] expert. You specialize in [Performance, Accessibility, Security, etc.].

## Always

- Give me complete code examples.
- Be concise and to the point.
- Use [UI library, e.g., Angular Material, PrimeNG, etc.] for UI components.
- Use [strict, not strict] TypeScript;
- [Use, Do not use] RxJS.
- Use [ChangeDetectionStrategy.OnPush, ChangeDetectionStrategy.Default].
- Use [standalone, NgModule] components.
- Use [Single file components, Multiple file components].
- Use [X] state management library.
- [Add, Do not add] comments to the code.
- [Add, Do not add] unit tests.

## Never

- Use deprecated features.
- Use experimental features.
- Use the window or document objects directly, instead inject the `DOCUMENT` injection token.

## Component examples

[Add component example here]

2. Refactoring Prompt

Tip

I find that putting your code after the prompt helps the AI to understand the context better.

[You can start with the previous prompt if you want] or use this one:
Context: Angular [version], typescript, [some common pattern like NgRx or signals].
Refactor the following code to use
[specific feature or pattern, e.g., `ChangeDetectionStrategy.OnPush`, `standalone components`, etc.].

[Paste your code here]

Another one can be:

The following code is a little messy, help me refactor it so its more [readable, maintainable, performant, etc.].
[Paste your code here]

IDE tools (Copilot, Cline, Cursor etc.)

Pre-prompt rules

Note

Depending on your IDE the rules can be added differently. For example Copilot can have a file .github/copilot-instructions.md with the rules.

Tip

It is ok and encourage to add rules specific to your project. These rules I use are for most of my Vibe Coding/AI Powered development.

My current simple rules for AI tools in my IDE are:

# Angular Modern Development Guidelines & Single File Component Example

This document outlines best practices for building modern Angular applications using:

- **Signals & Computed Properties** for reactive state
- New **output** instead of @Output
- The **`inject()` function** for dependency injection
- **Signal queries** (as available even if not stable) instead of decorators like `@ViewChild`
- Angular's **new control flow syntax**
- **OnPush change detection** for performance
- **Strict TypeScript** (with no non-null assertions)
- **Single File Components** (all template, style, and logic in one file)
- **Tailwind CSS** for styling
- **Tailwind Animations** when necessary
- **Light and Darkmode** Always make colors compatible with light and dark mode

> **Note:** Adjust any experimental API (e.g., signal queries) as the Angular framework evolves.

## 1. Prerequisites

- **Angular Version:** 18+ (supporting signals, computed properties, and the new APIs)
- **Project Structure:** Using an Nx monorepo (if applicable)
- **TypeScript:** Strict mode enabled (avoid using `!` for possible null values)
- **Tailwind CSS:** Properly integrated in your project build
- **Animations:** Use tailwind animations module if animations are used

## 2. Comprehensive Single File Component Example

Below is an example of a single file component that demonstrates modern Angular features:

\`\`\`typescript
import { Component, ChangeDetectionStrategy, computed, signal, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
host: {
class: 'w-full h-full'
},
selector: 'app-modern-example',
standalone: true,
template: `

<div class="p-4 bg-gray-100 rounded shadow-md transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<h1 class="text-xl font-bold animate-fade-in">{{ title() }}</h1>
<button
(click)="increment()"
class="mt-4 px-4 py-2 bg-blue-500 text-white rounded transition-colors duration-200 ease-in-out hover:bg-blue-600 active:bg-blue-700">
Increment
</button>
<p class="mt-2">Count: {{ count() }}</p>

      @if (data(); as result) {
        <div class="mt-4 p-2 bg-green-100 rounded animate-fade-in">
          <p>Data: {{ result }}</p>
        </div>
      } @else {
        <div class="mt-4 p-2 bg-yellow-100 rounded animate-pulse">
          <p>Loading...</p>
        </div>
      }
    </div>

`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModernExampleComponent {
  count = signal(0);
  title = computed(() => `Current count is ${this.count()}`);
data = signal<string | null>('Hello, Angular with signals!');
private document = inject(DOCUMENT);

increment(): void {
this.count.update(current => current + 1);
}
}
\`\`\`

## 3. Additional Guidelines

- **Single File Components:** Encapsulate component's template, styles, and logic within one file
- **OnPush Change Detection:** Use for performance and future-proofing
- **Strict TypeScript:** Avoid non-null assertions and leverage strict mode
- **Tailwind CSS:** Use utility classes directly in templates
- **Animations:** Use Tailwind. Keep subtle and performant
- **New Control Flow Syntax:** Use Angular's improved flow control instead of structural directives
- **Dependency Injection:** Prefer the `inject()` function in standalone components
- **Indentation** Use tabs and set them as 3 spaces