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.

Sajeetharan · Accepted Answer · 2017-11-10T18:22:38.647

63

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

edited Nov 10 '17 at 18:22

answered Nov 10 '17 at 13:00

Sajeetharan

216,225
63
350
396

2

Testing right away... And works like a charm... Thanks, this is what I was looking for. – gerleim Nov 10 '17 at 13:06
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? – Cruzer May 21 '18 at 09:23
@vbRocks Do you mean simple go back? Alt + <- – gerleim Jun 06 '18 at 10:19
@gerleim Navigating page by ctrl+click on the namespace but Alt+ <- is not working though. Let me revise my question: after going to definition how to return back where i navigated from (file)? – Cruzer Jun 10 '18 at 13:04
@vbRocks I tested it in some scenarios, and Alt+ <- does navigate back for me. This is on windows, different OSs use different keys: https://stackoverflow.com/a/35433087/35150 – gerleim Aug 08 '18 at 09:48
2

I click `F12` at the component name, (for example, `` ) and cannot go to definition? Just show `No definition found for `. is it okay? – StepUp Oct 09 '18 at 14:06
It works using the `cmd + mouse click` on Mac as well – John Oct 25 '18 at 07:49
2

I have already had that extension but "go to definition" didn't work anyway. Extension reinstall helped for me. – Verri Jul 20 '22 at 09:03
Reinstalling the Angular Language Service extension and restarting VS Code fixed it for me as well. – Uber Schnoz Jun 06 '23 at 14:12

score 8 · Answer 2 · answered Apr 08 '20 at 07:05

8

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

answered Apr 08 '20 at 07:05

Hien Nguyen

24,551
7
52
62

score 4 · Answer 3 · answered Aug 04 '20 at 02:37

4

you will need just one extension Angular Essentials by John Papa

by installing this your vscode shall become pro-angular editor

answered Aug 04 '20 at 02:37

Shubham Shaw

841
1
11
24

The Angular language service (part of this pack) is the extension in particular that enables this feature, and it is awesome- https://devblogs.microsoft.com/visualstudio/angular-language-service-for-visual-studio/ – chrismarx Sep 22 '20 at 14:13

score 1 · Answer 4 · answered May 10 '23 at 18:08

1

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

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

answered May 10 '23 at 18:08

Pars

4,932
10
50
88

Go To Definition in angular html file in Visual Studio Code

4 Answers4