Why does Angular not need a dash in component name Why does Angular not need a dash in component name dart dart

Why does Angular not need a dash in component name


The HTML spec allows you to use unknown tags (<tab>, <panel>) without the HTML parser throwing a fit. To their benefit, Angular uses this behavior for their directives to make the components like native.

Tags that don't have a - inherit from HTMLUnknownElement. There's a good explanation of the upgrade process here: HTML5Rocks - Custom Elements - How elements are upgraded

Since Angular directives were designed in a time before the Custom Elements spec existed, they don't use a -. It's the standard that requires element names contain a -.


The dash is not required by Angular since there is no technical reason to require it. However, all large projects I have worked on prefix all components and directives with a two character and then dash prefix, e.g "ab-tab".

First, using dashes in names makes your syntax compatible with the Custom Elements standard, although Angular doesn't depending the spec.

Second, it helps with organization. Standard Angular directives are all prefixed with 'ng-'. By using your own prefix, people reading your code will be able to quickly distinguish between components from different libraries.