{"id":17256613,"url":"https://github.com/princemaple/ngx-html-syntax","last_synced_at":"2025-04-14T05:31:54.484Z","repository":{"id":146577405,"uuid":"70221267","full_name":"princemaple/ngx-html-syntax","owner":"princemaple","description":"Ngx (Angular2+) HTML Syntax for SublimeText","archived":false,"fork":false,"pushed_at":"2024-12-18T22:08:39.000Z","size":72,"stargazers_count":16,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-13T21:49:01.680Z","etag":null,"topics":["angular","angular2","html","ngx","sublime-text","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://packagecontrol.io/packages/Ngx%20HTML","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/princemaple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-07T06:30:13.000Z","updated_at":"2024-12-17T21:02:11.000Z","dependencies_parsed_at":"2024-01-16T12:23:21.226Z","dependency_job_id":"9a8e7fce-67a6-4452-aad0-a991b910203a","html_url":"https://github.com/princemaple/ngx-html-syntax","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fngx-html-syntax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fngx-html-syntax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fngx-html-syntax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fngx-html-syntax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/princemaple","download_url":"https://codeload.github.com/princemaple/ngx-html-syntax/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248826687,"owners_count":21167728,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","html","ngx","sublime-text","syntax-highlighting"],"created_at":"2024-10-15T07:14:51.840Z","updated_at":"2025-04-14T05:31:54.216Z","avatar_url":"https://github.com/princemaple.png","language":"HTML","readme":"# Ngx (Angular2+) HTML Syntax for SublimeText\n\nbased on the official sublime html syntax\n\n## Features\n\nSo that it's not broken when there are\n\n- `[input]`\n- `[@animation]`\n- `(output)`\n- `(@animation.event)`\n- `#reference`\n- `*template`\n- `[(bananaBox)]`\n\nattributes on the tags\n\n## Plus\n\nHighlighting the JS part as JS. So,\n\n- in `[myBinding]=\"myVar\"`, you should see `myVar` as an JS variable instead of string content\n    - i.e. `myVar` should be highlighted differently from `\"`s\n- in `*ngFor=\"let column of columns\"`, you should see `let` and `of` highlighted as keywords\n- in `(change)=\"update()\"`, you should see `update` as function name\n- in `a \u0026\u0026 b` within an Angular expression, you should see `\u0026\u0026` correctly highlighted as the JS operator instead of an error you would see in normal HTML syntax.\n- in `{{1 + 2}}` interpolations, you should see JS syntax highlighting as well\n\n## And...\n\nNow it supports Angular control flow.\n\n```\n@let myVar = myObservable | async;\n```\n\n```\n@for (item of items) {\n  \u003ca [href]=\"item.link\"\u003e{{item.title}}\u003c/a\u003e\n} @empty {\n  \u003cp\u003eNo Items\u003c/p\u003e\n}\n```\n\n```\n@if (users$ | async; as users) {\n  {{ users.length }}\n}\n```\n\n```\n@if (a \u003e b) {\n  {{a}} is greater than {{b}}\n} @else if (b \u003e a) {\n  {{a}} is less than {{b}}\n} @else {\n  {{a}} is equal to {{b}}\n}\n```\n\n```\n@switch (condition) {\n  @case (caseA) {\n    Case A.\n  }\n  @case (caseB) {\n    Case B.\n  }\n  @default {\n    Default case.\n  }\n}\n```\n\n## How to use\n\nThe syntax is listed as `Ngx HTML` in Sublime syntax selection list.\n\nI personaly use [ApplySyntax](https://github.com/facelessuser/ApplySyntax) plugin\nwith the following setting:\n\n```json\n\"syntaxes\": [\n    {\n        \"syntax\": \"Ngx HTML/NgxHTML\",\n        \"extensions\": [\"component.html\"],\n    },\n]\n```\n\nYou could use it in other ways...\ne.g. set it as the default syntax for all html files, since it's a superset of the html syntax anyway.\n","funding_links":[],"categories":["Development Utilities"],"sub_categories":["IDE Extensions"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprincemaple%2Fngx-html-syntax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprincemaple%2Fngx-html-syntax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprincemaple%2Fngx-html-syntax/lists"}