devexpress / devextreme-angular-template

Responsive Application Layout Templates​ based on DevExtreme Angular Components

DevExtreme Angular Template

The DevExtreme Angular Template is an Angular application with a navigation menu and sample views in a responsive layout (see a live preview). This application is created with Angular CLI and uses DevExtreme Angular components.

Getting Started

For more information about the DevExtreme Angular Template and how to customize it, refer to the following help topic: Application Template.

License

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

• DevExtreme License
• Free trial

devextreme-angular-template's Issues

Right-To-Left Support

Hi
how can i use angular Application Template in right-to-left direction?
Could you please help me ?
Thank you

Specific app titles cause title text to get truncated in the header toolbar

Steps to reproduce:

1. Rename the app to "Northwind"
2. Open the Chrome dev console
3. Run the app with "ng serve"

Result: part of the app title gets truncated.

Error generating production build

This version has been updated for Angular12 and is not being built for production.

ng build --output-path = dist --configuration production

Error:

✖ Index html generation failed.
undefined: 5: 144452: property missing ':'

There seems to be a problem with the way scss is going to be used going forward.

DevExtreme must configure its styles to meet this demand, in other projects I have the same problem.

DevExtreme for Angular, React, and Vue: App Templates(Angular not functioning as React)

Hello,
I watched the Youtube https://www.youtube.com/watch?v=FLDuyQDWv_4
and tried to follow it but creating an Angular App Template.

logging in with different users was not changing the logged in user label, top right
pressing on the user label top right and going to profile page is not working.
Create user page and Forgot password page are not there when trying to access from login page.
let me know if you need more info.
thank you!

npm run build-themes Unable to parse dart server response

Hello,
I'm trying to install the template by running
npx -p devextreme-cli devextreme new angular-app app-name

Everything went fine until it come to step npm run build-themes

I get this error:

line: null Unable to parse dart server response
at CompileManager.<anonymous> (C:\dev\app-name\node_modules\devextreme-cli\node_modules\devextreme-themebuilder\modules\compile-manager.js:67:23)
    at Generator.throw (<anonymous>)
    at rejected (C:\dev\app-name\node_modules\devextreme-cli\node_modules\devextreme-themebuilder\modules\compile-manager.js:6:65)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

I'm running these commands behind company proxy.
I don't know if it could affect the installation.

I setup the proxy config in npm and I can install all packages

Could you please help me ?

Thank you

How to change the theme dynamically after executing npm run build-themes

The template overrides any theme changing I do dynamically at runtime...
ex)

DxThemes.current('material.blue.dark');

currently this doesn't work but in a different application that I havent executed "npm run build-themes" on this works.

Is there a way to undo the template/ allow it to be overriden by a piece of code like above

getting errors on build after new app is created

getting errors on build after new app is created;

after: npx -p devextreme-cli devextreme new angular-app app-name

Build at: 2021-12-01T15:32:33.210Z - Hash: 282e8f3badea2247d0b5 - Time: 27364ms

./src/app/app.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
3 │ background-color: darken($base-bg, 5.00);
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\app.component.scss 3:21 root stylesheet

./src/app/layouts/single-card/single-card.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
36 │ color: rgba($base-text-color, alpha($base-text-color) * 0.7);
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\layouts\single-card\single-card.component.scss 36:39 root stylesheet

./src/app/shared/components/create-account-form/create-account-form.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
6 │ color: rgba($base-text-color, alpha($base-text-color) * 0.7);
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\shared\components\create-account-form\create-account-form.component.scss 6:35 root stylesheet

./src/app/shared/components/footer/footer.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
5 │ color: rgba($base-text-color, alpha($base-text-color) * 0.7);
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\shared\components\footer\footer.component.scss 5:33 root stylesheet

./src/app/shared/components/login-form/login-form.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
17 │ color: rgba($base-text-color, alpha($base-text-color) * 0.7);
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\shared\components\login-form\login-form.component.scss 17:35 root stylesheet

./src/app/shared/components/side-navigation-menu/side-navigation-menu.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
77 │ background-color: lighten($base-bg, 4.00);
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\shared\components\side-navigation-menu\side-navigation-menu.component.scss 77:31 root stylesheet

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

× Failed to compile.

`date` pipe not working

Hello,
I created project using this template and trying to use: {{ dateTest | date:'short' }} in home.component - that's all, nothing else added.

I got this error: The pipe 'date' could not be found

Useless scrollbar on ipad

To reproduce:

• Choose device emulation from Chrome developer tools
• Select ipad

You'll see that there is useless scrollbar in "home" page.

EDIT: it seems to be caused by the navigation menu in "outer toolbar" layout.

Does Navigation support parameter

Hello guys,

Does your navigation configuration support parameter to call path with like some id or something ?

ERESOLVE unable to resolve dependency tree

Hello,

when I execute the command "npx -p devextreme-cli devextreme new angular-app xxx" I get the following error:
Package installation failed: npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules / jasmine-core
npm ERR! dev jasmine-core @ "~ 3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core @ "> = 3.7.1" from [email protected]
npm ERR! node_modules / karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter @ "^ 1.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/xxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xxx/.npm/_logs/2021-05-12T08_35_56_707Z-debug.log
Package install failed, see above.

That seems to be due to a new version of Jasmine.

Query parameters and Angular child routes causes active route not to be selected in navigation menu

To reproduce:

• Add some query parameters to the current route and hit Enter key to reload
• Check the navigation menu on the left

Result: the active route is no longer selected

The reason for it is that you just use url directly to select the active item. This approach fails when there are some child routes ("customers/details/1") or query parameters ("customers?page=2").

Data grid UX issues

I understand that the examples should be as simple as possible but it really looks like you put absolutely no effort in the data grid example.

• No margins
• Over-extended first id column
• Instead of making the grid fit in the available space, you just let it grow as much as needed. As a result, instead of just having scrollable grid body and both the top toolbar and the paging controls easily accessible, you force the user to scroll up or down when he needs to use buttons from the top toolbar or paging controls in the bottom toolbar.
• The grid is not responsive.

Profile name and picture on top of page title in mobile view

Steps to reproduce:

• Open "live preview" page
• Enable device emulation on Chrome
• Select some mobile device (iPhone or Galaxy S5)
• Reload the page

Result:

Title text in navigation header is missing margins when using "inner toolbar" layout

If you choose "inner toolbar" layout, you should see that title text in navigation header is missing margins:

Long user names are not displayed correctly in user panel

Try using 15 character or longer user names in user panels to see the issue.

visual issue for side-navigation-menu

when full the menu with data by observable the side-navigation-menu updateSelection doesn't work fine so when i refresh the page it should mark menu item that selected by the route by when menu's data get by observables it doesn't work fine

Upgrade to 20.2 with scss

When can we expect an upgrade to 20.2 ? Simply upgrading package breaks some visual elements in the app. Would also love to see how to use the new scss styles and customize swatch with new approach.

Theme not working

Hello guys
Following your guidelines, i run the command npm run build-themes
with material.blue.light in metadata.json but nothing is generated.
I attached my package json tsconfig and

Visual bug on app-side-nav-inner-toolbar

There's a slight bug when the screen width is bigger than 1150px, there are some white lines that appear when activating the drawer.

This I've seen it with the app-side-nav-inner-toolbar, but not with the outer one
And this was compiled on Chrome, with Angular 7

Visual bug.zip

devextreme-cli new angular-app comand param exception

The command npx devextreme-cli new angular-app app-name --layout=app-side-nav-inner-toolbar throws an unhandled promise rejection.

See README.md line 37 and 40.

Your command example and the description should looks like this: npx devextreme-cli new angular-app sk-dx-template --layout=side-nav-inner-toolbar --empty

Maybe you want to fix your docs... ;-)

Over-complicated login form

Is there any particular reason why you are not using "dx-form" for login form like you did in "golf club" example? It seems like you are needlessly over-complicating it.

Template uses wrong indentation

In your templates .editorconfig you provide the following settings:

https://github.com/DevExpress/devextreme-angular-template/blob/master/.editorconfig

indent_style = space
indent_size = 2

But all your code is indented by 4 spaces, that leads for me to some heavy modification from right the start because we are using 2 spaces for all code.

Maybe you want to fix it... ;-)

Angular Change Detection

Hi,
When using functions instead variables on binds

eg:
[file] side-navigation-menu.component.ts
[sample]

private _items;
get items() {
console.error("ok");
if (!this._items) {
this._items = navigation.map((item) => {
if(item.path && !(/^//.test(item.path))){
item.path = /${item.path};
}
return { ...item, expanded: !this._compactMode }
});
}

return this._items;

}

when every click in body trigger this function many times, maybe when is low process is good, but if for example big menu maybe cause performance issue.

https://gyazo.com/c7441fdde966d768ff1a855bfd815d11

possible quickie fix

private _items;
items = this.getitems();
getitems() {
console.error("ok")
if (!this._items) {
this._items = navigation.map((item) => {
if(item.path && !(/^//.test(item.path))){
item.path = /${item.path};
}
return { ...item, expanded: !this._compactMode }
});
}

return this._items;

}

Thank you

submenus

Hi,
I want to create submenus in the left menu.
I changed the navigation like:
export const navigation = [
{
text: 'Home',
path: '/home',
icon: 'home'
},
{
text: 'Facilities',
icon: 'folder',
items: [
{
text: 'Profile',
icon : 'folder',
items :
[
{
text : 'test',
path: '/fire-permit-overview'
}
]
},
{
text: 'Fire Permits',
path: '/fire-permit-overview'
}
]
}
];
but I got the error : ERROR TypeError: Cannot read property 'getNodeByKey' of undefined
Is it possible?

DevExtreme ThemeBuilder assetsBasePath does not apply

Hello, I'm having troubles while importing my metadata json file to ThemeBuilder UI and exporting CSS file. I don't get the fonts & icons url as expected. Does this happen to anyone else?

v19.2.6

Error when trying to create a new application

When running:

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

We get:

18 error code ENOLOCAL
19 error Could not install from "****\AppData\Roaming\npm-cache_npx\11092" as it does not contain a package.json file.