Angular 8 - Problem with html accents

Asked

Viewed 617 times

0

I have an array in my component that is accented with html code.

text=[ 'DRENAGEM AUTÓGENA','BAG SQUEEZING','RESPIRAÇÃO DIAFRAGMÁTICA','CAR','AFE','INSPIRAÇÃO EM TEMPOS','FRENO LABIAL','INSPIRAÇÃO SUSTENTADA', 'INCENTIVADOR A FLUXO', 'HUFFING', 'VIBRAÇÃO','COMPRESSÃO-DESCOMPRESSÃO'];    

<div class="col-5 col-sm-3 col-md-3 col-lg-2 m-2 p-1" *ngFor="let t of text; let i = index"
  style="background-color: aliceblue">
  <div class="w-100 h-100">
    <app-card #card_1 number="{{ i + 1 }}" word="{{ t }}" [front]="!mestre" group="{{ groups[i] }}"><span
        class="badge badge-pill badge-primary">Primary</span></app-card>
  </div>
</div>

When I do an ngFor to show all words {{ word }} it does not show the accented letter. Continue showing VIBRA &Ccedil ; &Atilde ;O

inserir a descrição da imagem aqui Some simple solution to solve this?

html angular

3 answers

3

The problem is that you are using HTML entities instead of plain text for accents, Angular will treat it only as text and not as HTML.

If you have control over this text then the easiest is to change for it to have normal accents, if this option is not feasible the alternatives are to make a Binding with innerHtml

<div [innerHtml]="palavra">

Or use a pipe to decode the text

@Pipe({name: "decodeHtmlString"})
export class DecodeHtmlString implements PipeTransform {
    transform(value: string) {
        const tempElement = document.createElement("div");
        tempElement.innerHTML = value;
        return tempElement.innerText;
    }
}

{{palavra | decodeHtmlString}}

In the case of this pipe I think it is important to note that it removes any HTML tag that exists in your text, if for example the value is passed to it &aacute;<script>alert("teste")</script> the result will be áalert("teste")

  • Leandro, your code is likely to work, but isn’t there another way to rearrange this? Because brother, this is creating an object/element in the browser, making a "technical resource" and is not cleaning the object.

  • Unless I’m wrong and the object is cleaned at the end of the function. I suggest then at least clean the object to avoid an overload in the client’s browser. Depending on where and how he uses this, he may be able to generate muuuuuiita in the browser. With each user iteration with the page Angular will reload this and generate a new object, you know how it is.

  • I don’t think there is a problem, stay in the browser and I would say that in general the GC will clean it as soon as possible, I am seeing a third alternative that does not use it and I will include in the answer as soon as I can test

  • Interestingly, I researched it and yes, the browser’s Garbage Collector takes care of cleaning. Top your code, the best response for the user so far. + 1 for me

  • From what I’ve seen here the other alternative would be to use the method bypassSecurityTrustHtml of DomSanitizer to allow HTML to be used, but it does not work with {{ bindings }}, only with [property]=binding and I’m not sure how it works to include it in the answer, because it seems to me to end up working only if using as in the first solution [innerHtml]="binding | pipe", which in this case does not make much sense. If you want to have a example here

  • Hello, I decided using [innerHtml] and it worked. I will save the pipe option just by learning. But this bind with innerHtml was show. Thank you very much!

Show 1 more comment

-2

Insert the meta charset tag in the header of your page and enter the value "utf-8", because this tag is responsible for accepting accents, ç, and other symbols that belong to the Portuguese language. So the page home code should look like this:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

-2

Check if your code has this basic structure:

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

It must have at least the tag <meta charset="utf-8"> for accents to be accepted! :)

Browser other questions tagged html angular

You are not signed in. Login or sign up in order to post.