CODEWITHSUNDEEP
angulartypescriptspecial-characters
user3356236
user3356236

Reputation: 102

Write String-Helper in Angular/TypeScript

My problem is that the german ü, ä, ö in HTML are displayed as not known sign . You can write ü as "&uuml ;" ä as "&auml ;" and so one. But is it not possible to replace ü with "&uuml ;" in a typescript method. The result will be "&uuml ;".

This is my method in typescript which replace ü with "&uuml ;"

public stringHelper(textUml: string): string {
    textUml = textUml.replace("ü", "ü");
    debugger;
    return textUml;
}

<button class="btn btn-success" (click)="addKeySkill()">{{stringHelper("Hinzufügen")}}</button>

Instead of displaying "Hinzufügen" its display "Hinzuf&uuml ;gen".

enter image description here

Upvotes: 0

Views: 542

Answers (2)

Qortex
Qortex

Reputation: 7466

That's because when you use {{ }} in your HTML template, Angular escapes the string. This is thus expected behaviour that your & is escaped, and not considered as an HTML entity.

So you should leave it unescaped (with ü) and it should work fine.

If you still want to put the exact HTML code, and not escape the contents of a variable, you need to define a custom pipe, and then use innerHTML to output the code.

In your example, once you define the pipe, you would put:

<button class="btn btn-success" (click)="addKeySkill()">
  <span [innerHTML]="stringHelper('Hinzufügen') | keepHtml"></span>
</button>

Upvotes: 0

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Use Regex instead and apply g so all occurrences will be replaced (otherwise, only the first "ü" is replaced):

textUml = textUml.replace('/ü/g', "&uuml;");

Upvotes: 1

Related Questions