Angular2. How to print HTML tag in template, that came from @Input() parameter?

Question

The idea:

<h2 *ngIf="tag == 'h2'"></h2>
<h3 *ngIf="tag == 'h3'"></h3>
<p *ngIf="tag == 'p'"></p>

I want to get the tag be dynamic, depending on the tag property value. The tag is an Input() parameter

P.S.: I have tried to do: <{{tag}></{{tag}}>, but it gives and error and is not working

<div (mouseenter)="setEditMode()" [innerHTML]="result | safeHtml" *ngIf="!editMode"></div>
<div (mouseleave)="setViewModeIfNotFocused()" *ngIf="editMode">
  <input type="text" [(ngModel)]="content" #inputEl>
</div>

-

import { Component, Input, OnInit, ViewChild } from '@angular/core';
@Component({
    selector:    'ui-edit-field',
    templateUrl: 'edit-field.component.html'
})
export class UiEditFieldComponent implements OnInit {

    @ViewChild('inputEl')
    public inputEl: any;

    @Input('tag')
    public tag: string;

    @Input('classes')
    public classes: string;

    @Input('content')
    public content: string;

    public result: string;

    public editMode = false;

    constructor() {
    }

    ngOnInit() {
        this.result = '<' + this.tag + ' class="' + this.classes + '">' + this.content + '</' + this.tag + '>';
    }

    setEditMode() {
        this.editMode = true;
    }

    setViewModeIfNotFocused() {
        if (true) {
            this.editMode = false;
        }
    }
}

Günter Zöchbauer · Accepted Answer · 2017-10-02T09:21:28.443

2

You can use

<div [outerHTML]="tag"></div>

but tag needs to contain the <...>, because they can't be added in the template.

If tag is supposed to become an Angular component, then you need a different approach. Above approach only allows to add HTML without any Angular functionality.

See also https://stackoverflow.com/a/41089093/217408

update

_content:string;
@Input('content')
public set content(val:string) : void { this._content = val; updateContent();}

ngOnInit() {
    this._updateContent();
}

_updateContent() {
  this.result = '<' + this.tag + ' class="' + this.classes + '">' + this._content + '</' + this.tag + '>';
}

edited Oct 02 '17 at 09:21

answered Oct 02 '17 at 09:01

Günter Zöchbauer

623,577
216
2,003
1,567

It is not an angular component, but the approach does not fit my needs, because it breacs 'content' binding (added full source code in the question) – Sergej Oct 02 '17 at 09:07
What do you mean with "'content' binding"? – Günter Zöchbauer Oct 02 '17 at 09:09
The 'content' property. I edit it in the input [(ngModel)]="content", but when I enter back in the ViewMode - the content stays unchenged from the initialization moment. I think, I have to reassing the result variable, on the model change event. – Sergej Oct 02 '17 at 09:11

Wandrille · Answer 2 · 2017-10-02T09:07:29.757

2

You can achieve this if you write all the content as a string in your file.ts

<div [innerHtml]="YourHtmlString"></div>

and

this.YourHtmlString = `<${yourInput}>whatEver</${yourInput}>`

https://angular.io/guide/template-syntax#property-binding-or-interpolation

edited Oct 02 '17 at 09:07

answered Oct 02 '17 at 09:01

Wandrille

6,267
3
20
43

The approach does not fit my needs, because it breacs 'content' binding (added full source code in the question) – Sergej Oct 02 '17 at 09:07
So you'r saying that: [innerHTML]="result | safeHtml" doesn't work? – Wandrille Oct 02 '17 at 09:10
it was breaking the 'content' property binding, but I'have fixed it, by updating the 'result' proprty reassing on model change. (input)="calcResult()" calcResult - is the same method ngOnInit. Now All works, thanks. – Sergej Oct 02 '17 at 09:16
Good, so try to explain the answer in your post or add a new answer. – Wandrille Oct 02 '17 at 09:18

Angular2. How to print HTML tag in template, that came from @Input() parameter?

2 Answers2