If possible, can you fix the date popup in forms.advanced.html (jQuery version). The problem is that the date popup doesn't close even after selecting the date.
Hi, thanks for report this. You can use autoclose property when calling datepicker to remove such behavior Example

autoclose: true

If it is useful, here you can find more information about the plugin:

Hi, i would like to know how to use/integrate sass/compass into the components
Hi, you can copy all files from the sass folder and paste into the components folder of the project (structure is the same). Then run gulp with parameter --usescss in order to compile sass instead of less.
Optionally you can remove all less files.

Let us know if you have any question
Hola Estoy instalando la plantilla a ASPNET Sigo las estructuras de construcción, pero tengo este mensaje cuando intento ejecutar la plantilla:: 0x800a139e - Error en el tiempo de ejecución de JavaScript: Bootstrap tooltips require Tether (http: // tether. Io /) Sólo en esta línea / **
* Compruebe la dependencia de Tether
* Tether - http://tether.io/
Unesdoc.unesco.org unesdoc.unesco.org
If (typeof Tether === 'undefined') {
Throw nuevo Error ('Bootstrap tooltips require Tether (http://tether.io/)');

El Tether está instalado. ¿¿Lo que falta??
Answered below. Thanks
Hello I'm installing the template to ASPNET I follow the build instructions, but I get this message when I try to run the template: 0x800a139e - JavaScript runtime error: Bootstrap tooltips require Tether (http: // tether. Io /) Only in this line / **
* Check the dependence of Tether
* Tether - http://tether.io/
Unesdoc.unesco.org unesdoc.unesco.org
If (typeof Tether === 'undefined') {
Throw new Error ('Bootstrap tooltips require Tether (http://tether.io/)');

The Tether is installed. What's missing??
Hi, Tether is for Bootstrap4 and the project is based on BS3, that may be the issue. If you haven't changed or updated manually, please check that the VS is downloading the right version.
Something similar was reported some time ago and solution was the following:

Let us know if you have any question
Hi, i would like to know if there are decent toast or small alert (notification like) that would complement centric admin material ui.
Hi, currently what is included is SweetAlert which is an alert like system but with more options like modals. Here is a demo: http://themicon.co/theme/centric/v1.5/angularjs/#/app/ui/sweet-alert
It's possible to include toaster notifications if need small alerts: https://github.com/CodeSeven/toastr
Toastr is not included in the project, but it's available for jquery and angular so we can send you instructions to implement it.

Hi ,
Thanks for the nice template, I really like the angular2 version, but the image uploader/cropper is crucial to my application , Are you planning to add any of them like what you have in "Angle" template ?
Hi, we dont have it in plans for next update but we can test the cropper module in centric and share the instructions to implement it.
Let us know if this is ok for you.
Sounds great -:)
Hi, please follow this instructions

1- Install the plugin with: npm install ng2-img-cropper --save

2- Open the file src/app/routes/routes.module.ts and import the module with
import { ImageCropperModule } from 'ng2-img-cropper';

2.1- Add also ImageCropperModule to the imports and exports areas of the @NgModule decorator

3- Now you can replicate the following plunker example (from official repo): https://embed.plnkr.co/VFwGvAO6MhV06IDTLk5W/

Let us know if you have any question or need any assistance implementing this.
Hi, can i get a hint of how i can implement the print button and excel button on datatable based on the datatable that comes with centric
Hi, depending on the project you are using it may be different how to include the datatables buttons extension, but in general you can do the following:
Add from Datatables DNS the following in the index page

Then, invoke the plugins with the following options

dom: 'Bfrtip',
buttons: [
'excel', 'print'

Where #datatable1 is the id of table that you want to use for datatables.
Optionally, you can download scripts from bower and reference them instead of using the CDN. https://datatables.net/download/bower


We are using MVC version 1.5. When displaying a bootstrap modal it cannot be clicked in iOS.

This is causing us huge problems.

Hi, thanks for pointing us this. The problem is the location of the modal markup. This can be solved easily by using Razon @section tags.
1- Edit file Views/Shared/_Layout.cshtml and add the following line right before close the body tag
@if (IsSectionDefined("Modals"))
{@RenderSection("Modals", required: false)}

2- Anywhere you use a modal, wrap the modal markup using a section with the name 'Modals', like this
@section Modals {
<!-- put any modal markup here -->

Now modals will be rendered outside the content area and there will no conflict with z-index and backdrop.

Let us know if you have any question

Is the angular 2 template support RTL direction ? if no when angular 2 template will support RTL direction ?
Hi, this project has a similar structure for the angular2 version like the one in the Angle product. This is because both are based on official guidelines. So, the RTL feature can be implemented in the same way using rtlcss tool.

Let us know if you have any question
Some of the samples in the template don't match what I have in the download. For example I don't have this page:


Are these available somewhere or am I just looking in the wrong spot?
Hi, the link corresponds to the angular version of the template. Are you seeing a difference with this same project? What you see in online demo must be exactly what you have downloaded unless there's a confusion, otherwise we will check to fix it asap.

how do change the default route from dashboard to a login page?
Hi, what project are you using? (angular, jquery, etc)


Modal doesn't correctly work on chrome 56 with project angular 2.
Do you have a solution, please ?

Screen: https://snag.gy/TU7EMO.jpg

Hi, thanks for report this and sorry for the delay. Just want to let you know we are checking the issue. We'll back to you asap!

Hi, after checking this with different approaches came to the conclusion the only way it will work it by moving the modals to a root component, so you can create the modal markup outside the layout to avoid conflicts with z-index issues. In the angular 1.x project, using uiBootstrap, this was solved easily because that project provides a feature to create the modal as a body child, but this time, the ng2.bootstrap doesn't provide such feature making impossible to create a modal outside the layout structure in order to overlap sidebar header and content.
Optionally, you can remove the code we have used to create a backdrop, and move the modal a few pixels down, the modal will be shown but backdrop won't work as it's an issue of the ng2-bootstrap module. We will try to find any other approach to solve this in a way that modals works, or if not possible will try to implement another modal plugin that works better.

Let us know if some this apporaches is suitable for you or if you have any question.
I have the same problem.

Have you find a solution for us?

Modal is one of the most important element for Angular2 LOB app!

Please try the following approach:
- edit file src/app/shared/styles/common\modal.scss
- add the following style

.modal-open {
.header-container {
z-index: 0;

This will fix the modal behind header. A fix for backdrop issue is removing the onShow/onHide events which was intended to be a fix for backdrop but without luck. Seems that only possible fix for that is by creating modal components at the root level of the application: https://github.com/valor-software/ng2-bootstrap/issues/619

Please let us know if you have any question
I'm seeing an issue where .float-label labels are not working properly.

When you focus on the form field with a floating label, the label does float. But, when you move focus away, the floating label doesn't stay floating—it drops back down and conflicts with the text you just entered.

I thought I was going crazy, and spent about 5 hours trying to debug thinking since it works fine in your jquery demo and angular demo, it must be something unique to my app.

5 hours go by... I take another look, this time I looked at your React demo, and you're having the same issue as me, even in your React demo.

To reproduce, look at Forms > Material in your React demo to see the issue.

Type something in the First Name field, then put focus elsewhere (or tab away, same effect). The float label should stay floating if the field has user has put text into the field, but in your React demo it does not work properly, and the label animates back down and overlays the text improperly.

Here's a gif of what I'm seeing:

Why this behavior is different in your different demos has me stumped. Hopefully you can help!

Thanks for taking a look.
Hi, our apologies for this. Please try the following snippet it should fix the issue. It's used to check the input has been filled, it adds a handler to check the input every time it changes and add/remove a 'has-value' class to keep the float label in the right position.
In angular projects this is done by the framework itself, but other needs this extra manual check.

$(document).on('change', '.mda-form-control > input', function() {
$(this)[this.value.length ? 'addClass' : 'removeClass']('has-value');

You can add the code in app/App.jsx

Let us know if you have any question
That solved the problem. Thanks!
Hi, i'm using the Angular 2, i have a little question version how can i customize the spinners color
Hi, spinners are customized in file /src/app/shared/styles/common/spinner.scss
There you will see a variable $loader-color that can be changed to use a different color.

Let us know if you have any question
I was thinking in use the css color clases, any option?
Do you mean classes like .loader-primary, .loader-info, .loader-success, etc? If so we can provide a file with such customization.

No, i mean like bg-red-a700, bg-deep-purple-400, etc, would be great get that file :)
Hi, please check this file http://pastebin.com/4vdvwF29
Replace the content of src\app\shared\styles\common\spinner.scss in your project.
There' you will find that we have used a mixin the receive the color as parameter, then you can call that mixin with different colors as shown in the file.

Let us know if you have any question
Great!!!, Thank you very much (Y)
I'm trying to apply your template into my Angular2 project, but I have some errors like:
• EXCEPTION: Error in ./SidebarComponent class SidebarComponent - inline template:17:8 caused by: $ is not defined
• EXCEPTION: Error in ./HeaderComponent class HeaderComponent - inline template:17:16 caused by: $ is not defined
o ReferenceError: $ is not defined
o at new RippleEffect (ripple.ts:19)
o at new RippleDirective (ripple.directive.ts:15)
o at new Wrapper_RippleDirective (/SharedModule/RippleDirective/wrapper.ngfactory.js:7)
o at proxyViewClass.View_HeaderComponent0.createInternal (/LayoutModule/HeaderComponent/component.ngfactory.js:222)
o at proxyViewClass.t.create (vendor.js?v=e9Xa0tUjaNhO7oc8bRgsxZa5pFH4t3nYWcVXwbXMypk:63)
o at proxyViewClass.e.create (vendor.js?v=e9Xa0tUjaNhO7oc8bRgsxZa5pFH4t3nYWcVXwbXMypk:64)
o at proxyViewClass.View_LayoutComponent0.createInternal (/LayoutModule/LayoutComponent/component.ngfactory.js:50)
o at proxyViewClass.t.create (vendor.js?v=e9Xa0tUjaNhO7oc8bRgsxZa5pFH4t3nYWcVXwbXMypk:63)
o at proxyViewClass.e.create (vendor.js?v=e9Xa0tUjaNhO7oc8bRgsxZa5pFH4t3nYWcVXwbXMypk:64)
o at proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:17)

The declaration “declare var $: any;” is present where it uses.

Can you help me?

Hi, sorry for the delay we have missed this post.
The error is present because jQuery is not included, in case it's already included, the sentence "declare var $: any" will tell typescript to use the symbol $ as a generic variable. Then when in runtime, the $ will point to jQuery but it needs to be included somewhere before.
In the template, jQuery is included for angular2 in file: angular-cli.json

Hi, In my project, i only use three components( header, sidebar, tables ). So can i build only three components?

Hi, do want to build a project with only those three components mentioned? If so, it's possible but you need to remove those that related with pages not used like charts, maps, etc and then change the sidebar markup. What project are you using (angular, jquery, etc) ? Do you see any error while doing changes?

Hello, I purchased the template.

1. How extends the available themes for angular 2 demo? the documentation do not talk about this.

2. Other question, is there some update of angular demo? I use latest angular-cli version and I have some problems whit the integration of your template whit my application (the elements do not show same in the demo template in your site).

Thanks very much.

1- You can find themes defined in src/app/shared/styles/common/themes.scss
Each is a class that applies to the body tag and changes colors of template.You can create new themes or change existing one by editing parameters of the mixins used to modify each component. You can set a theme as default by adding the corresponding classname to the body tag.
We have this documented for the angular1.x and will add for ng2 documentation. Thanks.

2- There's an update released this week that includes changes for lazyload and AOT, and the cli was updated to beta32. Is possible that you global version is not updated?
Just can in case, you can update with the following:
> npm uninstall angular-cli -g
> npm cache clean
> npm install @angular/cli@1.0.0-beta.32

Now you should be able to run the project if the problem was the global version.

Btw, since @angular/cli 1.0 final version was released also this week we will try to implement this new version in the next two weeks (mid april)

Let us know if you have any question.
My global cli version is same my cli app version, but this do not correspond to the angular 2 centric demo. Now I have some problems whit header styles, the options do not float to right and the button to toggle sidebar is always visible (this is screenshot http://prntscr.com/eqcxpj).

This is my version of angular-cli (ng --version):

@angular/cli: 1.0.0-rc.4
node: 7.6.0
os: linux x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/compiler-cli: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/tsc-wrapped: 0.5.2
@angular/cli: 1.0.0-rc.4

Other question.

How can I get the template update?

Thanks for all.
Hi, you have to use the same version of the cli used in the project, we can't guarantee compatibility between version of angular-cli. The same happens for angular versions, use the same provided, otherwise some feature of a specific version of angular2 may not be supported by the cli.
In short, please use the @angular/cli beta32 version with the last release of Centric.
Also, use Node 6.x and npm 3.10.8, other users reported problem with newer versions.

Based on your screenshot, it looks like you have updated to bootstrap4, could be that? If so, please go back to version 3 because the template is based on Bootstrap3 and BS4 is not backward compatible. In general, please use the versions provided because the template was built and tested with those specific versions, newer can work but may have problems that are unknown for the moment.

Finally, you should receive an email from the marketplace every time we release a new version, with a link to download the updated package. If you haven't received the email please try using the download resender at: https://wrapbootstrap.com/support/download-resender

Let us know if you have any question
Thanks very much.

The bootstrapt version was the problem.


Can you help me with aot compilation process in angular 2 demo for 1.6 update?

Hello, yes, please let us know details about the issue. Do you have errors in console?
I need the documentation of process or steps for compile the project whit aot.

Hello, angular2 project is build using @angular/cli build tool. The way to compile AOT is the same as the tool.
To build run:

ng build --prod --aot

Or for live test:

ng serve --prod --aot

I get the next errors whe execute ng serve --prod --aot:

ERROR in Cannot determine the module for class TextDirective in /home/gaalvarez/git/frontend/node_modules/angular2-color-picker/lib/color-picker.directive.ts!
Cannot determine the module for class SliderDirective in /home/gaalvarez/git/frontend/node_modules/angular2-color-picker/lib/color-picker.directive.ts!
Cannot determine the module for class DialogComponent in /home/gaalvarez/git/frontend/node_modules/angular2-color-picker/lib/color-picker.directive.ts!
Hi, we couldn't replicate the issue. Have you updated the version dependencies in package.json?
The error message correspond to an open issue of the color-picker: https://github.com/Alberplz/angular2-color-picker/issues/98
The solution seems to be to change to ngx-color-picker module but we are using this module for angular4 which should be available in the following weeks.
If you have updated, we suggest you to keep using the versions provided as we know they work with the project.

Do you have a demo for angular2 hosted by an ASP.Net core website?(in VS2017?)
Hi again, it's not ready for the moment. A netcore-angular2 project will be released directly in VS2017 but we don't have an ETA right now.

Let us know if you have any question
I bought the $12 UI expecting to see UI components for Angular 2 but didn't find any (although there seem to be for others).

Kindly help.

Many Thanks.
Hi, do you mean separated UI components? Or an Angular2 project? This products is a template that you use to build apps on top of it, but there's no a set of independent of UI component for angular2. Maybe if that's the case we are sorry for the confusion. We tried to be always as clear as possible in our description but If you think the product doesn't fit for you purposes you are free to request a refund to Wrapbootstrap explaining the situation.

Thanks and sorry for that again.
Let us know if you have any question
It's ok. It will serve its purpose. I'll make good use of it... Thanks for replying. Great job too!
Thanks for the feedback asheori!

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $16
  • HTML Template
Bootstrap: Compatible with 3.3.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Tags: angularjs, dark, html5, material, meteor, mvc, react, responsive admin template, rtl, svg
Released:1 year ago
Updated:2 weeks ago
Sold exclusively on WrapBootstrap


Signed up 3 years ago

Need a front-end theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: