Question 280035 in Html Question posted in
Some basic documentation can be found here.

How to pass UTF-8 Arrow → form typescript to html and display it?

In html I have a div with a tooltip binded to a function.
Something like this:

<div *ngFor="let user of users">     
    <div class="myClass" [matTooltip]="user.name + '
' + getUserPhones(user.Id)" matTooltipClass="tooltip-large">{{ user.fullName }}</div>
</div>

This code here: [matTooltip]="user.name + ‘
‘ + getUserPhones(user.Id)" it is generating a tooltip witch will look like:
"UserName

–> User Phone 1

–> User Phone 2"

Typescript Code:

public getUserPhones(userId: string): string {
  const currentUser = this.users.find((user) => user.userId === userId);
  const userPhonesArray = viewArr.phoneNumbers; 
  const userPhonesDiplayText = '';

  if (userPhonesArray .length <= 0) {
    return '';
  } else {
  for (let i = 0; i < userPhonesArray.length; i++) {
    userPhonesDiplayText +=  '&rarr;' + userPhonesArray[i] + '
' ;
     return userPhonesDiplayText ;
   }
}

}

What I am trying to do: In case a user has more than 1 phone numbers I want to display an arrow with the phone in new line

The issue is that the codes passed to html do not change to arrow(‘→’) and new line (‘
‘).
I am getting something like: Username
→ Phone1
→ Phone2

How can I pass the string from typescript to html and get the arrow and the empty line?
Is it possible?

Tags:

2

Answers


  1. 0

    To pass UTF-8 arrow character (→, represented as →) from TypeScript to HTML and display it, you can use JavaScript/TypeScript to manipulate the HTML content. Here’s how you can do it:

    HTML File:
    In your HTML file, create an element (e.g., a , , or any other HTML element) where you want to display the arrow character. Give it an id or class for easy selection.

    <div id="arrow-display"></div>

    TypeScript/JavaScript Code:
    In your TypeScript or JavaScript code, you can access the HTML element by its id or class, and then set its innerHTML to the UTF-8 arrow character entity (→).

    // Get the HTML element by its id
const arrowDisplay = document.getElementById("arrow-display");

// Check if the element exists
if (arrowDisplay) {
  // Set the innerHTML of the element to the UTF-8 arrow character entity
  arrowDisplay.innerHTML = "&#8594;";
}
    Login or Signup to reply.
  2. 0

    You can’t directly pass HTML character entities into the string, as they will be displayed as strings.

    What you can is embed relevant Unicode characters in the string itself by using it’s codepoint.

    The syntax is uXXXX or u{XXXX}. The codepoint of right arrow is 2192, so you should be able to achieve it by adding u2192 to the string.
    Likewise, for line breaks, you can simply add rn to the string.

    So you would end up with something like u2192 123456789 rn u2192 987654321. This should correctly display both arrows and line breaks in the tooltip. Note that by default material tooltips don’t respect inserted linebreaks, so you’ll have to add custom styling to them, namely white-space: pre-line;.

    You can do this by defining your class in global styles.scss files, e.g.

    .multiline-tooltip {
  white-space: pre-line;
}

    And applying that class to your tooltip, e.g.:

    [matTooltip]="tooltipText"
[matTooltipPosition]="position.value!"
[matTooltipClass]="'multiline-tooltip'"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search