Go To Definition in angular html file in Visual Studio Code

Question

Is it possible, maybe with an extension, to use Go To Definition (F12) when editing an html file of an Angular project?

Let's assume, in sample.html:

<input matInput class="app-input" placeholder="InputName" [(ngModel)]="myNodel.name">  ...  <button mat-mini-fab class="plus"   (click)="myMethod()"   <mat-icon>arrow_forward</mat-icon> </button> 

I would like to navigate to "myMethod() ..." in sample.ts, or navigate to the field of the model, to the line "name: string;" in my-model.ts, as the function normally works with .ts files.

Answer 1

You can do this with the extension

Angular Language Service extension for VS Code.

which has the feature

This extension provides a rich editing experience for Angular templates, both inline and external templates including:

Completions lists

AOT Diagnostic messages

Quick info

Go to definition

Angular Language Service - A handy extension for angular developers