Support UTF in Angular expressions

[vicb]

Currently the lexer in change detection uses StringWrapper.charCodeAt()

• in Dart it returns s.codeUnitAt() which supports UTF
• in JS it returns str.charCodeAt() which does not support UTF

[vicb]

the _Parser class in shim_css.js (shadow_dom_emulation) has the same limitation

[fxck]

This, I suppose, would allow things like

<div [class.u-1/2]="expr"></div>

right?

[ErikGrijzen]

Having the same issue when rendering some text with a "ü" character in it to a component attribute.

Any updates on this issue?

[pkozlowski-opensource]

Having the same issue when rendering some text with a "ü" character in it to a component attribute.

Are you sure it is the same issue??? Please provide a reproduce scenario in plunker as it doesn't sound related.

[ErikGrijzen]

I did a quick test on Plunker and it works fine, see: http://plnkr.co/edit/hBnsuzFaNPpR2EnjVwlA

I made a mistake in my application by adding it as a property binding, like: <test-component [text]="Test with character ü"></test-component>

But like this it works fine: <test-component text="Test with character ü"></test-component>

My bad, sorry!

The reason I posted it here, was because it was very similar to the closed duplicated issue https://github.com/angular/angular/issues/7456

[penmark]

Still doesn't work with rc.5: http://plnkr.co/edit/nx6LsdnX55FpxIc6QW5M?p=preview

[abdavid]

Bump.

Really missing the UTF support for properties in templates.

[xiexin36]

How about this issue, any one have a solution to resolve this? I have the same problem here https://github.com/angular/angular/issues/13265, just be closed, Any suggestion?

[stephanrauh]

I'd like to see full UTF-8 support for properties in templates, too. Not every programmer speaks English, and as to my experience, it's a good idea to use your native language for things like variable and method names. It helps to distinguish between your own entities and the entities defined by the framework. Usually, all the popular names are already reserved by frameworks :).

[vicb]

We have been discussing that with the team. It has not be implemented earlier because:

1. It would slow down the Lexer,
2. It would make the code more complex.

But:

1. We are now targeting a AoT first approach for Angular and speed has become less critical (has the lexing happens at build time only once),
2. ES6 makes it easier to work with UTF. While it is not supported by all browsers, lexing would be done at build time (AoT) and the generated code would be able to run on all browser - we should implement it in a way to does not break JIT even for older browsers (which would not support UTF in JIT, as of today)

Does this makes sense ?

Anybody would try to try and submit a PR ?

[xiexin36]

Finally I found a way to solve this problem, even it is not so nice, but it work, instand of use property name directly, we can define a function to get the property value. <div>{GetData("好")}</div> and in the component ts file. export class Test { DataContext:any; GetData(propertyName:string):any{ return this.DataContext[propertyName]; } }

[xiexin36]

Any update on this issue?

[stephanrauh]

@vicb Sounds like a good plan. Is the AOT compiler fast enough to use it during the development phase? I'm using the Angular CLI, and at the moment, performance is a bit disappointing: ng serve takes 20 seconds, and ng build -aot takes more than a minute. Granted, I'm working on a slow virtual machine, but my project is still tiny, so this is still a topic.

As for the PR: I'd love to provide one, but I don't have enough spare time... I hope someone else steps in!

[vicb]

Is the AOT compiler fast enough to use it during the development phase?

We are working on improving AoT speed to make it useable during development. Easing AoT is clearly on our top-priority list.

[xiexin36]

@vicb How about the AOT? Any test release can try it?

[xiexin36]

Any update about this?

[xiexin36]

Two years past, have we still not support UTF-8?

[DzmitryShylovich]

@xiexin36 not yet

[xiexin36]

@DzmitryShylovich Any plan about this?

[curronieto]

Any updates on this issue?

[TzuHuanTai]

try this !! u can change advantage to ur unicode search the "isAsciiLetter" in angular package! i add this range for traditional chinese! " || (code >= 0x4E00 && code <= 0x9FA5)"

function isAsciiLetter(code) {
return code >= $a && code <= $z || code >= $A && code <= $Z || (code >= 0x4E00 && code <= 0x9FA5); }

[splincode]

@vicb Is the issue relevant?

[pkozlowski-opensource]

This issue is still relevant and it is confirmed bug in the latest version of Angular, see: https://stackblitz.com/edit/angular-ivy-nuc4uz?file=src/app/app.component.ts

tl;dr; is that it is all about making non-ASCII characters in Angular expressions:

@Component({
  selector: 'my-app',
  template: '<div>{{ 我的 }} </div>',
})
export class AppComponent  {
  // Chinese character
  我的 = 'Angular';
}

[doggy8088]

@pkozlowski-opensource I have a workaround for this:

https://stackblitz.com/edit/angular-ivy-zmtxmg?file=src%2Fapp%2Fapp.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<div>{{ this["我的"] }} </div>',
})
export class AppComponent  {
  // Chinese character
  我的 = 'Angular';
}

I really wish Angular Team can take care of this issue. It's been 8 years since 2015.