Creating GUI Component APIs in Angular and Web Components
-
Upload
rachael-l-moore -
Category
Technology
-
view
460 -
download
2
Transcript of Creating GUI Component APIs in Angular and Web Components
![Page 1: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/1.jpg)
Rachael L MooreSr UI EngineerOpenTable morewry
Creating GUI Component APIsin Angular and Web Components(speaker notes included)
Kara EricksonSoftware EngineerOpenTable kara | karaforthewin
Angular Connect20 & 21 October 2015ExCel LondonLondon, UK
![Page 2: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/2.jpg)
Custom Elements
Angular 1 Directives
Angular 2 Components
![Page 3: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/3.jpg)
APIs
![Page 4: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/4.jpg)
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
markkbd 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
emi
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
![Page 5: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/5.jpg)
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
markkbd 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
emi
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
![Page 6: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/6.jpg)
GUIs
![Page 7: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/7.jpg)
<select> <option>Opt 1</option></select>
Standard Elements
![Page 8: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/8.jpg)
Standard Elements - DOM Interfaces
var select = $("select")[0];<select> <option>Opt 1</option></select>
Standard Elements - DOM Interfaces
![Page 9: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/9.jpg)
var select = $("select")[0];
select.optionsselect.options.length// 1
Standard Elements - DOM Interfaces
<select> <option>Opt 1</option></select>
Standard Elements - DOM Interfaces
![Page 10: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/10.jpg)
var select = $("select")[0];
select.optionsselect.options.length// 1
Standard Elements - DOM Interfaces
<select> <option>Opt 1</option></select>
Standard Elements - DOM Interfaces
![Page 11: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/11.jpg)
<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
![Page 12: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/12.jpg)
<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
![Page 13: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/13.jpg)
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
![Page 14: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/14.jpg)
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
![Page 15: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/15.jpg)
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
![Page 16: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/16.jpg)
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
![Page 17: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/17.jpg)
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
![Page 18: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/18.jpg)
Confirmation Enhancement
![Page 19: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/19.jpg)
Confirmation Enhancement
![Page 20: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/20.jpg)
Confirmation Enhancement
![Page 21: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/21.jpg)
Existing Feature
![Page 22: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/22.jpg)
Existing Feature
![Page 23: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/23.jpg)
![Page 24: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/24.jpg)
Nouns, Adjectives, and Verbs
![Page 25: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/25.jpg)
Nouns, Adjectives, and Verbs
![Page 26: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/26.jpg)
Nouns, Adjectives, and Verbs
![Page 27: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/27.jpg)
Requirements
Pseudocode
![Page 28: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/28.jpg)
Requirements - confirm modal.confirm()
Request Confirmation - Pseudocode
Request Confirmation
![Page 29: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/29.jpg)
Requirements - modal modal.confirm()
<modal />
Confirmation Modal - Pseudocode
Request Confirmation
Confirmation Modal
![Page 30: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/30.jpg)
Requirements - open modal.confirm()
<modal />
modal.open()
Modal Opens - Pseudocode
Request Confirmation
Confirmation Modal
Modal Opens
![Page 31: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/31.jpg)
Modal Content
![Page 32: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/32.jpg)
Modal Content
![Page 33: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/33.jpg)
Modal Content
![Page 34: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/34.jpg)
Modal Content
![Page 35: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/35.jpg)
Modal Content
![Page 36: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/36.jpg)
Requirements - content modal.confirm()
<modal> <!-- custom --></modal>
modal.open()
Custom Modal Content - Pseudocode
Request Confirmation
Confirmation Modal
Modal Opens
Custom Modal Content
![Page 37: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/37.jpg)
Requirements - multiple 2 modal.confirm()
<modal> <!-- custom --></modal>
modal.open()
Multiple Modals - Pseudocode
Request Confirmation
Confirmation Modal
Modal Opens
Custom Modal Content
Multiple Modals
![Page 38: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/38.jpg)
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
![Page 39: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/39.jpg)
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
![Page 40: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/40.jpg)
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
![Page 41: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/41.jpg)
Custom Elementsbrought to you by Web ComponentsCustom Elementsbrought to you by Web Components
![Page 42: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/42.jpg)
OTConfirmModal.js
![Page 43: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/43.jpg)
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
![Page 44: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/44.jpg)
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
![Page 45: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/45.jpg)
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
![Page 46: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/46.jpg)
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
![Page 47: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/47.jpg)
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
![Page 48: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/48.jpg)
class OTConfirmModalElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
class OTConfirmModalElement - OTConfirmModal.js
![Page 49: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/49.jpg)
class OTConfirmModalElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
class OTConfirmModalElement - OTConfirmModal.js
![Page 50: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/50.jpg)
class OTConfirmModalElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
class OTConfirmModalElement - OTConfirmModal.js
![Page 51: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/51.jpg)
class OTConfirmModalElement extends HTMLElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
extends HTMLElement - OTConfirmModal.js
![Page 52: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/52.jpg)
class OTConfirmModalElement extends HTMLElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
extends HTMLElement - OTConfirmModal.js
![Page 53: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/53.jpg)
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
![Page 54: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/54.jpg)
Confirmation Modal Template - OTConfirmModal.js
<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 - OTConfirmModal.js
![Page 55: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/55.jpg)
<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 - OTConfirmModal.js
Confirmation Modal Template - OTConfirmModal.js
![Page 56: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/56.jpg)
<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 - OTConfirmModal.js
Confirmation Modal Template - OTConfirmModal.js
![Page 57: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/57.jpg)
<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 - OTConfirmModal.js
Confirmation Modal Template - OTConfirmModal.js
![Page 58: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/58.jpg)
<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 - OTConfirmModal.js
Confirmation Modal Template - OTConfirmModal.js
![Page 59: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/59.jpg)
<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 - OTConfirmModal.js
Confirmation Modal Template - OTConfirmModal.js
![Page 60: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/60.jpg)
<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 - OTConfirmModal.js
Confirmation Modal Template - OTConfirmModal.js
![Page 61: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/61.jpg)
class OTConfirmModalElement extends HTMLElement { ... createdCallback () {}};
createdCallback - OTConfirmModal.js
![Page 62: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/62.jpg)
class OTConfirmModalElement extends HTMLElement { ... createdCallback () { // see Content Container talk from ng-conf }};
ng-conf - OTConfirmModal.js
![Page 63: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/63.jpg)
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
![Page 64: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/64.jpg)
class OTConfirmModalElement extends HTMLElement { ... open () {} close () {}};
open & close methods - OTConfirmModal.js
![Page 65: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/65.jpg)
class OTConfirmModalElement extends HTMLElement { ... open () { this.hidden = false; } close () { this.hidden = true; }};
hidden property - OTConfirmModal.js
![Page 66: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/66.jpg)
<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
![Page 67: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/67.jpg)
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
![Page 68: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/68.jpg)
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
![Page 69: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/69.jpg)
class OTConfirmModalElement extends HTMLElement { ... confirm (callback) { this.onProceed = callback; this.open(); }};
confirm - OTConfirmModal.js
![Page 70: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/70.jpg)
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
![Page 71: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/71.jpg)
class OTConfirmModalElement extends HTMLElement { ... proceed () { this.close(); this.onProceed(); }};
proceed - OTConfirmModal.js
![Page 72: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/72.jpg)
class OTConfirmModalElement extends HTMLElement { createdCallback open close confirm (callback) proceed};
Angular-Connect-2015 Pseudocode Summary - OTConfirmModal.js
![Page 73: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/73.jpg)
<ot-confirm-modal id="block"> Blocking will prevent diners from making reservations online.</ot-confirm-modal>
Tag - Integration with Application - index.html
![Page 74: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/74.jpg)
...var blockModal = $("#block")[0];// blockModal.confirm()
Query DOM - Integration with Application - index.html
![Page 75: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/75.jpg)
...var blockModal = $("#block")[0];// blockModal.confirm()
Query DOM - Integration with Application - index.html
![Page 76: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/76.jpg)
...<button onclick="blockReservations()"> Block Reservations</button>
Existing Button - Integration with Application - index.html
![Page 77: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/77.jpg)
...<button onclick="blockModal.confirm(blockReservations)"> Block Reservations</button>
Confirm Method - Integration with Application - index.html
![Page 78: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/78.jpg)
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);
![Page 79: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/79.jpg)
Declarative custom tag <ot-confirm-modal id="id"> Are you sure?</ot-confirm-modal>
Custom Elements
Custom elements
![Page 80: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/80.jpg)
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
![Page 81: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/81.jpg)
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
![Page 82: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/82.jpg)
Angular 1Angular 1
![Page 83: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/83.jpg)
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
![Page 84: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/84.jpg)
Angular 1Custom 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>
// ?
![Page 85: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/85.jpg)
Angular 1 Directive Communication
?
?
?
![Page 86: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/86.jpg)
Angular 1 Directive Communication
Events
?
?
![Page 87: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/87.jpg)
Event Strategy
Button Modal
![Page 88: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/88.jpg)
Event Strategy
Modal Button
click
![Page 89: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/89.jpg)
Event Strategy
"confirm-me", block
Modal Button
![Page 90: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/90.jpg)
Event Strategy
Modal Button
"confirm-me", block
![Page 91: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/91.jpg)
Event Strategy
ModalOPEN Button
![Page 92: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/92.jpg)
Event Strategy
Modal Button
![Page 93: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/93.jpg)
Event Strategy
Modal Buttontrigger
![Page 94: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/94.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
![Page 95: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/95.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$broadcast
![Page 96: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/96.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$emit
![Page 97: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/97.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
![Page 98: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/98.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
![Page 99: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/99.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
scope.$emit
![Page 100: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/100.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
scope.$emit $rootScope.$on
![Page 101: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/101.jpg)
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$rootScope.$emit $rootScope.$on
![Page 102: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/102.jpg)
$rootScope
AppController
trigger modal
"confirm-" + modal
Confirmation Modal - Scope tree
"confirm-" + this.id$rootScope.$emit $rootScope.$on
![Page 103: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/103.jpg)
Events
Name conflicts
Pollute $rootScope
Memory leaks
![Page 104: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/104.jpg)
Angular 1Custom 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")
![Page 105: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/105.jpg)
Angular 1Custom 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">
![Page 106: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/106.jpg)
Angular 1 Directive Communication
Events
?
?
![Page 107: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/107.jpg)
Angular 1 Directive Communication
Events
Requiring controller
?
![Page 108: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/108.jpg)
Angular 1 Directive Communication
Events
Requiring controller
?
require: "^someDir" link: (s,e,a,ctrl) =>{}
![Page 109: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/109.jpg)
<div ng-controller="AppController as App"> <button>Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal></div>
index.html
![Page 110: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/110.jpg)
<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
![Page 111: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/111.jpg)
<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
![Page 112: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/112.jpg)
<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
![Page 113: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/113.jpg)
<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
![Page 114: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/114.jpg)
<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
![Page 115: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/115.jpg)
Controller Strategy
Buttontrigger
Modal
Confirm-Required
![Page 116: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/116.jpg)
Controller Strategy
Confirm-Required
require: "^confirmRequired"
require: "^confirmRequired"
Buttontrigger
Modal
![Page 117: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/117.jpg)
Angular 1Custom elements
<ot-confirm-modal id="id"> Are you sure?</ot-confirm-modal>// Declarative custom tag
$("#id")[0].confirm(cb);// Flexible imperative API
![Page 118: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/118.jpg)
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
![Page 119: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/119.jpg)
Events
Requiring controller
?
Angular 1 Directive Communication
![Page 120: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/120.jpg)
Events
Requiring controller
Service
Angular 1 Directive Communication
![Page 121: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/121.jpg)
Events
Requiring controller
Service
Angular 1 Directive Communication
confirmModal.confirm();
![Page 122: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/122.jpg)
Directive Strategy
Modal Button
![Page 123: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/123.jpg)
Service Strategy
Button
![Page 124: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/124.jpg)
Service Strategy
App ["confirmModal"]
Modal Button
![Page 125: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/125.jpg)
Service Strategy
App// confirmModal.confirm()
Button
![Page 126: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/126.jpg)
Service Strategy
App// confirmModal.confirm()
Modal Button
![Page 127: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/127.jpg)
Service Strategy
App// confirmModal.close()
Modal Button
![Page 128: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/128.jpg)
Service Strategy
App// confirmModal.close()
Button
![Page 129: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/129.jpg)
open:
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
![Page 130: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/130.jpg)
open:
1. get modal template$templateCache.$get("...")
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
![Page 131: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/131.jpg)
open:
1. get modal template2. compile the modal manually$compile(template)(scope)
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
![Page 132: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/132.jpg)
open:
1. get modal template2. compile the modal manually
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
<!--<ot-confirm-modal> Custom content here.</ot-confirm-modal>-->
![Page 133: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/133.jpg)
open:
1. get modal template2. compile the modal manually3. add custom content
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
/*confirmModal.confirm({callback: this.block,
template: "feature.html"})*/
![Page 134: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/134.jpg)
open:
1. get modal template2. compile the modal manually3. add custom content 4. append to DOM
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
![Page 135: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/135.jpg)
open:
1. get modal template2. compile the modal manually3. add custom content4. append to DOM
close:
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
![Page 136: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/136.jpg)
open:
1. get modal template2. compile the modal manually3. add custom content4. append to DOM
close:
1. remove element2. destroy scope
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
![Page 137: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/137.jpg)
Angular 1Custom 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">
![Page 138: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/138.jpg)
Events
Require controller
Service
Angular 1 Directive Communication
![Page 139: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/139.jpg)
Events risky implementation
Require controller
Service
Angular 1 Directive Communication
![Page 140: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/140.jpg)
Events risky implementation
Require controller clunky interface
Service
Angular 1 Directive Communication
![Page 141: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/141.jpg)
Angular 2
![Page 142: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/142.jpg)
Yes!
![Page 143: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/143.jpg)
class OtConfirmModal {}
Angular 2
![Page 144: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/144.jpg)
@Component({})class OtConfirmModal {}
Angular 2
![Page 145: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/145.jpg)
@Component({selector: "ot-confirm-modal"
})class OtConfirmModal {}
Angular 2
![Page 146: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/146.jpg)
@Component({selector: "ot-confirm-modal",template: ``
})class OtConfirmModal {}
Angular 2
![Page 147: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/147.jpg)
@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
![Page 148: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/148.jpg)
@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
![Page 149: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/149.jpg)
@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
![Page 150: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/150.jpg)
@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
![Page 151: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/151.jpg)
@Component({...})class OtConfirmModal {}
Angular 2
![Page 152: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/152.jpg)
@Component({...})class OtConfirmModal {isOpen: boolean = false;open() { this.isOpen = true; }close() { this.isOpen = false; }
}
Angular 2
![Page 153: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/153.jpg)
@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...
![Page 154: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/154.jpg)
@Component({selector: "app"
})class App {}
app.ts
![Page 155: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/155.jpg)
@Component({selector: "app",template: ``
})class App {}
app.ts
![Page 156: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/156.jpg)
@Component({selector: "app",template: `<button (click)="">Block</button>
`})class App {}
app.ts
![Page 157: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/157.jpg)
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?
</ot-confirm-modal>`})class App {}
app.ts
![Page 158: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/158.jpg)
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?
</ot-confirm-modal>`,directives: [OtConfirmModal]
})class App {}
app.ts
![Page 159: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/159.jpg)
Local variables
Angular 2 Strategies var-a#a
<input #a (keyup)><p> {{ a.value }} </p>
<ot-confirm-modal #main>// main OtConfirmModal instance
Pseudocode
![Page 160: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/160.jpg)
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?
</ot-confirm-modal>`,directives: [OtConfirmModal]
})class App {}
app.ts
![Page 161: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/161.jpg)
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal #main>Are you sure?
</ot-confirm-modal>`,directives: [OtConfirmModal]
})class App {}
app.ts
![Page 162: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/162.jpg)
@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
![Page 163: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/163.jpg)
@Component({...})class App {block() {console.log("posted!");
}}
app.ts
![Page 164: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/164.jpg)
@Component({...})class App {_block() {console.log("posted!");
}get block(){return this.block.bind(this);
}}
app.ts
![Page 165: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/165.jpg)
@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
![Page 166: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/166.jpg)
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
![Page 167: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/167.jpg)
@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
![Page 168: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/168.jpg)
@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
![Page 169: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/169.jpg)
@Directive({})class OtConfirmWith {}
Angular 2
![Page 170: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/170.jpg)
@Directive({selector: "[ot-confirm-with]"
})class OtConfirmWith {}
Angular 2
scope: {modal:"=otConfirmWith"
}
![Page 171: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/171.jpg)
@Directive({selector: "[ot-confirm-with]"
})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;
}
Angular 2
scope: {modal:"=otConfirmWith"
}
![Page 172: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/172.jpg)
@Directive({selector: "[ot-confirm-with]"
})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;
}
Angular 2
$element.on("click", requestConfirm)
![Page 173: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/173.jpg)
@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)
![Page 174: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/174.jpg)
@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
![Page 175: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/175.jpg)
@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...
![Page 176: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/176.jpg)
@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...
![Page 177: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/177.jpg)
@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
![Page 178: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/178.jpg)
ThanksOpenTable, Sara Rahimian, Simon Attley, Guest Center Web team
LinksCreating Container Components talkCustom Element ExamplesAngular Examples
PhotosGratisography & UnsplashAll photos public domain.
ThanksOpenTable, Sara Rahimian, Simon Attley, Guest Center Web team
LinksCreating Container Components talk Custom Element Examples Angular Examples
PhotosGratisography & UnsplashAll 3rd party photos public domain.
![Page 179: Creating GUI Component APIs in Angular and Web Components](https://reader036.fdocuments.us/reader036/viewer/2022081520/5872b37d1a28ab523c8b6045/html5/thumbnails/179.jpg)
OpenTable is hiring!
We’re hiring!Visit our careers page atopentable.com/careers/
We’re hiring!Visit our careers page atopentable.com/careers/