Angular Modern Apis

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)

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

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

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()) {
  {{ 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
• Source: mgechev/skillgrade
• License: MIT
• Homepage: https://blog.mgechev.com/2026/03/14/skillgrade/

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