Скачать или смотреть 049 - Les signals - Angular 16 - Les nouveautés

Ca y est la préparation de la version 16 d'angular est lancée ! Et une grande nouveauté ce sont les Signaux (https://github.com/angular/angular/re...) ! Où comment se passer de rxjs ? Et peut-être même du detect changes, onchanges hook ? 



D'où ça vient ? 



Voyons d'abord d'où ça vient. C'est très inspiré de SolidJs (https://www.solidjs.com/tutorial/intr...) . Où leur utilité est quasi une pierre de la librairie. 



En gros, c'est comme du rxjs behavior subject, sans rxjs, et le subscribe ! Dingue non ? 



Voyons comment mettre ça en place ! 



Décortiquons le signal 



On crée signal avec : const store = signal. 



On next une valeur avec : store.set(valeur) 



On update une valeur (projection) avec : store.update(item =＞ item + x) 



 



Toute comparaison avec du redux, ou un gestionnaire d'état serait .. fortuite ?! :D 



Signal, Avec un service  



Créons un service 



@Injectable({

 providedIn: 'root'

})

export class CounterService {

 count = signal(0);



 init(value = 10): void {

   this.count.set(value);

 }



 increase(value = 1): void {

   this.count.update(item =＞ item + value);

 }

} 



Appelons ce service dans notre composant Angular 16 



export class DiscoverSignalsComponent {

 private readonly service = inject(CounterService);

 counter = this.service.count;

} 



Puis appelons le côté template js (euh html :D) 






 {{ counter() }}


 





Noter l'appel de la fonction. (important pour la récup du signal) 



Pour increase, il suffit de set, ou update :  



// template







// component.ts

increase(): void {

   this.service.increase();

}



// service

increase(value = 1): void {

   this.count.update(item =＞ item + value);

} 



Signal, en constante 



On peut même aller plus loin en se passant de service 



import { effect, signal } from "@angular/core";



export const counter = signal(0);



const itemEffect = effect(() =＞ {

 console.log('MyValue changed', counter());

});





export const init = (value = 10) =＞ {

 counter.set(10);

}



export const increase = (value = 1) =＞ {

 counter.update(item =＞ item + value);

} 



Tu noteras ici, l'effect. Il permet de s'attacher à toute modification de l'état, via le set ou l'update sur le signal ＜3 ! 



 



Et ça nous donne côté composant : 



// html




 {{ counter() }}












// component.ts

export class DiscoverSignalsComponent {

 // private readonly service = inject(CounterService);

 // counter = this.service.count;

 counter = counter;



 init(): void {

   // this.service.init();

   init();

 }



 increase(): void {

   // this.service.increase();

   increase();

 }

} 





Sexy, non ?! :) 



Signal, fetch et gestionnaire d'état 



Aller on va plus loin ! Créons une sorte de mini store, et appelons une liste de planètes, depuis l'api starwars api (https://swapi.dev/) :) 



On crée notre store, avec de l'injection (injection token), et une fonction factory :  



export function createStore() {

 const store = signal



Puis on l'appelle depuis notre composant typescript :D 



@Component({

 selector: 'app-list-planets',

 standalone: true,

 imports: [CommonModule],

 templateUrl: './list-planets.component.html',

 styleUrls: ['./list-planets.component.css'],

 providers: [

   provideTodosStore()

 ]

})

export class ListPlanetsComponent implements OnInit {

 store = inject(PLANETS_STORE);

 state = this.store.selectorAll();



 ngOnInit(): void {

   this.store.loadAll();

 }

}