Ng Sydney Dynamic Templates Talk - 18 April 2018

Roger Kermode
Roger KermodeCTO / Entrepreneur at iPrime
Copyright © Incyzr 2018
Dynamic Templates in Angular
OR How to Incorporate Dynamic Content into Your
Application
(both Templates and Components) without tears
Dr. Roger Kermode
CEO & Co-Founder, Incyzr – roger [at] incyzr.com
Industry Professor, UTS – roger.kermode [at] uts.edu.au
Copyright © Incyzr 2018
Attribution and Disclaimer
Attribution
•This talk is based largely on the content created by
Max NgWizard K’s Angular In Depth Blog posts
• “Exploring Angular DOM manipulation techniques using ViewContainerRef“
• https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02
• “Here is what you need to know about dynamic components in Angular
• https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-
components-in-angular-ac1e96167f9e
Disclaimer
•I am not nor do I claim to be an Angular Developer / Expert or a
Professional Developer - any errors or omissions in this talk are
unintended and solely my responsibility!
Copyright © Incyzr 2018
Angular is Awesome…. but opinionated
• In comparison to another popular framework “X” the following has
been said
• If makes little sense to compare “X” with Angular, they’re so different -
If you were to liken “X” to a screwdriver then the Angular equivalent would
be the entire toolbox.
• Opinionated and fully featured design affords a lot of power
• But what if you need to step a little outside those guidelines?
Copyright © Incyzr 2018
Exploring Angular DOM
manipulation techniques using
ViewContainerRef
https://blog.angularindepth.com/exploring-angular-dom-
abstractions-80b3ebcfc02
Copyright © Incyzr 2018
Refs in Angular
Copyright © Incyzr 2018
@ViewChild
• Provides the mechanism for the
component to access content in
the template
• Elements
• Components
• Can use @ViewChildren to
access multiple of same type
• Returns QueryList that needs to be
processed into an array
Copyright © Incyzr 2018
ElementRef
• Provides access to the HTML
element
• Use .nativeElement to access
DOM properties
• Not to be used if at all possible
• If manipulating sizes better to use
@HostBinding(style.top.px) etc
instead
Copyright © Incyzr 2018
TemplateRef part1
• Build on HTML Templates
• Template content removed
from DOM
• Can be inserted elsewhere
Copyright © Incyzr 2018
TemplateRef Part2
• Still build on HTML Templates
• Core part of Angular for
rendering views
Copyright © Incyzr 2018
ViewRef
• Views are fundamental building
blocks of the application UI.
• They are the smallest grouping
of elements that can be created
/ destroyed together
• Angular supports 2 types of
view
• Embedded Views link to a Template
• Host Views linked to a Component
Copyright © Incyzr 2018
ViewContainerRef
• ViewContainerRef represents a
container where one or more
views can be rendered.
• Views are appended AFTER
the element bound to the
ViewContainer.
• Also see this in the DOM with
• <ng-container>
• <ng-content>
• <router-outlet>
Copyright © Incyzr 2018
View Fun with Refs
Copyright © Incyzr 2018
Manipulating Views
• ViewContainer provides an
API for manipulating views
• Once created, a view can
be inserted into the DOM
Copyright © Incyzr 2018
Creating View
• Now for the fun part…
• Views can also be created in code via components
Copyright © Incyzr 2018
ngTemplateOutlet & ngComponentOutlet
• Angular even provides a
shortcut that removes the need
for writing code
• ngTemplateOutlet inserts a
embedded view
• ngComponentOutlet inserts a
host view (instantiates a
component
Copyright © Incyzr 2018
Dynamic Components
Source: https://blog.angularindepth.com/here-is-what-you-need-
to-know-about-dynamic-components-in-angular-ac1e96167f9e
Copyright © Incyzr 2018
What about Dynamic Content?
• Not all content can be predefined in templates at the time of coding
• Need a way to pull rich content that includes angular components,
directives etc. from a database and instantiates them on the fly
• Some Examples
• Markdown / WYSIWIG Editor
• Template is modified and needs to have components insideit
• Rich User Defined Content from a Database
• More than just a comment, want multiple links with custom behaviors (e.g. contextual
drag and drop)
Copyright © Incyzr 2018
How AngularJs Solved this Problem
• Define the template
• Use the built in compiler
• Insert the content into the DOM
• Simple!
• Angular is different
• No equivalent to $compile
• Setting innerHTML doesn’t work
• Content is sanitized
• Components NOT instantiated
• So we need to create a component
dynamically and then install it
• What would this look like…..
Copyright © Incyzr 2018
Anatomy of Angular Component Creation
• How could we create a component on the fly?
• Good starting point is to look at how lazy loaded
components are instantiated….
• Ugh - This is a complicated process:
1. Angular Expects Modules with components inside SO ->
2. Need to create a module on the fly that contains the
component AND
3. Ensure that Dependency Injection is setup properly AND
4. Ensure that Module is injected properly
• For full details see the blog post…
• Still doesn’t get us to where we need to be
• Dynamic templates – i.e. not defined at run time
• Support for Components inside the templates to enable
complex UI behaviors
Copyright © Incyzr 2018
Dynamic Component
Creation….
Copyright © Incyzr 2018
Observations
• Lot of heavy lifting need to support dynamic content…
• Hasn’t someone come up with a solution and packaged this up
already?
• Yes they have….
• Lacolaco (Suguru Inatomi) created the ng-dynamic package
• https://github.com/lacolaco/ng-dynamic
Copyright © Incyzr 2018
lacolaco/ng-dynamic
• Package provides
• dynamic-html Component
• render an HTML string, potentially
provided from a database
• BUT does not handle template
interpolation and conditionals i.e.
{{foo}}, *ngIf
• *dynamicComponent Directive
• creates a dynamic component
• Renders the HTML and all the
template interpolation and
conditionals
Copyright © Incyzr 2018
lacolaco/ng-dynamic: dynamic-html component
Copyright © Incyzr 2018
lacolaco/ng-dynamic: *dynamicComponent Directive
Copyright © Incyzr 2018
Incyzr– Deep Linked Comment Example
Comment String from Database
Embedded
Components
“This is the first comment on
<zr-entity
zr-entity-type='person’
zr-entity-name='Roger Kermode’
zr-entity-id='5ad67dfeaea7b64479a6ea9a'>
Roger
</zr-entity>
, he lives in
<zr-entity
zr-entity-type='place’
zr-entity-name='Sydney’
zr-entity-id='5ad67dfdaea7b64479a6ea69'>
Sydney
</zr-entity>”
zr-comment-item.component.pug
Rendered Output
zr-entity.component.pug
Copyright © Incyzr 2018
Thank You
Dr. Roger Kermode
roger [at] incyzr.com
1 of 26

Recommended

Angular IO by
Angular IOAngular IO
Angular IOJennifer Estrada
126 views30 slides
What is Angular version 4? by
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
530 views26 slides
Introduction to angular 2 by
Introduction to angular 2Introduction to angular 2
Introduction to angular 2Dor Moshe
1.1K views72 slides
Quick Way to work with Models and Alloy in Appcelerator Titanium by
Quick Way to work with Models and Alloy in Appcelerator TitaniumQuick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator TitaniumAaron Saunders
8.4K views9 slides
TestingAR IX - Retorno de Inversión - POM TestingAr by
TestingAR IX - Retorno de Inversión - POM TestingArTestingAR IX - Retorno de Inversión - POM TestingAr
TestingAR IX - Retorno de Inversión - POM TestingArTestingAR Meetup
282 views10 slides
Lecture 32 by
Lecture 32Lecture 32
Lecture 32Jannat Khan
97 views43 slides

More Related Content

What's hot

AngularJS Vs Angular: Understanding the Differences by
AngularJS Vs Angular: Understanding the DifferencesAngularJS Vs Angular: Understanding the Differences
AngularJS Vs Angular: Understanding the DifferencesTechtic Solutions
567 views15 slides
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017 by
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017Matt Raible
346 views62 slides
Angular 2 by
Angular 2Angular 2
Angular 2Nigam Goyal
2.7K views50 slides
Angular interview questions by
Angular interview questionsAngular interview questions
Angular interview questionsGoa App
925 views28 slides
Angular 9 by
Angular 9 Angular 9
Angular 9 Raja Vishnu
899 views36 slides
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne... by
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...Edureka!
3.9K views8 slides

What's hot(20)

AngularJS Vs Angular: Understanding the Differences by Techtic Solutions
AngularJS Vs Angular: Understanding the DifferencesAngularJS Vs Angular: Understanding the Differences
AngularJS Vs Angular: Understanding the Differences
Techtic Solutions567 views
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017 by Matt Raible
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
Matt Raible346 views
Angular interview questions by Goa App
Angular interview questionsAngular interview questions
Angular interview questions
Goa App925 views
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne... by Edureka!
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Edureka!3.9K views
Introduction To Angular 4 - J2I by Nader Debbabi
Introduction To Angular 4 - J2IIntroduction To Angular 4 - J2I
Introduction To Angular 4 - J2I
Nader Debbabi1K views
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu... by Edureka!
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!1.1K views
Angular kickstart slideshare by SaleemMalik52
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
SaleemMalik52253 views
Mastering angular - Dot Net Tricks by Gaurav Singh
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
Gaurav Singh76 views
S60 3rd FP2 Widgets by romek
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgets
romek7K views
Angular 10 course_content by NAVEENSAGGAM1
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
NAVEENSAGGAM1326 views
Web components are the future of the web - Take advantage of new web technolo... by Marios Fakiolas
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
Marios Fakiolas1.3K views
Routing & Navigating Pages in Angular 2 by Knoldus Inc.
Routing & Navigating Pages in Angular 2Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2
Knoldus Inc.1.5K views
Major project 2013 14 by Parag Garg
Major project 2013 14Major project 2013 14
Major project 2013 14
Parag Garg496 views
Beginning iOS6 Development CH03 Handlling Basic Interaction by Abdulrazzaq Alnajjar
Beginning iOS6 Development CH03 Handlling Basic InteractionBeginning iOS6 Development CH03 Handlling Basic Interaction
Beginning iOS6 Development CH03 Handlling Basic Interaction
Angular 4 Introduction Tutorial by Scott Lee
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
Scott Lee4.1K views

Similar to Ng Sydney Dynamic Templates Talk - 18 April 2018

Advanced angular by
Advanced angularAdvanced angular
Advanced angularSumit Kumar Rakshit
70 views61 slides
Web Components by
Web ComponentsWeb Components
Web ComponentsFITC
1.4K views27 slides
Introduction to angular with a simple but complete project by
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectJadson Santos
13K views106 slides
Angular by
AngularAngular
AngularVinod Kumar Kayartaya
84 views47 slides
What's new in Angular 2? by
What's new in Angular 2?What's new in Angular 2?
What's new in Angular 2?Alfred Jett Grandeza
477 views42 slides
Web Components by
Web ComponentsWeb Components
Web ComponentsFITC
2.1K views36 slides

Similar to Ng Sydney Dynamic Templates Talk - 18 April 2018(20)

Web Components by FITC
Web ComponentsWeb Components
Web Components
FITC1.4K views
Introduction to angular with a simple but complete project by Jadson Santos
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
Jadson Santos13K views
Web Components by FITC
Web ComponentsWeb Components
Web Components
FITC2.1K views
Build Reusable Web Components using HTML5 Web cComponents by Gil Fink
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponents
Gil Fink2.8K views
Web component driven development by Gil Fink
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink1.2K views
Web components by Gil Fink
Web componentsWeb components
Web components
Gil Fink517 views
Angular.ppt by Mytrux1
Angular.pptAngular.ppt
Angular.ppt
Mytrux127 views
Web components - The Future is Here by Gil Fink
Web components - The Future is HereWeb components - The Future is Here
Web components - The Future is Here
Gil Fink486 views
AngularJS Beginners Workshop by Sathish VJ
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
Sathish VJ4.4K views
Angular js Online Training by Learntek1
Angular js Online TrainingAngular js Online Training
Angular js Online Training
Learntek134 views

Recently uploaded

Transport Management System - Shipment & Container Tracking by
Transport Management System - Shipment & Container TrackingTransport Management System - Shipment & Container Tracking
Transport Management System - Shipment & Container TrackingFreightoscope
6 views3 slides
The Path to DevOps by
The Path to DevOpsThe Path to DevOps
The Path to DevOpsJohn Valentino
6 views6 slides
ADDO_2022_CICID_Tom_Halpin.pdf by
ADDO_2022_CICID_Tom_Halpin.pdfADDO_2022_CICID_Tom_Halpin.pdf
ADDO_2022_CICID_Tom_Halpin.pdfTomHalpin9
6 views33 slides
Agile 101 by
Agile 101Agile 101
Agile 101John Valentino
13 views20 slides
Electronic AWB - Electronic Air Waybill by
Electronic AWB - Electronic Air Waybill Electronic AWB - Electronic Air Waybill
Electronic AWB - Electronic Air Waybill Freightoscope
6 views1 slide
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P... by
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...NimaTorabi2
17 views17 slides

Recently uploaded(20)

Transport Management System - Shipment & Container Tracking by Freightoscope
Transport Management System - Shipment & Container TrackingTransport Management System - Shipment & Container Tracking
Transport Management System - Shipment & Container Tracking
Freightoscope 6 views
ADDO_2022_CICID_Tom_Halpin.pdf by TomHalpin9
ADDO_2022_CICID_Tom_Halpin.pdfADDO_2022_CICID_Tom_Halpin.pdf
ADDO_2022_CICID_Tom_Halpin.pdf
TomHalpin96 views
Electronic AWB - Electronic Air Waybill by Freightoscope
Electronic AWB - Electronic Air Waybill Electronic AWB - Electronic Air Waybill
Electronic AWB - Electronic Air Waybill
Freightoscope 6 views
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P... by NimaTorabi2
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
NimaTorabi217 views
How to build dyanmic dashboards and ensure they always work by Wiiisdom
How to build dyanmic dashboards and ensure they always workHow to build dyanmic dashboards and ensure they always work
How to build dyanmic dashboards and ensure they always work
Wiiisdom16 views
Top-5-production-devconMunich-2023-v2.pptx by Tier1 app
Top-5-production-devconMunich-2023-v2.pptxTop-5-production-devconMunich-2023-v2.pptx
Top-5-production-devconMunich-2023-v2.pptx
Tier1 app9 views
Mobile App Development Company by Richestsoft
Mobile App Development CompanyMobile App Development Company
Mobile App Development Company
Richestsoft 5 views
predicting-m3-devopsconMunich-2023.pptx by Tier1 app
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptx
Tier1 app10 views
predicting-m3-devopsconMunich-2023-v2.pptx by Tier1 app
predicting-m3-devopsconMunich-2023-v2.pptxpredicting-m3-devopsconMunich-2023-v2.pptx
predicting-m3-devopsconMunich-2023-v2.pptx
Tier1 app14 views
Supercharging your Python Development Environment with VS Code and Dev Contai... by Dawn Wages
Supercharging your Python Development Environment with VS Code and Dev Contai...Supercharging your Python Development Environment with VS Code and Dev Contai...
Supercharging your Python Development Environment with VS Code and Dev Contai...
Dawn Wages5 views
Automated Testing of Microsoft Power BI Reports by RTTS
Automated Testing of Microsoft Power BI ReportsAutomated Testing of Microsoft Power BI Reports
Automated Testing of Microsoft Power BI Reports
RTTS11 views
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile... by Stefan Wolpers
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
Stefan Wolpers44 views
Top-5-production-devconMunich-2023.pptx by Tier1 app
Top-5-production-devconMunich-2023.pptxTop-5-production-devconMunich-2023.pptx
Top-5-production-devconMunich-2023.pptx
Tier1 app10 views

Ng Sydney Dynamic Templates Talk - 18 April 2018

  • 1. Copyright © Incyzr 2018 Dynamic Templates in Angular OR How to Incorporate Dynamic Content into Your Application (both Templates and Components) without tears Dr. Roger Kermode CEO & Co-Founder, Incyzr – roger [at] incyzr.com Industry Professor, UTS – roger.kermode [at] uts.edu.au
  • 2. Copyright © Incyzr 2018 Attribution and Disclaimer Attribution •This talk is based largely on the content created by Max NgWizard K’s Angular In Depth Blog posts • “Exploring Angular DOM manipulation techniques using ViewContainerRef“ • https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02 • “Here is what you need to know about dynamic components in Angular • https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic- components-in-angular-ac1e96167f9e Disclaimer •I am not nor do I claim to be an Angular Developer / Expert or a Professional Developer - any errors or omissions in this talk are unintended and solely my responsibility!
  • 3. Copyright © Incyzr 2018 Angular is Awesome…. but opinionated • In comparison to another popular framework “X” the following has been said • If makes little sense to compare “X” with Angular, they’re so different - If you were to liken “X” to a screwdriver then the Angular equivalent would be the entire toolbox. • Opinionated and fully featured design affords a lot of power • But what if you need to step a little outside those guidelines?
  • 4. Copyright © Incyzr 2018 Exploring Angular DOM manipulation techniques using ViewContainerRef https://blog.angularindepth.com/exploring-angular-dom- abstractions-80b3ebcfc02
  • 5. Copyright © Incyzr 2018 Refs in Angular
  • 6. Copyright © Incyzr 2018 @ViewChild • Provides the mechanism for the component to access content in the template • Elements • Components • Can use @ViewChildren to access multiple of same type • Returns QueryList that needs to be processed into an array
  • 7. Copyright © Incyzr 2018 ElementRef • Provides access to the HTML element • Use .nativeElement to access DOM properties • Not to be used if at all possible • If manipulating sizes better to use @HostBinding(style.top.px) etc instead
  • 8. Copyright © Incyzr 2018 TemplateRef part1 • Build on HTML Templates • Template content removed from DOM • Can be inserted elsewhere
  • 9. Copyright © Incyzr 2018 TemplateRef Part2 • Still build on HTML Templates • Core part of Angular for rendering views
  • 10. Copyright © Incyzr 2018 ViewRef • Views are fundamental building blocks of the application UI. • They are the smallest grouping of elements that can be created / destroyed together • Angular supports 2 types of view • Embedded Views link to a Template • Host Views linked to a Component
  • 11. Copyright © Incyzr 2018 ViewContainerRef • ViewContainerRef represents a container where one or more views can be rendered. • Views are appended AFTER the element bound to the ViewContainer. • Also see this in the DOM with • <ng-container> • <ng-content> • <router-outlet>
  • 12. Copyright © Incyzr 2018 View Fun with Refs
  • 13. Copyright © Incyzr 2018 Manipulating Views • ViewContainer provides an API for manipulating views • Once created, a view can be inserted into the DOM
  • 14. Copyright © Incyzr 2018 Creating View • Now for the fun part… • Views can also be created in code via components
  • 15. Copyright © Incyzr 2018 ngTemplateOutlet & ngComponentOutlet • Angular even provides a shortcut that removes the need for writing code • ngTemplateOutlet inserts a embedded view • ngComponentOutlet inserts a host view (instantiates a component
  • 16. Copyright © Incyzr 2018 Dynamic Components Source: https://blog.angularindepth.com/here-is-what-you-need- to-know-about-dynamic-components-in-angular-ac1e96167f9e
  • 17. Copyright © Incyzr 2018 What about Dynamic Content? • Not all content can be predefined in templates at the time of coding • Need a way to pull rich content that includes angular components, directives etc. from a database and instantiates them on the fly • Some Examples • Markdown / WYSIWIG Editor • Template is modified and needs to have components insideit • Rich User Defined Content from a Database • More than just a comment, want multiple links with custom behaviors (e.g. contextual drag and drop)
  • 18. Copyright © Incyzr 2018 How AngularJs Solved this Problem • Define the template • Use the built in compiler • Insert the content into the DOM • Simple! • Angular is different • No equivalent to $compile • Setting innerHTML doesn’t work • Content is sanitized • Components NOT instantiated • So we need to create a component dynamically and then install it • What would this look like…..
  • 19. Copyright © Incyzr 2018 Anatomy of Angular Component Creation • How could we create a component on the fly? • Good starting point is to look at how lazy loaded components are instantiated…. • Ugh - This is a complicated process: 1. Angular Expects Modules with components inside SO -> 2. Need to create a module on the fly that contains the component AND 3. Ensure that Dependency Injection is setup properly AND 4. Ensure that Module is injected properly • For full details see the blog post… • Still doesn’t get us to where we need to be • Dynamic templates – i.e. not defined at run time • Support for Components inside the templates to enable complex UI behaviors
  • 20. Copyright © Incyzr 2018 Dynamic Component Creation….
  • 21. Copyright © Incyzr 2018 Observations • Lot of heavy lifting need to support dynamic content… • Hasn’t someone come up with a solution and packaged this up already? • Yes they have…. • Lacolaco (Suguru Inatomi) created the ng-dynamic package • https://github.com/lacolaco/ng-dynamic
  • 22. Copyright © Incyzr 2018 lacolaco/ng-dynamic • Package provides • dynamic-html Component • render an HTML string, potentially provided from a database • BUT does not handle template interpolation and conditionals i.e. {{foo}}, *ngIf • *dynamicComponent Directive • creates a dynamic component • Renders the HTML and all the template interpolation and conditionals
  • 23. Copyright © Incyzr 2018 lacolaco/ng-dynamic: dynamic-html component
  • 24. Copyright © Incyzr 2018 lacolaco/ng-dynamic: *dynamicComponent Directive
  • 25. Copyright © Incyzr 2018 Incyzr– Deep Linked Comment Example Comment String from Database Embedded Components “This is the first comment on <zr-entity zr-entity-type='person’ zr-entity-name='Roger Kermode’ zr-entity-id='5ad67dfeaea7b64479a6ea9a'> Roger </zr-entity> , he lives in <zr-entity zr-entity-type='place’ zr-entity-name='Sydney’ zr-entity-id='5ad67dfdaea7b64479a6ea69'> Sydney </zr-entity>” zr-comment-item.component.pug Rendered Output zr-entity.component.pug
  • 26. Copyright © Incyzr 2018 Thank You Dr. Roger Kermode roger [at] incyzr.com

Editor's Notes

  1. In
  2. ANatom
  3. lactyh