Download as PDF, PPTX
![button.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'sa-button',
template: ` ...`,
styleUrls: ['./button.component.scss'],
})
export class ButtonComponent implements OnInit {
constructor() { }
ngOnInit() {}
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-29-320.jpg)
![button.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'sa-button',
template: ` <button id="text" class="btn">{{ text }}</button>`,
styleUrls: ['./button.component.scss'],
})
export class ButtonComponent implements OnInit {
@Input() text= 'Click me!';
constructor() { }
ngOnInit() {}
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-30-320.jpg)
![button.component.ts
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
@Component({
selector: 'sa-button',
template: ` ...`,
styleUrls: ['./'sa-button'.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-33-320.jpg)
![app.module.ts
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@NgModule({
declarations: [ ButtonComponent ],
imports: [ BrowserModule ],
entryComponents: [ ButtonComponent ]
})](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-35-320.jpg)
![app.module.ts
@NgModule({
declarations: [ButtonComponent],
imports: [BrowserModule],
entryComponents: [ButtonComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const saButton = createCustomElement(ButtonComponent, { injector });
customElements.define('sa-button', saButton);
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-36-320.jpg)
![app.module.ts
@NgModule({
declarations: [ButtonComponent],
imports: [BrowserModule],
entryComponents: [ButtonComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const saButton = createCustomElement(ButtonComponent, { injector });
customElements.define('sa-button', saButton);
}
ngDoBootstrap() {}
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-37-320.jpg)
![[...]
"architect": {
"build": {
"builder": "ngx-build-plus:build",
[...]
}
}
[...]
angular.json](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-46-320.jpg)
![app.module.ts
@NgModule({
[…],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule { }](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-54-320.jpg)
![app.component.ts
import { Component } from '@angular/core';
import * as saButton from '../webcomponents/sa-button/sa-button.js';
@Component({
selector: 'sa-root',
template: `
<sa-button text="hi" ></sa-button>
`',
styleUrls: ['./app.component.css']
})
export class AppComponent {...}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/85/Web-components-with-Angular-55-320.jpg)
![button.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'sa-button',
template: ` ...`,
styleUrls: ['./button.component.scss'],
})
export class ButtonComponent implements OnInit {
constructor() { }
ngOnInit() {}
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-29-2048.jpg)
![button.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'sa-button',
template: ` <button id="text" class="btn">{{ text }}</button>`,
styleUrls: ['./button.component.scss'],
})
export class ButtonComponent implements OnInit {
@Input() text= 'Click me!';
constructor() { }
ngOnInit() {}
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-30-2048.jpg)
![button.component.ts
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
@Component({
selector: 'sa-button',
template: ` ...`,
styleUrls: ['./'sa-button'.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-33-2048.jpg)
![app.module.ts
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@NgModule({
declarations: [ ButtonComponent ],
imports: [ BrowserModule ],
entryComponents: [ ButtonComponent ]
})](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-35-2048.jpg)
![app.module.ts
@NgModule({
declarations: [ButtonComponent],
imports: [BrowserModule],
entryComponents: [ButtonComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const saButton = createCustomElement(ButtonComponent, { injector });
customElements.define('sa-button', saButton);
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-36-2048.jpg)
![app.module.ts
@NgModule({
declarations: [ButtonComponent],
imports: [BrowserModule],
entryComponents: [ButtonComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const saButton = createCustomElement(ButtonComponent, { injector });
customElements.define('sa-button', saButton);
}
ngDoBootstrap() {}
}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-37-2048.jpg)
![[...]
"architect": {
"build": {
"builder": "ngx-build-plus:build",
[...]
}
}
[...]
angular.json](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-46-2048.jpg)
![app.module.ts
@NgModule({
[…],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule { }](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-54-2048.jpg)
![app.component.ts
import { Component } from '@angular/core';
import * as saButton from '../webcomponents/sa-button/sa-button.js';
@Component({
selector: 'sa-root',
template: `
<sa-button text="hi" ></sa-button>
`',
styleUrls: ['./app.component.css']
})
export class AppComponent {...}](https://image.slidesharecdn.com/webcomponentswithangular1-190213123451/75/Web-components-with-Angular-55-2048.jpg)
More Related Content
Similar to Web components with Angular
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Web components with Angular
- 1.
- 2. Hello! I’m Sherry List AzureDeveloper Technical Lead, Microsoft Women Techmaker Lead You can find me at @SherrryLst
- 3. Hi! I’m Ana Cidre DeveloperAdvocate, Ultimate Courses Women Techmaker Lead You can find me at @AnaCidre_
- 4.
- 5. A component thatis platform agnostic Their main goal is to encapsulate the code for the components into a nice, reusable package for maximum interoperability.
- 6.
- 8. Web components consistof three main technologies: ● HTML template ● Custom Elements ● Shadow DOM ● HTML imports
- 10. html <sa-button text="Click here" style="--background-color: navy;--color: aqua; --font-weight: 600; --padding: 12px;"> </sa-button>
- 11. js const template =` <style> .btn { font-weight: var(--font-weight, 200); background-color: var(--background-color, indianred); border: 0; border-radius: 5px; color: var(--color, #fff); padding: var(--padding, 10px); text-transform: uppercase; } </style> <button id="text" class="btn"></button> `;
- 12. js class SAButtonElement extendsHTMLElement { constructor() { super(); const template = document.createElement("template"); // Shadow DOM this.attachShadow({ "mode": "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); }
- 13. js class SAButtonElement extendsHTMLElement { constructor() { super(); const template = document.createElement("template"); // Shadow DOM this.attachShadow({ "mode": "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } … } // Define custom element customElements.define("sa-button", SAButtonElement);
- 14.
- 15.
- 16. Adding a Web Componentto an Angular project Creating Web Components with Angular
- 17. Adding a Web Componentto an Angular project Creating Web Components with Angular How does that web component communicate to the Angular project
- 18. Adding a Web Componentto an Angular project A look into the future Creating Web Components with Angular How does that web component communicate to the Angular project
- 20.
- 21. npm i -g@angular/cli terminal
- 22. npm i -g@angular/cli ng new sa-button --prefix sa --inline-template --style=scss terminal
- 23. npm i -g@angular/cli ng new sa-button --prefix sa --inline-template --style=scss cd sa-button terminal
- 24. npm i -g@angular/cli ng new sa-button --prefix sa --inline-template --style=scss cd sa-button ng add @angular/elements terminal
- 25. npm i -g@angular/cli ng new sa-button --prefix sa --inline-template --style=scss cd sa-button ng add @angular/elements npm install @webcomponents/custom-elements --save terminal
- 26.
- 27. { "compileOnSave": false, "compilerOptions": { … "target":"es2015", …. } } } tsconfig.json
- 28. ng generate componentbutton terminal
- 29. button.component.ts import { Component,OnInit } from '@angular/core'; @Component({ selector: 'sa-button', template: ` ...`, styleUrls: ['./button.component.scss'], }) export class ButtonComponent implements OnInit { constructor() { } ngOnInit() {} }
- 30. button.component.ts import { Component,OnInit, Input } from '@angular/core'; @Component({ selector: 'sa-button', template: ` <button id="text" class="btn">{{ text }}</button>`, styleUrls: ['./button.component.scss'], }) export class ButtonComponent implements OnInit { @Input() text= 'Click me!'; constructor() { } ngOnInit() {} }
- 31. Web components consistof three main technologies: ● HTML template ● Shadow DOM ● Custom Elements
- 32. ViewEncapsulation.ShadowDom This encapsulation modeuses the Shadow DOM to scope styles only to this specific component.
- 33. button.component.ts import { Component,OnInit, ViewEncapsulation, Input } from '@angular/core'; @Component({ selector: 'sa-button', template: ` ...`, styleUrls: ['./'sa-button'.scss'], encapsulation: ViewEncapsulation.ShadowDom })
- 34. Web components consistof three main technologies: ● HTML template ● Shadow DOM ● Custom Elements
- 35. app.module.ts import { NgModule,Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; @NgModule({ declarations: [ ButtonComponent ], imports: [ BrowserModule ], entryComponents: [ ButtonComponent ] })
- 36. app.module.ts @NgModule({ declarations: [ButtonComponent], imports: [BrowserModule], entryComponents:[ButtonComponent], }) export class AppModule { constructor(private injector: Injector) { const saButton = createCustomElement(ButtonComponent, { injector }); customElements.define('sa-button', saButton); }
- 37. app.module.ts @NgModule({ declarations: [ButtonComponent], imports: [BrowserModule], entryComponents:[ButtonComponent], }) export class AppModule { constructor(private injector: Injector) { const saButton = createCustomElement(ButtonComponent, { injector }); customElements.define('sa-button', saButton); } ngDoBootstrap() {} }
- 39.
- 40.
- 41. ● Huge bundlesize ● No support for one bundle ● -> Eject ● Complicated! It’s not that easy!
- 42.
- 43. It’s that easy! ●Extends Cli ● No Eject ● Build a single bundle ● No need to add Angular multiple times to your project ● It’s simple!
- 44. How do weimplement it?
- 45.
- 46. [...] "architect": { "build": { "builder":"ngx-build-plus:build", [...] } } [...] angular.json
- 47. module.exports = { externals:{ rxjs: 'rxjs', '@angular/core': 'ng.core', '@angular/common': 'ng.common', '@angular/platform-browser': 'ng.platformBrowser', '@angular/elements': 'ng.elements', }, }; webpack.extra.js
- 48. ng build --prod --extraWebpackConfigwebpack.extra.js --single-bundle true terminal
- 49. Now our componentis ready!
- 50. Ivy ● Speed improvements ●Bundle size reduction ● Increasing flexibility The new backwards-compatible Angular renderer:
- 51. How do weuse our web component?
- 52. npm install @webcomponents/custom-elements--save terminal
- 53.
- 54.
- 55. app.component.ts import { Component} from '@angular/core'; import * as saButton from '../webcomponents/sa-button/sa-button.js'; @Component({ selector: 'sa-root', template: ` <sa-button text="hi" ></sa-button> `', styleUrls: ['./app.component.css'] }) export class AppComponent {...}
- 56. How do wecommunicate with the WC?
- 57. One way dataflow </> </></> </> </> </>
- 58. One way dataflow </> </></> </> </> </>
- 59. One way dataflow </> </></> </> </> </>
- 60. One way dataflow </> </></> </> </> </>
- 63. ✓ Create aweb component with Angular ✓ Add a web component to an existing Angular project ✓ Use the web component in an Angular project We are almost done!
- 64.
- 65. ● Maximum interoperability ●Support from Frameworks (Tooling) ● Many success stories ● Browsers are ready Web Components DO Rock!
- 66.
- 67.
- 68.
- 69. ● <template> inJS with template literals ● Extremely fast (Partial update) ● Customizable and extensible (Directives) What is lit-html?
- 71.
- 72. ● Base classfor creating web components ● Uses lit-html to render into the element’s Shadow DOM ● React to changes ● Extremely fast & light What is lit-element?
- 74.
- 75.
- 76. CSS Shadow Parts ::part() Checkout: https://meowni.ca/posts/part-theme-explainer/
- 77. <x-foo> #shadow-root <div part="some-box"><span>...</span></div> <input part="some-input"> <div>...</div>/* not styleable </x-foo> ::part Source: https://meowni.ca/posts/part-theme-explainer/
- 78. At a documentwhich has <x-foo>: x-foo::part(some-box) { … } x-foo::part(some-box):hover { … } x-foo::part(some-input)::placeholder { … } ::part Source: https://meowni.ca/posts/part-theme-explainer/
- 79. Angular ♥ WebComponents
- 80. Sherry List @SherrryLst Ana Cidre @AnaCidre_ Thankyou! http://bit.ly/front-end-love-web-components
- 81. Best practices ● https://w3ctag.github.io/webcomponents-design-guidelines/ ●https://github.com/webcomponents/gold-standard/wiki ● https://developers.google.com/web/fundamentals/web-components/best-practices
- 82. Resources ● https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynami c-dashboard-in-four-steps-with-web-components.aspx ● https://meowni.ca/posts/part-theme-explainer/ ●https://medium.com/google-developer-experts/are-web-components-a-thing-5a116 b1da7e4 ● https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-comp onents ● https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-t he-cli.aspx