Generate heading tag dynamically

Question

I was curious to know as to how to generate a heading tag dynamically in Angular. Let me explain you the whole scenario. Suppose I have a client-server setup wherein I am able to retrieve data from the server in the form of json and in that data there is a field named "size". Now, what I wish to know is that is there any way in which I can generate the heading tag dynamically using the size data that I have in my json? For e.g. if I get the size: 2 from my json data then the corresponding heading tag should be <h2>.

<li *ngFor="let data from jsonData" [ngSwitch]="data.type" class="list-group-item">
    <h(what code should go over here to generate the heading accoring to the size parameter passed?) *ngSwitchCase="'SomeType'">{{data.text}}</h(?)>
</li>

Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) — , Jul 09 '19 at 03:56
Possible duplicate because the more general answer should cover it — , Jul 09 '19 at 03:56

score 4 · Answer 1 · answered Jul 09 '19 at 00:25

4

I am not sure you can do that. As an alternate, you can create a separate component which can generate appropriate header tag based on parameters/conditions you pass to it. For example:

Let's assume you have a component called header-tag.

<header-tag [someType]="typeValue"></header-tag>

In header-tag template:

<h1 *ngIf="typeValue === h1">Some Text</h1>
<h2 *ngIf="typeValue === h2">Some Text</h2>
...

answered Jul 09 '19 at 00:25

Umesh

2,704
19
21

2

Sniped. I was just writing a very similar answer when this popped up :) – Kirlac Jul 09 '19 at 00:27

score 0 · Answer 2 · answered Jul 09 '19 at 07:07

0

You can generate html as string and set it as innerHtml



    <!-- In .component.ts File -->
    public testHtml = '<h2>Hello</h2>'
    <!-- In Template File -->
    <div [innerHtml]="testHtml"></div>

answered Jul 09 '19 at 07:07

Shrey Gupta

392
4
10

Generate heading tag dynamically

2 Answers2