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 Ç ; Ã ;O
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.
– Leonardo Getulio
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.
– Leonardo Getulio
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
– Leandro Godoy Rosa
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
– Leonardo Getulio
From what I’ve seen here the other alternative would be to use the method
bypassSecurityTrustHtml
ofDomSanitizer
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– Leandro Godoy Rosa
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!
– Daniel Girardi