devextreme-angular-template

The DevExtreme Angular Template allows you to create an application with several views and a hierarchical menu (see the live preview).

You can use DevExtreme CLI commands to modify, add, and delete views, configure the menu, and change themes.

The DevExtreme Angular Template is based on DevExtreme Angular components and generated with Angular CLI.

• Getting started
• Add DevExtreme Angular Template to an Existing Application
• Switch the Layout
• Add a View
• Configure Navigation Items
• Customize Application Appearance
  • Change Theme
  • Create a Custom Theme
  • Apply the Additional Theme to a Custom Element
  • Apply Theme Variables to Custom Elements
• License

Getting Started

Use the DevExtreme CLI's new angular-app command to create a DevExtreme Angular application that includes several sample views and a navigation menu:

npx devextreme-cli new angular-app app-name
cd app-name
npm run start

The application includes a side navigation menu and an outer toolbar.

You can set the --layout option to side-nav-inner-toolbar to use the layout with an inner toolbar.

npx devextreme-cli new angular-app app-name --layout=side-nav-inner-toolbar

Use the --empty flag to generate an application without views and navigation items.

npx devextreme-cli new angular-app app-name --empty

You can also clone the current repository to configure the DevExtreme Angular Template.

git clone https://github.com/DevExpress/devextreme-angular-template/
cd devextreme-angular-template
npm install
npm run start

Add DevExtreme Angular Template to an Existing Application

If you have an existing angular application, use the add angular-template command to add a DevExtreme Angular Template.

npx devextreme-cli add angular-template

This command creates new files (for example, app1.component) and does not override existing files. You should embed the new content in the existing files, or modify the app.module.ts to bootstrap the component.

// ...
import { AppComponent } from './app1.component';
// ...

You can use the --resolve-conflicts=override option to override existing files.

Note that in this case, the changes you applied to the application files can be lost.

npx devextreme-cli add angular-template --resolve-conflicts=override

This command also supports the --layout and --empty options that are described in the Getting Started section.

See DevExtreme CLI README for more information.

Switch the Layout

You can change the layout in an existing application. For this, substitute the app-side-nav-outer-toolbar tag with app-side-nav-inner-toolbar in the app.component.html file.

<app-side-nav-inner-toolbar title="DevExtreme Angular Template">
    <!-- Layout content here -->
</app-side-nav-inner-toolbar>

Add a View

Use the following command to add a view to a DevExtreme Angular application based on the current template:

npx devextreme add view view-name [--icon=IconName]

You can choose the icon name from the icon library.

This command also supports the module, project, spec, inlineStyle, and prefix options described in the ng generate component description.

The add view command also creates a root navigation item for the view.

Refer to the Widget Gallery for examples of using DevExtreme widgets in Angular.

Configure Navigation Items

Use the src\app\app-navigation.ts file to configure navigation items. Each configuration item can have the following fields:

• text - an item text
• icon - an item icon
• path - a navigation path associated with an item
• items - child items

{
    text: 'Category',
    icon: 'folder',
    items: [{
        text: 'About',
        path: '/about'
    }]
}

Customize Application Appearance

Change Theme

The DevExtreme Angular Template uses different themes for its content and menu. Pass the theme's name to the base-theme option in the metadata.base.json and metadata.additional.json files in the src\themes folder to modify the content and menu themes. See Predefined Themes for more information.

{
    // ...,
    "baseTheme": "material.blue.light",
    // ...
}

Run npm run build-themes to rebuild themes.

Create a Custom Theme

You can use the DevExtreme Theme Builder to create a custom theme based on predefined themes. For this, import src\themes\metadata.base.json or src\themes\metadata.additional.json into the Theme Builder, modify the theme, and export the result to the initial file.

Run npm run build to rebuild themes.

Apply the Additional Theme to a Custom Element

Add the dx-swatch-additional class to a DOM node to apply the additional (menu) theme to this node.

<div class="dx-swatch-additional">
    <!-- Your content here -->
</div>

Apply Theme Variables to Custom Elements

You can apply the SCSS variables defined in variables.base.scss and variables.additional.scss to custom elements.

// Your scss file
@import "../../../themes/generated/variables.base.scss";

.my-element {
    background-color: $base-accent;
}

License

Familiarize yourself with the DevExtreme License. Free trial is available!

DevExtreme Angular Template is released as a MIT-licensed (free and open-source) add-on to DevExtreme.