Tech: Generating Dynamic HTML From JSON in Angular Apps
Angular developers often “hardcode” all HTML elements directly in the template. This seems fine for smaller components but becomes messy and repetitive when the same elements are expected to be rendered on the screen. Since Angular is an excellent framework for developing dynamic web pages, developers might consider inputting JSON configurations in the components in order to dynamically render HTML elements.
By building HTML from JSON configuration, we are able to:
- keep the component DRY
- save JSON configurations to database
- reuse logic across the application
In this article, we will look at 3 simple examples demonstrating configuration based approach in order to build dynamic templates in Angular apps.
Example 1
In the first example, we need to display 3 buttons next to each other. Each button has its own attributes with different labels or icons. A naive approach to render these buttons is defining all of them in the template like below:
Naive approach
<!-- Button 1 -->
<button mat-raised-button color="primary">Button 1</button><!-- Button 2 -->
<button mat-raised-button color="accent">
<mat-icon>more_vert</mat-icon>Button 2
</button><!-- Button 3 -->
<button mat-raised-button color="primary" disabled="true">
Button 3
</button>
The above template should work with no problem; however, what if we need to render another set of 3 buttons somewhere else in our app or what if some of the button’s attributes need to be updated during run time? Tricky problems ain’t they?
With a configuration based approach we define the definitions for each button in JSON format then apply several Angular features such as data/property binding, structural directives (*ngIf, *ngFor) to help us manipulate DOM elements.
Config based approach
@Component({selector: "master-detail-demo",
template: `
<button *ngFor="let btn of btnConfig"
mat-raised-button
[color]="btn.color"
[disabled]="btn.disabled"> <mat-icon *ngIf="btn.icon">{{ btn.icon }}</mat-icon>
{{ btn.label }}
</button>
`
})export class AppComponent {// button definitions
btnConfig = [
{ label: "Button 1", color: "primary" },
{ label: "Button 2", color: "accent", icon: "more_vert" },
{ label: "Button 3", color: "primary", disabled: true }
];}
See full example in Stackblitz here. Plus, you can also apply this technique for other HTML elements, not just buttons. If you are not convinced by the configuration approach in the first example, let’s see if the next one will make you change the way you code.
Example 2
We will examine the table tag in this example. Unless you are using any existing libraries like Angular Material or agGrid, building a data table from scratch is such a conundrum. In order to render columns’ headers and display data for each cell, we will be using a lot of repeated tags which, in fact, can make our template super duper long. Let’s compare two solutions below and see which one is your favorite.
Naive approach
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
...
</table>Config based approach
@Component({
selector: "app-config-table",
template: `
<table>
<tr>
<th *ngFor="let col of colDefs">{{col.label}}</th>
</tr>
<tr *ngFor="let row of data">
<td *ngFor="let col of colDefs">{{row[col.field]}}</td>
</tr>
</table>
`
})export class ConfigTableComponent {// column definitions
colDefs = [
{ label: "Company", field: "company" },
{ label: "Contact", field: "contact" },
{ label: "Country", field: "country" }
];// datasource
data = [
{
company: "Alfreds Futterkiste",
contact: "Maria Anders",
country: "Germany"
},
{
company: "Centro comercial Moctezuma",
contact: "Francisco Chang",
country: "Mexico"
}
...
];}
Notice that we don’t have to define a lot of <th> or <td> tags in config-based approach thanks to Angular structural directive *ngFor. In addition to that our data source can be fetched from remote servers which makes this approach superior to the other. See full code in Stackblitz here.
Example 3
In the last example, we are going to build a web page with a variety of HTML elements including h1, img and p. Similar to previous examples, two approaches will be shown for comparison purposes. See full code in Stackblitz here.
Naive approach
<!-- header -->
<h1>H1 Header</h1>
<!-- Image -->
<img
style="width:100%;"
alt="My Image"
src="https://i.pinimg.com/....f104.jpg"
/>
<!-- Paragraph -->
<p>Detract yet ... Sitting hearted on it without me.</p>
Config based approach
@Component({
selector: "app-config-mul-elem",
template: `
<ng-container *ngFor="let config of pageConfig"> <!-- Switch cases -->
<ng-container [ngSwitch]="config.type"> <h1 *ngSwitchCase="'header'">{{ config.content }}</h1>
<img *ngSwitchCase="'image'"
style="width:100%;"
[src]="config.content.src"
[alt]="config.content.alt"
/> <p *ngSwitchCase="'paragraph'">{{ config.content }}</p> </ng-container>
</ng-container>
`
})export class ConfigMulElemComponent {// page definition
pageConfig = [
{
type: "header",
content: "H1 Header"
},
{
type: "image",
content: {
src: "https://i.pinimg.com/....f104.jpg",
alt: "My Image"
}
},
{
type: "paragraph",
content: "Detract yet ... Sitting hearted on it without me."
}
];}
With a config-based approach, we might have to write more codes to fulfill the requirements so it’s not recommended for building simple web pages. This approach should only be used where you have to build a lot of pages that have a similar look and feel. It helps build the app with consistent layouts and definitely saves your team lots of time.
Wrap Up
After reading through 3 examples above I hope you will integrate config-based approach into your Angular apps. Don’t forget to “clap” if you found it helpful. Looking forward to seeing your opinions and suggestions about this awesome approach.
