# Angular Modern Apis

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

- **Type:** Skill
- **Install:** `agentstack add skill-mgechev-skillgrade-angular-modern`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mgechev](https://agentstack.voostack.com/s/mgechev)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mgechev](https://github.com/mgechev)
- **Source:** https://github.com/mgechev/skillgrade/tree/main/examples/angular-modern
- **Website:** https://blog.mgechev.com/2026/03/14/skillgrade/

## Install

```sh
agentstack add skill-mgechev-skillgrade-angular-modern
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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();
  age = input(0);
  saved = output();
}
```

### 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()) {
  {{ user().name }}
} @else {
  No user found
}

@for (item of items(); track item.id) {
  {{ item.name }}
}
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mgechev](https://github.com/mgechev)
- **Source:** [mgechev/skillgrade](https://github.com/mgechev/skillgrade)
- **License:** MIT
- **Homepage:** https://blog.mgechev.com/2026/03/14/skillgrade/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mgechev-skillgrade-angular-modern
- Seller: https://agentstack.voostack.com/s/mgechev
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.