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?

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

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>

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

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

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

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