โค๏ธ Creative Tim Club - Access all our Present & Future Premium Products

Free Bootstrap 4 Admin Angular 13 Template

Product description


Now UI Dashboard Angular is a free Bootstrap 4 admin Angular 13 template provided for free by Invision and Creative Tim. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. Now UI Dashboard Angular comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.

Now UI Dashboard Angular has the same design characteristics as Now UI Kit Angular, so it is quite convenient to use them together. Or you can choose between them depending on the project at hand. If you love Now UI Kit Angular, you'll love Now UI Dashboard Angular.

Create awesome, lifelike prototypes with InVision and Now so your users can experience and give feedback on your vision!

Product certified by: Creative Tim
Now UI Dashboard Angular - Fully Coded and Responsive HTML5
Now UI Dashboard Angular - Sass Files for Professional Front End Developers
Now UI Dashboard Angular - Photoshop Files for Professional Designers
Now UI Dashboard Angular - Sketch Files for Professional Designers
Now UI Dashboard Angular - Crafted with Bootstrap - the most popular Front End Framework
Now UI Dashboard Angular - Angular 2+ Structure with TypeScript
Downloads
30,691
Version
1.4.0
Changelog
Updated
1 year ago
Released
5 years ago
Reviews
Star
Handcrafted Elements
16
Customized Plugins
5
Example Pages
7
Community Support
Documentation
Fully Responsive

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? What is in PRO Version?
Elements 16 160
Plugins 5 13
Examples Pages 7 6
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

39 Web Developers commented on this product

pretentiousdesigns 5 years ago

is this included in the big bundle

amazigho.adel
  • downloaded

Thank you. ๐Ÿ˜˜ ๐Ÿ’–
5 years ago

chelaru_ciprian
  • downloaded

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

chelaru_ciprian
  • downloaded

@amazigho.adel thank you for the kind words. Regards, Ciprian
5 years ago

chelaru_ciprian
  • downloaded

@amazigho.adel thank you for the kind words. Regards, Ciprian
5 years ago

felocac
  • downloaded
5 years ago

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

chelaru_ciprian
  • downloaded

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

nagendra.sr
  • downloaded
5 years ago

Thank you so much.

chelaru_ciprian
  • downloaded

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

ajay.grover
  • downloaded
5 years 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
  • downloaded

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

nhtzq
  • downloaded
5 years 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.
5 years ago

chelaru_ciprian
  • downloaded

@nhtzq , Can you try what @ajay.grover said and tell me if it works? Best, Ciprian
5 years 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
5 years ago

nhtzq
  • downloaded
5 years ago

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

chelaru_ciprian
  • downloaded

@nhtzq Thank you for using our product. Can you give me more details about that? Best, Ciprian
5 years 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.
5 years ago

nhtzq
  • downloaded

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

chelaru_ciprian
  • downloaded

I'm glad that everything works fine :D
5 years ago

bersnardc
  • downloaded
5 years ago

Waooh. cool!

chelaru_ciprian
  • downloaded

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

nhtzq
  • downloaded
5 years 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
  • downloaded

You can set the position to be above and all will be good.
5 years 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.
5 years ago

chelaru_ciprian
  • downloaded

Can you give me the code?
5 years ago

andersjs3 5 years 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
  • downloaded

Hi, @andersjs3 ! Can you give me more details about the first question? For the second one, we will update the documentation. Best, Ciprian
5 years 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
5 years 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
5 years 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
5 years ago

memidixowu
  • downloaded
5 years 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 rxjs@^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.