Skillgrade angular-modern-apis

Guidelines for using modern Angular APIs (signals, inject, control flow)

install

source · Clone the upstream repo

git clone https://github.com/mgechev/skillgrade

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/mgechev/skillgrade "$T" && mkdir -p ~/.claude/skills && cp -r "$T/examples/angular-modern" ~/.claude/skills/mgechev-skillgrade-angular-modern-apis && rm -rf "$T"

manifest: examples/angular-modern/SKILL.md

source content

Angular Modern APIs

This skill describes the mandatory coding standards for Angular components in our codebase.

Rules

All Angular components must follow these rules:

Use signal-based inputs — Use
```
input()
```
and
```
output()
```
instead of
```
@Input()
```
and
```
@Output()
```
decorators
Use
inject()
for DI — Use
```
inject()
```
function instead of constructor parameter injection
Use built-in control flow — Use
```
@if
```
,
```
@for
```
,
```
@switch
```
instead of
```
*ngIf
```
,
```
*ngFor
```
,
```
*ngSwitch
```

Examples

Signal inputs (correct)

import { Component, input, output } from '@angular/core';

@Component({ ... })
export class UserProfileComponent {
  name = input.required<string>();
  age = input(0);
  saved = output<void>();
}

inject() for DI (correct)

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({ ... })
export class UserProfileComponent {
  private userService = inject(UserService);
}

Built-in control flow (correct)

@if (user()) {
  <h1>{{ user().name }}</h1>
} @else {
  <p>No user found</p>
}

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}