DevExtreme for Angular - New Responsive Application Layouts And CLI Tools (v18.2)

Getting started with DevExtreme and Angular is now easier with the addition of these enhancements and tools:

• New DevExtreme Angular Template - application template with two responsive layouts based on DevExtreme components
• CLI (command line interface) Tools

These improvements will help you build feature-rich and responsive web applications that are powered by DevExtreme Angular components.

App Template w/Responsive Layouts

An application template is great because it creates the core pieces of a fully working application. This allows you to get up and running in minutes.

A new DevExtreme Angular Template is now available. It ships with two responsive layouts that are based on DevExtreme components. Take a look at the beautiful layouts generated by the DevExtreme Angular Template.

Material Orange Theme in the app-side-nav-outer-toolbar layout:

Material Blue Theme in the app-side-nav-inner-toolbar layout:

Clone the GitHub repo to take it for a test in your local environment: https://github.com/DevExpress/DevExtreme-angular-template#getting-started.

To switch the layout, modify the component name in the app.component.html file: https://github.com/DevExpress/DevExtreme-angular-template#switch-layout

Demo: https://devexpress.github.io/devextreme-angular-template

Customizable Themes

In the v18.2 release, we've enhanced the DevExtreme themes with support for 'Color Swatches' and the Theme Builder CLI. Keep an eye on this blog for more information. These new theming capabilities help you create custom themes and integrate them with your app UI.

These other theme enhancements also enable the DevExtreme Angular Template's themes to be customizable.

Take a look at this topic to learn more: https://github.com/DevExpress/DevExtreme-angular-template#customize-themes

CLI Tools

Add DevExtreme via CLI

We've enhanced the Angular CLI with DevExtreme tools. Admittedly, our previous approach involved several steps.

So we've now boiled it down to one command!

Angular CLI:

ng add devextreme-angular@18.2-unstable

Note: After the final v18.2 release, please remove the -unstable suffix

DevExtreme CLI:

npx devextreme-cli add devextreme-angular

Quick Start Template

The following CLI commands help you create a DevExtreme Angular application that includes a navigation menu and several sample views:

DevExtreme CLI:

npx devextreme-cli new angular-app app-name
cd app-name
ng serve

Angular CLI:

npm install -g @angular/cli
ng new app-name --style=scss
cd app-name
npm i devextreme-angular@18.2-unstable
ng g devextreme-angular:add-app-template
ng serve

Vue/React/ASP.NET Core support planned

We plan to bring some, or all, of the features mentioned in this post for the other two libraries that DevExtreme provides components for: Vue and React.

We're also planning to provide similar Visual Studio project templates based on DevExtreme ASP.NET Core Controls. These plans are for future releases so we'd love to hear your feedback.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npx devextreme-cli new angular-app my-app

Then let us know your experience with the DevExtreme Angular Template.

Join the Webinar

Sign up for the upcoming “New in v18.2 - DevExtreme HTML / JS Controls” webinar where:

• you'll see all the new features/tools/components in v18.2
• and you can ask questions and interact with our devs

https://www.devexpress.com/support/webinars/

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

For some quick feedback, please submit your responses to this short survey: