Web Components with Angular Elements: Beyond the Basics @ngconf 2019

Web Components with Angular Elements: Beyond the Basics @ngconf 2019

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

May 01, 2019
Tweet

Transcript

  1. 8.

    @ManfredSteyer Contents • Basics (just one slide) • Dynamically adding

    elements • Lazy loading elements • External elements • Bundle Size
  2. 9.

    @ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 9 Manfred Steyer Public: Vienna, Munich, Frankfurt In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops
  3. 14.

    @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop']

    = 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…])
  4. 15.

    @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile'); tile['prop']

    = 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…]) otherElement.appendChild(tile); Angular uses Domino to simulate document for SSR!
  5. 21.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
  6. 22.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module‘; […] } }
  7. 23.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { }); } }
  8. 24.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); }); } }
  9. 28.
  10. 31.

    @ManfredSteyer One of the simplest bundle loaders … const script

    = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
  11. 34.

    @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element

    3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
  12. 37.

    @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom

    Element 3 Libraries: Angular, RxJS, … Drawbacks: Complexity, non-default build, …
  13. 38.

    @ManfredSteyer Summary Reuse with other technologies Dynamically Adding Lazy Loading

    External Elements Ivy for UI-based Code Sharing Dependencies
  14. 40.

    @ManfredSteyer Blog > SOFTWAREarchitekt.at • Angular Elements, Part I: A

    Dynamic Dashboard In Four Steps With Web Components […] • Angular Elements, Part V: Your Options For Building Angular Elements With The CLI
  15. 41.

    @ManfredSteyer Workshop: Tomorrow A Deep Look at Angular Elements With

    live coding and exercises for you on StackBlitz Thu, May 2:30 pm - 4:30 pm