Is this theme contain the implementation of Material Design in Angular 4?
Hi,the current version included in the template is based on angular 1.x
Anyway, we have a project migrated to Angular4 and angular+material framework, if you are interested, after purchase please send us a message via our profile page and we will send you the files of the project.

tcarmich PURCHASED
Does this support Rails 5.x? thanks
Hi, in the last release we updated the Rails project to 5.1.0

Let us know if you have any question
wiserweb PURCHASED
Hi themicon,

For the bootstrap tooltip conflict I found a solution. You must create a custom jQuery UI bundle without including the Tooltip widget.


Then you include this bundle in the /client/vendors folder and remove the meteor jquery-ui package.

This is a workaround. I'm not certain this is the best solution but it works. I hope you find this helpful.
Hi, thank you so much for sharing this solution. We'd like to find a more automated solution in order to avoid extra steps to make it work but will consider this for any other report in the meantime.

Thanks again

Great work on the theme. I really like it. I have a few questions though:

Does this theme support Angular2(4) ? When I purchase the theme what do I get - it is a module or npm package or what ?

Best regards
Hello, the Angular version is based on Angular 4.0.3 (currently working on update to latest 4.x)
The project is built using @angular/cli which provides a build environment and command line tools for server, build and compile (production and aot). (https://cli.angular.io/)
In other words, it's a project ready to use, run and build your application of top of it.

Let us know if you have any question
I mistakingly unsubscribed to upgrades on my mail. (clicked it instead of the download upgrade link). How do I re-subscribe to upgrades? Have looked in profile settings in wrapbootstrap but it seems to have nothing.
Hi, we have the following URL in our profile to manage subscriptions: https://wrapbootstrap.com/dashboard/notifications
Anyway, since we are authors is possible that the menu is different, so if you can't access to that url, we suggest you to try contacting marketplace support to inform the situation: https://wrapbootstrap.com/support

So I have been having this issue for a while. I started with a skeleton project in angular 2 a few months back, I seem to be having a small issue with the collapsed menu bar in the mailbox view. So Ideally, I understand that when the view is stretched out on a desktop, the "fa-bars" should be collapsed. This I understand are for the compressed view as a responsive tool when the menu needs to be accessed when it is not visible.

However, now, by default, I see the "fa-bars" even in the stretched out (desktop) view. I noticed there is nothing on the CSS. Am I missing some javascript for this to work ? I am unable to attach a sample view, but to describe it, I basically have the "fa-bars" next to the compose button on the mailbox view regardless of whether the I am on a desktop/ tablet mode/ mobile mode. Ideally, it should not appear in the desktop mode. What am I missing in the skeleton app?
HI, the button you mentioned contains a classname ".mb-toggle-button" this class is used to hide the button automatically on desktops using media queries, and that rule is defined in file:
So, if you have this file in your project and also imported into app.scss you should not need more to display this button correctly.
If this is not your case please let us know and we will check again.

the mailbox.scss file was empty in the project that i downloaded. Could you please share the code for the media queries.
The file src/app/shared/styles/app/mailbox.scss should not be empty, if so there must be a problem with the downloaded package.
The mentioned file is available in the full features project but not in seed project, if you are using the seed you need to copy this file and import.
Just in case, please note that we refer to mailbox.scss in the "shared" folder, not in the mailbox component folder (this one is empty)

I'm using Angular4 seed project. I was trying to mimic your dashboard v1. But I cant seem to load FLOT graph. I get this error message in console "Flot chart no available".

Can you please help
Hi, that messages comes from Flot directive and it's related with missing flot files in your proyecy.
To solve this please open file ".angular-cli.json" from full-features project and copy from "scripts" entry all paths related with Flot charts.
After save changes, stop ng serve and start it again

Let us know if you have any question
Thank you for the quick response,
When i run ng server i get error that node_modules/flot directory is missing,
I checked with previous comments and found a solution is to edit package.json I did that but now when i run npm install it wont install any packages under napa.
For some reason in full-feature project it did install flot after modifying package.json. I'm using same package.json for seed project.

Here is my email ID [email protected] If you can email me package.json file with correction that would be appreciated.
Ok I got this resolve by running command "npm install --unsafe-perm". And now everything works. !!
Great! Thanks for the feedback. In next versions we will provide a solution for this changing how flot is installed, but we are considering to also provide in docs a tips for cases like this using the "unsafe-perm" param.

Let us know if you have any question

First of all I'd like to say a great thanks for creating and continuously updating this wonderful and multifunctional theme!

But when will the next update be released, especially with updated ng4 dependencies?

And do you have any simple tricks or ideas on how to transport changes made in a project to the updated template? Do I simply have to copy the new package.json file and the dependencies will be updated by executing "npm update" or what do I have to do?

Thanks in advance :)
Hi, we are a bit delayed, but we expect to be release the next version in the course of this month
Unfortunately the update process is no more than a file comparison process, meaning, when we update the angular project, we are updating the @angular/cli configuration and structure, sometimes it has many changes and sometimes it has a few changes. Latest versions are more stable so changes are not critical, anyway when we update dependencies, in this case it depends on the plugins updated, some of them may change their name or the usage and that add more steps to the update process, in other cases the update is just a change in the version number of the package.json file.
Regarding to npm, the best option (we consider) is to remove the node_modules folder, replace the package.json and then run "npm install" again (considering to update more code when necessary).
All update includes the list of files that were modified added or deleted, so this is a little help to identify quickly what needs to be reviewed.
Finally, for comparison, WinMerge, Beyond Compare or Kaleidoscope are great solutions.

Let us know if you have any question

Thank you!

I'm using this theme to create a React app. I already started building my app, using no theme at all. Now I want to incorporate this theme into the existing app, but I cannot find any guide on how to do that. Can you help me?
Hi, an important thing to consider here is that the template was designed to build your application on top of it and not to integrate with another application, meaning, if you have separated components already created you can try to add them to the existing structure of the template with routes, views, etc. But if you application relies on an existing layout and structure, it's necessary to adapt it the structure of the template, otherwise you won't be able to compile the files correctly. We think the best option could be to use the react-seed project because it has a few dependencies and then go adding there your own components one by one if possible so you can isolate any issue that could appear.

Hi guys,
I need to update chartjs library to the newest version 2.7 because I need some new features. But if I simply replace the vendor file the directive in app.js starts throwing error:

chartCreated = chart[type]($scope.data, $scope.options);

TypeError: chart[type] is not a function
at app.js:1392
at Scope.$digest (base.js:27339)
at Scope.$apply (base.js:27605)
at done (base.js:21646)
at completeRequest (base.js:21848)
at XMLHttpRequest.requestLoaded (base.js:21781)

any idea how to fix this?
Hi Simon, since last version of "Angle", v3.7.5 we removed the directive for this reason and it was replaced with a third party directive named angular-chart.js (installed via bower)
We made a few changes to adapt the code to this directive in the markup of the view used for Chart.js and in the controller. Checking the following files from last release you can see difference:
(or use app.js and the html version if you are not using gulp)

Please let us know if you have any question or need assistance implementing this change.

I have got a problem with the template. It works well in Chrome and Firefox, but not in Internet Explorer. I would like to post a picture but I can not do this here.

Furthermore, how I could disable the loading screen while using the website.

Thanks in advance!

Hi, a few questions, what project version are you using (angular, jquery, react, etc) ?
Any chance you could post the error message from browser console? Or it's a visual issue? You can try taking a screenshot and upload to imgur, then paste the image link here.
Finally, the issue occurs on any IE or it's a specific version ?

I am using the acutal versions of angular, etc.

There is no error message in the console it is only ah visual issue.

Screenshot: https://imgur.com/a/1wSYH (thanks for that trick)

It occurs in any IE.

HI, sorry for the delay.
Currently we don't see such issue in the template, all our demos should be running fine on supported browsers.
Could you let us know if the demo is failing also for you? This is the link of last release http://themicon.co/theme/angle/v3.7.5/angular2/home

When you say actual versions of angular we assume Angular 2, is that ok?
From the screenshot it seems you have made changes to the template, those changes involves a dependency update or change in layout?
An alternative to check this quickly is that you upload your site to an online server and we will try to check what could be the problem.

Support on jarviswidget or Do we have any sort of support in getting the Dashboard component re-organize the widgets, making them full screen.

Thanks in advance and your response is highly appreciated
Hi, we don't support exactly those widgets but we could check if possible add some extra features.
For what project do you need this (angular, jquery, etc) ?

Sure. I am just giving an example of my thought process of the drag and drop widgets (panels). We are working on Angular2 Project.
We are actually looking if the theme supports the resizing of the widgets. for Example in Angle, template navigates to Dashboard v1 and readjust size (height and widget ) the "Inbound visitor statistics" which dynamically aligns the other widgets.
Hi, yes, widgets should resize automatically because of the responsive behavior, meaning, most of the widget are contains into panels and those panels with adjust according to its container element which could be the content wrapper or a column (bootstrap grid). In case of charts, for example, Flot automatically resize to its parent element size.

scsunchen PURCHASED
hello,I bought this template, but I don't know where to put the License and how to use it
Hello, it's not necessary to place your license in the template. You need only to keep it with you in case it could be requested in the future but no necessary to be available in your code.

Hi, I am having an issue with deploying the app to an Heroku production environment. Do you have any suggestion as to a simpler process that uses the ./dist folder that is generated from npm run build. At this point I just need a quick and dirty solution to run the site external to my local machine.

Contextual info:
I bought your template to assess its viability for a product I am working on. I am not a web developer and it's also been years since I've done any sort of formal development work. I've gotten to the point that I can build anything I want within the framework and its exactly what we need in that respect; however, deployment is proving to be an issue and I need to make a call in the next week if we move forward or not.

I used the reactjs-seed, build a prototype app in the seed, and am now trying to deploy to Heroku.
If I execute npm run build it sucessfully compiles a dist folder, so the build process is working. I am assuming that the same build process gets executed when I deploy to heroku.

I am using a free dyno for the app
I added a server.js file to the root of the project
All the following steps below were followed:
1. Run heroku login to login on heroku with your credentials
2. Start a new repot with git init
3. Create your application with heroku create app-name
4. Add files for commit with git add .
5. Commit files git commit -m "initial commit"
6. Run heroku config:set NPM_CONFIG_PRODUCTION=false
7. Rename in package.json script named: "postinstall-heroku" to "postinstall"
8. Upload to heroku: git push heroku master

The process does build successfully; however, I did get errors when I checked heroku logs. Also, at first I deployed my modified version of the seed project that contained substantive additions. When I tried deploying just the seed project today (sept 15th) I get a totally different set of errors. One of the errors seems to be that the build exceeded Herokus 60s timeout. I am not looking for assistance to get Heroku working, just hoping to get a dead simple deploy option from you.

Hi, sorry for the delay.
We have made a quick check with the react seed project and it was correctly deployed here: https://angle-on-react.herokuapp.com
After checking the documentation there's an issue with the order of steps, the step 7 (seven) should be anywhere before the command "git add ." because when you change something after "git add" that change is not added automatically for commit and the change is lost when files are pushed.
In short, try following order:

1. Run heroku login to login on heroku with your credentials
2. Start a new repot with git init
3. Create your application with heroku create app-name
4. Rename in package.json script named: "postinstall-heroku" to "postinstall"
5. Add files for commit with git add .
6. Commit files git commit -m "initial commit"
7. Run heroku config:set NPM_CONFIG_PRODUCTION=false
8. Upload to heroku: git push heroku master

Also, please make sure you have created the "Procfile" and "server.js" before add files to repo.
Related the 60s, the only issue similar to that is the message "Web process failed to bind to $PORT within 60 seconds of launch" which was resolved adding the mentioned files so heroku can create a server and assign a port for the application.

Let us know if you have any question

Thanks for report this
Good Day,

I have setup a wizard screen which works fine, however when I add a popover to a button or <a> tag the popover does not display.

When i move the button or <a> tag out of the wizard section the popover displays.

Any suggestions?
Hi, could you let us know please for what project do you need this (jquery, angular2, etc) ?
Also, could you post the markup used for the wizard? If you want to keep it private you can send us a message via our profile and we will chat via email.

Hello Themicon, i purchased the Angle theme few days ago, our project is based on the SPA and we plan to use th Angular 2 for this from this theme. I cant find any PSD for icons to be replaced. i read through your comments here above saying "Hi, an important thing to consider here is that the template was designed to build your application on top of it and not to integrate with another application, meaning, if you have separated components already created you can try to add them to the existing structure of the template with routes, views, etc. But if you application relies on an existing layout and structure, it's necessary to adapt it the structure of the template, otherwise you won't be able to compile the files correctly" I hope we can replace some common elements such as icons some layout etc, without breaking the template in general. also there are no PSD files of the overall design as we have a designer who would like to apply some colours and design to theme and want to build a visual any PSD for overall theme would really help as our project is a decent size so want users to get the best UI.

Hello Imran, unfortunately we don't have PSD files to distribute. We use Photoshop but we usually leave it quite early to continue designing most of the components in the browser. We know it's not a professional approach but for the moment we don't have any alternative more than playing with the components using the browser.
Regarding to customization, the template is able to to change icons, colors, and other parts of the layout without major effort, but you if you try to integrate into another application that becomes a bit tricky because most of the component relies on the structure we provide and using another layout can result on unexpected behavior, like z-index, misplaced element, etc. That's why we suggest to incorporate component into the template in order to isolate issue that may appear, This is a suggestion that could apply for any integration of two or more working application that has different structure.

rdheepan PURCHASED
Dear team,
I am using anular 1.x project. Is it possible to reduce the initial loading time? without any other code added, just the template takes > 6 seconds to load. and then when the application logic is added it takes more than that which is annoying to the user.

Is there any way to reduce the loading time of the template to less than a second?
Hi, it could be possible to reduce the loading time but we don't think it could have a big impact. Meaning, most of the time consumption corresponds to libraries loaded and Angular initialization itself.
You can try to reduce the size of the base.js which is loaded the first time a site is loaded by removing libraries not used in your application. Please consider that jQuery is a requirement for this template.
Another improvement can be done at server side, like adding a long expiration time for assets so they can be cached by the browser and gzip compression.
Also, css can be reduced removing code not used and scripts of unnecessary modules. Anyway, at this point you need to evaluate if the job of analyzing the entire app to reduce every line worth the benefits in terms of time.

One last thing, we think that frameworks like Angular, oriented to single page applications, should be considered more from their usage performance than the load time. Since it is an application and not just a web page is necessary to expect more time to load the whole site but a very fast usage experience. For example, you can pack the entire application in JavaScript (using angular template cache) which is will increase the size of assets that are first loaded (thus, the load time) but the application then works really fast and page switching feels like it has a native behavior.

surgentt PURCHASED

I have purchased this theme. We using other WrapBootstrap themes, I frequently use a live preview of the Application to pick out components I like. I cannot find the live preview of this App other than the landing page.

Do you have a link to the full live preview?

Hi, when you open the live preview the first you see is the landing page (included in the package) and if you scroll a bit down you will see all demos with a link to open them.
We suggest you to remove the Wrapbootstrap banner in case you want to test the responsiveness of the template.

Let us know if you have any question

I have couple of questions. Will be entering them separately.

The first one is on left navigation menu click the left navigation is not getting closed.
How to make it auto close once the menu is clicked. This should happen on the last submenu in case of nested menu item.

Please help resolving this issue.

Hi, for what project do you need this (angular, meteor, etc)?
Depending on the project, this can be solved by adding a hook into the route change event to close the sidebar when user moves from one page to another.

You are on angular2, got it from your second message. When you get a chance please send us a message via our profile page and we will send you the files to enable this feature.
Thanks. Sent a direct message as per required.
We have sent you the file. Let us know in case you have not received it.


I am using angular2-seed project.
Second question is regarding ng2-select added to the project.
I need to display the clear button in that using [allowClear]="true"

But it is not getting displayed for some reasons. I see under shared/styles/bootstrap/_bootstrap.scss the below line is commented.
//@import "bootstrap/glyphicons";

Please assist by resolving this issue.

Hi, you're right, the glyphicons is necssary to show the clear icon. Anyway, in the template we have overwritten the glyphicons class so it uses FontAwesome but it's missing for this case.
In file. src/app/routes/forms/extended/extended.component.scss
Add the following rule:
.glyphicon.glyphicon-remove:before {
content: "\f00d";

Save and reload the page, and now the icon should be visible. but using Font Awesome instead.

Let us know if you have any question

Tried applying your workaround. It works on extended forms but somehow remove is not getting displayed on my new component.

I see that [_ngcontent-c8] is getting added to styles in my page. If I remove the [_ngcontent-c8] then its working. But I don't see [_ngcontent-c8] getting applied in extended forms. So, may be I am missing something.
.glyphicon.glyphicon-remove[_ngcontent-c8]:before {
content: "\F00D"; }

Hi, that's because the component is using encapsulation, to solve this, edit the component .ts file and add the following to the @Component decorator:

import { ViewEncapsulation } from '@angular/core';

encapsulation: ViewEncapsulation.None

Let us know if you have any question
Thanks very much. Worked like a charm!!!!!

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 $28
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Topic: Internet & Web
Labels: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Released:4 years ago
Updated:3 months ago
Sold exclusively on WrapBootstrap


Signed up 4 years ago

Need a front-end template?

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 10/11
  • Latest Opera

Features & includes

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

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation