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-02 09:21:28Z

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 2, 2017 at 9:21

answered Oct 2, 2017 at 9:01

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sergej Over a year ago

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)

Günter Zöchbauer Over a year ago

What do you mean with "'content' binding"?

Sergej Over a year ago

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.

Wandrille · Accepted Answer · 2017-10-02 09:07:29Z

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 2, 2017 at 9:07

answered Oct 2, 2017 at 9:01

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

4 Comments

Sergej Over a year ago

The approach does not fit my needs, because it breacs 'content' binding (added full source code in the question)

Wandrille Over a year ago

So you'r saying that: [innerHTML]="result | safeHtml" doesn't work?

Sergej Over a year ago

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.

Wandrille Over a year ago

Good, so try to explain the answer in your post or add a new answer.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related