Reactive programming with RxJS

Deck from Pordenone JS Event.

Transcript

1. Reactive Functional Programming con RxJS 1 / 76
2. Chi sono? @maksimsinik Maksim Sinik Fullstack developer Software e Cloud Architect DevOps lover Functional Programming enthusiast 2 / 76
3. Agenda 1. Functional Reactive Programming 2. Che cos'è RxJS? 3. Composizione ed esecuzione di uno stream 4. Marble Diagrams 5. Obsevable Operators 6. Subjects 7. Higher Order Observables 3 / 76
4. Functional Programming + Reactive Programming 4 / 76
5. Functional Reactive Programming FRP è un paradigma di programmazione che permette di gestire un flusso di dati asincrono molto usata nella programmazione di interfacce grafiche, in robotica e in musica ha come scopo quello di rendere più semplice la modellazione degli eventi che si succedono nel tempo. 5 / 76
6. Callback "Una funzione che viene passata come parametro ad un' altra funzione" 6 / 76
7. Callback "Una funzione che viene passata come parametro ad un' altra funzione" async vs sync 6 / 76
8. Imperative vs Declarative (1) Imperativo Paradigma di programmazione nel quale un programma viene inteso come un insieme di istruzioni, ciascuna delle quali può essere pensata come un "ordine" che viene impartito . Dichiarativo Paradigma di programmazione che si focalizza sulla descrizione delle proprietà della soluzione desiderata (il cosa), lasciando indeterminato l'algoritmo da usare per trovare la soluzione (il come). 7 / 76
9. Imperative vs Declarative (2) Imperativo const doubled = [] const doubleMap = numbers => { for (let i = 0 i < numbers.length i++) { doubled.push(numbers[i] * 2) } return doubled } console.log(doubleMap([2, 3, 4])) // [4, 6, 8] 8 / 76
10. Imperative vs Declarative (2) Imperativo const doubled = [] const doubleMap = numbers => { for (let i = 0 i < numbers.length i++) { doubled.push(numbers[i] * 2) } return doubled } console.log(doubleMap([2, 3, 4])) // [4, 6, 8] Dichiarativo (o Funzionale) const doubleMap = numbers => numbers.map(n => n * 2) console.log(doubleMap([2, 3, 4])) // [4, 6, 8] 8 / 76
11. Functional Programming 9 / 76
12. Functional Programming è un paradigma di pogrammazione dichiarativo 9 / 76
13. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni 9 / 76
14. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni usa tipi di dato che non sono mutabili 9 / 76
15. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni usa tipi di dato che non sono mutabili non cambia il valore di variabili definite fuori dallo scope in esecuzione (funzioni pure) 9 / 76
16. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni usa tipi di dato che non sono mutabili non cambia il valore di variabili definite fuori dallo scope in esecuzione (funzioni pure) Ogni chiamata successiva a una stessa funzione, con gli stessi argomenti, produce lo stesso output 9 / 76
17. Array methods(1) const source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'] const result = source .map(x => parseInt(x)) // applica la funzione parseInt a ogni elemento //.filter(x => !isNaN(x)) //.reduce((x, y) => x + y) console.log(result) // logs: [1, 1, NaN, 2, 3, 5, NaN, 8, 13] 10 / 76
18. Array methods(2) const source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'] const result = source .map(x => parseInt(x)) .filter(x => !isNaN(x)) // filtra solo quelli che sono numeri //.reduce((x, y) => x + y) console.log(result) // logs: [1, 1, 2, 3, 5, 8, 13] 11 / 76
19. Array methods(3) const source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'] const result = source .map(x => parseInt(x)) .filter(x => !isNaN(x)) .reduce((x, y) => x + y) // addiziona tutti gli elementi console.log(result) // logs: 33 12 / 76
20. 2. Che cos'è RxJS? 13 / 76
21. 2. Che cos'è RxJS? ReactiveX è una libreria per comporre programmi asincroni ed "event- based", usando una sequenza "osservabile" di valori. 13 / 76
22. Reactive Programming "Programming with asynchronous observables data streams" André Staltz 14 / 76
23. ReactiveX http://reactivex.io/ specifiche reactive implementazioni nei principali linguaggi ( > 15) e piattaforme noi ci occuperemo di RxJS 15 / 76
24. 3. Composizione ed esecuzione di uno stream 16 / 76
25. Uno stream è composto da: Observable Operators Subscription 17 / 76
26. Uno stream è composto da: Observable Operators Subscription Uno stream si basa su: flussi di dati emessi operatori per modificarli gli observer che li ascoltano. 17 / 76
27. Observable 18 / 76
28. Observable oggetto (javascript) che possiede dei metodi (chiamati operatori) e delle proprietà 18 / 76
29. Observable oggetto (javascript) che possiede dei metodi (chiamati operatori) e delle proprietà emettitore di eventi o valori in un certo lasso di tempo 18 / 76
30. Observable oggetto (javascript) che possiede dei metodi (chiamati operatori) e delle proprietà emettitore di eventi o valori in un certo lasso di tempo creato a partire da strutture "simili" (isomorfe) 18 / 76
31. Observable oggetto (javascript) che possiede dei metodi (chiamati operatori) e delle proprietà emettitore di eventi o valori in un certo lasso di tempo creato a partire da strutture "simili" (isomorfe) const numberStream = Observable.of(1, 2, 3, 4, 5, 6, 7, 8) numberStream.subscribe({ next(x) { console.log(x) }, error(e) { console.error(e) }, complete() { console.log('done') } }) // => 1 // => 2 // => 3 // => 4 // => 5 // => 6 // => 7 // => 8 // => done 18 / 76
32. Operators - sono metodi che si applicano a uno stream - possono essere concatenati se è necessario applicare più di un operatore - ogni operatore modifica lo stream dei valori emmessi dall'operatore che lo precede - ogni operatore produce un nuovo Observable (stream) 19 / 76
33. Operators(2) API prende spunto dai metodi degli array const array$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]) array$ .map(x => x * 2) .filter(x => x > 6) .subscribe(x => console.log(x)) // 8 // 10 // 12 // 14 // 16 // 18 20 / 76
34. Observer (o subscriber) Possiede tre metodi: prossimo elemento, errore, fine dello stream const example$ = Observable.create(observer => observer.next(1)) const observer = { next: next => { console.log(next) }, error: err => { console.log(err) }, complete: () => { console.log('done') } } example$.subscribe(observer) E' un Oggetto javascript passato come argomento a .subscribe() 21 / 76
35. Esecuzione di uno stream Comicncia solo quando invochiamo il metodo .subscribe(observer) 22 / 76
36. Esecuzione di uno stream Comicncia solo quando invochiamo il metodo .subscribe(observer) Vengono eseguiti in sequenza ordinata tutti gli operatori 22 / 76
37. Esecuzione di uno stream Comicncia solo quando invochiamo il metodo .subscribe(observer) Vengono eseguiti in sequenza ordinata tutti gli operatori Ogni step di esecuzione torna un nuovo Observable 22 / 76
38. Esecuzione di uno stream Comicncia solo quando invochiamo il metodo .subscribe(observer) Vengono eseguiti in sequenza ordinata tutti gli operatori Ogni step di esecuzione torna un nuovo Observable Eccetto .subscribe()! 22 / 76
39. Unsubscribe const randomNumber$ = Observable.create((observer) => { const id = setInterval(() => { observer.next(Math.random()) }, 500) return () => clearInterval(id) }) const sub = randomNumber$.subscribe({ next(x) { console.log(x) }, error(e) { console.error(e) }, complete() { console.log('done') } }) setTimeout(() => { sub.unsubscribe() }, 2000) // 0.10430196667680214 // 0.4141351814554881 // 0.5761438321958294 23 / 76
40. Più di una subscription const array$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]) .map(x => x * 2) .filter(x => x > 6) array$ .subscribe(x => console.log(`First: ${x}`)) array$ .subscribe(x => console.log(`Second: ${x}`)) // First: 8 // First: 10 // First: 12 // First: 14 // First: 16 // First: 18 // Second: 8 // Second: 10 // Second: 12 // Second: 14 // Second: 16 // Second: 18 24 / 76
41. Gli stream si possono comporre const array$ = Observable.from([1, 2, 3, 4]) const array2$ = Observable.from([ 5, 6, 7, 8, 9]) array$ .merge(array2$) .subscribe(x => console.log(`Merged: ${x}`)) // Merged: 1 // Merged: 2 // Merged: 3 // Merged: 4 // Merged: 5 // Merged: 6 // Merged: 7 // Merged: 8 // Merged: 9 25 / 76
42. Gli stream si possono anche spezzare const array$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]) const [evens, odds] = array$.partition(val => val % 2 === 0) const subscribe = Observable.merge( evens .map(val => `Even: ${val}`), odds .map(val => `Odd: ${val}`) ).subscribe(val => console.log(val)) 26 / 76
43. HOT VS COLD COLD: Observable che cominciano l'esecuzione dopo che viene invocato il metodo subscribe HOT: Observable che producono i valori anche prima che ci sia una subscription attiva in ascolto 27 / 76
44. Cold A ogni .subscribe() corrisponde una nuova esecuzione. 28 / 76
45. Cold A ogni .subscribe() corrisponde una nuova esecuzione. const obs = Observable.create(observer => { observer.next(1) setTimeout(() => { observer.next(2) setTimeout(() => { observer.complete() }, 1000) }, 1000) }) obs.subscribe( v => console.log("1st subscriber: " + v), err => console.log("1st subscriber error: " + err), () => console.log("1st subscriber complete ") ) setTimeout(() => { obs.subscribe( v => console.log("2nd subscriber: " + v), err => console.log("2nd subscriber error: " + err), () => console.log("2nd subscriber complete ") ) }, 2000) 28 / 76
46. Hot L' esecuzione è condivisa tra tutti gli observer. const obs = Observable .interval(1000) .publish() obs.connect() // avvia l'esecuzione, è come chiamare .subscribe su un cold setTimeout(() => { obs.subscribe(v => console.log("1:" + v)) setTimeout( () => obs.subscribe(v => console.log("2:" + v)), 1000) }, 2000) // 1:1 // 1:2 // 2:2 // 1:3 // 2:3 // 1:4 // 2:4 // ... 29 / 76
47. 4. Marble Diagram 30 / 76
48. Marble Diagram 31 / 76
49. Marble Diagram I marble diagram sono il modo che abbiamo di rappresentare in modo visivo gli stream reattivi di dati (asincroni). 31 / 76
50. Marble Diagram I marble diagram sono il modo che abbiamo di rappresentare in modo visivo gli stream reattivi di dati (asincroni). In un marble diagram, l'asse X rappresenta il tempo. 31 / 76
51. Marble Diagram I marble diagram sono il modo che abbiamo di rappresentare in modo visivo gli stream reattivi di dati (asincroni). In un marble diagram, l'asse X rappresenta il tempo. L' asse Y invece rappresenta i diversi observable che interagiscono tra di loro, anche tramite operatori. 31 / 76
52. Marble diagrams (ASCII form) 32 / 76
53. Marble diagrams (ASCII form) Il tempo è rappresentato da: ------ 32 / 76
54. Marble diagrams (ASCII form) Il tempo è rappresentato da: ------ I valori sono rappresentati da: [0-9] oppure [a-z] 32 / 76
55. Marble diagrams (ASCII form) Il tempo è rappresentato da: ------ I valori sono rappresentati da: [0-9] oppure [a-z] Il completamento è rappresentato da: | 32 / 76
56. Marble diagrams (ASCII form) Il tempo è rappresentato da: ------ I valori sono rappresentati da: [0-9] oppure [a-z] Il completamento è rappresentato da: | L'eccezione è rappresentata da: X 32 / 76
57. Marble Diagram di map first: ---0---1---2---3-| operator: map( x => x * 2) second: ---0---2---4---6-| First è lo stream in input Second è lo stream in output Operator indica il metodo applicato 33 / 76
58. 5. Obsevable Operators 34 / 76
59. Catergorie di Operatori Creation Transformation Filtering Combination Multicasting Error Handling Utility Conditional and Boolean Mathematical and Aggregate 9 categorie diverse e più di 120 operatori totali 35 / 76
60. 120 Operatori????? 36 / 76
61. Creation Operators 37 / 76
62. create create(subscribe: (observer) => subscription): Observable<T> 38 / 76
63. create create(subscribe: (observer) => subscription): Observable<T> Crea un Observable dalla funzione subscribe, passata come parametro. 38 / 76
64. create create(subscribe: (observer) => subscription): Observable<T> Crea un Observable dalla funzione subscribe, passata come parametro. Alias del costruttore 38 / 76
65. from from(ish: ObservableLike<T>): Observable<T> 39 / 76
66. from from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable 39 / 76
67. from from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array 39 / 76
68. from from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object 39 / 76
69. from from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object Promise 39 / 76
70. from from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object Promise iterabili 39 / 76
71. from from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object Promise iterabili Observable 39 / 76
72. fromPromise e fromEvent 40 / 76
73. fromPromise e fromEvent Crea un observable a partire da una Promise. fromPromise(promise: Promise): Observable 40 / 76
74. fromPromise e fromEvent Crea un observable a partire da una Promise. fromPromise(promise: Promise): Observable Crea un observable a partire da un evento. fromEvent(target: EventTargetLike, eventName: string): Observable 40 / 76
75. interval interval(period: number): Observable 41 / 76
76. interval interval(period: number): Observable Crea un Observable che emmette valori ogni 'period' (ms) 41 / 76
77. of of(...values): Observable 42 / 76
78. of of(...values): Observable Crea un Observable i cui valori sono i suoi argomenti e completa immediatamente. 42 / 76
79. Operators 43 / 76
80. Operatori Famosi //Combination .concat .concatAll .merge .mergeAll .zip // Transformation .scan .buffer .map/.mapTo .groupBy .mergeMap .switchMap // Filtering .filter .first/.last .take .skip .throttle 44 / 76
81. concat concat(observables: ...*): Observable Al completamento del primo observable, viene concatenato il secondo, al quale viene passato lo stesso subscribe. first --0--1--2--3| second (a|) first.concat(second) result a-0--1--2--3| 45 / 76
82. merge merge(input: Observable): Observable Unisce più Observable in un unico Observable. first: ----0----1----2----(3|) second: --0--1--2--3--(4|) first.merge(second) result: --0-01--21-3--(24)-(3|) 46 / 76
83. zip zip(observables: *): Observable Zip sottoscrive tutti gli observable che gli vengono passati come argomenti. Appena viene emesso un valore da ognuno di loro, zip emette un array contenente i valori emessi dagli singoli observable. first: ----0----1----2----(3|) second: --0--1--2--3--(4|) Observable.zip(first, second) result: ----00---11---22----33| 47 / 76
84. switch switch(): Observable Fa in modo che il subscribe sia fatto solo sul Observable emesso come ultimo. first: -0--1--2-.. second: ---------1-2-3-4-5 switch() result: ---------1-2-3-4-5 48 / 76
85. map (mapTo) map(project: Function, thisArg: any): Observable Applica la funzione a ogni valore emesso dall'Observable. first: ---0---1---2---3-| operator: map( x => x * 2) second: ---0---2---4---6-| 49 / 76
86. filter filter(select: Function, thisArg: any): Observable Emette solo i valori che passano la condizione. first: --0--1--2--3--4--5--6--7- filter(x => x % 2 === 0) result: --0-----2-----4-----6---- 50 / 76
87. debounce debounce(durationSelector: function): Observable Scarta i valori che sono stati emessi in un tempo minore rispetto a quello specificato. --0--1--2--3--4| debounceTime(1000) // simile a debounce -------------------------4| 51 / 76
88. throttle throttle(duration: function(value): Observable | Promise): Observable Emette valori solo quando è passata la durata specificata. --0--1--2--3--4| throttleTime(1000) --0-----2-----4| 52 / 76
89. scan scan(accumulator: function, seed: any): Observable Riduce i valori emessi nel tempo fino a che non viene emesso il complete. -----h-----e-----l-----l-----o| scan((acc, x) => acc+x, '') -----h-----(he)--(hel)-(hell)(hello|) 53 / 76
90. buffer buffer(closingNotifier: Observable): Observable Aggrega i valori emessi finchè l'observable passato come argomento non emette. Emette un array. -----h-----e-----l-----l-----o| bufferCount(2) -----------he----------ll----o| 54 / 76
91. do do(nextOrObserver: function, error: function, complete: function): Observable Esegue le funzioni passate come argomenti senza modificare in alcun modo l'observable in ingresso. ---0---1---2---3--... do(x => console.log(x)) ---0---1---2---3--... 55 / 76
92. share share(): Observable Condivide l'Observable sorgente con più subscriber. 56 / 76
93. share share(): Observable Condivide l'Observable sorgente con più subscriber. è uguale a publish().refCount() 56 / 76
94. share share(): Observable Condivide l'Observable sorgente con più subscriber. è uguale a publish().refCount() E' un multicast operator. 56 / 76
95. 6. Subjects 57 / 76
96. Subject E' un observable: possiede tutti gli operatori E' un observer: quando viene usato come subscriber emette i valori che gli vengono passati nel next Può usare il multicast: se passato nel subscribe viene aggiunto alla lista di observer Quando è completo, in errore o non più subscribed non può più essere usato Può passare valori a se stesso chiamando la sua funzione next 58 / 76
97. Subject vs Observable La differenza più grande tra Subject e Observable è che il Subject ha uno stato interno: salva la lista degli observers. 59 / 76
98. Subject vs Observable La differenza più grande tra Subject e Observable è che il Subject ha uno stato interno: salva la lista degli observers. const tick$ = Observable.interval(1000); const subject = new Subject(); subject.subscribe(observer1); subject.subscribe(observer2); tick$.subscribe(subject); 59 / 76
99. Subject vs Observable La differenza più grande tra Subject e Observable è che il Subject ha uno stato interno: salva la lista degli observers. const tick$ = Observable.interval(1000); const subject = new Subject(); subject.subscribe(observer1); subject.subscribe(observer2); tick$.subscribe(subject); In questo esempio vediamo che tick$ viene multicastato in due observer distinti. Questo è l'uso primario che ha il Subject in Rx. 59 / 76
100. Il Subject è, quindi, un proxy/bridge. 60 / 76
101. BehaviorSubject (the current value) Rappresenta valori che cambiano nel tempo Ogni BehaviorSubject ha un valore iniziale oppure l'ultimo valore emesso 61 / 76
102. BehaviorSubject (the current value) Rappresenta valori che cambiano nel tempo Ogni BehaviorSubject ha un valore iniziale oppure l'ultimo valore emesso Nei Service di Angular si usa spesso il behavior subject per la gestione dei dati. Infatti, il servizio spesso si inzializza prima del component e il behavior subject ci garantisce che ci sarà un valore iniziale che poi verrà aggiornato appena ce ne sarà disponibile uno più recente. 61 / 76
103. 7. Higher Order Observables 62 / 76
104. Higher Order Observables 63 / 76
105. Higher Order Observables const numObservable = Rx.Observable.interval(1000).take(4) const higherOrderObservable = numObservable .map(x => Rx.Observable.of(1,2)) higherOrderObservable .subscribe(obs =>s obs.subscribe(x => console.log(x)) ) 63 / 76
106. Higher Order Observables const numObservable = Rx.Observable.interval(1000).take(4) const higherOrderObservable = numObservable .map(x => Rx.Observable.of(1,2)) higherOrderObservable .subscribe(obs =>s obs.subscribe(x => console.log(x)) ) const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000)) clockObservable .subscribe(clock => clock.subscribe(x => console.log(x)) ) 63 / 76
107. Flattening operators Si applicano ad Observable di Observable Tornano i valori dell'Observable interno, rispettandone il tipo 64 / 76
108. Flattening operators Si applicano ad Observable di Observable Tornano i valori dell'Observable interno, rispettandone il tipo in: Observable<Observable<number>> method: flatten() out: Observable<number> 64 / 76
109. Esempio con switch const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000)) .switch() // a: --------+--------+------------------------ // \ \ // -0-1-2-3 -0-1-2-3-4-5-6 // switch(a, b) // b: ---------0-1-2-3--0-1-2-3-4-5-6 clockObservable .subscribe(x => console.log(x)) 65 / 76
110. Esempio con mergeAll const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000)) .mergeAll(3) // --------+--------+------------------------ // \ \ // -0-1-2-3 -0-1-2-3-4-5-6 // mergeAll // ----------0-1-2-3-405162738495... clockObservable .subscribe(x => console.log(x)) 66 / 76
111. Esempio con concatAll const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000).take(5)) .concatAll() // megeAll(1) // --------+--------------+-+---- // \ // -0-1-2-3-4| // concatAll // ----------0-1-2-3-4-----0-1-2-3-4--0-1-2-3-4 clockObservable .subscribe(x => console.log(x)) 67 / 76
112. Operatori composti .map() + .concatAll() = .concatMap() 68 / 76
113. Operatori composti .map() + .concatAll() = .concatMap() .map() + .mergeAll() = .mergeMap() // (flatMap) 68 / 76
114. Operatori composti .map() + .concatAll() = .concatMap() .map() + .mergeAll() = .mergeMap() // (flatMap) .map() + .switch() = .switchMap() 68 / 76
115. switchMap const clickObservable = Rx.Observable .fromEvent(document, 'click') function performRequest() { return fetch('https://jsonplaceholder.typicode.com/users/1') .then(res => res.json()) } // Observable<Event> ---> Observable<Response> const responseObservable = clickObservable .switchMap(click => performRequest()) // switchMap = map ... + ... switch responseObservable .subscribe(x => console.log(x.email)) 69 / 76
116. mergeMap const clickObservable = Rx.Observable .fromEvent(document, 'click') function performRequest() { return fetch('https://jsonplaceholder.typicode.com/users/1') .then(res => res.json()) } const emailObservable = clickObservable .mergeMap(click => performRequest(), (click, res) => res.email, 3) // mergeMap = map ... + ... mergeAll emailObservable .subscribe(email => console.log(email)) 70 / 76
117. concatMap const clickObservable = Rx.Observable .fromEvent(document, 'click') function performRequest() { return fetch('https://jsonplaceholder.typicode.com/users/1') .then(res => res.json()) } const emailObservable = clickObservable .concatMap(click => performRequest(), (click, res) => res.email) // concatMap = map ... + ... concatAll emailObservable .subscribe(email => console.log(email)) 71 / 76
118. Esempio di typeahead const obs1 = Observable.fromEvent(input, 'keyup') .map(e => e.target.value) .filter(value => value.length > 2) .distinctUntilChanged() .debounceTime(500) .mergeMap(word => this.http.get('...')) // Angular 2 http observable .retry(2) .subscribe(res => console.log(res)) 72 / 76
119. 1. FilterService: CREATE A PROVIDER import { Http } from '@angular/http'; import { Injectable } from '@angular/core'; @Injectable() export class FilterService { constructor(private http: Http) {} getAll(id: number) { return this.http.get('http://jsonplaceholder.typicode.com/users'); } } 73 / 76
120. 2. : INJECT THE PROVIDER import { Component } from '@angular/core'; import { FilterService } from './services/filter.service'; @Component({ selector: 'my-component', template: ` <results [data]="list"></results> ` }) export class MyComponent { list: any[]; // Array of users constructor(filterSrv: FilterService) { filterSrv.getAll() .subscribe(res => this.list = res) } } 74 / 76
121. 3. component: display data import { Component, Input, SimpleChanges, OnChanges } from '@angular/core'; @Component({ selector: 'results', template: ` <h2>{{text}}</h2> <pre>{{data | json}}</pre> ` }) export class ResultsComponent implements OnChanges { @Input() data: any[]; @Input() text: string; ngOnChanges(changes: SimpleChanges) { console.log ('CHANGES on ResultsComponent', changes) // i.e.: http.get('/api/).subscribe(res => ...) } } 75 / 76
122. Grazie! 76 / 76