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.
What's New in Teams Calling, Meetings and Devices March 2024
Creating GUI Component APIs in Angular and Web Components
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
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
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
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
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
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
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
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 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>
// ?
104. 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")
105. 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">
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
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
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
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/