Great question—these tag prefixes and their hierarchy do follow a clear pattern, even if it’s not always spelled out front-and-center in docs. Let’s break this down using your dx-data-grid example:

First, the Prefix Meanings #

• dxo-: You’re exactly right! This stands for Option. These tags represent top-level or nested configuration objects that apply to the entire component (or a section of it). In your example, <dxo-sorting mode="multiple"> configures the grid’s global sorting behavior—this maps directly to the sorting property in the DataGrid’s configuration object, which is a single object (not an array), so you only use one <dxo-sorting> tag.
• dxi-: This is short for Item. These tags define repeatable child elements that belong to an array-based configuration property. Your <dxi-column> tags are perfect examples: the grid’s columns property is an array of column objects, so you can add as many <dxi-column> tags as you need, each defining a single column’s settings.

How Tags Are Grouped & Hierarchized #

The tag structure directly mirrors the configuration structure of the DevExtreme component:

• The outermost tag is always the core component, prefixed with dx- (like <dx-data-grid>)—this is the main UI component instance.
• Nested dxo-* tags map to single object properties in the component’s config. For example, if the DataGrid had a paging configuration object, you’d use <dxo-paging pageSize="10"> to set its properties.
• Nested dxi-* tags map to array properties in the config. Each tag represents one item in that array (e.g., each <dxi-column> is an entry in the columns array).

Other Tag Types #

Beyond dx-, dxo-, and dxi-, there’s one more key tag type:

• dx-template: Used to define custom content templates for parts of the component. For example, if you wanted to add a custom link in a column, you’d nest a template inside a <dxi-column>:

  <dxi-column dataField="EmployeeID">
    <dx-template let-data>
      <a href="/employees/{{data.data.EmployeeID}}">View Details</a>
    </dx-template>
  </dxi-column>
  

  The let-data syntax lets you access the current item’s data within the template.

How to Explore & Find These Tags #

You don’t have to guess—here’s how to uncover the full set of tags for any component:

• Map to the Component’s Configuration Docs: Every DevExtreme Angular component has a "Configuration" section in its docs. The structure here is 1:1 with the tags. If a config property is an object, use a dxo- tag; if it’s an array, use a dxi- tag (singular form of the array name, e.g., columns → <dxi-column>).
• Use IDE IntelliSense: If you’ve set up DevExtreme correctly in your Angular project, VS Code (or other IDEs) will auto-suggest valid nested tags when you type < inside a core component tag. This is super helpful for discovering available options.
• Check TypeScript Definitions: Open the .d.ts files in the @devextreme/angular package (e.g., data-grid.d.ts). Look for @Input() properties:
  • A property like @Input() sorting: Sorting; means you can use <dxo-sorting>.
  • A property like @Input() columns: Array<Column>; means you can use multiple <dxi-column> tags.
• Dissect Official Examples: The DevExtreme Angular examples page uses these tags extensively. Pick any example for the component you’re working with, and you’ll see exactly how to structure the tags for different configurations.

内容的提问来源于stack exchange，提问作者pinale