Interested in all of our Premium Products? Get our Awesome Bundles with discounts up to 70%! ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Now UI Dashboard Angular

Now UI Dashboard Angular

Free Bootstrap 4 Admin Angular 7 Template
· 4.90/5 (72 Reviews)

MIT License

14,631 Downloads
37 Comments
Community Support
6 months Updates
Release: 1 year ago
Update: 9 months ago

16 Handcrafted Elements

5 Customized Plugins

7 Example Pages

Product certified by: Creative Tim

Upgrade to PRO Version

Get more power with Now UI Dashboard PRO Angular. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo?
  • Elements · 16
  • Plugins · 5
  • Examples Pages · 7
  • -
  • -
  • -
  • -
What is in PRO Version?
  • Elements · 160
  • Plugins · 13
  • Example Pages · 6
  • + Documentation
  • + SASS Files
  • + Photoshop Files
  • + Sketch Files
Upgrade to PRO

We are here to help you!

37 Web Developers commented on this product

Github Docs FAQ Page

pretentiousdesigns 1 year ago

is this included in the big bundle

amazigho.adel
  • downloaded

Thank you. ๐Ÿ˜˜ ๐Ÿ’–
1 year ago

chelaru_ciprian
  • owner

@pretentiousdesigns this is a free product. Try it and tell us what you think. Best, Ciprian
1 year ago

chelaru_ciprian
  • owner

@amazigho.adel thank you for the kind words. Regards, Ciprian
1 year ago

chelaru_ciprian
  • owner

@amazigho.adel thank you for the kind words. Regards, Ciprian
1 year ago

felocac
  • downloaded
1 year ago

This is awesome creative tim, thankyou. You guys are really helping the community.

chelaru_ciprian
  • owner

Hi, @felocac ! Thank you for using our product and tell us for the kind words! Best, Ciprian
1 year ago

nagendra.sr
  • downloaded
1 year ago

Thank you so much.

chelaru_ciprian
  • owner

@nagendra.sr thank you for using our product and for the kind words. Regards, Ciprian
1 year ago

ajay.grover
  • downloaded
1 year ago

Thank You so much guys, I have now use 3 of these free dashboard kits in my projects. They are too good to be free. :)

chelaru_ciprian
  • owner

Thank you for the kind words, @ajay.grover ! All the best, Ciprian
1 year ago

nhtzq
  • downloaded
1 year ago

When using `ng generate component my-component`, an error occurs, Could not find an NgModule. Use the skip-import option to skip importing in NgModule.

ajay.grover
  • downloaded

Make sure you are in the right folder. Also, I think you can manually override which module to update using the --module flag. Try something like this: ng g c comp --module app just replace app with module name make sure you write just the name without .module.ts at the end.
1 year ago

chelaru_ciprian
  • owner

@nhtzq , Can you try what @ajay.grover said and tell me if it works? Best, Ciprian
1 year ago

nhtzq
  • downloaded

I was in the right folder. FYI, I used `ng update` to update Angular and now I am using Angular CLI 6.0.8. After the update and before I changed anything, I was only able to use `ng g c <component_name>` in src/app. And then in angular.json (after the update, angular-cli.json became angular.json), under "now-ui-dashboard-angular-e2e", I modified "root"'s value to "e2e/" just like in the default Angular 6 project angular.json generated by `ng new`. Then eventually `ng g c` works in the project's root directory
1 year ago

nhtzq
  • downloaded
1 year ago

Need document for "data-color" attribute, its options and how _variables.scss relates to it.

chelaru_ciprian
  • owner

@nhtzq Thank you for using our product. Can you give me more details about that? Best, Ciprian
1 year ago

nhtzq
  • downloaded

I also figured this out myself: in src/assets/scss/now-ui-dashboard/_sidebar-and-main-panel.scss you could find: ``` &[data-color="blue"]{ @include sidebar-color($info-color); } &[data-color="green"]{ @include sidebar-color($success-color); } &[data-color="orange"]{ @include sidebar-color($orange-color); } &[data-color="red"]{ @include sidebar-color($danger-color); } &[data-color="yellow"]{ @include sidebar-color($warning-color); } ``` which is actually mapping the values in "data-color" attribute to scss color variables, e.g. data-color-blue is using $info-color. And then I created a "navy" color like this: ``` &[data-color="navy"]{ @include sidebar-color($navy-color); } ``` In src/assets/scss/now-ui-dashboard/_variables.scss, you could find all scss color variable definitions, for example: ``` $info-color: #2CA8FF !default; $info-states-color: lighten($info-color, 6%) !default; $info-color-opacity: rgba(44, 168, 255, .3) !default; $info-color-alert: rgba(44, 168, 255, .8) !default; ``` Thus using the same definition format, I defined my navy-color like this: ``` $navy-color: #0b1e39 !default; $navy-states-color: lighten($primary-color, 6%) !default; $navy-color-opacity: rgba(11, 30, 57, .3) !default; $navy-color-alert: rgba(11, 30, 57, .8) !default; ``` Note that the 3rd, 4rd lines in such definition is actually using the one in the 1st line in rgba format but use 0.3 and 0.8 alpha values respectively.
1 year ago

nhtzq
  • downloaded

sorry, the comment text couldn't keep the text indentation so it becomes hard to read.
1 year ago

chelaru_ciprian
  • owner

I'm glad that everything works fine :D
1 year ago

bersnardc
  • downloaded
1 year ago

Waooh. cool!

chelaru_ciprian
  • owner

@bersnardc thank you for using our product and for the kind words! Best, Ciprian
1 year ago

nhtzq
  • downloaded
1 year ago

In footer.component.html, I tried to add a tooltip to the copyright text using "ngbTooltip" but the tooltip cannot position correctly, it always appears far above the footer

chelaru_ciprian
  • owner

You can set the position to be above and all will be good.
1 year ago

nhtzq
  • downloaded

Do you mean using the placement="top/right/bottom/left" attribute on the tooltip element? No, it won't fix the problem.
1 year ago

chelaru_ciprian
  • owner

Can you give me the code?
1 year ago

andersjs3 1 year ago

Hi, thank you for creating this great theme. Two questions though regarding your online documentation or demo (and my local copy as well) 1. Scrollbar is not visible for the table in your demo when running MS Edge nor any other div with limited height. 2. There seams to be something wrong with the "switches" as well since they are not looking like I supposed you wanted them to.

chelaru_ciprian
  • owner

Hi, @andersjs3 ! Can you give me more details about the first question? For the second one, we will update the documentation. Best, Ciprian
1 year ago

andersjs3

If you use the sample table in your documentation on https://demos.creative-tim.com/now-ui-dashboard-angular/documentation/tables but set a "max-height" for the table on let's say 300px using css, the scrollbars that then is and should be available in other browsers such as firefox or chrome is not there using MS Edge. There is something in your css for parent objects that's preventing the scrollbars in Edge from showing up. /Anders
1 year ago

andersjs3

The second issue is resolved if you include the css for the switches, <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css"> but you also need to update the css in the theme if you are using the switches inside a card to avoid word-wrap for the text
1 year ago

andersjs3

Found the root cause of issue no#1 and that is that you must add "-ms-overflow-style: scrollbar" to the css for the particular object in order to show scrollbars in Edge
1 year ago

memidixowu
  • downloaded
1 year ago

I used `npm update` to update to latest angular which installs @angular/core:6.0.2 But it always gives warning as [email protected] requires a peer of [email protected]^5.0.1 but none is installed. You must install peer dependencies yourself.

You have to be logged in to post a comment. Login here.