very start of Angular 2 sublime syntax file

JavaScript NG.sublime-syntax

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
  - js
  - ng.js
scope: source.js.ng
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true

Where do we save this file?

@BenjaminMcDonald where benjamin? where?

You can save it in ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/ if you're on OS X, not quite sure about the other OS variants, but it would be where ever Packages/User is located.

Thanks, got it working by saving extension with .sublime-syntax, then change to View-Syntax-Javascript NG. But how do I use it with JavaScript/JavaScriptNext Syntax? I can open JavaScriptNext.sublime-syntax, please teach me how to integrate your code with it, as I am using backtick within .js file.

%YAML1.2 is wrong. It should be %YAML 1.2 you missed a space

that not work for me. this works for me

ng.sublime-syntax

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
  - ts
  - js
  - ng.js
scope: source.js.ng, source.ts
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true

Note: If you're using SublimeLinter, in order for linting to work, just add this syntax to syntax_map field in your SublimeLinter settings like this:

{
  "user": {
    "syntax_map": {
      "javascript ng": "javascript"
    }
  }
}

If you're using typescript you can change push: scope:source.js to push: scope:source.ts to maintain typescript styles

Can I combine with Babel ES6 syntax?

For example we have this element <p>Hello ${this.state.user.email}</p>
can ${this.state.user.email} be recognized as javascript inside the html tag with this sublime syntax?

For example we have this element <p>Hello ${this.state.user.email}</p>
can ${this.state.user.email} be recognized as javascript inside the html tag with this sublime syntax?

Did you ever find a solution to this?

Does this still work in Sublime Text 4? I'm trying all the above but so far no luck. It is driving me nuts that the myVar value doesn't highlight correctly when editing an HTML file.

<h1>My Page</h1>
<script>
let myVar = `testing literal backtick here
multiple lines of string here
even more lines of string here.`
</script>

I'm honestly not sure, I've not used Angular for quite some time now and moved to VS Code as my main editor.