@angular-eslint/template/prefer-at-else
November 9, 2025 · View on GitHub
@angular-eslint/template/prefer-at-else
Prefer using @else instead of a second @if with the opposite condition to reduce code and make it easier to read.
- Type: suggestion
- 🔧 Supports autofix (
--fix)
Rationale
When two consecutive @if blocks test opposite conditions (like @if (isLoggedIn) and @if (!isLoggedIn)), the second should be replaced with @else for clarity and maintainability. Using @else makes it immediately obvious that exactly one of the two branches will execute, whereas two separate @if statements require readers to mentally verify that the conditions are opposites. The @else pattern is more concise, eliminates duplication, and prevents bugs that could occur if the conditions drift out of sync during maintenance. This rule automatically detects opposite conditions including negation (!), comparison operators (<, >, ==, !=, etc.), and special cases like array.length === 0 versus array.length > 0.
Rule Options
The rule does not have any configuration options.
Usage Examples
The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.
❌ - Toggle examples of incorrect code for this rule
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {}
@if (!a) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (!a) {}
@if (a) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a > b) {}
@if (a <= b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a <= b) {}
@if (a > b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a >= b) {}
@if (a < b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a < b) {}
@if (a >= b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a === b) {}
@if (a !== b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a !== b) {}
@if (a === b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a == b) {}
@if (a != b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a != b) {}
@if (a == b) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a.length > 0) {}
@if (a.length === 0) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a.length === 0) {}
@if (a.length > 0) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (0 < a.length) {}
@if (a.length === 0) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a.length === 0) {}
@if (0 < a.length) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (0 < a.length) {}
@if (0 === a.length) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (0 === a.length) {}
@if (0 < a.length) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a.length > 0) {}
@if (0 === a.length) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (0 === a.length) {}
@if (a.length > 0) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a.length > 0) {}
@if (a.length == 0) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a.length == 0) {}
@if (a.length > 0) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {
1
} @else {
2
}
@if (!a) {
~~~~
3
}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {
1
}
@if (!a) {
~~~~
2
} @else {
3
}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {
1
} @else {
2
}
@if (!a) {
~~~~
3
} @else {
4
}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {}
@if (!a) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {}
@if (!a) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {}
<!-- comment -->
@if (!a) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a; as alias) {}
@if (!a) {}
~~~~
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
❌ Invalid Code
@if (a) {}
@if (!a; as alias) {}
~~~~
✅ - Toggle examples of correct code for this rule
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {
} @else {
}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
@if (b) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
@if (!b) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a.b) {}
@if (!c.b) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a === true) {}
@if (a === false) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a === b) {}
@if (a != b) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a > 0) {}
@if (a < 0) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a > 1) {}
@if (a <= 0) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a >= b) {}
@if (a <= b) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a.length > 1) {}
@if (a.length <= 0) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
text
@if (!a) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
<element/>
@if (!a) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
@if (b) {}
@if (!a) {}
Default Config
{
"rules": {
"@angular-eslint/template/prefer-at-else": [
"error"
]
}
}
✅ Valid Code
@if (a) {}
@else if (b) {}
@if (!a) {}