#angular #incremental-parser #parser

tree-sitter-angular

Angular grammar for tree-sitter

10 unstable releases (3 breaking)

new 0.6.0 Mar 27, 2025
0.5.3 Mar 26, 2025
0.5.0 Sep 23, 2024
0.4.3 Aug 28, 2024
0.3.0 May 7, 2024

#161 in Text editors

Download history 3/week @ 2024-12-04 10/week @ 2024-12-11 1/week @ 2025-02-05 153/week @ 2025-03-05 59/week @ 2025-03-19

212 downloads per month

MIT license

565KB
21K SLoC

C 20K SLoC // 0.0% comments JavaScript 721 SLoC // 0.0% comments Rust 36 SLoC // 0.4% comments

✨ Tree Sitter Grammar for Angular ✨

GitHub Workflow Status (with event) Angular Tree-sitter CLI version

Specification

This parser is a complete rewrite of steelsojka's tree-sitter-angular. This parser extends tree-sitter-html because the new Control Flow syntax is not valid HTML code.

Supported Features

  • Structural Directives
  • Property binding
  • Event binding
  • String interpolation
  • If-statements (v17)
  • For-statements (v17)
  • Switch-statements (v17)
  • Defer-statements (v17)
  • Let-expression (v18.1)
  • ICU message format
  • Untagged Template Literals (v19.2)

Requirements

  • Neovim nightly recommended (as it includes the filetype detection of Angular Templates)

Filetype

In the nightly neovim built (or release 0.11.x), the filetype detection for Angular templates is included. It will detect Angular HTML templates, based on it's contents, and set the filetype to htmlangular.

Older versions

If you are using an older version, you must set the filetype yourself.

E.g. mark the file as htmlangular if it matches the pattern *.component.html:

Create a plugin in ~/.config/nvim/plugin/angular.lua with the following:

vim.filetype.add({
  pattern = {
    [".*%.component%.html"] = "htmlangular", -- Sets the filetype to `htmlangular` if it matches the pattern
  },
})

Next, create a ftplugin for htmlangular that does the following:

runtime! ftplugin/html.vim!

Or, in lua:

vim.cmd('runtime! ftplugin/html.vim!')

LSP's or other plugins

You may need to include this new filetype (htmlangular) for other plugins, like LSP for example:

require('lspconfig').angularls.setup {
  filetypes = { 'typescript', 'html', 'typescriptreact', 'typescript.tsx', 'htmlangular' }
}

Issues

If you experience any issues, please feel free to open an issue with the code that's causing problems.

Dependencies

~2.9–4.5MB
~83K SLoC