SlideShare a Scribd company logo

Angular 2 Component Communication - Talk by Rob McDiarmid

A
Amrita Chopra

The document outlines component communication in Angular, focusing on parent-child and sibling relationships. It describes using @input and @output decorators for data binding between components and utilizing services for sibling communication. The document also presents examples of user service functionality, including adding, removing, and filtering users with observables and behaviorsubjects.

Technology
1 of 59
Downloaded 54 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Component Communication
What is a component
@Component({ selector: 'myComp', template: ` <div> Content: {{myVar}} </div> ` }) class MyComponent { myVar: string; constructor() { this.myVar = 'hello'; } } Output Input <html> <myComp></myComp> </html> <html> <myComp> <div> Content: hello </div> </myComp> </html>
Parent → Child
@Component({ selector: 'parent', template: ` <div> Parent content <child [param]="myVar"></child> Parent content </div> ` }) class ParentComponent { myVar = 'hello'; } @Component({ selector: 'child', template: '<div>Child: {{param}}</div>' }) class ChildComponent { @Input() param: string; } <html> <parent> <div> Parent content <child> Child hello </child> Parent content </div> </parent> </html> Output Input <html> <parent></parent> </html> wizardComp
@Input() Demo
Child → Parent
@Component({ selector: 'parent', template: ` <div> <child (childEvent)="handelChildEvent($event)"></child> </div> ` }) class ParentComponent { handelChildEvent(message) { console.log(message); } } @Component({ selector: 'child', template: ` <button (click)="childEvent.emit('clicked')">Click me</button> ` }) class ChildComponent { @Output() childEvent = new EventEmitter(); }
@Output() Demo
Sibling → Sibling
@Component({ selector: 'sibling2', template: ` <button (click)="myService.increment()"> Increment </button>` }) class Sibling2Component { constructor(public myService: MyService) { } } @Component({ selector: 'sibling1', template: `{{myService.counter}}` }) class Sibling1Component { constructor(public myService: MyService) { } } class MyService { counter: number = 0; increment() { this.counter++; } }
Sibling Demo
user.service.ts export class UserService { users: User[] = []; }
user.service.ts export class UserService { private users$ = new BehaviorSubject([]); }
user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } }
user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } }
user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of filteredUsers"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { filteredUsers: User[]; constructor(public userService: UserService) { } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of filteredUsers"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of filteredUsers"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="firstNameSearch.next(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = userService.getUsers(); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="firstNameSearch.next(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = userService.getUsers(); } }
userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="firstNameSearch.next(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { return users.filter(user => user.firstName.includes(search)); } ); }
http://rxmarbles.com/#combineLatest
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.users = this.userService.users.filter(u => u !== user); this.filterUsers(this.firstName.nativeElement.value); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
List Search User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ])
List Search User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ]) [ 'User1', 'User2', 'User3' ]
List Search User1 ✖ User2 ✖ User3 ✖ User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ]) [ 'User1', 'User2', 'User3' ] User1 User2 User3
List Search User1 ✖ User2 ✖ User3 ✖ User1 User2 User3 User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ]) removeUser('User2')
List Search User1 ✖ User2 ✖ User3 ✖ User1 User2 User3 User Service users$ = BehaviorSubject([ 'User1', 'User3' ]) removeUser('User2')
List Search User1 ✖ User2 ✖ User3 ✖ User1 User2 User3 User Service users$ = BehaviorSubject([ 'User1', 'User3' ]) [ 'User1', 'User3' ] removeUser('User2')
List Search User1 ✖ User3 ✖ User1 User3 User Service users$ = BehaviorSubject([ 'User1', 'User3' ]) [ 'User1', 'User3' ] removeUser('User2')
Angular 2 Component Communication - Talk by Rob McDiarmid
user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } };
user.service.ts export const userReducer = (users = [], action) => { /* addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } */ };
user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { /* addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } */ } };
user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': /* let users = [user, ...this.users$.getValue()]; this.users$.next(users); */ case 'DELETE_USER': /* let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); */ default: /* return this.users$.asObservable(); */ } };
user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': return [...users, User.fromMockData()]; case 'DELETE_USER': /* let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); */ default: /* return this.users$.asObservable(); */ } };
user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': return [...users, User.fromMockData()]; case 'DELETE_USER': return users.filter(user => user.id !== action.payload.id); default: /* return this.users$.asObservable(); */ } };
user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': return [...users, User.fromMockData()]; case 'DELETE_USER': return users.filter(user => user.id !== action.payload.id); default: return users; } };
app.module.ts import {userReducer} from "./reducers/userReducer"; @NgModule({ imports: [StoreModule.provideStore({ users: userReducer }) ], declarations: [/*...*/], providers: [/*...*/], bootstrap: [/*...*/] }) class AppModule { }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( store.select(s => s.users), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( store.select(s => s.users), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( store.select(s => s.users), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.store.dispatch({type: 'DELETE_USER', payload: {id: user.id}}); } }
Takeaways - Everything is a component!!!
Takeaways - Parent → Child - Use an @Input() binding on child component - Use es6 setters or ngOnChanges() to handle changes - When @Input() doesn’t work, inject a @ViewChild()
Takeaways - Child → Parent - Use an @Output() binding on child component - Pass events to parent through an EventEmitter() @Output() doThing = new EventEmitter(); doThing.emit('some event'); - In the parent, get the payload of the event with $event <child (doThing)="handelThing($event)"></child> - If you can’t use an @Output() binding you can inject the parent component directly into the child
Takeaways - Sibling → Sibling - Use a service to communicate between siblings - Try to avoid sharing mutable state - Use observables to push events out from a service to components private state$ = new BehaviorSubject<>({}); doSomething(thing) { this.state$.next(thing); }
Takeaways - ngrx/store (Redux) - ngrx/store library brings redux like approach to Angular 2 - Centralized state - One way data flow
Further Reading Angular Cookbook Component Interaction rxjs/store github.com/ngrx/store egghead.io Building Angular 2 Components egghead.io Step-by-Step Async JavaScript with RxJS
Rob McDiarmid Slides: tinyurl.com/ng2-components @robianmcd

More Related Content

PDF
Angular performance slides
David Barreto
 
PDF
Angular JS2 Training Session #2
Paras Mendiratta
 
PPTX
How to perform debounce in react
BOSC Tech Labs
 
PPTX
Angular2 + rxjs
Christoffer Noring
 
PDF
Workshop 26: React Native - The Native Side
Visual Engineering
 
PDF
Angular 2 introduction
Christoffer Noring
 
PDF
Workshop 19: ReactJS Introduction
Visual Engineering
 
PPTX
Academy PRO: React native - navigation
Binary Studio
 
Angular performance slides
David Barreto
 
Angular JS2 Training Session #2
Paras Mendiratta
 
How to perform debounce in react
BOSC Tech Labs
 
Angular2 + rxjs
Christoffer Noring
 
Workshop 26: React Native - The Native Side
Visual Engineering
 
Angular 2 introduction
Christoffer Noring
 
Workshop 19: ReactJS Introduction
Visual Engineering
 
Academy PRO: React native - navigation
Binary Studio
 

What's hot (20)

PDF
What's Coming in Spring 3.0
Matt Raible
 
PDF
Workshop 17: EmberJS parte II
Visual Engineering
 
PDF
Simplified Android Development with Simple-Stack
Gabor Varadi
 
PDF
Practical Protocol-Oriented-Programming
Natasha Murashev
 
PDF
Workshop 20: ReactJS Part II Flux Pattern & Redux
Visual Engineering
 
PDF
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
Fwdays
 
PDF
Building Web Interface On Rails
Wen-Tien Chang
 
PDF
Workshop 23: ReactJS, React & Redux testing
Visual Engineering
 
PDF
Workshop 25: React Native - Components
Visual Engineering
 
PPTX
ReactJs presentation
nishasowdri
 
PPTX
Developing New Widgets for your Views in Owl
Odoo
 
PPT
Jsp/Servlet
Sunil OS
 
PPTX
Architecting Single Activity Applications (With or Without Fragments)
Gabor Varadi
 
PPTX
Paging Like A Pro
Gabor Varadi
 
PDF
Rails Best Practices
Wen-Tien Chang
 
PDF
React Native: JS MVC Meetup #15
Rob Gietema
 
PDF
State management in android applications
Gabor Varadi
 
PDF
Redux vs Alt
Uldis Sturms
 
PDF
Workshop 13: AngularJS Parte II
Visual Engineering
 
PDF
Workshop 14: AngularJS Parte III
Visual Engineering
 
What's Coming in Spring 3.0
Matt Raible
 
Workshop 17: EmberJS parte II
Visual Engineering
 
Simplified Android Development with Simple-Stack
Gabor Varadi
 
Practical Protocol-Oriented-Programming
Natasha Murashev
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Visual Engineering
 
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
Fwdays
 
Building Web Interface On Rails
Wen-Tien Chang
 
Workshop 23: ReactJS, React & Redux testing
Visual Engineering
 
Workshop 25: React Native - Components
Visual Engineering
 
ReactJs presentation
nishasowdri
 
Developing New Widgets for your Views in Owl
Odoo
 
Jsp/Servlet
Sunil OS
 
Architecting Single Activity Applications (With or Without Fragments)
Gabor Varadi
 
Paging Like A Pro
Gabor Varadi
 
Rails Best Practices
Wen-Tien Chang
 
React Native: JS MVC Meetup #15
Rob Gietema
 
State management in android applications
Gabor Varadi
 
Redux vs Alt
Uldis Sturms
 
Workshop 13: AngularJS Parte II
Visual Engineering
 
Workshop 14: AngularJS Parte III
Visual Engineering
 
Ad

Viewers also liked (17)

PPTX
Social, Mobile & The Future of Retail
Amrita Chopra
 
PPT
'Did He Really Say That?" effective component communication
Gus Sabatino
 
PPT
7 Principles of Communications
dexpan
 
PPTX
Dryland Systems Gender Component Communication
CGIAR Research Program on Dryland Systems
 
PPTX
React. Flux. Redux. by Andrey Kolodnitskiy
Valeriia Maliarenko
 
PPTX
Into the Land of lambda, One Programmer's Journey Into Functional Programming
Mike Pence
 
PDF
Understanding Redux — Ilya Gelman
500Tech
 
PDF
Social, Mobile & The Future of Retail
Amrita Chopra
 
PPTX
Teaching Business Writing and Oral Communication
Bovee and Thill
 
PDF
Dumb and smart components + redux (1)
Brecht Billiet
 
PDF
Application architecture doesn't have to suck
jtregunna
 
PPTX
Event Sourcing your AngularJS applications
Maurice De Beijer [MVP]
 
PPTX
React. Flux. Redux
Andrey Kolodnitsky
 
PDF
Progressive Web Apps
Kevin Dantas
 
DOCX
Derechos del niño
Tony Hotter
 
PPTX
Comercio electronico
mariangelarod
 
PDF
Ritusmoi_Kaushik_Resume
Ritusmoi Kaushik
 
Social, Mobile & The Future of Retail
Amrita Chopra
 
'Did He Really Say That?" effective component communication
Gus Sabatino
 
7 Principles of Communications
dexpan
 
Dryland Systems Gender Component Communication
CGIAR Research Program on Dryland Systems
 
React. Flux. Redux. by Andrey Kolodnitskiy
Valeriia Maliarenko
 
Into the Land of lambda, One Programmer's Journey Into Functional Programming
Mike Pence
 
Understanding Redux — Ilya Gelman
500Tech
 
Social, Mobile & The Future of Retail
Amrita Chopra
 
Teaching Business Writing and Oral Communication
Bovee and Thill
 
Dumb and smart components + redux (1)
Brecht Billiet
 
Application architecture doesn't have to suck
jtregunna
 
Event Sourcing your AngularJS applications
Maurice De Beijer [MVP]
 
React. Flux. Redux
Andrey Kolodnitsky
 
Progressive Web Apps
Kevin Dantas
 
Derechos del niño
Tony Hotter
 
Comercio electronico
mariangelarod
 
Ritusmoi_Kaushik_Resume
Ritusmoi Kaushik
 
Ad

Similar to Angular 2 Component Communication - Talk by Rob McDiarmid (20)

PDF
Django Class-based views (Slovenian)
Luka Zakrajšek
 
PPTX
Orchestrating things in Angular application
Peter Abraham
 
PPTX
How to Bring Common UI Patterns to ADF
Luc Bors
 
PDF
Clean Javascript
Ryunosuke SATO
 
PDF
How te bring common UI patterns to ADF
Getting value from IoT, Integration and Data Analytics
 
ODP
Codemotion appengine
Ignacio Coloma
 
DOCX
Week 12 code
abhi7692271
 
KEY
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
PPT
Easy rest service using PHP reflection api
Matthieu Aubry
 
PDF
준비하세요 Angular js 2.0
Jeado Ko
 
PDF
Doctrine For Beginners
Jonathan Wage
 
PDF
Intro programacion funcional
NSCoder Mexico
 
PDF
Symfony2 from the Trenches
Jonathan Wage
 
PDF
Юрий Буянов «Squeryl — ORM с человеческим лицом»
e-Legion
 
PDF
Be RESTful (Symfony Camp 2008)
Fabien Potencier
 
ODP
Dependency injection in Scala
Knoldus Inc.
 
PDF
Action View Form Helpers - 2, Season 2
RORLAB
 
PDF
Structuring React.js Components
Bartek Witczak
 
PDF
4Developers 2018: Structuring React components (Bartłomiej Witczak)
PROIDEA
 
PDF
Building Large jQuery Applications
Rebecca Murphey
 
Django Class-based views (Slovenian)
Luka Zakrajšek
 
Orchestrating things in Angular application
Peter Abraham
 
How to Bring Common UI Patterns to ADF
Luc Bors
 
Clean Javascript
Ryunosuke SATO
 
How te bring common UI patterns to ADF
Getting value from IoT, Integration and Data Analytics
 
Codemotion appengine
Ignacio Coloma
 
Week 12 code
abhi7692271
 
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
Easy rest service using PHP reflection api
Matthieu Aubry
 
준비하세요 Angular js 2.0
Jeado Ko
 
Doctrine For Beginners
Jonathan Wage
 
Intro programacion funcional
NSCoder Mexico
 
Symfony2 from the Trenches
Jonathan Wage
 
Юрий Буянов «Squeryl — ORM с человеческим лицом»
e-Legion
 
Be RESTful (Symfony Camp 2008)
Fabien Potencier
 
Dependency injection in Scala
Knoldus Inc.
 
Action View Form Helpers - 2, Season 2
RORLAB
 
Structuring React.js Components
Bartek Witczak
 
4Developers 2018: Structuring React components (Bartłomiej Witczak)
PROIDEA
 
Building Large jQuery Applications
Rebecca Murphey
 

Recently uploaded (20)

PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PDF
KodekX | Application Modernization Development
KodekX
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Omni-Path Integration Expertise Offered by Nor-Tech
associate14
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PPTX
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
danielle hunter
 
PDF
Newfamily of error-correcting codes based on genetic algorithms
IAESIJAI
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Elevate
 
PDF
Reimagining Insurance: Connected Data for Confident Decisions.pdf
Precisely
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PDF
Smarter Business Operations Powered by IoT Remote Monitoring
Rejig Digital
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PPTX
CroxyProxy Instagram Access id login.pptx
Orage technologies
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Cloud computing and distributed systems.
kkkkkhan
 
KodekX | Application Modernization Development
KodekX
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Omni-Path Integration Expertise Offered by Nor-Tech
associate14
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
danielle hunter
 
Newfamily of error-correcting codes based on genetic algorithms
IAESIJAI
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Elevate
 
Reimagining Insurance: Connected Data for Confident Decisions.pdf
Precisely
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Smarter Business Operations Powered by IoT Remote Monitoring
Rejig Digital
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
CroxyProxy Instagram Access id login.pptx
Orage technologies
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 

Angular 2 Component Communication - Talk by Rob McDiarmid

  • 2. What is a component
  • 3. @Component({ selector: 'myComp', template: ` <div> Content: {{myVar}} </div> ` }) class MyComponent { myVar: string; constructor() { this.myVar = 'hello'; } } Output Input <html> <myComp></myComp> </html> <html> <myComp> <div> Content: hello </div> </myComp> </html>
  • 5. @Component({ selector: 'parent', template: ` <div> Parent content <child [param]="myVar"></child> Parent content </div> ` }) class ParentComponent { myVar = 'hello'; } @Component({ selector: 'child', template: '<div>Child: {{param}}</div>' }) class ChildComponent { @Input() param: string; } <html> <parent> <div> Parent content <child> Child hello </child> Parent content </div> </parent> </html> Output Input <html> <parent></parent> </html> wizardComp
  • 8. @Component({ selector: 'parent', template: ` <div> <child (childEvent)="handelChildEvent($event)"></child> </div> ` }) class ParentComponent { handelChildEvent(message) { console.log(message); } } @Component({ selector: 'child', template: ` <button (click)="childEvent.emit('clicked')">Click me</button> ` }) class ChildComponent { @Output() childEvent = new EventEmitter(); }
  • 11. @Component({ selector: 'sibling2', template: ` <button (click)="myService.increment()"> Increment </button>` }) class Sibling2Component { constructor(public myService: MyService) { } } @Component({ selector: 'sibling1', template: `{{myService.counter}}` }) class Sibling1Component { constructor(public myService: MyService) { } } class MyService { counter: number = 0; increment() { this.counter++; } }
  • 13. user.service.ts export class UserService { users: User[] = []; }
  • 14. user.service.ts export class UserService { private users$ = new BehaviorSubject([]); }
  • 15. user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } }
  • 16. user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } }
  • 17. user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } }
  • 18. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of filteredUsers"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { filteredUsers: User[]; constructor(public userService: UserService) { } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
  • 19. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of filteredUsers"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
  • 20. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of filteredUsers"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
  • 21. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
  • 22. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="filterUsers(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; constructor(public userService: UserService) { this.users = userService.getUsers(); } filterUsers(search) { this.filteredUsers = this.userService.users.filter(user => user.firstName.includes(search)); } }
  • 23. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="firstNameSearch.next(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = userService.getUsers(); } }
  • 24. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="firstNameSearch.next(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = userService.getUsers(); } }
  • 25. userSearch.component.ts @Component({ selector: 'user-search', template: ` <div *ngFor="let user of users | async"> <input #firstName (keyup)="firstNameSearch.next(firstName.value)"> </div> ` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { return users.filter(user => user.firstName.includes(search)); } ); }
  • 27. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.users = this.userService.users.filter(u => u !== user); this.filterUsers(this.firstName.nativeElement.value); } }
  • 28. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 29. List Search User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ])
  • 30. List Search User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ]) [ 'User1', 'User2', 'User3' ]
  • 31. List Search User1 ✖ User2 ✖ User3 ✖ User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ]) [ 'User1', 'User2', 'User3' ] User1 User2 User3
  • 32. List Search User1 ✖ User2 ✖ User3 ✖ User1 User2 User3 User Service users$ = BehaviorSubject([ 'User1', 'User2', 'User3' ]) removeUser('User2')
  • 33. List Search User1 ✖ User2 ✖ User3 ✖ User1 User2 User3 User Service users$ = BehaviorSubject([ 'User1', 'User3' ]) removeUser('User2')
  • 34. List Search User1 ✖ User2 ✖ User3 ✖ User1 User2 User3 User Service users$ = BehaviorSubject([ 'User1', 'User3' ]) [ 'User1', 'User3' ] removeUser('User2')
  • 35. List Search User1 ✖ User3 ✖ User1 User3 User Service users$ = BehaviorSubject([ 'User1', 'User3' ]) [ 'User1', 'User3' ] removeUser('User2')
  • 37. user.service.ts export class UserService { private users$ = new BehaviorSubject([]); addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } };
  • 38. user.service.ts export const userReducer = (users = [], action) => { /* addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } */ };
  • 39. user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { /* addUser(user) { let users = [user, ...this.users$.getValue()]; this.users$.next(users); } removeUser(user) { let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); } getUsers() { return this.users$.asObservable(); } */ } };
  • 40. user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': /* let users = [user, ...this.users$.getValue()]; this.users$.next(users); */ case 'DELETE_USER': /* let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); */ default: /* return this.users$.asObservable(); */ } };
  • 41. user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': return [...users, User.fromMockData()]; case 'DELETE_USER': /* let users = this.users$.getValue().filter(u => u !== user); this.users$.next(users); */ default: /* return this.users$.asObservable(); */ } };
  • 42. user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': return [...users, User.fromMockData()]; case 'DELETE_USER': return users.filter(user => user.id !== action.payload.id); default: /* return this.users$.asObservable(); */ } };
  • 43. user.service.ts export const userReducer = (users = [], action) => { switch (action.type) { case 'CREATE_USER': return [...users, User.fromMockData()]; case 'DELETE_USER': return users.filter(user => user.id !== action.payload.id); default: return users; } };
  • 44. app.module.ts import {userReducer} from "./reducers/userReducer"; @NgModule({ imports: [StoreModule.provideStore({ users: userReducer }) ], declarations: [/*...*/], providers: [/*...*/], bootstrap: [/*...*/] }) class AppModule { }
  • 45. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 46. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 47. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public userService: UserService) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 48. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 49. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( userService.getUsers(), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 50. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( store.select(s => s.users), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 51. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( store.select(s => s.users), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.userService.removeUser(user); } }
  • 52. userSearch.component.ts @Component({ selector: 'user-search', template: `<div *ngFor="let user of users | async"> ... </div>` }) export class UserSearchComponent { users: Observable<User[]>; firstNameSearch = new BehaviorSubject(''); constructor(public store: Store<AppState>) { this.users = Observable.combineLatest( store.select(s => s.users), this.firstNameSearch, (users, search) => { ... } ); } removeUser(user: User) { this.store.dispatch({type: 'DELETE_USER', payload: {id: user.id}}); } }
  • 53. Takeaways - Everything is a component!!!
  • 54. Takeaways - Parent → Child - Use an @Input() binding on child component - Use es6 setters or ngOnChanges() to handle changes - When @Input() doesn’t work, inject a @ViewChild()
  • 55. Takeaways - Child → Parent - Use an @Output() binding on child component - Pass events to parent through an EventEmitter() @Output() doThing = new EventEmitter(); doThing.emit('some event'); - In the parent, get the payload of the event with $event <child (doThing)="handelThing($event)"></child> - If you can’t use an @Output() binding you can inject the parent component directly into the child
  • 56. Takeaways - Sibling → Sibling - Use a service to communicate between siblings - Try to avoid sharing mutable state - Use observables to push events out from a service to components private state$ = new BehaviorSubject<>({}); doSomething(thing) { this.state$.next(thing); }
  • 57. Takeaways - ngrx/store (Redux) - ngrx/store library brings redux like approach to Angular 2 - Centralized state - One way data flow
  • 58. Further Reading Angular Cookbook Component Interaction rxjs/store github.com/ngrx/store egghead.io Building Angular 2 Components egghead.io Step-by-Step Async JavaScript with RxJS