feat(skills): enhance Angular skills with Composition and Async Waterfalls

- Add Component Composition & Reusability section to angular/SKILL.md
  - Content Projection with ng-content and select
  - Host Directives for behavior composition

- Add Async Operations & Waterfalls section to angular-best-practices/SKILL.md
  - Parallel execution with forkJoin
  - Flattening with switchMap
  - SSR waterfall prevention with resolvers
This commit is contained in:
Chau (Joe) Nguyen
2026-02-04 00:35:31 -06:00
parent 85f26eb186
commit 5ba1fe9a97
2 changed files with 131 additions and 16 deletions

View File

@@ -436,7 +436,65 @@ export class ApiService {
---
## 7. State Management Patterns
---
## 7. Component Composition & Reusability
### Content Projection (Slots)
```typescript
@Component({
selector: 'app-card',
template: `
<div class="card">
<div class="header">
<!-- Select by attribute -->
<ng-content select="[card-header]"></ng-content>
</div>
<div class="body">
<!-- Default slot -->
<ng-content></ng-content>
</div>
</div>
`
})
export class CardComponent {}
// Usage
<app-card>
<h3 card-header>Title</h3>
<p>Body content</p>
</app-card>
```
### Host Directives (Composition)
```typescript
// Reusable behaviors without inheritance
@Directive({
standalone: true,
selector: '[appTooltip]',
inputs: ['tooltip'] // Signal input alias
})
export class TooltipDirective { ... }
@Component({
selector: 'app-button',
standalone: true,
hostDirectives: [
{
directive: TooltipDirective,
inputs: ['tooltip: title'] // Map input
}
],
template: `<ng-content />`
})
export class ButtonComponent {}
```
---
## 8. State Management Patterns
### Signal-Based State Service
@@ -525,7 +583,7 @@ export class ProductStore {
---
## 8. Forms with Signals (Coming in v22+)
## 9. Forms with Signals (Coming in v22+)
### Current Reactive Forms
@@ -588,7 +646,7 @@ export class SignalFormComponent {
---
## 9. Performance Optimization
## 10. Performance Optimization
### Change Detection Strategies
@@ -653,7 +711,7 @@ import { NgOptimizedImage } from '@angular/common';
---
## 10. Testing Modern Angular
## 11. Testing Modern Angular
### Testing Signal Components