fix(eslint-plugin-template): [prefer-self-closing-tags] allow nested ng-content #2257
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #2060
The immediate fix was actually quite simple - anchor the regular expression at the start and end of the string. The problem was that when there were nested
ng-content
nodes, the regular expression might not match to the first<ng-content
tag and/or not match to the last</ng-content>
tag. In the example from #2060:The regular expression matches to:
Adding
^
and$
anchors to the regular expression would fix that, but the problem with using a regular expression is that it doesn't handle quotes. If a selector contained a ">" then it would incorrectly find the end of the opening tag and deduce that there is non-whitespace characters in the inner HTML which may not be true.I've replaced the regular expression with a search through the string to find the end of the opening tag that handles quoted values, and a simple
.endsWith('</ng-content>')
check. If there is any non-whitespace characters after the opening tag and before the closing tag, then it's not empty.