### Angular Signals for State Management

Source: https://angular.dev

Demonstrates how to use Angular Signals for managing state and deriving computed values. The `computed` signal automatically updates when its dependencies change.

```typescript
// Source signals for state.
items = signal(['Apple', 'Banana', /*...*/ ]);
searchTerm = signal('');
// A computed signal that derives the filtered list.
// It automatically re-runs when a dependency changes.
filteredItems = computed(() => {
  const lowerCaseSearchTerm = this.searchTerm().toLowerCase();
  return this.items().filter(item =>
    item.toLowerCase().includes(lowerCaseSearchTerm)
  );
});
```

--------------------------------

### Angular Signals in HTML Template

Source: https://angular.dev

Shows how to bind an input element to a signal and use signals within an `@for` loop in an Angular template. The input updates the `searchTerm` signal, and the list displays `filteredItems`.

```html
<input [value]="searchTerm()" (input)="searchTerm.set($event.target.value)" />
<ul>
  @for (item of filteredItems(); track $index) {
    <li>{{ item }}</li>
  }
</ul>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.