SB Admin BS 4 Angular2
Wish to have it customized?
If you like our theme, but wish to have it customized your way, you can hire the Start Angular team to do that for you. Write to us here.

Description

This project is a port of the famous Free Admin Bootstrap Theme SB Admin v2.0 to Angular-4 Theme

Features:

  • Upgraded to Angular 4.0.0.
  • Production and development builds.
  • End-to-end tests with Protractor.
  • Ahead-of-Time compilation support.
  • Development server with Livereload.
  • Following the best practices for your application’s structure.
  • Manager of your type definitions using @types.
  • Sample unit tests with Karma.

Also, check out HTML Bootstrap-4 version of the theme.

Download Preview Github Installation steps

59 reviews for SB Admin Bootstrap 4 Angular 4

  1. surfspider
    5 out of 5

    :

    How can I customize the background color of the sidebar and header (items)? I tried to set the variable $graydark in /src/styles/bootstrap/_custom.scss but it has not effect.

    • admin

      :

      You need to change style in header.component.scss and sidebar.component.scss located in shared/components.

  2. Alessandro
    4 out of 5

    :

    Hi I have an issue with routing, when I am logged in, I deactivate /login route but for some reason when I try to go back from dashboard to login a white page only with header and sidebar is loaded with this route: http://localhost:4200/ , it’s strange because also in your preview this happen

    • admin

      :

      You need to add auth-guard in layout-routing.module file.

  3. Esteban
    5 out of 5

    :

    How can I update the bootstrap scss files when a new version had been released?

    • admin

      :

      You need to replace bootstrap scss folder located in styles folder.

  4. Laszlo
    4 out of 5

    :

    Hi
    Why put Bootstrap v4.0.0-alpha.6 into styles folder?
    Maybe is it a modified bootstrap or standard?
    Why not put the dependency into package.json and use it a “standard” way?

    • admin

      :

      The reason is there you can change default bootstrap styling, ie: gutter width, margin etc.

  5. sparkadal
    2 out of 5

    :

    Hello
    first of all , I congratulated you about all your work. My question is how can I adjust configuration to point to the UMD BUNDLE in systemjs config file
    like this map: {
    ‘@ng-bootstrap/ng-bootstrap': ‘node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js’,
    }

    • admin

      :

      Our current theme is developed using angular-cli which is webpack based and ng bootstrap is already configured.

  6. new2Angular
    4 out of 5

    :

    Hi,

    I am new to developing UX applications and started with Angular 2 now. I like the template and i need to embed this in Visual studio 2015. When i open the project in VS CODE and use instructions as mentioned, the site is up and able to browse it successfully.

    But, i would like to integrate this to an webApi project. Do you have any sample project with same dashboard template in Visual Studio? Right now, when i add all these files, Visual studio is throwing me so many errors (Seems the build process is little different with VS). Any help is appreciated. Thanks and waiting for reply !

    • admin

      :

      If you are able to run any other angular project in Visual Code then you can run this as well.

  7. bilel
    4 out of 5

    :

    I’ve been trying to make a spring backend to this template, in ordrer to do that i need to change the dist folder to the static one of spring
    usually i do that by changing the angular-cli.json file but i can’t seem to find it in your template.. HELP

    • admin

      :

      Angular-cli version is released, you can use that.

  8. Robin
    5 out of 5

    :

    This is an awesome template, really really appreciate the work! Is there any target date for the next release that will work with webpack and angular-cli? Thanks!

    • admin

      :

      It’s already released, please clone the latest code. Thanks for your appreciation.

  9. Praveen Gaddam
    5 out of 5

    :

    This is simply awesome, I liked it very much. One thing is, I want to add my own css or scss file, common for all the components. How to add, and how to configure

    • admin

      :

      You need to add your style in app.scss file located in src/styles/app.scss. Thanks for the appreciation.

  10. Surya
    4 out of 5

    :

    My question is how add 3level submenu in sidebar. help me.

    • admin

      :

      Please follow the same as sub-menu, means you need to use another variable to control third level menu. Logic will be same as sub-menu.

  11. Cliff Li
    5 out of 5

    :

    Hi,
    I love the theme and the structure, and It is a great example to learn angular 2!
    Thanks for your great job!
    By the way, do you have any plan to migrate this awesome to @angular/CLI structure? I think is will save a lot of time to create the theme in the future.

    • admin

      :

      Thanks for the appreciation. At the moment we are unable to provide any ETA but will be updated after some time.

  12. asma
    5 out of 5

    :

    hi ,how can i open a template angularjs ?

    • admin

      :

      Kindly let us know your query in more details.

  13. Mokhtar
    5 out of 5

    :

    i can’t change the background color of register page

    • admin

      :

      Just open the main.scss file and there you can change, it will reflect once changed.

  14. barbatrukko
    4 out of 5

    :

    Hi,
    very nice work! But WHY in this bottstrap (but also in all free ng2 admin template) is not present a real nice datepicker?
    Best regards

  15. sanjeevani
    4 out of 5

    :

    Hello,
    Great job!
    i need help to add jquery.
    i executed npm install jquery and then tried to use var container: any = $(‘#container’);
    But unfortunately its not working.
    Please help me to resolve this problem.

    • admin

      :

      You need to add jquery path in project.config.ts file.

  16. Rahma Nefai
    4 out of 5

    :

    hello, thanks for this great template.
    i want to do a symfony app with netbeans, how can i integrate this template? how is it possible to work with angular and symfony both with netbeans? can you help me?

    • admin

      :

      Thanks for the appreciation. If you are able to run any other angular 2 project with netbeans then this will be the same as well.

  17. Ferhatos
    5 out of 5

    :

    Hello,
    Thank you for this great project. It’s complete and perfect !

    Is there any way to increase build.prod gulp task performance ? It take 22 minutes and use only 150MB of memory whereas I’ve 16GB on my local machine.
    Thank you

    • admin

      :

      Just disable linting in gulpfile.ts for build command. It should work fine. Thanks for the appreciation.

  18. dantavo
    4 out of 5

    :

    Very nice template but can you explain how I can use it in a project configured by system.js?

    • admin

      :

      Open seed.config.ts and add the required things.

  19. Vinay
    5 out of 5

    :

    I loved the Theme But
    Can anyone help me : How to Integrate This with Visual Studio 2015

  20. ankit parmar
    5 out of 5

    :

    how to set this theme in laravel 5.3?

    • admin

      :

      You need to install laravel and then just copy the html and css from this theme.

  21. Rajs
    5 out of 5

    :

    Hi Team,

    This theme is awesome.
    I apologies if my below question doesn’t make sense.
    I am currently working on a Django app, does anyone know or guide me how i can use this along with Django?
    Do I need to make restful calls? or can i use normal template syntax?

    Thanks,
    Rajs

    • admin

      :

      We don’t use Django and unfortunately we are unable to help you with this. But yes you need to use restful calls.

    • admin

      :

      Thanks for the appreciation.

  22. Kumar
    4 out of 5

    :

    How could I use Express js with this template so that I could upload it on live lets say amazon server with my port number?

  23. Jack
    5 out of 5

    :

    This is GREAT!!!

    • admin

      :

      Thanks Jack.

  24. ilia
    5 out of 5

    :

    hi:)
    i have a question about lazy loading
    i did the next :

    export const LoginRoutes: Route[] = [
    {
    path: ‘login’,
    loadChildren: “app/login/login.module#LoginModule
    }
    ];

    when i run gulp build.dev i work great
    when i run gulp build.prod it’s not wotking!!!!

    anybody can help me pls!!!???

    • admin

      :

      Currently lazy loading is not compatible with this project.

  25. hannan
    4 out of 5

    :

    Hi ,
    If i want to include angular material2 inside this theme, is there any way to do it?

  26. rishi
    4 out of 5

    :

    Great work , i was facing problem when i built server and added to this application, as sb-admin has it’s own package.json and it’s own entry point.
    I am new to MEAN stack, please help me add a server. when i do npm init it is initializing sb-admin js files and downloading it’s dependencies on npm-install
    how could add my server ?

  27. Hannan Isa
    3 out of 5

    :

    hi your preview for menu didnt work

    • admin

      :

      That’s just an implementation of sub menu, you can link it with your other component.

  28. Aniruddha Das
    4 out of 5

    :

    Are you planning to move to bootstrap alpha 5 as its current now. Or is it fine if i replace all the .scss file from alpha 5 to the asset folder and keep working on it.

    • admin

      :

      At the moment we don’t have in our roadmap. Yes you can implement that.

  29. Paul
    5 out of 5

    :

    Great job!
    I’m trying to import external library (mjml) into my component with :
    import * as mjml2html from ‘mjml';
    but “npm start” tells me “Cannot find module ‘mjml’.”
    I don’t understand what i’am doing wrong

  30. Anil kumar
    1 out of 5

    :

    pls help me, because i don’t run the local server , so pls reply me how to run file

  31. Vivek
    5 out of 5

    :

    Excellent template. Do you have any documentation for this ?
    I am new to Angular 2. How can I change the template to display Dashboard on startup instead of login page.

  32. Louis
    5 out of 5

    :

    your template is awesome! how can I move the side menu from left to top?

    • admin

      :

      You can edit sidebar.scss file for styling sidebar.

  33. Khuong
    5 out of 5

    :

    Your theme is great!
    But when I ran “npm start”, I got the below error. Could you help resolve this?

    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “start”
    npm ERR! node v4.5.0
    npm ERR! npm v2.15.9
    npm ERR! code ELIFECYCLE
    npm ERR! SB-Admin-BS4-Angular-2@0.0.0 start: `gulp serve.dev –color`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the SB-Admin-BS4-Angular-2@0.0.0 start script ‘gulp serve.dev –color’.
    npm ERR! This is most likely a problem with the SB-Admin-BS4-Angular-2 package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! gulp serve.dev –color
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs SB-Admin-BS4-Angular-2
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR!
    npm ERR! npm owner ls SB-Admin-BS4-Angular-2
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! E:\Projects\SB-Admin-BS4-Angular-2-master\npm-debug.log

    • admin

      :

      Please refer this url for the solution.

  34. Edwin Dennis
    5 out of 5

    :

    hello friend, I’m new angular 2 and your design is excellent, I would like to know which version 2, the angular placed, am creating my interface with angular but not as bootstrap add 3 to project

    • admin

      :

      It uses Angular 2 RC6. You can remove bootstrap file from project.config.ts located in tools folder.

  35. Zzz
    5 out of 5

    :

    this is really what i needed. the design is fantastic!!! great job. i have some questions though, i want to use this awesome template for a angular-meteor project but i they have different file structure. if you have suggestions that would be great!!.. still new to angular-meteor here :) … but this really is awesome!! kudos!!

  36. Farhan
    4 out of 5

    :

    Hi,
    Its a wonderful theme, running perfectly in development mode. The issue I am facing is that when I try to generate dev or prod build by running command “gulp build.dev” or “gulp build.prod”, it does not correctly generate the builds which I can deploy to a 3rd party server. The generated files have links to node_modules, which makes them fail.

    Can you please help me regarding this issue?

    Regards,
    Farhan

    • admin

      :

      Hi Farhan,

      Please raise this issue on Github.

  37. subhash
    4 out of 5

    :

    hi
    am new this angular js but this admin template nice
    and how to install this application in my system
    what is ts-node
    do you have any demo video about this application could you please share
    thank you

    • admin

      :

      Please follow the below mentioned steps:
      1. Install node first- https://nodejs.org/en/
      2. run npm install
      3. run npm start

  38. Andrea
    5 out of 5

    :

    Congratulations, great job?
    On question: any plan to port the beautiful Tables functions you have in non-angular version (based, I suppose, on jQuery datatables?)
    Thank you again!

    • admin

      :

      Thanks. Probably in the next release we will update it.

  39. Mohamed
    5 out of 5

    :

    Hi,
    Very good Job, but i have a problem when i try to add a contrutor to the component. The constructor don’t accept any parameter, that’s mean when i write ” constructor (private bookService: BookService) {} ” the page disappear. can you help ? Thank’s a lot

    • admin

      :

      You can refer- “app/layouts/base/base.ts” page

  40. priya
    3 out of 5

    :

    I reinstall node v 4.4.7. and follow the below steps:
    1: Clone the project
    2. Create TypeScript project [ select “HTML Application with TypeScript” Template]
    3. Include files in the VS 2013 project.
    4. ‘ts-node’ installed globally ‘npm install -g ts-node’ usind Command Prompt
    5: Run the Command Prompt with administrator privileges.
    6. Cd to Project directory
    7: npm install —msvs_version=2013
    8, got below errors:
    10470 error Windows_NT 6.1.7601
    10471 error argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install”
    10472 error node v4.4.7
    10473 error npm v2.15.8
    10474 error code ELIFECYCLE
    10475 error DashboardSample@0.0.0 postinstall: `typings install && gulp check.versions && npm prune && gulp webdriver`
    10475 error Exit status 1
    10476 error Failed at the DashboardSample@0.0.0 postinstall script ‘typings install && gulp check.versions && npm prune && gulp webdriver’.
    10476 error This is most likely a problem with the DashboardSample package,
    10476 error not with npm itself.
    10476 error Tell the author that this fails on your system:
    10476 error typings install && gulp check.versions && npm prune && gulp webdriver
    10476 error You can get information on how to open an issue for this project with:
    10476 error npm bugs DashboardSample
    10476 error Or if that isn’t available, you can get their info via:
    10476 error
    10476 error npm owner ls DashboardSample
    10476 error There is likely additional logging output above.
    10477 verbose exit [ 1, true ]

    • admin

      :

      Hi, please follow these steps:

      If you are using windows follow these steps:
      1. MSBuild Tool 2013 use ‘https://www.microsoft.com/en-in/download/confirmation.aspx?id=40760′
      2. ‘ts-node’ installed globally ‘npm install -g ts-node’
      3. Run the Command Prompt with administrator privileges.
      4. npm install —msvs_version=2013
      5. npm start

  41. William
    4 out of 5

    :

    Hi,
    Is there a date picker and a slider input that can be used or added somehow? I’m struggling to add anything externally into the project being somewhat new to all this.

  42. Anthony
    4 out of 5

    :

    Hey good job !
    But I have some problems : the modal always shows on the background so I can’t interact with. To fix it I removed the z-index of the background but the display is not really satisfaying. Any idea how can I solve the problem in a clean way ?
    And there is no style for the datepicker, which could be great to have.

    • admin

      :

      Thanks Anthony. Modal is the issue of Angular2-Bootstrap package.

  43. Carlos
    5 out of 5

    :

    Great Job! Where can I donate? Thanks!

    • admin

      :

      Hi Carlos,

      Thanks a lot for the appreciation. We don’t ask for donations but you can check out our premium themes at strapui.com and strapmobile.com and see if you like anything there. :)

  44. subdar pichai
    5 out of 5

    :

    Good desin. Nice work

  45. Raju Bhadra
    3 out of 5

    :

    Hi There, I cloned the repo and did npm run reinstall but getting the below error.
    > angular2-seed@0.0.0 reinstall D:\Angular2\SB-Admin-BS4-Angular-2
    > rimraf node_modules && npm cache clean && npm install

    The system cannot find the path specified.

    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “C:\\Program Files (x86)\\nodejs\\node.exe” “C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “run” “reinstall”
    npm ERR! node v4.4.5
    npm ERR! npm v2.15.5
    npm ERR! code ELIFECYCLE
    npm ERR! angular2-seed@0.0.0 reinstall: `rimraf node_modules && npm cache clean && npm install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-seed@0.0.0 reinstall script ‘rimraf node_modules && npm cache clean && npm install’.
    npm ERR! This is most likely a problem with the angular2-seed package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! rimraf node_modules && npm cache clean && npm install
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs angular2-seed
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR!
    npm ERR! npm owner ls angular2-seed
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! D:\Angular2\SB-Admin-BS4-Angular-2\npm-debug.log

    Kindly help.

    Thanks in advance.

    • admin

      :

      Please follow the below mentioned steps-
      1: MSBuild Tool 2013 use ‘https://www.microsoft.com/en-in/download/confirmation.aspx?id=40760′
      2: ‘ts-node’ installed globally ‘npm install -g ts-node’
      3: Run the Command Prompt with administrator privileges.
      4: npm install —msvs_version=2013
      5: npm start

  46. Zill
    5 out of 5

    :

    Hi I am getting this error. Please help to resolve
    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\
    node_modules\\npm\\bin\\npm-cli.js” “start”
    npm ERR! node v4.4.5
    npm ERR! npm v2.15.5
    npm ERR! code ELIFECYCLE
    npm ERR! angular2-seed@0.0.0 start: `gulp serve –env dev`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-seed@0.0.0 start script ‘gulp serve –env dev’.
    npm ERR! This is most likely a problem with the angular2-seed package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! gulp serve –env dev
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs angular2-seed
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR!
    npm ERR! npm owner ls angular2-seed
    npm ERR! There is likely additional logging output above.

    • admin

      :

      Please follow the below mentioned steps:
      1: MSBuild Tool 2013 use ‘https://www.microsoft.com/en-in/download/confirmation.aspx?id=40760′
      2: ‘ts-node’ installed globally ‘npm install -g ts-node’
      3: Run the Command Prompt with administrator privileges.
      4: npm install —msvs_version=2013
      5: npm start

  47. hassan adam
    5 out of 5

    :

    It’s very nice template, and it worked nice, thanks for the nice work
    i just have a problem, i tried to change the “background color” of the “navbar” in the “main.css”, it changed ok, then it gets black again after restart
    how can i manage it to keep the new “background-color” ?

    best regards

    • admin

      :

      Hi,no need to make any changes in .css file it will be overwritten on npm start.You need to change in _topnav.scss

  48. Santosh
    5 out of 5

    :

    When you are planning to update template to Angular 2 RC1

    • admin

      :

      Hi,SB Admin Angular2 BS4 is updated to rc1.

  49. mworks
    5 out of 5

    :

    It looks really great and that’s exactly what we need. Unfortunately, I get the same error as Farhan, and uninstalled and reinstalled node a few times, didn’t work.

  50. Carlos
    5 out of 5

    :

    Excellent theme, I have a tiny question: I can run it on xampp?

    • admin

      :

      Thanks Carlos. No need to run it on XAMPP. SB Admin BS4 ng2 uses node server not apache which is inbuilt in XAMPP so just install npm & then npm start it will work fine.

  51. Ahmed
    5 out of 5

    :

    Thanks allot, Good job

  52. Farhan
    3 out of 5

    :

    Hi,
    I am getting the following errors upon npm install, where I have the latest version of npm and node. Can you please help with this issue

    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Users\\Kamran\\AppData\
    \Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js” “install”
    npm ERR! node v4.4.3
    npm ERR! npm v3.8.9
    npm ERR! code ELIFECYCLE

    npm ERR! contextify@0.1.15 install: `node-gyp rebuild`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the contextify@0.1.15 install script ‘node-gyp rebuild’.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the contextify package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! node-gyp rebuild
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs contextify
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR! npm owner ls contextify
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! E:\Data\Projects\Angular\SB-Admin-BS4-Angular-2-master\SB-Admin-BS4
    -Angular-2\npm-debug.log

  53. shreekanth
    4 out of 5

    :

    Hi,
    Did you update the template to Angular 2 RC 1

    • admin

      :

      Not now,may be by the end of this month.

  54. sandeep
    5 out of 5

    :

    great piece of work :) well done team

    • admin

      :

      Thank you Sandeep. :)

  55. Josh Elias
    5 out of 5

    :

    Great Template! I have one question though. Where does the mapping to gulpfile.ts comes from?

    • admin

      :

      Thanks.Via tools/tasks/*

  56. Eduardo
    4 out of 5

    :

    It looks really nice but… a picture slider in the first page of a dashboard? What is the goal of that? (constructive criticism)

  57. Tile
    5 out of 5

    :

    just what we needed!!! keep on going!!! thnx

    • admin

      :

      Thanks a lot Tile, for the appreciation. :)

  58. Jorge
    3 out of 5

    :

    Works fine on Chrome but not on IE 11 (fails to load)

    • admin

      :

      Hi Jorge,the issue has been fixed now.

  59. danny
    3 out of 5

    :

    I think the Admin layout is Awesome! However, it does not work in IE 11. I hope it gets fixed so I can use this amazing template.

    • admin

      :

      Hi Danny,the issue is fixed now.

Add a review