VS Code - 如何从 angular html 模板创建方法？

Question

So, when I want to declare a new method in html of Angular component, WebStorm provides me opportunity to create this method in ts:

But, if I try same at VS code I can't create a method. Is there some solution? (extensions, maybe something in settings)

Answer 1

You can use the extension My Code Actions v0.6.0.

Add this to your settings.json

"my-code-actions.actions": {
    "[html]": {
      "Create function {{atCursor:$1}}": {
        "file": "${fileBasenameNoExtension}.ts",
        "atCursor": "\\(click\\)=\"([^\"]+)\\(\\)\"",
        "text": "function {{atCursor:$1}}() {\n}\n\n"
      }
    }
  }

You can add more complex (multiple) edits if needed

You can have a look at the doc page of the extension to see an example of a complex edit to add / modify an import statement.

Adjust the languageID if Angular template files are not html.

Answer 2

This is now possible with the VSCode Angular Language Service plugin v14.2.0

• feat: support fix the component missing member ( angular/angular#46764 )
• feat: support code action (#1723 )

Answer 3

So, when I want to declare a new method in html of Angular component, webstorm provides me opportunity to create this method in ts:

But, if I try same at VS code I can't create a method. Is there some solution? (extensions, maybe something in settings)