DevExtreme Angular - Items Selection

An end user can select NavBar items in two different modes: 'single' (by default) or 'multiple'. You can use the selectionMode option to change the mode.

HTML

TypeScript


<dx-nav-bar ...
    selectionMode="multiple">
    <dxi-item text="User" icon="user"></dxi-item>
    <!-- ... -->
</dx-nav-bar>


import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

If you need an item to be preselected, pass its index in the data source array to the selectedIndex option.

HTML

TypeScript


<dx-nav-bar [selectedIndex]="1">
    <dxi-item text="User" icon="user"></dxi-item>
    <dxi-item text="Find" icon="find"></dxi-item>
    <dxi-item text="Favorites" icon="favorites"></dxi-item>
</dx-nav-bar>


import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

As an alternative, you can use the selectedItem (for "single" selectionMode) or selectedItems (for "multiple" selectionMode) options. This approach is suitable if the NavBar items are specified using an array rather than the dxItem markup component.

HTML

TypeScript


<dx-nav-bar
    [items]="navBarItems"
    [selectedItem]="navBarItems[3]">
    <!-- ========== or ========== 
    selectionMode="multiple"
    [selectedItems]="[ navBarItems[3], navBarItems[4] ]"> -->
</dx-nav-bar>


import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    navBarItems = [
        { text: "User", icon: "user" },
        { text: "Find", icon: "find" },
        { text: "Favorites", icon: "favorites" },
        { text: "About", icon: "info" },
        { text: "Home", icon: "home" },
        { text: "URI", icon: "tips" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

DevExtreme Angular - Items Selection

See Also