Ng Sydney Dynamic Templates Talk - 18 April 2018

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

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!

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?

Exploring Angular DOM
manipulation techniques using
ViewContainerRef
https://blog.angularindepth.com/exploring-angular-dom-
abstractions-80b3ebcfc02

Refs in Angular

@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

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

TemplateRef part1
• Build on HTML Templates
• Template content removed
from DOM
• Can be inserted elsewhere

TemplateRef Part2
• Still build on HTML Templates
• Core part of Angular for
rendering views

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

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>

View Fun with Refs

Manipulating Views
• ViewContainer provides an
API for manipulating views
• Once created, a view can
be inserted into the DOM

Creating View
• Now for the fun part…
• Views can also be created in code via components

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

Dynamic Components
Source: https://blog.angularindepth.com/here-is-what-you-need-
to-know-about-dynamic-components-in-angular-ac1e96167f9e

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)

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…..

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

Dynamic Component
Creation….

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

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

lacolaco/ng-dynamic: dynamic-html component

lacolaco/ng-dynamic: *dynamicComponent Directive

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

Thank You
Dr. Roger Kermode
roger [at] incyzr.com

Ng Sydney Dynamic Templates Talk - 18 April 2018

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ng Sydney Dynamic Templates Talk - 18 April 2018

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

Recently uploaded

Recently uploaded (20)

Ng Sydney Dynamic Templates Talk - 18 April 2018

Editor's Notes