A signal-based component is a proposed Angular component marked in its metadata to update its UI from signal notifications rather than traditional Zone.js-based change detection. The aim is more granular work, with potential runtime-performance and bundle-size improvements. section 7.5.1
The pattern fits components whose state flows through signals. Inputs, local state, and derived values can participate in tracked updates, so a view can react to the signals it reads instead of undergoing traditional checking. section 7.5.1 section 10.3.4
Hypothetical product search
A product-search component receives a signal input for product type, stores the query in a signal, computes products for that type, then computes a filtered list for the template. Typing into the model-bound search field changes the query and updates the derived list. section 10.3.4
Listing 10.18 Hypothetical signal-based component with model bindings
@Component({
selector: 'app-root',
standalone: true,
template: `
<div>
<input placeholder="Search for product..." [(ngModel)]="query"/> #1
<ul>
@for (product of filteredProducts(); track product.id) {
<li>
{{product.name}}
</li>
}
</ul>
</div>
`,
})
export class App {
private readonly productService = inject(ProductService);
type = input<number>(); #2
query = signal('');
allProducts = computed(() => this.productService.getProductsByType(this.type())); #3
filteredProducts = computed(() => {
return this.allProducts.filter(product => product.name.includes(this.query())) #4
});
}
Inspect the signal input, query signal, and chained computed values that drive a filtered product list in a hypothetical component. section 10.3.4
