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

Unable to download essential dependencies using NPM

MUI useStyles/createStyles hook dilemma: Inconsistent styling across components, with styles failing to apply to some elements

Issue with Spring Boot project not updating data from database

How to use OBJLoader/Three.js to load a specific URL in JavaScript

Exploring the source of the "Unexpected token ;" issue in an Express-JS application

Creating reactive behavior with a Promise initiated within a constructor - A guide

Using the && operator in an if statement along with checking the length property

Utilizing generics with Swagger in NestJS

Implementing a variable for an array in Angular 4: A step-by-step guide

How can I use Laravel to enter data using the post method?

Can Angular 4 experience race conditions?

How can I update the style of my array-bars using componentDidMount()?

Tips on preventing duplication of APIs when retrieving data using nextjs

Is there a way to determine if a table cell contains overflowing text compared to another cell?

Tips for defining the anticipated server response solely based on status and cookie

The type does not contain a property named `sort`

Challenges with loading content and async JavaScript within websites

Issue with Material-UI Nested Checkbox causing parent DOM to not update upon selection changes

The default value for an input of type date should be set to the current date