Emmet completion doesn't work after button with (click) event in typescript with Angular 2.0

[Nikki1993]

• VSCode Version: 1.5.3 && Same behaviour is seen on the latest Insider Build dated 10.10.2016.
• OS Version: macOS 10.12

Steps to Reproduce:

1. Generate simple angular2 project with angular-cli
2. go to .component.ts file
3. In the template: have something like <button (click)="test = 'Emmet works'"></button>
4. type the word button on the next like and try to use TAB to autocomplete button element
5. It just uses regular tab instead of emmet completion.

If you try to use tab completion before the aforementioned button click it will auto-complete correctly.

Removing the (click) part fixes the autocompletion.

[Nikki1993]

Issue is still there with the new 1.6 release

[ramya-rao-a]

@Nikki1993 I am trying to get a repro. Here is what I did:

• ran ng new to create an angular application

• In app.component.ts file I have the below
  

• I dont see emmet completion anywhere inside the string in line 6.

Am I missing something?

[Nikki1993]

@ramya-rao-a with all the stuff done, now add a click event to the button aka
<button (click)="randomFunction()"></button>
and then on the next line type button and try to use tab to trigger emmet completion. Should fail

[Nikki1993]

Hm, I just tried to do it in VSCode 1.10 and it seems like Emmet completions are not triggered at all inside template. No matter what/where I type. Could have been caused by another extension, can't remember anymore it's been months.

[ramya-rao-a]

I just tried to do it in VSCode 1.10 and it seems like Emmet completions are not triggered at all inside template

That's exactly what I see. And I dont have any extensions, so its not due to extensions that the feature stopped working.

Honestly, I didnt even know emmet worked at all inside the template

[ramya-rao-a]

Is it possible that the completion you were seeing before was a feature of an extension?
I dont see how emmet could have ever worked in the template string

[ramya-rao-a]

Also, one way you could get emmet features is to add the below in the settings

"emmet.syntaxProfiles": {
		"typescript": "html"
	}

Note: this will enable emmet expnasion in the whole file. So anythingyoutype followed by TAB would give you <anythingyoutype></anythingyoutype>
To get around this, you can

• set "emmet.triggerExpansionOnTab": false and
• set some other keybinding for the emmet expansion command OR invoke emmet expansion command from the command pallet

[ramya-rao-a]

Closing this issue, as emmet expansions never worked inside template strings to begin with.

[ramya-rao-a]

In the new emmet model that we are working on, extensions can now ask for emmet abbreviations in their completion provider.

Therefore, this feature request is now an extension candidate.

See #29114 (comment) for how to use the vscode-emmet-helper to get emmet abbreviation completions

All the extension needs to do is identify the areas of code where html completions are required. Like @Component({ .... template: 'any content here'})`

[vscodebot]

We try to keep VS Code lean and we think the functionality you're asking for is great for a VS Code extension. Maybe you can already find one that suits you in the VS Code Marketplace. Just in case, in a few simple steps you can get started writing your own extension. See also our issue reporting guidelines.

Happy Coding!