5990 comments

I'd like to point out that you have small but significant bug when you rendering form elements for 'input-group'.
So if elements (input and buttons) in input-group are normal size everything is rendering correctly, as your demo shows.
But if the elements of input-group have large size, the rendering is incorrect and not aligned. Here is the markup for such case:

<div class="input-group">
<input type="text" class="form-control input-lg">
<div class="input-group-btn" dropdown>
<button class="btn btn-primary btn-lg" type="button" tabindex="-1">Action</button>
<button class="btn btn-default btn-lg" type="button" dropdownToggle>
<span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu pull-right">
<li>
<a href="">Action</a>
</li>
<li>
<a href="">Another action</a>
</li>
<li>
<a href="">Something else here</a>
</li>
<li class="divider"></li>
<li>
<a href="">Separated link</a>
</li>
</ul>
</div>
</div>
Hi, Thanks for report this. After check the markup, it seems you need to add also the input-group-lg class to .input-group like this
<div class="input-group input-group-lg">
...

This way the buttons takes correct size. That class is indicated here: https://getbootstrap.com/docs/3.3/components/#input-groups-sizing

Thanks
Regards
Hi there. I just pushed the template and got an anowing bug on the ReactJS code.
If the side bar is on collapsed mode, the router does not work when i try to navigate.
Debuging the app i found that in this point of Sidebar.jsx:

navigator(route) {
this.props.router.push(route)
}

The prop "router" is NULL. So i changed it to (sinse it is using router v4):

navigator(route) {
this.props.history.push(route)
}

Is this the correct solution? I'm kind new to react.
Thanks
Hi, thanks for report this and sharing the solution. You approach is correct, we missed to update that in last update as it's stated in the api documentation: https://reacttraining.com/react-router/web/api/withRouter

We will include this fix in the following update.
Thanks
Regards
Hi , I am looking to render side menu based on user ROLE so once user login we get there Role from local storage and then want to render our side menu but your structure not permitting us to do that. It render menu service before we check login and role. Can you please suggest what i can do or you need some more info. Please let me know. Thanks.
Hi, this is for angular5 right?
If so, the current structure doesn't do nothing special because it's basically how angular works. Meaning, the menu is created using the RouterModule.constructor, which is the moment when routes are created. This is done in routes.module.ts. We could have used another module, but found more intuitive to have the menu creation close to the routes definition.
If you want to delay the creation of the menu, you can move the mentioned logic into the module or service that you use to perform login and roles validation, and once it's done, you can use the MenuService in the same way to "addItems" defined in menu.ts

Let us know if you have any question
Regards
Hi,

I have purchased this template and I want to convert vertical expand menu to vertical hover menu which will show and hide once we mouse over on Menu item.

Do we have any code available ?
Hi, for what project do you need this (angular, jquery, etc) ?

Regards
Hi, I have purchased angular template.
Also In Internet explorer I am getting error : SCRIPT1002: Syntax error vendor.bundle.js (11,1).

My application is not loading in IE any more.
Hi, on what versio of IE do you see the error?
Could check also please if that happens with the online demo? http://themicon.co/theme/angle/v3.8.2/angular5/home
We tested on IE10/11/Edge and it doesn't seem to be any problem.

Regards
Online demo is working fine, but once I download & run angular 5 project, I am getting that error. I am using IE 11, but getting error in IE 10 and 9 too.
Hi, the site we provide in the online demo has the same code we use for release but compiled for production. Meaning, when we are ready to release we prepare a branch for that specific release, build the project and upload demo, then the code is used for the zip package this way we can ensure the code you see running is what you download. Is there any change in your project compared with the original source code? Usually IE errors are related with the file src/polyfills.ts but we provide all polyfills by default.

Regards
This in an update.
It seems to be a known problem in development server and some browsers with cli 1.5+
You can check the issue here: https://github.com/angular/angular-cli/issues/8596
Since the issue happens with wepback-dev-server, a production build is not affected.
This specific comment mentions a possible fix for this:
https://github.com/angular/angular-cli/issues/8596#issuecomment-347432392

Regards
Thanks for links. I will look and update.

Also for your information : I have downloaded fresh copy of code from my account and run it without making any changes. But it is giving same error.
pk2011 PURCHASED
Hello,

I just downloaded Angle as a template for a new ASP.NET Core project.
But when I run jquery version (netcore-jquery) I get some errors, i.e. I can't open any of the menus on the left side, as soon as they open they immediate close. Therefore, it's not possible to access any sub menu item. This is only when the menu is expaneded, popup at collapsed version works fine.
Additionally, changing the design isn't stored, when I open another page it falls back to the default blue scheme.
These errors occur only when I run it locally, in your online demo (http://themicon-001-site1.atempurl.com) it works fine.

In Chrome Developer tools I can see only one error regarding Google Maps API which shouldn't be reason for the problems.

Can you help me?

Best regards
Claus
Hi,
The version we deploy online is the same code we used for development, even we use the deploy as final step to check the product works as expected in a production like environment.
The google maps error is there because there's a missing key, which, as you say, should not be a problem. Anyway, the api is included only on pages where the gmap is used, so you can try any other page or remove the api script and try again.
One chance is that the localStorage is corrupted and the setup for the layout is incorrect, you can try clearing the browser storage or simply try with anonymous mode. Please let us know if in this case any other error appear.
Regarding to themes, the jQuery version doesn't save the themes by default, only angular versions do that. Anyway, this feature could be added saving and loading the selected from locaStorage.

Let us know if you have any question
Regards
JeremyT PURCHASED
Hi there, any ETA for ng4 + material 2 template?
Hi, we have recently updated to angular5 the main @angular/cli project
We expect angular 6 for March/April 2018 so in the following moths we plan to start moving angular1.x project to angualr5.
If you are interested we can send you the material project updated to angular5 before release. Just send us a message via our profile and we'll prepare it for you.

Let us know if you have any question
Regards
Hi, I see in the documentation that there is a Seed version on netCore build. I don't see that in my download. Has it been made available yet?
Hi, seed versions for netcore project are not available yet but will be included in the short term. If you are interested please let us know for what project you need it (angular 5, jquery or angualr 1.x) and send us a message via our profile page so we can send you the files via email.

Regards
JayJayL PURCHASED
Hi! I downloaded the latest version and now I try to run angular5 versions. The seed version runs ok, but when I do 'npm install' and then 'npm run start' on angular5 version, I get this error:

Error: ENOENT: no such file or directory, open '/Users/xxxx/Downloads/WB04HF123/angular5/ng2angle/node_modules/jquery.flot.spline/jquery.flot.spline.js'

There is not such folder in node_modules. I tried with older version of node and npm I had at first, then with the latests on both, but the error remains. What to do?
Hi, the missing dependency is jquery flot, this plugin (between others) is installed using "napa" which is executed automatically when you run "npm install" (see script install in the package.json)
For some reason when you install a new dep, the install script never runs, so basically you need to run "npm install" (without params) again in order to run napa command.

If this results annoying, you can add a new script into package.json like
"scripts": {
"napa": "napa",
...
And everytime you install a new dep, you will need only to run "npm run napa" to restore those plugins back. This will save you some time against then install command.

Let us know if you have any question
Regards
Stan92 PURCHASED
Hi,
I m trying to play with NG5 template, but I get some errors from the header.component.ts file.

TS2339: Property 'msie' does not exist on type '{}'.
TS2339: Property 'enabled' does not exist on type '{}'
TS2339: Property 'toggle' does not exist on type '{}'.
TS2339: Property 'isFullscreen' does not exist on type '{}'.

Both jquery-browser and fullscreen package are present.
Any idea how to fix this?
Thanks
Hi, we have not seen this error during development. Also, same code distributed is the one deployed in the online demo. Did you made any change or update in the code or dependencies version?
Just in case, make sure to use the cli version 1.5.4
You can check version with command:
> ng --version

and you can install specific version with commands:
> npm uninstall -g @angular/cli
> npm install -g @angular/[email protected]

Let us know if you have any question
Regards
lotpi PURCHASED
Hy,

i want to add jQuery Autocomplete Component from this Address:
http://jqueryui.com/autocomplete/#combobox
but ist don't working in the Admin Template.
Combobox is always empty and i can not make a Suggestion!

What can I do.

Thanks.
lotpi PURCHASED
Or if you have own Combobox Autocomplete Component to use.

Thanks
Hi, we don't have a jquery based autocomplete plugin included with the template but we can recommend Typeahead as an alternative. Even we have used it in another product. http://twitter.github.io/typeahead.js/examples/

For angular project, Typeahead is part of the uiBootstrap framework, you can check it here: http://themicon.co/theme/angle/v3.8.2/backend-angular/#!/app/interaction

Please let us know for what project do you need to install jQuery Autocomplete Component and we will check it. Or if you like more Typeahead instead.

Regards
GwenOo PURCHASED
Hi,

I cannot figure out how i can transfert props from a page to an other using a react-router;

Should i start by adding a props to the Link component and then trying and somehow trying to use it in routes.js ?

If you have a clue or a solution, help will be appreciated.

Thanks
GwenOo PURCHASED
Well, i managed, for those who might be interested, the solution is in the Link component.

https://knowbody.github.io/react-router-docs/api/Link.html
Hi, sorry for the delay and thanks for sharing a solution.
A good option would be to use Redux for app state management but for the moment the template doesn't support that.

You can also use another approach using custom props when rendering components via the router
For example,
1- Declare some global variable that contains data used across different pages
var sharedData = {
message: 'Initial message'
};

2- Then, change the route definition to this
<Route path="/dashboard" render={()=><DashboardV1 shared={sharedData}/>}/>

Note that the "sharedData" variable is passed as a custom prop named "shared"

3- Then in your component you can access and changes this variable access the props object:

console.log(this.props.shared.message); // print message
this.props.shared.message = 'another message'; // alter message

You can repeat this for any other component to share data between pages.

Let us know if you have any question
Regards
GwenOo PURCHASED
Thanks for this detailed answer. It will probable help me to manage Auth.

In your solution, you cannot really change a variable in those sharedData while being in a component ? Or maybe i'm missing something
Hi, you're right. Actually, since JS pass variables as references, we are not changing the variable itself but the content, and being a reference to an object, the properties can be altered.

Let us know if you have any question
Regards
how can create a Notifications by code not by button attr data-message
Hi, since notify is attached to jQuery, it should be available anywhere you want to use, as long as the invocation is performed after the creation of the plugin.
Using something like $.notify('HELLO', {}); should show the popup correctly.

Let us know if you have any question.
Regards
Purchased the theme a day ago and pretty disappointed in the purchase, a selling point is its sold with serverside technologies included. I purchased the template for this purpose.

It looks like you have used the .net core spa template for angular then just copied your static angular site over. No effort has been made to bind tables/grids or controls to any of the backend which is a real shame.
Hi, our apologies for that, our products are focused on frontend technologies. The implementation on server side frameworks like netcore has been done mainly to provide a starting project in the Visual Studio environment. Same happens for other frameworks like meteor, rails, etc. Of course we consider your suggestion as possible improvement so we will have it in mind for future updates.
In case you consider the product is not suitable, or feel the description it's not very clear you can contact wrapbootstrap support.

Again, our apologies for that and please let us know if you have any question.
Regards
Hello,

Using netcore/angular project I am trying to deploy to Azure App Service and am getting the following error upon Publish: https://imgur.com/a/DPMLG.

Do you have any experience/suggestions with this? I am running angular 4.1.3 and netcore 1.1.

Thanks
HI, we haven't seen this error before and we don't have experience working with Azure.
Anyway, (just an idea) the type of error seems to be related with Typescript, Angular version 4.1 adds full support for TypeScript 2.2 and 2.3 so check you have some of those versions installed and that they are currently used.

Regards
Looks like it was a deployment fluke since I was trying to publish to an older App Service. I created a new App Service in Azure and deployed to that and it worked out of the box.
Great! Thanks for the feedback
Regards
Hello,
where is documentation about Angle template ( mvc5 jquery ) ?

Items in 'documentation' folder do not contain info.

Thanks
Antonio
H, please check the docs under folder /documentation/mvc5-jquery
In the project there's a documentation folder but used for demostration of markdown.
Since the mvc5-jquery is based on the jquery version, you can check the documentaton/jquery docs to know a bit more.

Regards
Hi, thanks for this awesome template.

Why not to use bootstrap from npm?
Hi, there's not strict reason. We use bower because at the time when we release the first version of the template it was widely used. In latest releases we were moving various project from bower to npm and some of the are still using bower like jquery or angular 1.x version. In both cases is also possible to migrate to npm, because we use gulp to get only necessary files to build the final vendor folder (see vendor.json). Anyway, the right way to use npm nowadays is via webpack and that requires a small rewrite of the code that we are planing for next month, mainly for Bootstrap 4 which dropped bower support in last release.
If are more interested in using npm asap, feel free to let us know that and we will check the project of your interest to see how can be achieved.

Regards
dushy_d PURCHASED
Hi
I am trying to work with the angular5 folder
How cat I set the first page to be the login page
And check if user is Loged in then show the dashboard page?
Hi, the quick workaround is to add a route configuration to make Login page the default route with the following code:

export const routes = [

{ path: '', redirectTo: 'login', pathMatch: 'full' },
...

It could be also more convenient to use canActive api to perform a validation on those routes where you need restricted access and then, if the user is not allowed to access a specific route you can redirect to login page.
Here you can find more info: https://angular.io/guide/router#guard-the-admin-feature

Regards
dushy_d PURCHASED
How ca I implement the canActive in the routes.ts ?
Hi, in the link we shared above contains the information to do that.
Basically, you need to create a file auth-guard.service.ts in the location where route.ts exists. Then this file will contain the logic to to return true or false if the user is logged in or not.
Then, in route.ts you need to import auth-guard.service.ts and use the Guard in the route definition with the property "canActivate" this prop must be added to those route where you need to control access to only allowed user.

Please find the following filenames in the page shared previously (not in the template) to see the content to understand better how the code works:
src/app/auth-guard.service.ts
src/app/admin/admin-routing.module.ts

Regards
Hi !!! awesome job !! well done !

Any idea when you guys will update to bootstrap 4 Angle Admin ? pls
Hi, with don't have an ETA right now. As we said in other comments, we'd like to wait for an RC version at least before move to BS4.
Please consider that Bootstrap4 is not backwards compatible and we are evaluating to improve the structure of the template. Also, from beta.2 bootstrap team stop supporting bower, which means the right way is to use it via npm, which at the same time will make more convenient to migrate from gulp to a webpack build system. This is why we want to wait for a more close to "stable" version.

Let us know if you have any question
Regards
Hello,

First of all, I would like to thank you for such an amazing template.

I am kind of new to coding, and I have not learned how to use gulp or bower yet. I noticed that your instructions for building requires the use of both of these. I am using the files under "backend-jquery." Your files are just HTML, CSS, JS, and jQuery files which I am pretty familiar with.

My question is: If I do not use gulp or bower, will all the components still work? And for the vendor paths inside the HTML files, can I remove them and the components will still work?

Please excuse my lack of knowledge as I am still learning my way.

Thank you!
Hi, thanks for your kind words.
Regarding to your questions,
- If I do not use gulp or bower, will all the components still work?
Yes, only files under the "master" folder requires gulp to be used (like pug(jade), less/sass/, js) Anyway, we recommend you to use gulp because you have access to a more modular organization of files. For example, app.js is generated with a concat of each js file in master folder, same for app.css.
- And for the vendor paths inside the HTML files, can I remove them and the components will still work?
Yes, you can remove any dependency but consider that some of them are required depending on the feature yo want to use, like charts, tables, etc. Also, there are dependencies that are used for display like icons, animations (animate.css), etc.
Of course, jQuery and Bootstrap are obligatory, the template wont work without them.

Let us know if you have any question
Regards
Hi
How do I enable the control text for multiple languages in Angle - React Js ?

thanks
Hi, could provide a bit more information about what you are want to achieve?

Thanks
Regards

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

$28
12474Purchases

Licenses: Details »

Single application $28
Version:4.0
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Category:
Topic: Internet & Web
Labels: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Item#:WB04HF123
Released:3 years ago
Updated:1 month ago
Sold exclusively on WrapBootstrap
themicon

themicon

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