Converting a string to HTML in Angular 2 with proper formatting

Question

Converting a string to HTML in Angular 2 with proper formatting

I'm facing a challenge that I have no clue how to tackle.

My goal is to create an object similar to this:

{ 
 text: "hello {param1}", 
 param1: {
              text:"world", 
              class: "bla"
         }
}

The tricky part is that I want to display it based on the text property, like this:

<span> hello <span class="bla"> world </span></span>

Using a component isn't a viable solution for this issue - my only thought so far is utilizing jQuery, but I'd prefer to avoid it. Open to changing the format of the text property if necessary...

javascript typescript angular

Answer 1

Answer №1

Allow me to propose an interesting concept:

import { Component, Directive, Input, HostBinding } from '@angular/core'

@Directive({
  selector: 'my-design'
})
class MyDesign {
  @Input() information: Object;
  @HostBinding('innerHTML') get content {
    return Object.keys(this.information).reduce((previous, current) => {
      if(current === 'text') return previous;
      const regex = new RegExp(`{${current}}`, 'g');
      return previous.replace(regex, (string) =>{
        return `<${this.information[current].tag} class="${this.information[current].class}">
                  ${this.information[current].text}
                </${this.information[current].tag}>`; 
      });
    }, this.information.text);
  }
}

@Component({
  selector: 'my-application',
  providers: [],
  template: `
    <div>
      <my-design [information]="data"></my-design>
    </div>
  `,
  directives: [MyDesign] 
})
export class App {
  data = { 
    text: "hello {param1} {param2} please again hello {param1}", 
    param1: {
      tag: 'span',
      text: 'world', 
      class: 'bla'
    },
    param2: {
      tag: 'div',
      text: 'hello world2', 
      class: 'bla'
    }
  };
}

Witness the demonstration here http://plnkr.co/edit/G5m7zhybhN5Qdp=preview

Answer 2

Allow me to propose an interesting concept:

import { Component, Directive, Input, HostBinding } from '@angular/core'

@Directive({
  selector: 'my-design'
})
class MyDesign {
  @Input() information: Object;
  @HostBinding('innerHTML') get content {
    return Object.keys(this.information).reduce((previous, current) => {
      if(current === 'text') return previous;
      const regex = new RegExp(`{${current}}`, 'g');
      return previous.replace(regex, (string) =>{
        return `<${this.information[current].tag} class="${this.information[current].class}">
                  ${this.information[current].text}
                </${this.information[current].tag}>`; 
      });
    }, this.information.text);
  }
}

@Component({
  selector: 'my-application',
  providers: [],
  template: `
    <div>
      <my-design [information]="data"></my-design>
    </div>
  `,
  directives: [MyDesign] 
})
export class App {
  data = { 
    text: "hello {param1} {param2} please again hello {param1}", 
    param1: {
      tag: 'span',
      text: 'world', 
      class: 'bla'
    },
    param2: {
      tag: 'div',
      text: 'hello world2', 
      class: 'bla'
    }
  };
}

Witness the demonstration here http://plnkr.co/edit/G5m7zhybhN5Qdp=preview

Answer 3

Answer №2

Here is one potential solution: Within your component's class:

let myCustomization = {
  greeting : "hello",
  messageText : "world",
  textClass : "custom"
}

In your HTML file:

<span> {{myCustomization.greeting}} <span class="{{myCustomization.textClass}}"> {{myCustomization.messageText}} </span></span>

You can then easily adjust the values of myCustomization properties to create text with a specific class for the messageText. Does this meet your requirements?

Answer 4

Here is one potential solution: Within your component's class:

let myCustomization = {
  greeting : "hello",
  messageText : "world",
  textClass : "custom"
}

In your HTML file:

<span> {{myCustomization.greeting}} <span class="{{myCustomization.textClass}}"> {{myCustomization.messageText}} </span></span>

You can then easily adjust the values of myCustomization properties to create text with a specific class for the messageText. Does this meet your requirements?

Converting a string to HTML in Angular 2 with proper formatting

Answer №1

Answer №2

Similar questions

Having trouble fetching information from a JSON file stored in a local directory while using Angular 7

tips for choosing an entire group in ng-select with Angular

jQuery "slide" animation without using <br>

Improving Vue Component on Navigation

Selected value is not displayed in the textbox when using autocomplete feature

The layout of my website appears distorted on mobile devices

Tips on creating a horizontal scrolling effect using the mouse

Retrieving Browser URL using Node.js

Detecting Unflushed Requests in Jasmine and AngularJS

The custom declaration file for the 'react-dates' module could not be located

Tips for composing a single aggregation within a query

Merge requirejs modules using build script

A guide on extracting content from a PDF file with JavaScript

Unable to engage with MUI stepper and modify a value

Maintaining accurate type-hinting with Typescript's external modules

Modify the Div background color by accessing the HEX value saved in a JSON file

Exploring ways to access data stored in interconnected models, such as MongoDB and NodeJS

Linking to a Different Tab without Tab Mutation with Bootstrap 3.3.5

Select the input based on the name and value provided from a radio button using jQuery

Can a link be generated that swaps out the original URL redirect for the following visitor upon clicking?