Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchIn an Angular directive, use input() to observe a value supplied by the parent, computed() to derive a value from signals, and effect() only when you need to synchronize with an imperative, non-signal API. An input signal is read-only inside the directive; it is not local state to update.
How do signals fit into an Angular directive?
Signals are values you read by calling them as functions. Angular tracks those reads in reactive contexts, so it can respond when a signal changes. Writable signals provide update operations; computed signals expose a read-only derivation. See Angular’s signals overview.
A directive commonly receives a value from its host template through an input. Declare that input with input() in a class property initializer, then call the resulting signal wherever the directive needs the current value:
import { Directive, input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
color = input('yellow');
// Read the current input value with this.color().
}For example, a parent can bind a value with <div [appHighlight]="highlightColor"> when the directive declares a matching input name, or bind the named input with [color] where appropriate to its selector and template usage. The key distinction is that the directive calls the input signal to read it; it does not call set() or update() on it.
#1 Best Overall
Angular records inputs statically at compile time. A directive cannot add or remove inputs dynamically at runtime. The input guide documents input signals for both components and directives.
Should I use computed() or effect() for a signal input?
Use the API that matches the value’s ownership and purpose. An input is parent-owned data; a computed value is a derivation; an effect synchronizes with something outside Angular’s signal graph. Angular’s effects guide says, “Effects should be the last API you reach for.”
| Need | Use | What it means in a directive |
|---|---|---|
| Observe a value bound by the parent | input() |
Read-only signal from the directive’s perspective; call it to obtain the current bound value. |
| Keep local state that the directive owns | signal() |
Writable state the directive can update with signal operations. |
| Derive a value from one or more signals | computed() |
Read-only, lazy, memoized value recalculated as needed when its tracked dependencies change. |
| Keep dependent state manually writable | linkedSignal() |
Use when a value depends on other signals but also needs to be set manually. |
| Synchronize with a non-signal API | effect() |
Use for imperative work such as storage, custom DOM behavior, or a third-party rendering library. |
Computed dependencies are dynamic: Angular tracks the signals actually read during the latest computation. That makes computed() a natural fit for normalized or display-ready values that should follow an input without being independently mutated.
Derive a normalized value with computed()
import { Directive, computed, input } from '@angular/core';
@Directive({ selector: '[appLabel]' })
export class LabelDirective {
label = input('');
normalizedLabel = computed(() => this.label().trim().toUpperCase());
}Read this.normalizedLabel() where the directive needs the derived result. When the input changes, Angular invalidates the computed value; its derivation is evaluated lazily when next read.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #3
Use linkedSignal() for dependent but writable state
If a value starts from another signal but the directive must let users or internal logic adjust it independently, linkedSignal() can represent that relationship. A plain computed value is read-only, so it is not the right model for state that must be manually changed.
When should a directive use an effect?
Use an effect when a signal change must be reflected in an API that does not itself participate in Angular’s signal reactivity—for example, writing to storage, calling a third-party renderer, or performing custom imperative DOM work. Do not use an effect merely to copy an input signal into another signal.
Effects track signal dependencies dynamically, run at least once, and execute asynchronously during change detection. When an effect is created in a directive constructor, Angular can obtain the required injection context and automatically clean up the effect when the directive is destroyed. See Angular’s effect guide.
Synchronize with an imperative API
import { Directive, effect, input } from '@angular/core';
@Directive({ selector: '[appExternalLabel]' })
export class ExternalLabelDirective {
label = input('');
constructor() {
effect(() => {
externalWidget.setLabel(this.label());
});
}
}This pattern is appropriate only when externalWidget is an imperative API that needs to be updated. For ongoing work such as timers, subscriptions, or other resources, register cleanup so the work stops before the effect runs again or when it is destroyed. If you create an effect outside an injection context, Angular documents passing an injector in the effect options.
Why not copy signal state inside an effect?
An effect that copies one signal into another can produce expression-changed errors, circular updates, or unnecessary change detection. Model the relationship directly instead: use computed() for derived read-only state, or linkedSignal() for dependent state that also needs manual writes.
Can a directive change an input signal?
No. The receiving directive can read an input signal, but the input signal is read-only to that class. If the directive needs its own mutable state, declare a separate writable signal. If the value should support two-way binding between parent and child, Angular provides model inputs as a separate API; an ordinary input signal does not make the parent’s value writable by the directive.
The Angular API reference labels InputSignal “stable since v19.0.” That statement is the stability designation for this API, not a claim about every signal-related feature or every Angular version. See the InputSignal API reference.
Quick Recap
Choose the signal API by the job
- Parent supplies the value: declare
input()and read it by calling the signal. - The directive owns mutable state: use a writable
signal(). - The value follows other signals: use
computed(), unless it must also remain manually writable, in which case considerlinkedSignal(). - A change must update an external imperative system: use
effect()and clean up any ongoing work.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
