Awesome
Ngx (Angular2+) HTML Syntax for SublimeText
based on the official sublime html syntax
Features
So that it's not broken when there are
[input]
[@animation]
(output)
(@animation.event)
#reference
*template
[(bananaBox)]
attributes on the tags
Plus
Highlighting the JS part as JS. So,
- in
[myBinding]="myVar"
, you should seemyVar
as an JS variable instead of string content- i.e.
myVar
should be highlighted differently from"
s
- i.e.
- in
*ngFor="let column of columns"
, you should seelet
andof
highlighted as keywords - in
(change)="update()"
, you should seeupdate
as function name - in
a && b
within an Angular expression, you should see&&
correctly highlighted as the JS operator instead of an error you would see in normal HTML syntax. - in
{{1 + 2}}
interpolations, you should see JS syntax highlighting as well
And...
Now it supports Angular control flow.
@let myVar = myObservable | async;
@for (item of items) {
<a [href]="item.link">{{item.title}}</a>
} @empty {
<p>No Items</p>
}
@if (users$ | async; as users) {
{{ users.length }}
}
@if (a > b) {
{{a}} is greater than {{b}}
} @else if (b > a) {
{{a}} is less than {{b}}
} @else {
{{a}} is equal to {{b}}
}
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}
How to use
The syntax is listed as Ngx HTML
in Sublime syntax selection list.
I personaly use ApplySyntax plugin with the following setting:
"syntaxes": [
{
"syntax": "Ngx HTML/NgxHTML",
"extensions": ["component.html"],
},
]
You could use it in other ways... e.g. set it as the default syntax for all html files, since it's a superset of the html syntax anyway.