---
name: Angular Modern APIs
slug: angular-modern-apis
category: Frontend
description: Angular Modern APIs defines mandatory Angular coding patterns for components. Use it when writing or reviewing Angular code that should use signals, inject(), and built-in control flow.
github: "https://github.com/mgechev/skillgrade/tree/main/examples/angular-modern"
language: TypeScript
stars: 684
forks: 48
install: "npx degit https://github.com/mgechev/skillgrade/tree/main/examples/angular-modern ~/.claude/skills/angular-modern"
installs_to: ~/.claude/skills/angular-modern
source_path: examples/angular-modern/SKILL.md
collection_size: 5
category_size: 567
collection_url: "https://dirskills.com/collections/mgechev/skillgrade"
added: 2026-08-23T05:21:04.557Z
last_synced: 2026-08-23T05:21:04.557Z
canonical_url: "https://dirskills.com/skills/angular-modern-apis"
---

# Angular Modern APIs

Angular Modern APIs defines mandatory Angular coding patterns for components. Use it when writing or reviewing Angular code that should use signals, inject(), and built-in control flow.

**Install:**

```bash
npx degit https://github.com/mgechev/skillgrade/tree/main/examples/angular-modern ~/.claude/skills/angular-modern
```

## README

# Angular Modern APIs

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

## Rules

All Angular components must follow these rules:

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

## Examples

### Signal inputs (correct)

```typescript
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)

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

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

### Built-in control flow (correct)

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

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