I am using angular and visual studio 19, and it happens that when printing a local list of an array it begins to display strange characters, it is worth mentioning that my global index.html has a charset="utf-8" tag and the content Tag,
The strange thing is that if I put words directly in the html component, those strange characters do not appear, they only appear when I load them in my typescript and try to print them in the html, additionally save my html and ts files with the "save with encoding" option " and change them to "with signature utf8" but the problem is that even if they are signed you still see the weird characters in components, specifically where I make a list of items in typescript and try to print it with a for in the html
Any alternative to solve this
Update code:
In this case, the Mexico option appears like this in the html Mexico in the same way it is a dropdown like the one shown in the photo
export class RegistrationDataStepComponent {
public countries = [
{ value: 'mexico', label: 'México', code: 'MX' },
{ value: 'usa', label: 'Estados Unidos', code: 'USA' }
];
}
Pass as a parameter to a dropdown component that I recycle
<app-dropdown [label]="'COUNTRY'" [items]="countries"></app-dropdown>
component TS dropdown I receive the values:
export class DropdownComponent
{
@Input() public items: any = [];
}
HTML
<ng-container>
<div #optionsContainer class="options-container">
<div *ngFor="let item of items" >
<input type="radio" class="radio" name="category" />
<label >{{ item.label | translate }}</label>
</div>
</div>
</ng-container>
item.label
uses a pipe that in general is to translate to EN or ES, just that, but it item.label
brings the value of my array (countries.label = 'Mexico' but it shows it like this Mexico)
The first is that Mexico has an accent mark and it may be that the problem is with the META tag or it may be that the problem is directly with the translate pipe.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
the other possible solution comes from the translate pipe: Surely you have @ngx-translate implemented for that in case it is, this implementation requires a json file for each language, this json is a dictionary where the words and their translations are, It would be to add the word and how you want to translate it:
src/assets/i18n/en.json
{ "México" : "México" }
Even perhaps in the translation you should include the special encoding of accents:
{ "México": México}
<form class="form" id="myForm" accept-charset="utf-8">
Hope some of this helps you!
Happy Coding!