Vscode-ng-language-service: Enum entries as object keys ignored when contain "_"

[lukasz-m-b]

enum MyEnum {
  something = 'something',
  somethingElse = 'somethingElse',
  something_else = 'something_else',
  SOMETHING = 'SOMETHING',
  SOMETHING_ELSE = 'SOMETHING_ELSE',
  CAT = 'CAT',
  SOMETHING_EVEN_MORE_ELSE = 'SOMETHING_EVEN_MORE_ELSE',
}

type MyType = {[option in MyEnum]?: number};

in component:

public myObject: MyType = {};

in template:

{{ myObject. }}

is
Intellisense shows these options: CAT, SOMETHING, something, somethingElse.
Enum options whose values (not keys) contain an underscore are not available.

should be
Intellisense shows all options.

Version 0.802.3,
VS Code 1.28.0,
Windows 7

(BTW, thank you for this amazing tool)

[ayazhafiz]

Hi @lukasz-m-b! This issue seems to be because the version of @angular/language-service bundled with the VSCode extension is somewhat outdated, and is fixed in version 9.0 of the Angular language service.

If you are comfortable with it, you can install the pre-v9 release of @angular/language-service in the repository you are using the language service extension with and this should be fixed.

yarn add @angular/[email protected]

[satsangswami]

Well, How we get Enum arguments listed?
Like,

in some.ts

public name(style : 'full' | 'short' ) : string {
if (style == 'full') return this.fullname;
else return this.short;
}

in some.html
{{ name('') }}
need enum value list when trying to type the string value.

I know the above can be directly achieved by using the variables fullname and short, but this is just an example. the point is to get enum list if argument is of that type. It can serve a lot of stuff.
Or am i missing something that its not showing up to me.

[ayazhafiz]

@satsangswami what you're asking for may be very useful, and it is different from an enum. Being able to autocomplete 'full' or 'short' for the style parameters in the example you provided requires us to know the values that may be able to fit into the type 'full' | 'short' - while in this example it may be fairly simple, I'm not sure that it is in general. You could pass a 'full' | 'short' type in many ways, including via an enum:

enum NameLength {
  Short = 'short',
  Long = 'long',
}

// both of these are valid
this.name('long');
this.name(NameLength.Long);

And so it is difficult to provide meaningful, all-encompassing suggestions for types because a user can provide many values with that type. I don't think even the TypeScript Language Server provides this feature (see this playground), and it would be difficult for the Angular Language Service to provide this until TypeScript does (since we use the TypeScript LS under the hood).

What we can provide value suggestions for is TypeScript values. So a potential alternate is, if you know the signature of your name method, you can do something like

enum NameLength {
  Short = 'short',
  Long = 'long',
}

class {
  // ...
  public name(style: NameLength): string {
    if (style == NameLength.Long) return this.fullname;
    else return this.short;
  }
  // ...
}

myClassInstance.name(NameLength./* will give you suggestions here */);

[satsangswami]

Yes! That's correct. But still in .html it doesn't shows the valueslist of enum.

I have created an enum
enum length { Short : 'short', Full : 'full'}

Yet, its not shooting intellisence in .html file

<h1>{{name(length./* its not poping up */)}}</h1>

[ayazhafiz]

Ah, yes - this is because templates only have access to a component's members, not any values outside the component class. So the enum values are not popping up because to do so would be invalid Angular semantics.

In your example, the parameter passed to name(...) will raise an "undefined is not an object" error when you render the template in a webpage. More generally, a component like

const outsideValue = 999;

@Component({
  selector: 'bad-view',
  template: '{{ returnValue(outsideValue) }}',
})
class BadView {
  returnValue(value: any) { return value; }
}

will display nothing when rendered because during rendering the template only knows about values inside the BadView class.

[satsangswami]

Thanks! I understand.

However, silly but let me ask.

Is there a workaround, no matter how dirty it could be, but do we have any
workaround to get enum values get there?

On Fri, Sep 27, 2019, 1:55 AM hafiz [e-mail] wrote:

Ah, yes - this is because templates only have access to a component's
members, not any values outside the component class. So the enum values are
not popping up because to do so would be invalid Angular semantics.

In your example, the parameter passed to name(...) will raise an "undefined
is not an object" error when you render the template in a webpage. More
generally, a component like

const outsideValue = 999;

@Component({
selector: 'bad-view',
template: '{{ returnValue(outsideValue) }}',
})
class BadView {
returnValue(value: any) { return value; }
}

will display nothing when rendered because during rendering the template
only knows about values inside the BadView class.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/vscode-ng-language-service/issues/384?email_source=notifications&email_token=AAIZELMUX6BL27E3ZDFWMM3QLULEXA5CNFSM4IT6ALMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7W3NQA#issuecomment-535672512,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIZELIEPK3YTHUTSECM3QDQLULEXANCNFSM4IT6ALMA
.

[ayazhafiz]

Not enum values, but you can use an object inside your class with fields similar to an enum and have your method take in fields of that object.

---

From: Satsangpriyadas Swami [e-mail]
Sent: Friday, September 27, 2019 1:39 AM
To: angular/vscode-ng-language-service
Cc: hafiz; Comment
Subject: Re: [angular/vscode-ng-language-service] Enum entries as object keys ignored when contain "_" (#384)

Thanks! I understand.

However, silly but let me ask.

Is there a workaround, no matter how dirty it could be, but do we have any
workaround to get enum values get there?

On Fri, Sep 27, 2019, 1:55 AM hafiz [e-mail] wrote:

Ah, yes - this is because templates only have access to a component's
members, not any values outside the component class. So the enum values are
not popping up because to do so would be invalid Angular semantics.

In your example, the parameter passed to name(...) will raise an "undefined
is not an object" error when you render the template in a webpage. More
generally, a component like

const outsideValue = 999;

@Component({
selector: 'bad-view',
template: '{{ returnValue(outsideValue) }}',
})
class BadView {
returnValue(value: any) { return value; }
}

will display nothing when rendered because during rendering the template
only knows about values inside the BadView class.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/vscode-ng-language-service/issues/384?email_source=notifications&email_token=AAIZELMUX6BL27E3ZDFWMM3QLULEXA5CNFSM4IT6ALMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7W3NQA#issuecomment-535672512,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIZELIEPK3YTHUTSECM3QDQLULEXANCNFSM4IT6ALMA
.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/vscode-ng-language-service/issues/384?email_source=notifications&email_token=AE6GL6QYMDPARDG73YABHZLQLWTBTA5CNFSM4IT6ALMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7X5BXQ#issuecomment-535810270, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AE6GL6Q3VBKKL2YJXTYH2X3QLWTBTANCNFSM4IT6ALMA.

[satsangswami]

Done. Thanx for now... Nevertheless, You all have done a great job, i must say... 🥇

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}