> angular-components
Standards for Standalone Components, Signals inputs, and Control Flow. Use when building standalone Angular components or implementing @if/@for control flow. (triggers: **/*.component.ts, **/*.html, angular component, standalone, input signal, output, @if, @for)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/angular-components?format=md"Angular Components
Priority: P0 (CRITICAL)
Principles
- Standalone:
standalone: true. Import dependencies directly inimportsarray. - Signal Inputs: Use
input()andinput.required()instead of@Input(). - Signal Outputs: Use
output()(from v17.3+) instead of@Output() EventEmitter. - Control Flow: Use
@if,@for,@switchblock syntax instead of*ngIf,*ngFor. - View Encapsulation: Default
Emulated. UseNonecarefully.
Signals Integration
- Use
computed()for derived state. - Use
effect()strictly for side effects (logging, manual DOM manipulation), NEVER for state propagation.
Anti-Patterns
- Complex Logic in Template: Call a method or use a
computedsignal. - Direct DOM Access: Avoid
ElementRef.nativeElementmodification. Use Directives or Renderer2. - Component Inheritance: Prefer Composition (Directives, Services) over Class Inheritance.
References
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)