Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ng Sydney Dynamic Templates Talk - 18 April 2018

Walk through of two blog posts by Max Ng Wizard on how the various references are used in Angular to create dynamic components, plus some examples of where these techniques are applicable.

  • Login to see the comments

Ng Sydney Dynamic Templates Talk - 18 April 2018

  1. 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] Industry Professor, UTS – roger.kermode [at]
  2. 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“ • • “Here is what you need to know about dynamic components in Angular • 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. 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. 4. Copyright © Incyzr 2018 Exploring Angular DOM manipulation techniques using ViewContainerRef abstractions-80b3ebcfc02
  5. 5. Copyright © Incyzr 2018 Refs in Angular
  6. 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. 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( etc instead
  8. 8. Copyright © Incyzr 2018 TemplateRef part1 • Build on HTML Templates • Template content removed from DOM • Can be inserted elsewhere
  9. 9. Copyright © Incyzr 2018 TemplateRef Part2 • Still build on HTML Templates • Core part of Angular for rendering views
  10. 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. 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. 12. Copyright © Incyzr 2018 View Fun with Refs
  13. 13. Copyright © Incyzr 2018 Manipulating Views • ViewContainer provides an API for manipulating views • Once created, a view can be inserted into the DOM
  14. 14. Copyright © Incyzr 2018 Creating View • Now for the fun part… • Views can also be created in code via components
  15. 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. 16. Copyright © Incyzr 2018 Dynamic Components Source: to-know-about-dynamic-components-in-angular-ac1e96167f9e
  17. 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. 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. 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. 20. Copyright © Incyzr 2018 Dynamic Component Creation….
  21. 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 •
  22. 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. 23. Copyright © Incyzr 2018 lacolaco/ng-dynamic: dynamic-html component
  24. 24. Copyright © Incyzr 2018 lacolaco/ng-dynamic: *dynamicComponent Directive
  25. 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. 26. Copyright © Incyzr 2018 Thank You Dr. Roger Kermode roger [at]