Angular 19 New Feature – linkedSignal, LinkedSignal API
In Angular 19, linkedSignal allows you to manage and
synchronize dependent states efficiently. This feature is especially useful
when you have multiple states that rely on each other or need to stay in sync.
Here’s a step-by-step guide with an example of dependent state
with linkedSignal in Angular:
Scenario Example:
You have two signals:
- selectedCountry
- A signal for the selected country.
- statesForCountry
- A signal that depends on the selected country and updates automatically.
1. Import Required Utilities
First, ensure you import Angular's reactivity utilities:
import { signal, computed, linkedSignal } from '@angular/core';
2. Define Signals and Dependent State
Use signal for the independent state and linkedSignal to define
the dependent state.
Example (location-state.service.ts):
import { Injectable, signal, linkedSignal } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class LocationStateService {
// Independent signal:
selected country
selectedCountry =
signal<string>('USA');
// Dependent signal:
states based on selected country
statesForCountry = linkedSignal(()
=> {
const country = this.selectedCountry();
if (country === 'USA') {
return ['California', 'Texas',
'New York'];
} else if (country === 'India')
{
return ['Maharashtra',
'Karnataka', 'Punjab'];
} else if (country === 'Canada')
{
return ['Ontario', 'Quebec',
'British Columbia'];
}
return [];
});
// Update selected country
setCountry(country: string):
void {
this.selectedCountry.set(country);
}
}
3. Use the Service in a Component
Inject the LocationStateService into your component and use its
signals.
Example (app.component.ts):
import { Component } from '@angular/core';
import { LocationStateService } from './location-state.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(public locationState:
LocationStateService) {}
// Change country
selectCountry(country: string):
void {
this.locationState.setCountry(country);
}
}
4. Bind to Template
You can bind both the independent and dependent signals in your
template.
Example (app.component.html):
<div>
<h1>Dependent State
Example with linkedSignal</h1>
<label for="country">Select
Country:</label>
<select
id="country"
[(ngModel)]="locationState.selectedCountry()"
(change)="selectCountry($event.target.value)"
>
<option value="USA">USA</option>
<option value="India">India</option>
<option value="Canada">Canada</option>
</select>
<h2>States for {{
locationState.selectedCountry() }}</h2>
<ul>
<li *ngFor="let
state of locationState.statesForCountry()">
{{ state }}
</li>
</ul>
</div>
5. How It Works
- selectedCountry
Signal: Holds the current country selection.
- linkedSignal
(Dependent Signal): Automatically updates the list of states
when the country changes.
- Template
Binding: Both signals are reactive, so changes to
selectedCountry automatically reflect in the statesForCountry.
6. Benefits of linkedSignal
- Simplifies
dependency handling between states.
- Automatically
recalculates dependent states when the source signals change.
- Keeps
your code declarative and reactive, reducing manual synchronization logic.