angular

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.

Aller à l'installation

Dépôt: ranbot-ai/awesome-skills
Dernière activité de la source: 2 mars 2026 à 07:13
Langue détectée de SKILL.md: anglais
Étoiles: 6
Forks: 4

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/ranbot-ai/awesome-skills --skill angular

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

Version	Release	Key Features
Angular 20	Q2 2025	Signals stable, Zoneless stable, Incremental hydration
Angular 21	Q4 2025	Signals-first default, Enhanced SSR
Angular 22	Q2 2026	Signal Forms, Selectorless components

import { signal, computed, effect } from "@angular/core";

// Writable signal
const count = signal(0);

// Read value
console.log(count()); // 0

// Update value
count.set(5); // Direct set
count.update((v) => v + 1); // Functional update

// Computed (derived) signal
const doubled = computed(() => count() * 2);

// Effect (side effects)
effect(() => {
  console.log(`Count changed to: ${count()}`);
});

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

@Component({
  selector: "app-user-card",
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ name() }}</h3>
      <span>{{ role() }}</span>
      <button (click)="select.emit(id())">Select</button>
    </div>
  `,
})
export class UserCardComponent {
  // Signal inputs (read-only)
  id = input.required<string>();
  name = input.required<string>();
  role = input<string>("User"); // With default

  // Output
  select = output<string>();

  // Two-way binding (model)
  isSelected = model(false);
}

// Usage:
// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />

import {
  Component,
  viewChild,
  viewChildren,
  contentChild,
} from "@angular/core";

@Component({
  selector: "app-container",
  standalone: true,
  template: `
    <input #searchInput />
    <app-item *ngFor="let item of items()" />
  `,
})
export class ContainerComponent {
  // Signal-based queries
  searchInput = viewChild<ElementRef>("searchInput");
  items = viewChildren(ItemComponent);
  projectedContent = contentChild(HeaderDirective);

  focusSearch() {
    this.searchInput()?.nativeElement.focus();
  }
}

Use Case	Signals	RxJS
Local component state	✅ Preferred	Overkill
Derived/computed values	✅ `computed()`	`combineLatest` works
Side effects	✅ `effect()`	`tap` operator
HTTP requests	❌	✅ HttpClient returns Observable
Event streams	❌	✅ `fromEvent`, operators
Complex async flows	❌	✅ `switchMap`, `mergeMap`

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterLink } from "@angular/router";

@Component({
  selector: "app-header",
  standalone: true,
  imports: [CommonModule, RouterLink], // Direct imports
  template: `
    <header>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
    </header>
  `,
})
export class HeaderComponent {}

// main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { provideHttpClient } from "@angular/common/http";
import { AppComponent

name	angular
description	Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
category	Document Processing
source	antigravity
tags	["typescript","react","api","ai","template","document","image","cro"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular

name	angular
description	Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
category	Document Processing
source	antigravity
tags	["typescript","react","api","ai","template","document","image","cro"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular

angular

Options d'installation

Vérifiez les fichiers source

Angular Expert

When to Use This Skill

Do Not Use This Skill When

Angular Expert

When to Use This Skill

Do Not Use This Skill When

Instructions

Safety

Angular Version Timeline

1. Signals: The New Reactive Primitive

Core Concepts

Signal-Based Inputs and Outputs

Signal Queries (ViewChild/ContentChild)

When to Use Signals vs RxJS

2. Standalone Components

Creating Standalone Components

Bootstrapping Without NgModule

angular

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Plus depuis ce dépôt

Angular Expert

When to Use This Skill

Do Not Use This Skill When

Angular Expert

When to Use This Skill

Do Not Use This Skill When

Instructions

Safety

Angular Version Timeline

1. Signals: The New Reactive Primitive

Core Concepts

Signal-Based Inputs and Outputs

Signal Queries (ViewChild/ContentChild)

When to Use Signals vs RxJS

2. Standalone Components

Creating Standalone Components

Bootstrapping Without NgModule