angular-modern
starsforks
How to install angular-modern?
mgechev/skillgrade/angular-modern
$npx -y skills add mgechev/skillgrade --skill angular-modernGuidelines for using modern Angular APIs (signals, inject, control flow)
SKILL.md
| 1 | # Angular Modern APIs |
| 2 | |
| 3 | This skill describes the mandatory coding standards for Angular components in our codebase. |
| 4 | |
| 5 | ## Rules |
| 6 | |
| 7 | All Angular components must follow these rules: |
| 8 | |
| 9 | 1. **Use signal-based inputs** — Use `input()` and `output()` instead of `@Input()` and `@Output()` decorators |
| 10 | 2. **Use `inject()` for DI** — Use `inject()` function instead of constructor parameter injection |
| 11 | 3. **Use built-in control flow** — Use `@if`, `@for`, `@switch` instead of `*ngIf`, `*ngFor`, `*ngSwitch` |
| 12 | |
| 13 | ## Examples |
| 14 | |
| 15 | ### Signal inputs (correct) |
| 16 | |
| 17 | ```typescript |
| 18 | import { Component, input, output } from '@angular/core'; |
| 19 | |
| 20 | @Component({ ... }) |
| 21 | export class UserProfileComponent { |
| 22 | name = input.required<string>(); |
| 23 | age = input(0); |
| 24 | saved = output<void>(); |
| 25 | } |
| 26 | ``` |
| 27 | |
| 28 | ### inject() for DI (correct) |
| 29 | |
| 30 | ```typescript |
| 31 | import { Component, inject } from '@angular/core'; |
| 32 | import { UserService } from './user.service'; |
| 33 | |
| 34 | @Component({ ... }) |
| 35 | export class UserProfileComponent { |
| 36 | private userService = inject(UserService); |
| 37 | } |
| 38 | ``` |
| 39 | |
| 40 | ### Built-in control flow (correct) |
| 41 | |
| 42 | ```html |
| 43 | @if (user()) { |
| 44 | <h1>{{ user().name }}</h1> |
| 45 | } @else { |
| 46 | <p>No user found</p> |
| 47 | } |
| 48 | |
| 49 | @for (item of items(); track item.id) { |
| 50 | <li>{{ item.name }}</li> |
| 51 | } |
| 52 | ``` |
People who liked this also viewed
6 picksType
- tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026
- qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 2026
