Skip to main content Inicio Creadores diegosouzapw awesome-omni-skill angular-signals
angular-signals Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill angular-signalsEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Explorador de archivos
2 archivos Más de este repositorio Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.
AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.
This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name angular-signals description Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.
Angular Signals
Signals are Angular's reactive primitive for state management. They provide synchronous, fine-grained reactivity.
Core Signal APIs
signal() - Writable State
import { signal } from '@angular/core' ;
const count = signal (0 );
console .log (count ());
count.set (5 );
count.update (c =>1 );
const user = signal<User | null >(null );
user.set ({ id : 1
name
'Alice'
computed() - Derived State import { signal, computed } from '@angular/core' ;
const firstName = signal ('John' );
const lastName = signal ('Doe' );
const fullName = computed (() => `${firstName()} ${lastName()} ` );
console .log (fullName ());
firstName.set ('Jane' );
console .log (fullName ());
const items = signal<Item []>([]);
const filter = signal ('' );
const filteredItems = computed (() => {
const query = filter ().toLowerCase ();
return items ().filter (item =>name .toLowerCase ().includes (query)
);
});
const totalPrice = computed (() =>
filteredItems ().reduce ((sum, item ) => sum + item.price , 0 )
);
linkedSignal() - Dependent State with Reset import { signal, linkedSignal } from '@angular/core' ;
const options = signal (['A' , 'B' , 'C' ]);
const selected = linkedSignal (() => options ()[0 ]);
console .log (selected ());
selected.set ('B' );
console .log (selected ());
options.set (['X' , 'Y' ]);
console .log (selected ());
const items = signal<Item []>([]);
const selectedItem = linkedSignal<Item [], Item | null >({
source : () => items (),
computation : (newItems, previous ) => {
const prevItem = previous?.value ;
if (prevItem && newItems.some (i =>id === prevItem.id )) {
return prevItem;
}
return newItems[0 ] ?? null ;
},
});
effect() - Side Effects import { signal, effect, inject, DestroyRef } from '@angular/core' ;
@Component ({...})
export class SearchComponent {
query = signal ('' );
constructor (effect (() => {
console .log ('Search query:' , this .query ());
});
effect ((onCleanup ) => {
const timer = setInterval (() => {
console .log ('Current query:' , this .query ());
}, 1000 );
onCleanup (() => clearInterval (timer));
});
}
}
Run in injection context (constructor or with runInInjectionContext)
Automatically cleaned up when component destroys
Component State Pattern @Component ({
selector : 'app-todo-list' ,
template : `
<input [value]="newTodo()" (input)="newTodo.set($any($event.target).value)" />
<button (click)="addTodo()" [disabled]="!canAdd()">Add</button>
<ul>
@for (todo of filteredTodos(); track todo.id) {
<li [class.done]="todo.done">
{{ todo.text }}
<button (click)="toggleTodo(todo.id)">Toggle</button>
</li>
}
</ul>
<p>{{ remaining() }} remaining</p>
` ,
})
export class TodoListComponent {
todos = signal<Todo []>([]);
newTodo = signal ('' );
filter = signal<'all' | 'active' | 'done' >('all' );
canAdd = computed (() => this .newTodo ().trim ().length > 0 );
filteredTodos = computed (() => {
const todos = this .todos ();
switch (this .filter ()) {
case 'active' : return todos.filter (t =>done );
case 'done' : return todos.filter (t =>done );
default : return todos;
}
});
remaining = computed (() =>
this .todos ().filter (t =>done ).length
);
addTodo (const text = this .newTodo ().trim ();
if (text) {
this .todos .update (todos =>id : crypto.randomUUID (), text, done : false }
]);
this .newTodo .set ('' );
}
}
toggleTodo (id : string this .todos .update (todos =>map (t =>id === id ? { ...t, done : !t.done } : t)
);
}
}
RxJS Interop
toSignal() - Observable to Signal import { toSignal } from '@angular/core/rxjs-interop' ;
import { interval } from 'rxjs' ;
@Component ({...})
export class TimerComponent {
private http = inject (HttpClient );
counter = toSignal (interval (1000 ), { initialValue : 0 });
users = toSignal (this .http .get <User []>('/api/users' ));
private user$ = new BehaviorSubject <User | null >(null );
currentUser = toSignal (this .user$ , { requireSync : true });
}
toObservable() - Signal to Observable import { toObservable } from '@angular/core/rxjs-interop' ;
import { switchMap, debounceTime } from 'rxjs' ;
@Component ({...})
export class SearchComponent {
query = signal ('' );
private http = inject (HttpClient );
results = toSignal (
toObservable (this .query ).pipe (
debounceTime (300 ),
switchMap (q =>this .http .get <Result []>(`/api/search?q=${q} ` ))
),
{ initialValue : [] }
);
}
Signal Equality
const user = signal<User >(
{ id : 1 , name : 'Alice' },
{ equal : (a, b ) => a.id === b.id }
);
user.set ({ id : 1 , name : 'Alice Updated' });
user.set ({ id : 2 , name : 'Bob' });
Untracked Reads import { untracked } from '@angular/core' ;
const a = signal (1 );
const b = signal (2 );
const result = computed (() => {
const aVal = a ();
const bVal = untracked (() => b ());
return aVal + bVal;
});
Service State Pattern @Injectable ({ providedIn : 'root' })
export class AuthService {
private _user = signal<User | null >(null );
private _loading = signal (false );
readonly user = this ._user .asReadonly ();
readonly loading = this ._loading .asReadonly ();
readonly isAuthenticated = computed (() => this ._user () !== null );
private http = inject (HttpClient );
async login (credentials : Credentials ): Promise <void > {
this ._loading .set (true );
try {
const user = await firstValueFrom (
this .http .post <User >('/api/login' , credentials)
);
this ._user .set (user);
} finally {
this ._loading .set (false );
}
}
logout (): void {
this ._user .set (null );
}
}
