creating gui component apis in angular and web components
TRANSCRIPT
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
Custom Elements
Angular 1 Directives
Angular 2 Components
APIs
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
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
GUIs
<select> <option>Opt 1</option></select>
Standard Elements
Standard Elements - DOM Interfaces
var select = $("select")[0];<select> <option>Opt 1</option></select>
Standard Elements - DOM Interfaces
var select = $("select")[0];
select.optionsselect.options.length// 1
Standard Elements - DOM Interfaces
<select> <option>Opt 1</option></select>
Standard Elements - DOM Interfaces
var select = $("select")[0];
select.optionsselect.options.length// 1
Standard Elements - DOM Interfaces
<select> <option>Opt 1</option></select>
Standard Elements - DOM Interfaces
<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
<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
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
<*>
<ng-transclude>
<select> <option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement // HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces
Confirmation Enhancement
Confirmation Enhancement
Confirmation Enhancement
Existing Feature
Existing Feature
Nouns, Adjectives, and Verbs
Nouns, Adjectives, and Verbs
Nouns, Adjectives, and Verbs
Requirements
Pseudocode
Requirements - confirm modal.confirm()
Request Confirmation - Pseudocode
Request Confirmation
Requirements - modal modal.confirm()
<modal />
Confirmation Modal - Pseudocode
Request Confirmation
Confirmation Modal
Requirements - open modal.confirm()
<modal />
modal.open()
Modal Opens - Pseudocode
Request Confirmation
Confirmation Modal
Modal Opens
Modal Content
Modal Content
Modal Content
Modal Content
Modal Content
Requirements - content modal.confirm()
<modal> <!-- custom --></modal>
modal.open()
Custom Modal Content - Pseudocode
Request Confirmation
Confirmation Modal
Modal Opens
Custom Modal Content
Requirements - multiple 2 modal.confirm()
<modal> <!-- custom --></modal>
modal.open()
Multiple Modals - Pseudocode
Request Confirmation
Confirmation Modal
Modal Opens
Custom Modal Content
Multiple Modals
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
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
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
Custom Elementsbrought to you by Web ComponentsCustom Elementsbrought to you by Web Components
OTConfirmModal.js
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
document.registerElement("ot-confirm-modal", { prototype: {}});
registerElement - OTConfirmModal.js
class OTConfirmModalElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
class OTConfirmModalElement - OTConfirmModal.js
class OTConfirmModalElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
class OTConfirmModalElement - OTConfirmModal.js
class OTConfirmModalElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
class OTConfirmModalElement - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
extends HTMLElement - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { };
document.registerElement("ot-confirm-modal", { prototype: OTConfirmModalElement.prototype});
extends HTMLElement - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
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
<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
<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
<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
<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
<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
<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
class OTConfirmModalElement extends HTMLElement { ... createdCallback () {}};
createdCallback - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ... createdCallback () { // see Content Container talk from ng-conf }};
ng-conf - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ... open () {} close () {}};
open & close methods - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ... open () { this.hidden = false; } close () { this.hidden = true; }};
hidden property - OTConfirmModal.js
<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
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ... confirm (callback) { this.onProceed = callback; this.open(); }};
confirm - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ...};
OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { ... proceed () { this.close(); this.onProceed(); }};
proceed - OTConfirmModal.js
class OTConfirmModalElement extends HTMLElement { createdCallback open close confirm (callback) proceed};
Angular-Connect-2015 Pseudocode Summary - OTConfirmModal.js
<ot-confirm-modal id="block"> Blocking will prevent diners from making reservations online.</ot-confirm-modal>
Tag - Integration with Application - index.html
...var blockModal = $("#block")[0];// blockModal.confirm()
Query DOM - Integration with Application - index.html
...var blockModal = $("#block")[0];// blockModal.confirm()
Query DOM - Integration with Application - index.html
...<button onclick="blockReservations()"> Block Reservations</button>
Existing Button - Integration with Application - index.html
...<button onclick="blockModal.confirm(blockReservations)"> Block Reservations</button>
Confirm Method - Integration with Application - index.html
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);
Declarative custom tag <ot-confirm-modal id="id"> Are you sure?</ot-confirm-modal>
Custom Elements
Custom elements
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
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
Angular 1Angular 1
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
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>
// ?
Angular 1 Directive Communication
?
?
?
Angular 1 Directive Communication
Events
?
?
Event Strategy
Button Modal
Event Strategy
Modal Button
click
Event Strategy
"confirm-me", block
Modal Button
Event Strategy
Modal Button
"confirm-me", block
Event Strategy
ModalOPEN Button
Event Strategy
Modal Button
Event Strategy
Modal Buttontrigger
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$broadcast
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$emit
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
scope.$emit
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
scope.$emit $rootScope.$on
$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree
$rootScope.$emit $rootScope.$on
$rootScope
AppController
trigger modal
"confirm-" + modal
Confirmation Modal - Scope tree
"confirm-" + this.id$rootScope.$emit $rootScope.$on
Events
Name conflicts
Pollute $rootScope
Memory leaks
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")
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">
Angular 1 Directive Communication
Events
?
?
Angular 1 Directive Communication
Events
Requiring controller
?
Angular 1 Directive Communication
Events
Requiring controller
?
require: "^someDir" link: (s,e,a,ctrl) =>{}
<div ng-controller="AppController as App"> <button>Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal></div>
index.html
<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
<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
<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
<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
<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
Controller Strategy
Buttontrigger
Modal
Confirm-Required
Controller Strategy
Confirm-Required
require: "^confirmRequired"
require: "^confirmRequired"
Buttontrigger
Modal
Angular 1Custom elements
<ot-confirm-modal id="id"> Are you sure?</ot-confirm-modal>// Declarative custom tag
$("#id")[0].confirm(cb);// Flexible imperative API
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
Events
Requiring controller
?
Angular 1 Directive Communication
Events
Requiring controller
Service
Angular 1 Directive Communication
Events
Requiring controller
Service
Angular 1 Directive Communication
confirmModal.confirm();
Directive Strategy
Modal Button
Service Strategy
Button
Service Strategy
App ["confirmModal"]
Modal Button
Service Strategy
App// confirmModal.confirm()
Button
Service Strategy
App// confirmModal.confirm()
Modal Button
Service Strategy
App// confirmModal.close()
Modal Button
Service Strategy
App// confirmModal.close()
Button
open:
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
open:
1. get modal template$templateCache.$get("...")
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
open:
1. get modal template2. compile the modal manually$compile(template)(scope)
index.html
Toggling the modal <button ng-click="confirm()"> Block</button>
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>-->
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"})*/
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>
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>
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>
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">
Events
Require controller
Service
Angular 1 Directive Communication
Events risky implementation
Require controller
Service
Angular 1 Directive Communication
Events risky implementation
Require controller clunky interface
Service
Angular 1 Directive Communication
Angular 2
Yes!
class OtConfirmModal {}
Angular 2
@Component({})class OtConfirmModal {}
Angular 2
@Component({selector: "ot-confirm-modal"
})class OtConfirmModal {}
Angular 2
@Component({selector: "ot-confirm-modal",template: ``
})class OtConfirmModal {}
Angular 2
@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
@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
@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
@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
@Component({...})class OtConfirmModal {}
Angular 2
@Component({...})class OtConfirmModal {isOpen: boolean = false;open() { this.isOpen = true; }close() { this.isOpen = false; }
}
Angular 2
@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...
@Component({selector: "app"
})class App {}
app.ts
@Component({selector: "app",template: ``
})class App {}
app.ts
@Component({selector: "app",template: `<button (click)="">Block</button>
`})class App {}
app.ts
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?
</ot-confirm-modal>`})class App {}
app.ts
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?
</ot-confirm-modal>`,directives: [OtConfirmModal]
})class App {}
app.ts
Local variables
Angular 2 Strategies var-a#a
<input #a (keyup)><p> {{ a.value }} </p>
<ot-confirm-modal #main>// main OtConfirmModal instance
Pseudocode
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?
</ot-confirm-modal>`,directives: [OtConfirmModal]
})class App {}
app.ts
@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal #main>Are you sure?
</ot-confirm-modal>`,directives: [OtConfirmModal]
})class App {}
app.ts
@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
@Component({...})class App {block() {console.log("posted!");
}}
app.ts
@Component({...})class App {_block() {console.log("posted!");
}get block(){return this.block.bind(this);
}}
app.ts
@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
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
@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
@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
@Directive({})class OtConfirmWith {}
Angular 2
@Directive({selector: "[ot-confirm-with]"
})class OtConfirmWith {}
Angular 2
scope: {modal:"=otConfirmWith"
}
@Directive({selector: "[ot-confirm-with]"
})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;
}
Angular 2
scope: {modal:"=otConfirmWith"
}
@Directive({selector: "[ot-confirm-with]"
})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;
}
Angular 2
$element.on("click", requestConfirm)
@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)
@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
@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...
@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...
@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
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.
OpenTable is hiring!
We’re hiring!Visit our careers page atopentable.com/careers/
We’re hiring!Visit our careers page atopentable.com/careers/