Why Angular does not support rendering Template HTML dynamically at run-time

Introduction

Ever since Angular 2 was released in September 2017, I have been searching for ways to achieve this functionality, i.e. providing an Angular Template HTML dynamically/at run-time and be able to render it in the view as if it was part of the compiled Angular application itself. Alas! After countless hours of searches and researches on this topic over many years, I have to concede defeat and accept that, for all practical purposes, Angular does not, cannot and will not support rendering Angular Template HTML dynamically (without making major compromises). This article tries to answer the “why”.

What Angular does with its templates

First, you need to realize what all are the features available to us for use in an Angular Component’s Template. Following is an example that should cover all the major features.

<!-- component (a) within Host Component's template -->
<app-comp-a></app-comp-a>
<!-- component (c) projected within another component (b) -->
<app-comp-b>
    <app-comp-c></app-comp-c>
</app-comp-b>
<!-- [directives] in standard HTML element -->
<input
    [class.show]="isValid" << dynamically-bound directive value
    [(ngModel)]="name" << two-way data-binding
/>
<!-- [directives], @Inputs and @Outputs in Angular components -->
<app-comp-d
    *ngIf="isValid" << structural directive
    appPreview="/url/home" << statically-bound directive
    [data]="compDData"
    (dValChange)="onDValueChanged($event)"
/>
<!-- standard HTML elements, custom static HTML-->
<p [innerHTML]="someStaticHtml"></p>
<!-- {{ interpolation }} and pipes -->
<p class="dates">{{ modifiedDate | date:'medium' }}</p>

<ng-container>...</ng-container>

<ng-template>...</ng-template>

That is a LOT of features! How do you think Angular even provides such complex functionalities to us?

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
— Angular AOT Compilation documentation

It is the Angular Compiler that upholds the responsibility of compiling all components and their HTML templates. It compiles each and every HTML element, attribute, directive, component, interpolation syntax, Input/Output syntax, etc. in a template into JavaScript code. The template HTML ceases to exist after the compilation process — it’s all JavaScript!

So, if you wanted Angular to support rendering a Template HTML at run-time, dynamically, then you would also need the Compiler in the final application code loaded in the browser.

And, actually, YES, you can do that. But, realize that the Compiler and its dependencies are going to be super-heavy, and, not to mention, you will have to disable AOT Compilation. Do you think it is practical to load and expose 5–15 Mega Bytes of source code without it being compiled, tree-shaken and obfuscated?

Another alternative would be for you to parse your dynamic HTML yourself to create the necessary components and directives dynamically, evaluate the appropriate expressions from string to code, render it in view and make sure that Angular’s ChangeDetection works after that. But then, you would embarking on a mega project to create your own Angular Compiler. Let’s say, you are successful in doing that, then why would you even need Angular anymore?

Conclusion

1. You cannot expect Angular to support rendering Template HTML dynamically because, to support it, you would require the Compiler too at run-time which is neither practical nor secure.
2. You can compile Template HTML at run-time by using Compiler directly in the final application, but that is, again, not a practical solution.
3. You could also conclude that Angular — and even React (Saga) or Vue, because ALL of these modern frameworks are declarative in nature — are not the right choice if your application really really weeeeally requires dynamically generated templates. In that case, you may be better off using a much simpler framework or library like handlebars, Knockout, JSRender or even JQuery Templates (ha!).

However, as a final note, I would like to add that I was partially successful in being able to render a Template HTML dynamically but with restrictions on the composition of the Template — it can contain only Components and with string-type Inputs; no directives, no interpolation, no Outputs, no ng-stuffs. Anyway, more on this later.