The attribute name of [ *ngIf ] must be in lowercase

Question

Can you please tell me how to remove below message on VS code editor?

The attribute name of [ *ngIf ] must be in lowercase.

Above message shows on below code

 <div *ngIf="isBornOn">

 </div>

Answer 1

I think it has to do with the vscode-htmlhint plugin, try disable it.

If that removed the warning you can disable just that rule by setting attr-lowercase to false.

Read more about the configuration of this plugin here

In VSCode you can set the following settings to disable it.:

"htmlhint.options": {
  "attr-lowercase": false
}

If don't want lose warning when use attributes that don't follow lower case rule. Instead of, you can define an attribute white list:

"htmlhint.options": {
    "attr-lowercase": [
      "*ngIf",
      "ngIf",
      "*ngFor",
      "ngFor",
      "ngSwitch",
      "ngModel"
    ],
    "doctype-first": false
  },

Also can add doctype-first to avoid that message on every component.

Answer 2

Anyone looking to solve this from another IDE such as Eclipse or Codemix, simply create a file called .htmlhintrc place this in /<angular-project>/src/.htmlhintrc and change the values as you see fit, mine are:

{
    "tagname-lowercase": false,
    "attr-lowercase": false,
    "attr-value-double-quotes": true,
    "doctype-first": false,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "attr-no-duplication": true,
    "title-require": true
}

Re-open the tab if not automatically resolved or then restart the IDE.

Answer 3

Under VS Code - Extensions (left sidebar - box-shaped icon) - Disable this plugin or uninstall if required.

Then Reboot