# Angular v16(Angular Signals)

# **Angular Signals**

(Developer Preview, Still In Development)

Allows developers to define **Reactive** values and provide dependencies for updating the same.

As of now, Angular using **Zone.JS** for change detection but **Angular Signals Feature** will make **Zone.js** optional in future releases.

Signals are a primitive reactive system in Angular. Means, **Signals** can be used in the component but also outside like services.

**Benefits**\-  
As of now **change detection is fully controlled and automatic by Zone.JS.** With **use of Angular Signals**, Developer will get greater control on reactivity and change detection.

```typescript
//create variables with signal

count = signal<number>(0);


// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());

// To change the value of a writable signal, you can either .set() it directly:
count.update(value => value + 1);


const todos = signal([{title: 'Learn signals', done: false}]);

todos.mutate(value => {
  // Change the first TODO in the array to 'done: true' without replacing it.
  value[0].done = true;
});
```

## **Computed**

The calculated signals allow to creation derived signals from other dependency signals.

```typescript
const person = signal<{ firstname: string; lastname: string}>({ firstname: 'Anil', lastname: 'Verma'})

// Automatically updates when person() change;
const presentation = computed(() => ${person().firstname}${person().lastname}`;
```

**RxJS interoperability**

Easily “lift” signals to observables using functions from `@angular/core/rxjs-interop`

```typescript
import { toObservable, signal } from '@angular/core/rxjs-interop';

@Component({...})
export class App {
  count = signal(0);
  count$ = toObservable(this.count);

  ngOnInit() {
    this.count$.subscribe(() => ...);
  }
}
```