Replace HTML tag with text Angular 6

Question

I want to change a specific word in my code with HTML tag and change style of my text with themecolor class.

<h2 class="mb-30" [innerHTML]="main_title"></h2>

Preview of result:

This is text.

I want to replace <span class="themecolor">text</span> with text .

I built my application with Angular 6

Answer 1

Not sure why you need such functionality since Angular is component based where you have html injected via selectors.

Anyway, stackblitz

The bindind occures as you wanted in this line:

<h2 class="mb-30" [innerHTML]="main_title"></h2>

All I do is instantiating main_title with custom HTML of your choice in app.component.ts

Also, please note that I used ngDoCheck in order to detect changes on the text input.

This will allow you to enter HTML inside the textbox (preferred as textarea actually).

Answer 2

use Renderer 2 in @angular/core

ts file

import { Component, OnInit, Input, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-custom-html',
  templateUrl: './app-custom-html.component.html',
  styleUrls: ['./app-custom-html.component.scss']
})
export class CustomHtmlComponent implements OnInit
{

  @Input() public text: string;
  @ViewChild('container') public container: ElementRef;
  constructor(private renderer: Renderer2) { }

  ngOnInit()
  {
    const span = this.renderer.createElement('span');
    this.renderer.addClass(span, 'my-class');
    const text = this.renderer.createText(v.text);
    this.renderer.appendChild(span, text);

    this.renderer.appendChild(this.container.nativeElement, div);
  }
}

HTML file

<div #container></div>

Answer 3

property: string = "Text";

Use [innerText]="property"
<p [innerText]="property/variable"></p>

This will insert the text into your html