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

• gerleim: Testing right away... And works like a charm... Thanks, this is what I was looking for.
• Cruzer: after going to definition/ navigating to specific section, How to go back where we click? actually the ts file is opening in same file where we clicked. I mean how to go back to the same file or re-open?
• gerleim: @vbRocks Do you mean simple go back? Alt + <-
• StepUp: I click F12 at the component name, (for example, <myDropDown> ) and cannot go to definition? Just show No definition found for <myDropDown>. is it okay?
• Verri: I have already had that extension but "go to definition" didn't work anyway. Extension reinstall helped for me.

Answer 2

You can use this extension angular2-switcher

This is my favorite, i share for whom concern.

https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher

Answer 3

you will need just one extension Angular Essentials by John Papa

by installing this your vscode shall become pro-angular editor

• chrismarx: The Angular language service (part of this pack) is the extension in particular that enables this feature, and it is awesome- devblogs.microsoft.com/visualstudio/…

Answer 4

You need to add strictTemplates: true to the tsconfig.json file like so:

 ...
 "angularCompilerOptions": {
 ...
 "strictTemplates": true
 }