Home

Awesome

Ngx (Angular2+) HTML Syntax for SublimeText

based on the official sublime html syntax

Features

So that it's not broken when there are

attributes on the tags

Plus

Highlighting the JS part as JS. So,

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.