Skip to content
rdlabo.devdocs
日本語

deny-element

This plugin disallows the use of certain HTML tags.

This rule prevents specific elements from being used in Angular templates. It is commonly used to ban inline overlay components such as <ion-modal>, <ion-popover>, <ion-toast>, <ion-alert>, <ion-loading>, <ion-picker>, and <ion-action-sheet>, which should be presented through launcher methods or dedicated services instead of being declared in the template.

Rule Details

The rule runs on .html template files and reports any element whose tag name is in the configured elements list. It traverses the template AST, including Angular control flow syntax such as @if, @for, @else, and nested then / else branches.

  • .spec.html files are ignored so that tests are not affected.
  • Without an explicit option, the rule uses its default Ionic overlay element list. When an option object is supplied, its schema requires an elements array.

Options

{
  "rules": {
    "@rdlabo/rules/deny-element": [
      "error",
      {
        "elements": ["ion-modal", "ion-popover", "ion-toast", "ion-alert", "ion-loading", "ion-picker", "ion-action-sheet"]
      }
    ]
  }
}

elements

  • Type: string[]
  • Default: ion-modal, ion-popover, ion-toast, ion-alert, ion-loading, ion-picker, ion-action-sheet

Array of element tag names to disallow. The rule compares these names to the Element node type in the Angular template AST, so it checks both the element itself and its presence inside control flow branches.

Examples

Incorrect

<ion-modal></ion-modal>

<div>
  <ion-toast></ion-toast>
  <ion-alert></ion-alert>
</div>

@if (showModal) {
<ion-modal>Modal content</ion-modal>
}

Correct

<ion-button (click)="presentModal()">Open</ion-button>

@for (item of items; track item.id) {
<ion-card>
  <ion-card-header>{{ item.name }}</ion-card-header>
</ion-card>
}

When to enable

Enable this rule in projects that use the launcher pattern for overlays. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/prefer-disable-handler to keep modal and overlay logic out of the template.

See also

Implementation

Edit this page on GitHub