Skip to content

Self-closing component tags (<my-comp/> instead of <my-comp></my-comp>)? #39525

@samclaus

Description

@samclaus

🚀 feature request

Relevant Package

This feature request is for @angular/compiler? Unsure.

Description

The issue title pretty much covers it but here is another example:

<super-duper-long-component-name [prop]="someVar" />
<!-- instead of -->
<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>

There is an existing issue for this, #673, but it was closed due to inactivity.

That issue got half-rejected (it was not resolved) on the basis of the HTML spec, which does not allow self-closing tags. That makes a total of zero sense to me. The HTML template language is already far beyond what vanilla HTML offers, and that is the entire point of using a framework like Angular. Many other major frameworks (React/Vue/Svelte to name a few) already support self-closing component tags.

I understand that Angular templates were being parsed in the browser before, but why should ease-of-life syntax sugar be banned when using AOT compilation? Sure, some people still use JIT-compiled Angular, but then again, some people still use Internet Explorer in 2020. If they want to suffer so be it but why refuse to add excellent features for the rest of us? There are plenty of antifeatures out there but I personally think self-closing tags are pretty intuitive and improve the code quality significantly; from the looks of #673 it seems like a lot of other people agree.

Please reconsider self-closing component tags.

Describe alternatives you've considered

Continue to sigh as I write needlessly verbose code and write checks for two different nullish types.

Metadata

Metadata

Assignees

Labels

area: compilerIssues related to `ngc`, Angular's template compilerarea: coreIssues related to the framework runtimecore: basic template syntaxfeatureIssue that requests a new featurefeature: under considerationFeature request for which voting has completed and the request is now under considerationstate: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions