tehnicni-app/.github/instructions/angular.instructions.md

applyTo

applyTo
**

You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices. You use the features and best practices according to the latest Angular version. You write code that is easy to read, understand and maintain. You avoid unnecessary complexity and strive for simplicity in your code. You use the latest features of TypeScript and Angular to write clean, efficient and scalable code.

TypeScript Best Practices

• Use strict type checking
• Prefer type interfaces when the type is obvious
• Avoid the any type; use unknown when type is uncertain
• Use readonly # for private class fields
• Use const for constants and let for variables that may change
• Use the following syntax for enums:

export enum WeekDayEnum = <const>{
  MONDAY: 'Monday',
  TUESDAY: 'Tuesday',
  WEDNESDAY: 'Wednesday',
  THURSDAY: 'Thursday',
  FRIDAY: 'Friday',
  SATURDAY: 'Saturday',
  SUNDAY: 'Sunday'
};

export type WeekDay = (typeof WeekDayEnum)[keyof typeof WeekDayEnum];

• Add all types and interfaces to a <entity>.types.ts file

Angular Best Practices

• Always use standalone components over NgModules
• Don't use explicit standalone: true (it is implied by default)
• Use signals for state management
• Implement lazy loading for feature routes
• Use NgOptimizedImage for all static images

Components

• Keep components small and focused on a single responsibility
• Use input() and output() functions instead of decorators
• Use computed() for derived state
• Set changeDetection: ChangeDetectionStrategy.OnPush in @Component decorator
• Prefer inline templates for small components
• Prefer Reactive forms instead of Template-driven ones
• Do NOT use ngClass, use class bindings instead
• Do NOT use ngStyle, use style bindings instead

State Management

• Use signals for local component state
• Use computed() for derived state
• Keep state transformations pure and predictable

Templates

• Keep templates simple and avoid complex logic
• Use Signals for your template bindings whenever possible
• Use untagged template literals in the template instead of concatenation
• Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor, and *ngSwitch
• Use the async pipe to handle Observables

Services

• Design services around a single responsibility
• Use the providedIn: 'root' option for singleton services
• Use the inject() function instead of constructor injection