angular-development
Modern Angular development with standalone components, Signals, and RxJS patterns
View on GitHubTable of content
Modern Angular development with standalone components, Signals, and RxJS patterns
Installation
npx claude-plugins install @EhssanAtassi/angular-master-marketplace/angular-development
Contents
Folders: agents, commands, skills
Included Skills
This plugin includes 2 skill definitions:
rxjs-operators
View skill definition
RxJS Operators for Angular
Purpose: Essential RxJS operators every Angular developer should master
Level: Intermediate to Advanced
Version: RxJS 7+
Category 1: Transformation Operators
map
Purpose: Transform each value emitted
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
// Example 1: Simple transformation
of(1, 2, 3).pipe(
map(x => x * 10)
).subscribe(console.log);
// Output: 10, 20, 30
// Example 2: Object transformation
interface User { id: number; name: string; }
interface UserDisplay { id: number; displayName: string; }
this.users$.pipe(
map((users: User[]) => users.map(u => ({
id: u.id,
displayName: u.name.toUpperCase()
})))
);
switchMap
Purpose: Switch to a new observable, canceling previous
Use when: Making HTTP requests based on user input
import { switchMap } from 'rxjs/operators';
// Search as user types
this.searchTerm$.pipe(
debounceTime(300),
switchMap(term => this.http.get(`/api/search?q=${term}`))
).subscribe(results => console.log(results));
// Load user details when ID changes
this.userId$.pipe(
switchMap(id => this.http.get(`/api/users/${id}`))
).subscribe(user => this.user.set(user));
Why switchMap? Automatically cancels previous HTTP request if new search term arrives.
mergeMap (flatMap)
Purpose: Merge all inner observables
Use when: You want all requests to complete, not cancel previous
impo
...(truncated)
</details>
### signals-patterns
<details>
<summary>View skill definition</summary>
# Angular Signals Patterns
**Version:** Angular 16+
**Status:** Stable (Developer Preview in 16, Stable in 17+)
**Purpose:** Modern reactive state management without Zone.js overhead
## Signal Basics
### Creating Signals
```typescript
import { signal, computed, effect } from '@angular/core';
// Writable signal
const count = signal(0); // number signal
const name = signal('John'); // string signal
const user = signal<User | null>(null); // object signal with null
// Read value (call as function)
console.log(count()); // 0
console.log(name()); // "John"
// Write value
count.set(5); // Set to exact value
name.set('Jane');
// Update value (based on current)
count.update(n => n + 1); // Increment
Computed Signals
Computed signals automatically recalculate when dependencies change:
const count = signal(0);
// Derived value
const double = computed(() => count() * 2);
const isEven = computed(() => count() % 2 === 0);
const message = computed(() =>
`Count is ${count()} and ${isEven() ? 'even' : 'odd'}`
);
console.log(double()); // 0
console.log(message()); // "Count is 0 and even"
count.set(3);
console.log(double()); // 6
console.log(message()); // "Count is 3 and odd"
Effects
Effects run side effects when signals change:
import { effect } from '@angular/core';
const count = signal(0);
// Effect runs when count changes
effect(() => {
console.log(`Count changed to: ${coun
...(truncated)
</details>
## Source
[View on GitHub](https://github.com/EhssanAtassi/angular-marketplace-developer)