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


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:

11 comment(s)
Mo cisse

wonderful!

23 October, 2018
Vladislav Kiselev

The survey looks strange and works buggy.

1. Why it is not possible to choose several options?

2. I can't choose anything except last two options in section 2. Browser is FF 63.0

23 October, 2018
Mehul Harry (DevExpress)

@Vladislav, Thanks, I've made the first two questions multiple choice and fixed the issue you reported.

23 October, 2018
Arjan van Dijk

Blazor is the future!

23 October, 2018
Abdullah AlFifi

Very nice...

Is this feature support RTL languages like Arabic?

23 October, 2018
Anurag Mahato

Does side bar support grouping ?

23 October, 2018
Alex B (DevExpress)

@Abdullah AlFifi

There are some known issues with RTL support in the templates. We expect to fix them soon.

@Anurag Mahato

The side-bar contains a TreeView by default. The root level of the TreeView can represent groups. You can replace the TreeView with a grouped TreeList. It's all customizable.

24 October, 2018
Pavel Absolut

Do you planning implement this interface for XAF Web ? We will needs this in future  

24 October, 2018
Dennis (DevExpress Support)

@Pavel: We shared our updated vision and plans for XAF Web & Mobile development at community.devexpress.com/.../XAF-new-SPA-UI-for-Web-and-Mobile-v18-2.aspx. I hope this helps.

25 October, 2018
Mr. Tran Van Manh

I still waiting for DocumentView in Angular with .NetCore 2 API

25 October, 2018
Juan Antonio Trujillo Montenegro

Looking forward to Vue.js templates.

26 October, 2018

Please login or register to post comments.