✨ Tree Sitter Grammar for Angular ✨

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)
• ICU message format

Filetype

By default Angular's template files are marked as HTML and it will use the HTML parser. To use the Angular parser instead, you will need to create a plugin that sets the filetype correctly and registers the filetype for the angular parser in treesitter.

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

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

vim.api.nvim_create_autocmd("FileType", {
  pattern = "angular.html",
  callback = function()
    vim.treesitter.language.register("angular", "angular.html") -- Register the filetype with treesitter for the `angular` language/parser
  end,
})

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

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

Issues

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