Web components in Angular (Angular Elements) | Walkingtree Technologies

Web components in
Angular (Angular Elements)
1

Copyright ©2019, Walking Tree Technologies
● An IT Software and Service provider company.
● We act as an extended team for the customers across the globe like Capgemini, Tech Mahindra, Tibco, HP,
Infosys, Qualcomm, TCS to name a few and deliver end-to-end products and solutions to ensure “Great User
Experience.”
● Specialized in technology solutions from designing, development, quality assurance, maintenance and
support, consulting, training and skill augmentation services
● Technical Expertise in Angular, Blockchain, Microservices, React, Sencha ExtJS, Xamarin.
● Recognized as 50 Best Indian founded companies by The Silicon Review.
WHAT DO WE DO?
2

About Me
Subbu Nama
Technical Lead
● Subbu has worked in the technology
industry for over 8 years.
● Has good exposure on diﬀerent domains
● Subbu is a full stack developer, interested
in tools and techniques for visualization
on the web and enjoys working with web
technologies.
3

AGENDA
Assimilation of
Elements
Best practices Browser Support
4
Web Components
Relevance
Angular Elements

Copyright ©2019, Walking Tree Technologies 5
WEB COMPONENTS RELEVANCE
Main Technologies
Why?
What?
V0 Example
V1 Example
5

Why?
6

What?

Web component provides the much-needed relief, it’s a suite of different
technologies allowing you to create reusable custom elements with their
functionality encapsulated away from the rest of your code and utilize them in
your web apps.
9

Main Technologies

● Custom Elements
● Shadow DOM
● HTML Templates
11
Three Main Technologies

V0

V1

V1 Example
const template = document.createElement('template');
template.innerHTML = `<button>Say, Hello</button>`;
class SayHello extends HTMLElement {
...
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
….
button.addEventListener("click", function(){
alert("Hello!, you are doing good");
});
}}
window.customElements.define('say-hello', SayHello);

Anatomy Of Web Components in Angular (Angular Elements)
Define component as Angular Element
What is component?
Encapsulation methods of component
Package build files
16

What is Component?

Components are the most basic UI building block of an Angular
application. Angular component provides configuration metadata that
determines how the component should be processed, instantiated, and
used at runtime
18

Encapsulation Methods

ViewEncapsulation.None

ViewEncapsulation.Emulated

ViewEncapsulation.ShadowDom

Define Angular Elements

@Component({
...
encapsulation:ViewEncapsulation.ShadowDom
})
export class ShareDataComponent {
@Input() info:any = {};
@Output() message = new EventEmitter();
userInput:any="";
sendMessage(){
this.message.emit("Hello "+this.info.name+", "+this.userInput);
}
}
24

Component Functionality

$ ng add @angular/elements --name=AngularElements
Add Angular elements dependency

@NgModule({
….
entryComponents: [ShareDataComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const customElement = createCustomElement(ShareDataComponent, { injector });
customElements.define('input-output', customElement);
}
ngDoBootstrap() {}
}
Define Custom element

Packaging Build Files

...
(async function build() {
const files = [
'./dist/AngularElements/runtime.js',
'./dist/AngularElements/polyfills.js',
'./dist/AngularElements/scripts.js',
'./dist/AngularElements/main.js'
];
await fs.ensureDir('elements');
await concat(files, 'elements/input-output-element.js');
})();

"build": "ng build --prod --output-hashing=none && node make-elements.js"
$ npm run build

Assimilation Of Angular Elements

...
<script src="input-output-element.js" ></script>
...
<input-output></input-output>
<script>
var info={name:'WTT'};
var element = document.querySelector('input-output');
element.info=info;
element.addEventListener('message', function(data){
alert(data.detail);
});
</script>
...

Best Practices

1) Create shadow root to encapsulate styles
2) Place any children the element creates into its shadow root
3) Set a :host display style unless you prefer the default of inline
4) Add a :host display style that respects the attributes.
5) Always accept primitive data (strings, numbers, booleans) as either
attributes or properties.

Browser Support

Questions and Answers
38

Thank You!
39

Web components in Angular (Angular Elements) | Walkingtree Technologies

More Related Content

Similar to Web components in Angular (Angular Elements) | Walkingtree Technologies

Recently uploaded

Web components in Angular (Angular Elements) | Walkingtree Technologies