Creating GUI Component APIs in Angular and Web Components

So you’ve embraced architecting your Angular application with reusable components – cheers to you! But you have UI components that need to communicate with each other or expose public methods, and you’re wondering about your options. In this talk, we’ll cover how new web component standards, like Custom Elements, handle this. Next, we’ll walk through how to accomplish it today in Angular 1.x – and bring it all together into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to design and implement the public HTML and JavaScript interfaces of GUI components.

Talk presented at Angular Connect in October 2015.

Transcript

1. Rachael L Moore Sr UI Engineer OpenTable morewry Creating GUI Component APIs in Angular and Web Components (speaker notes included) Kara Erickson Software Engineer OpenTable kara | karaforthewin Angular Connect 20 & 21 October 2015 ExCel London London, UK
2. Custom Elements Angular 1 Directives Angular 2 Components
3. APIs
4. Periodic Table of HTML Elements style script cite samp sup ruby bdo code pre li dd textarea button progress h6 details tfoot device video audio track canvas iframe source param object embed map area img link noscript q var sub mark kbd wbr figure ul dt input output keygen h5 article summary thead base rp abbr time b strong del br figcaption ol dl label option datalist h4 nav command tbody title a meter select aside h2 section caption td meta rt dfn em i small ins hr p div blockquote legend optgroup address h3 header menu th head span fieldset form body h1 colgroup tr html col table footer
5. Periodic Table of HTML Elements style script cite samp sup ruby bdo code pre li dd textarea button progress h6 details tfoot device video audio track canvas iframe source param object embed map area img link noscript q var sub mark kbd wbr figure ul dt input output keygen h5 article summary thead base rp abbr time b strong del br figcaption ol dl label option datalist h4 nav command tbody title a meter select aside h2 section caption td meta rt dfn em i small ins hr p div blockquote legend optgroup address h3 header menu th head span fieldset form body h1 colgroup tr html col table footer canvas
6. GUIs
7. <select> <option>Opt 1</option> </select> Standard Elements
8. Standard Elements - DOM Interfaces var select = $("select")[0]; <select> <option>Opt 1</option> </select> Standard Elements - DOM Interfaces
9. var select = $("select")[0]; select.options select.options.length // 1 Standard Elements - DOM Interfaces <select> <option>Opt 1</option> </select> Standard Elements - DOM Interfaces
10. var select = $("select")[0]; select.options select.options.length // 1 Standard Elements - DOM Interfaces <select> <option>Opt 1</option> </select> Standard Elements - DOM Interfaces
11. <select> <option>Opt 1</option> <option>Opt 2</option> </select> Standard Elements - DOM Interfaces var select = $("select")[0]; select.add( new Option("Opt 2") ); Standard Elements - DOM Interfaces
12. <select> <option>Opt 1</option> <option>Opt 2</option> </select> Standard Elements - DOM Interfaces var select = $("select")[0]; select.add( new Option("Opt 2") ); Standard Elements - DOM Interfaces
13. <*> <ng-transclude> <select> <option>... <custom-element> // HTMLElement // HTMLUnknownElement // HTMLSelectElement // HTMLOptionElement // WHATEVER I WANT! Elements - DOM Interfaces Elements - DOM Interfaces
14. <*> <ng-transclude> <select> <option>... <custom-element> // HTMLElement // HTMLUnknownElement // HTMLSelectElement // HTMLOptionElement // WHATEVER I WANT! Elements - DOM Interfaces Elements - DOM Interfaces
15. <*> <ng-transclude> <select> <option>... <custom-element> // HTMLElement // HTMLUnknownElement // HTMLSelectElement // HTMLOptionElement // WHATEVER I WANT! Elements - DOM Interfaces Elements - DOM Interfaces
16. <*> <ng-transclude> <select> <option>... <custom-element> // HTMLElement // HTMLUnknownElement // HTMLSelectElement // HTMLOptionElement // WHATEVER I WANT! Elements - DOM Interfaces Elements - DOM Interfaces
17. <*> <ng-transclude> <select> <option>... <custom-element> // HTMLElement // HTMLUnknownElement // HTMLSelectElement // HTMLOptionElement // WHATEVER I WANT! Elements - DOM Interfaces Elements - DOM Interfaces
18. Confirmation Enhancement
19. Confirmation Enhancement
20. Confirmation Enhancement
21. Existing Feature
22. Existing Feature
24. Nouns, Adjectives, and Verbs
25. Nouns, Adjectives, and Verbs
26. Nouns, Adjectives, and Verbs
27. Requirements Pseudocode
28. Requirements - confirm modal.confirm() Request Confirmation - Pseudocode Request Confirmation
29. Requirements - modal modal.confirm() <modal /> Confirmation Modal - Pseudocode Request Confirmation Confirmation Modal
30. Requirements - open modal.confirm() <modal /> modal.open() Modal Opens - Pseudocode Request Confirmation Confirmation Modal Modal Opens
31. Modal Content
32. Modal Content
33. Modal Content
34. Modal Content
35. Modal Content
36. Requirements - content modal.confirm() <modal> <!-- custom --> </modal> modal.open() Custom Modal Content - Pseudocode Request Confirmation Confirmation Modal Modal Opens Custom Modal Content
37. Requirements - multiple 2 modal.confirm() <modal> <!-- custom --> </modal> modal.open() Multiple Modals - Pseudocode Request Confirmation Confirmation Modal Modal Opens Custom Modal Content Multiple Modals
38. Requirements - close modal.confirm() <modal> <!-- custom --> </modal> modal.open() modal.close() Modal Closes - Pseudocode Request Confirmation Confirmation Modal Modal Opens Custom Modal Content Multiple Modals Modal Closes
39. Requirements - proceed modal.confirm() <modal> <!-- custom --> </modal> modal.open() modal.close() modal.proceed() Proceed Afterwards - Pseudocode Request Confirmation Confirmation Modal Modal Opens Custom Modal Content Multiple Modals Modal Closes Proceed Afterwards
40. Requirements - callback modal.confirm(callback) <modal> <!-- custom --> </modal> modal.open() modal.close() modal.proceed() Proceed Afterwards - Pseudocode Request Confirmation Confirmation Modal Modal Opens Custom Modal Content Multiple Modals Modal Closes Proceed Afterwards
41. Custom Elements brought to you by Web Components Custom Elements brought to you by Web Components
42. OTConfirmModal.js
43. document.registerElement("ot-confirm-modal", { prototype: {} }); registerElement - OTConfirmModal.js
44. document.registerElement("ot-confirm-modal", { prototype: {} }); registerElement - OTConfirmModal.js
45. document.registerElement("ot-confirm-modal", { prototype: {} }); registerElement - OTConfirmModal.js
46. document.registerElement("ot-confirm-modal", { prototype: {} }); registerElement - OTConfirmModal.js
47. document.registerElement("ot-confirm-modal", { prototype: {} }); registerElement - OTConfirmModal.js
48. class OTConfirmModalElement { }; document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype }); class OTConfirmModalElement - OTConfirmModal.js
49. class OTConfirmModalElement { }; document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype }); class OTConfirmModalElement - OTConfirmModal.js
50. class OTConfirmModalElement { }; document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype }); class OTConfirmModalElement - OTConfirmModal.js
51. class OTConfirmModalElement extends HTMLElement { }; document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype }); extends HTMLElement - OTConfirmModal.js
52. class OTConfirmModalElement extends HTMLElement { }; document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype }); extends HTMLElement - OTConfirmModal.js
53. class OTConfirmModalElement extends HTMLElement { ... }; OTConfirmModal.js
54. Confirmation Modal Template - <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template -
55. <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template - Confirmation Modal Template -
56. <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template - Confirmation Modal Template -
57. <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template - Confirmation Modal Template -
58. <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template - Confirmation Modal Template -
59. <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template - Confirmation Modal Template -
60. <div id="modal"> <div id="overlay"></div> <section id="dialog"> <svg id="x"></svg> <button id="cancel"> Cancel </button> <button id="confirm"> Confirm </button> </section> </div> Confirmation Modal Template - Confirmation Modal Template -
61. class OTConfirmModalElement extends HTMLElement { ... createdCallback () {} }; createdCallback - OTConfirmModal.js
62. class OTConfirmModalElement extends HTMLElement { ... createdCallback () { // see Content Container talk from ng-conf  } }; ng-conf - OTConfirmModal.js
63. class OTConfirmModalElement extends HTMLElement { ... }; OTConfirmModal.js
64. class OTConfirmModalElement extends HTMLElement { ... open () {} close () {} }; open & close methods - OTConfirmModal.js
65. class OTConfirmModalElement extends HTMLElement { ... open () { this.hidden = false; } close () { this.hidden = true; } }; hidden property - OTConfirmModal.js
66. <ot-confirm-modal hidden> ... </ot-confirm-modal> OTConfirmModal.js - hidden attribute ...extends HTMLElement { ... open () { this.hidden = false; } close () { this.hidden = true; } }; OTConfirmModal.js - hidden attribute
67. class OTConfirmModalElement extends HTMLElement { ... }; OTConfirmModal.js
68. class OTConfirmModalElement extends HTMLElement { ... }; OTConfirmModal.js
69. class OTConfirmModalElement extends HTMLElement { ... confirm (callback) { this.onProceed = callback; this.open(); } }; confirm - OTConfirmModal.js
70. class OTConfirmModalElement extends HTMLElement { ... }; OTConfirmModal.js
71. class OTConfirmModalElement extends HTMLElement { ... proceed () { this.close(); this.onProceed(); } }; proceed - OTConfirmModal.js
72. class OTConfirmModalElement extends HTMLElement { createdCallback open close confirm (callback) proceed }; Angular-Connect-2015  Pseudocode Summary - OTConfirmModal.js
73. <ot-confirm-modal id="block"> Blocking will prevent diners from making reservations online. </ot-confirm-modal> Tag - Integration with Application - index.html
74. ... var blockModal = $("#block")[0]; // blockModal.confirm() Query DOM - Integration with Application - index.html
75. ... var blockModal = $("#block")[0]; // blockModal.confirm() Query DOM - Integration with Application - index.html
76. ... <button onclick="blockReservations()"> Block Reservations </button> Existing Button - Integration with Application - index.html
77. ... <button onclick="blockModal.confirm(blockReservations)"> Block Reservations </button> Confirm Method - Integration with Application - index.html
78. Summary - Integration with Application - index.html <ot-confirm-modal id="block"> Blocking will prevent diners from making reservations online. </ot-confirm-modal> $("#block")[0].confirm(blockReservations);
79. Declarative custom tag <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> Custom Elements Custom elements
80. Declarative custom tag Imperative access to API <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> $("#id")[0].confirm(cb); Custom Elements Custom elements
81. Declarative custom tag Imperative access to API <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> $("#id")[0].confirm(cb); Custom Elements Custom elements
82. Angular 1 Angular 1
83. Declarative custom tag Imperative access to API <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> $("#id")[0].confirm(cb); Custom Elements Custom elements
84. Angular 1 Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // ?
85. Angular 1 Directive Communication ? ? ?
86. Angular 1 Directive Communication Events ? ?
87. Event Strategy Button Modal
88. Event Strategy Modal Button click
89. Event Strategy "confirm-me", block Modal Button
90. Event Strategy Modal Button "confirm-me", block
91. Event Strategy Modal OPEN Button
92. Event Strategy Modal Button
93. Event Strategy Modal Button trigger
94. $rootScope AppController trigger modal Confirmation Modal - Scope tree
95. $rootScope AppController trigger modal Confirmation Modal - Scope tree $broadcast
96. $rootScope AppController trigger modal Confirmation Modal - Scope tree $emit
97. $rootScope AppController trigger modal Confirmation Modal - Scope tree
98. $rootScope AppController trigger modal Confirmation Modal - Scope tree
99. $rootScope AppController trigger modal Confirmation Modal - Scope tree scope.$emit
100. $rootScope AppController trigger modal Confirmation Modal - Scope tree scope.$emit $rootScope.$on
101. $rootScope AppController trigger modal Confirmation Modal - Scope tree $rootScope.$emit $rootScope.$on
102. $rootScope AppController trigger modal "confirm-" + modal Confirmation Modal - Scope tree "confirm-" + this.id $rootScope.$emit $rootScope.$on
103. Events Name conflicts Pollute $rootScope Memory leaks
104. Angular 1 Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> $rootScope.$emit("confirm-id")
105. Angular 1 Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> $rootScope.$emit("confirm-id") // or <button on-confirm="cb()" ot-confirm-with="id">
106. Angular 1 Directive Communication Events ? ?
107. Angular 1 Directive Communication Events Requiring controller ?
108. Angular 1 Directive Communication Events Requiring controller ? require: "^someDir" link: (s,e,a,ctrl) =>{}
109. <div ng-controller="AppController as App"> <button>Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </div> index.html
110. <div ng-controller="AppController as App"> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </div> index.html
111. <div ng-controller="AppController as App"> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </div> index.html
112. <div ng-controller="AppController as App"> <ot-confirm-modal> Are you sure? <button ot-on-confirm="block()">Block</button> </ot-confirm-modal> </div> index.html
113. <div ng-controller="AppController as App"> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </div> index.html
114. <div ng-controller="AppController as App"> <ot-confirm-required> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </ot-confirm-required> </div> index.html
115. Controller Strategy Button trigger Modal Confirm-Required
116. Controller Strategy Confirm-Required require: "^confirmRequired" require: "^confirmRequired" Button trigger Modal
117. Angular 1 Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API
118. Angular 1 <ot-confirm-required> <button ot-on-confirm /> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </ot-confirm-required> require: "^otConfirmModal", link: (s, e, a, ctrl) => { ctrl.confirm(cb); } Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API
119. Events Requiring controller ? Angular 1 Directive Communication
120. Events Requiring controller Service Angular 1 Directive Communication
121. Events Requiring controller Service Angular 1 Directive Communication confirmModal.confirm();
122. Directive Strategy Modal Button
123. Service Strategy Button
124. Service Strategy App ["confirmModal"] Modal Button
125. Service Strategy App // confirmModal.confirm() Button
126. Service Strategy App // confirmModal.confirm() Modal Button
127. Service Strategy App // confirmModal.close() Modal Button
128. Service Strategy App // confirmModal.close() Button
129. open: index.html Toggling the modal <button ng-click="confirm()"> Block </button>
130. open: 1. get modal template $templateCache.$get("...") index.html Toggling the modal <button ng-click="confirm()"> Block </button>
131. open: 1. get modal template 2. compile the modal manually $compile(template)(scope) index.html Toggling the modal <button ng-click="confirm()"> Block </button>
132. open: 1. get modal template 2. compile the modal manually index.html Toggling the modal <button ng-click="confirm()"> Block </button> <!-- <ot-confirm-modal> Custom content here. </ot-confirm-modal> -->
133. open: 1. get modal template 2. compile the modal manually 3. add custom content index.html Toggling the modal <button ng-click="confirm()"> Block </button> /* confirmModal.confirm({ callback: this.block, template: "feature.html" }) */
134. open: 1. get modal template 2. compile the modal manually 3. add custom content 4. append to DOM index.html Toggling the modal <button ng-click="confirm()"> Block </button>
135. open: 1. get modal template 2. compile the modal manually 3. add custom content 4. append to DOM close: index.html Toggling the modal <button ng-click="confirm()"> Block </button>
136. open: 1. get modal template 2. compile the modal manually 3. add custom content 4. append to DOM close: 1. remove element 2. destroy scope index.html Toggling the modal <button ng-click="confirm()"> Block </button>
137. Angular 1 Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API // modal.html confirmModal.confirm({ callback: block, template: "modal.html" }); <button on-confirm="block()" ot-confirm-with="modal.html">
138. Events Require controller Service Angular 1 Directive Communication
139. Events risky implementation Require controller Service Angular 1 Directive Communication
140. Events risky implementation Require controller clunky interface Service Angular 1 Directive Communication
141. Angular 2
142. Yes!
143. class OtConfirmModal {} Angular 2
144. @Component({}) class OtConfirmModal {} Angular 2
145. @Component({ selector: "ot-confirm-modal" }) class OtConfirmModal {} Angular 2
146. @Component({ selector: "ot-confirm-modal", template: `` }) class OtConfirmModal {} Angular 2
147. @Component({ selector: "ot-confirm-modal", template: ` <div class="modal"> <ng-content></ng-content> <button>Cancel</button> <button>Confirm</button> </div> <div class="overlay"></div>` }) class OtConfirmModal {} Angular 2
148. @Component({ selector: "ot-confirm-modal", template: ` <div class="modal" [hidden]="!isOpen"> <ng-content></ng-content> <button>Cancel</button> <button>Confirm</button> </div> <div class="overlay" [hidden]="!isOpen"></div>` }) class OtConfirmModal {} Angular 2
149. @Component({ selector: "ot-confirm-modal", template: ` <div class="modal" [hidden]="!isOpen"> <ng-content></ng-content> <button (click)="close()">Cancel</button> <button>Confirm</button> </div> <div class="overlay" [hidden]="!isOpen" (click)="close()"></div>` }) class OtConfirmModal {} Angular 2
150. @Component({ selector: "ot-confirm-modal", template: ` <div class="modal" [hidden]="!isOpen"> <ng-content></ng-content> <button (click)="close()">Cancel</button> <button (click)="proceed()">Confirm</button> </div> <div class="overlay" [hidden]="!isOpen" (click)="close()"></div>` }) class OtConfirmModal {} Angular 2
151. @Component({...}) class OtConfirmModal {} Angular 2
152. @Component({...}) class OtConfirmModal { isOpen: boolean = false; open() { this.isOpen = true; } close() { this.isOpen = false; } } Angular 2
153. @Component({...}) class OtConfirmModal { isOpen: boolean = false; open() { this.isOpen = true; } close() { this.isOpen = false; } proceed() { this.onProceed(); this.close(); } confirm(callback) { this.onProceed = callback; this.open(); } Angular 2 ...
154. @Component({ selector: "app" }) class App {} app.ts
155. @Component({ selector: "app", template: `` }) class App {} app.ts
156. @Component({ selector: "app", template: ` <button (click)="">Block</button> ` }) class App {} app.ts
157. @Component({ selector: "app", template: ` <button (click)="">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal>` }) class App {} app.ts
158. @Component({ selector: "app", template: ` <button (click)="">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal>`, directives: [OtConfirmModal] }) class App {} app.ts
159. Local variables Angular 2 Strategies var-a #a <input #a (keyup)> <p> {{ a.value }} </p> <ot-confirm-modal #main> //  main OtConfirmModal instance Pseudocode
160. @Component({ selector: "app", template: ` <button (click)="">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal>`, directives: [OtConfirmModal] }) class App {} app.ts
161. @Component({ selector: "app", template: ` <button (click)="">Block</button> <ot-confirm-modal #main> Are you sure? </ot-confirm-modal>`, directives: [OtConfirmModal] }) class App {} app.ts
162. @Component({ selector: "app", template: ` <button (click)="main.confirm(block)">Block</button> <ot-confirm-modal #main> Custom content here. </ot-confirm-modal>`, directives: [OtConfirmModal] }) class App {...} app.ts
163. @Component({...}) class App { block() { console.log("posted!"); } } app.ts
164. @Component({...}) class App { _block() { console.log("posted!"); } get block(){ return this.block.bind(this); } } app.ts
165. @Component({ selector: "app", template: ` <button (click)="main.confirm(block)">Block</button> <ot-confirm-modal #main> Custom content here. </ot-confirm-modal>`, directives: [OtConfirmModal] }) class App {...} app.ts
166. Angular 2 <ot-confirm-modal #id> Are you sure? </ot-confirm-modal> id.confirm(cb); Custom elements <ot-confirm-modal id="id"> Are you sure? </ot-confirm-modal> // Declarative custom tag $("#id")[0].confirm(cb); // Flexible imperative API
167. @Component({ selector: "app", template: ` <button (click)="main.confirm(block)"> Block </button> <ot-confirm-modal #main> Custom content here. </ot-confirm-modal>`, directives: [OtConfirmModal] }) ... app.ts
168. @Component({ selector: "app", template: ` <button [confirm-with]="main" (confirm)="block()"> Block </button> <ot-confirm-modal #main> Custom content here. </ot-confirm-modal>`, directives: [OtConfirmModal] }) ... app.ts
169. @Directive({}) class OtConfirmWith {} Angular 2
170. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith {} Angular 2 scope: { modal:"=otConfirmWith" }
171. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; } Angular 2 scope: { modal:"=otConfirmWith" }
172. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; } Angular 2 $element.on("click", requestConfirm)
173. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; @HostListener("click") requestConfirm() { this.modal.confirm(); } } Angular 2 $element.on("click", requestConfirm)
174. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; @Output() confirm: EventEmitter = new EventEmitter(); @HostListener("click") requestConfirm() { this.modal.confirm(); } } Angular 2
175. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; @Output() confirm: EventEmitter = new EventEmitter(); @HostListener("click") requestConfirm() { this.modal.confirm(); } emitConfirmEvent() { this.confirm.next(); } Angular 2 ...
176. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; @Output() confirm: EventEmitter = new EventEmitter(); @HostListener("click") requestConfirm() { this.modal.confirm(this.emitConfirmEvent.bind(this)); } emitConfirmEvent() { this.confirm.next(); } Angular 2 ...
177. @Directive({ selector: "[ot-confirm-with]" }) class OtConfirmWith { @Input("ot-confirm-with") modal: OtConfirmModal; @Output() confirm: EventEmitter = new EventEmitter(); @HostListener("click") requestConfirm() { this.modal.confirm(this.emitConfirmEvent.bind(this)); } emitConfirmEvent() { this.confirm.next(); } } Angular 2
178. Thanks OpenTable, Sara Rahimian, Simon Attley, Guest Center Web team Links Creating Container Components talk Custom Element Examples Angular Examples Photos Gratisography & Unsplash All photos public domain. Thanks OpenTable, Sara Rahimian, Simon Attley, Guest Center Web team Links Creating Container Components talk Custom Element Examples Angular Examples Photos Gratisography & Unsplash All 3rd party photos public domain.
179. OpenTable is hiring! We’re hiring! Visit our careers page at opentable.com/careers/ We’re hiring! Visit our careers page at opentable.com/careers/