{"id":20118078,"url":"https://github.com/balajidany/ng-material-bootstrap-template","last_synced_at":"2026-05-17T03:45:34.107Z","repository":{"id":127847124,"uuid":"356923988","full_name":"BalajiDany/ng-material-bootstrap-template","owner":"BalajiDany","description":"In the conflict of bootstrap VS material, we understand that both have several incredible components. We combine the best features from both and build highly responsive and modern-looking web pages.","archived":false,"fork":false,"pushed_at":"2021-05-08T14:49:05.000Z","size":1924,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T06:44:23.292Z","etag":null,"topics":["angular","angular-template","angular11","angularmaterial","bootstrap","bootstrap5","material-design","material-ui","starter-template","ui-components","uikit"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BalajiDany.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-11T16:46:59.000Z","updated_at":"2022-10-09T10:47:01.000Z","dependencies_parsed_at":"2023-04-17T23:04:47.060Z","dependency_job_id":null,"html_url":"https://github.com/BalajiDany/ng-material-bootstrap-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BalajiDany%2Fng-material-bootstrap-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BalajiDany%2Fng-material-bootstrap-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BalajiDany%2Fng-material-bootstrap-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BalajiDany%2Fng-material-bootstrap-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BalajiDany","download_url":"https://codeload.github.com/BalajiDany/ng-material-bootstrap-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241564434,"owners_count":19982958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-template","angular11","angularmaterial","bootstrap","bootstrap5","material-design","material-ui","starter-template","ui-components","uikit"],"created_at":"2024-11-13T19:09:22.162Z","updated_at":"2026-05-17T03:45:29.084Z","avatar_url":"https://github.com/BalajiDany.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ng Material Bootstrap Template [link](https://ngtemplate-balaji.netlify.app/entry/signin)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/7152142d-f7ae-4f48-afa5-334086a777a0/deploy-status)](https://app.netlify.com/sites/ngtemplate-balaji/deploys)\n[![GitHub contributors](https://img.shields.io/github/contributors/BalajiDany/ng-material-bootstrap-template.svg)](https://github.com/BalajiDany/ng-material-bootstrap-template/graphs/contributors)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://github.com/BalajiDany/ng-material-bootstrap-template/blob/main/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/BalajiDany/ng-material-bootstrap-template.svg)](https://github.com/BalajiDany/ng-material-bootstrap-template/issues)\n[![GitHub forks](https://img.shields.io/github/forks/BalajiDany/ng-material-bootstrap-template.svg)](https://github.com/BalajiDany/ng-material-bootstrap-template/network)\n[![GitHub stars](https://img.shields.io/github/stars/BalajiDany/ng-material-bootstrap-template.svg)](https://github.com/BalajiDany/ng-material-bootstrap-template/stargazers)\n\nConfused about choosing between angular material UI or Bootstrap? \u003cbr\u003e\nWhy can't we use both? :thinking:\n\n\n## Angular Material UI + Bootstrap\n\nIn the conflict of bootstrap VS material, we understand that both have several incredible components. We combine the best features from both and build highly responsive and modern-looking web pages. :tada:\n\n With this approach, we will have the following features.\n\n* Material styled-components [Angular Material UI]\n* Powerful grid system [Bootstrap]\n* Commonly used utility styles [Bootstrap]\n* Component Development Kit [Angular Material UI]\n* Theming [Angular Material UI]\n\n**This Starter Template is inspired By Amadou Sall @ NG-DE 2019**\u003cbr\u003e\nFor more refer : \n[Slide Deck](https://speakerdeck.com/ahasall/angular-material-or-bootstrap-stop-asking-the-question-at-ng-de-2019) | [Youtube](https://www.youtube.com/watch?v=6MgOHuxz2Ow)\n\n\n## Build With\n\nList of major libraries used in the template\n\n- [Angular](https://angular.io)\n- [Angular Material UI Components and CDK](https://material.angular.io)\n- [RxJs](https://rxjs-dev.firebaseapp.com)\n- ~~[Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)~~ (~~dev~~)\n- [Source Map Explorer](https://github.com/danvk/source-map-explorer) (npx)\n- [Transloco](https://ngneat.github.io/transloco/)\n- [unDraw](https://undraw.co)\n- [Angular Material Icon](https://fonts.google.com/icons)\n- [PurgeCSS](https://purgecss.com/)\n\n\n## Feature Links:\nLink for the template [here](https://ngtemplate-balaji.netlify.app) \u003cbr\u003e\nSince the home page is not developed it will display page not found error.\n\n* Entry Page \n  - [Login Page](https://ngtemplate-balaji.netlify.app/entry/signin)\n  - [Register Page](https://ngtemplate-balaji.netlify.app/entry/signup)\n* Error Page \n  - [Page Not Found](https://ngtemplate-balaji.netlify.app/error/404)\n  - [Access Denied](https://ngtemplate-balaji.netlify.app/error/403)\n  - [Server Error](https://ngtemplate-balaji.netlify.app/error/500)\n  - [Server Down](https://ngtemplate-balaji.netlify.app/error/503)\n\n\n## Current Features\n\n- Production Build\n  - Build Optimizer : `npm run pack`\n  - Source Map Explorer : `npm run analyze`\n  - Refer : [package.json](package.json)\n- Differential Loading\n  - Refer : [Differential builds](https://angular.io/guide/deployment#differential-loading)\n- Internationalization\n  - [Transloco](https://ngneat.github.io/transloco/) - (i18n) library for Angular\n  - Default Configuration : [transloco-root.module](src/app/@core/transloco/transloco-root.module.ts)\n  - Locales : [i18n](src/assets/i18n)\n  - Except EN Locale, others are translated using [Filtrate](https://file-translate.com/en/app/json-translate)\n- Bootstrap\n  - [Grid](https://getbootstrap.com/docs/5.0/layout/grid/) - mobile-first flexbox grid\n  - [Container](https://getbootstrap.com/docs/5.0/layout/containers/) - fundamental building block\n  - [Utilities](https://getbootstrap.com/docs/5.0/utilities) - utility classes\n  - [Reboot](https://getbootstrap.com/docs/5.0/content/reboot/) - ~~Simple Base Line~~  - Manually Forked (Some style affects Angular Material Components)\n- Angular\n  - [Material Theme](https://material.angular.io/guide/theming) - Default : [Deep Purple \u0026 Amber](src/styles/theming.scss)\n  - [Typography](https://material.angular.io/guide/typography) - Default : [Roboto, \"Helvetica Neue\", sans-serif](src/styles/typography.scss)\n- Error Pages\n  - Added with Illustrations using [unDraw](https://undraw.co)\n  - Endpoints\n    - `error/500` - Server Error\n    - `error/503` - Server Down\n    - `error/403` - Access Denied\n    - `error/404` or `any url, not resolved by router` - Page Not Found\n- Services\n  - [Locale Manager](./src/app/@core/services/locale-manager.service.ts)\n    - Stores the selected language in LocalStorage.\n    - Language can also be changed via URL Query Param  (For English : `hreflang=en`)\n  - [Theme Manager](./src/app/@core/services/theme-manager.service.ts)\n    - Stores the selected theme in LocalStorage.\n    - Theme can also be changed via URL Query Param (For Dark Pink BlueGrey : `hreftheme=dark-pink-bluegrey`)\n    - For default : `hreftheme=default`\n  - [SEO Manager](./src/app/@core/services/seo-manager.service.ts)\n    - Allows us to set the **title** and **description**\n    - Initialy it uses `appName` and `appDescription` from `assets/i18n/*.json` as **title** and **description**\n        - Title format will be `${pageName} | ${appName}` \n        - Refer : [seo-manage.service.ts](./src/app/@core/services/seo-manager.service.ts)\n  - [Navigation Manager](./src/app/@core/services/navigation-manager.service.ts)\n    - Allows us to navigate browser back and forward.\n    - When we open the page directly, then there will be no history(browser back or forward)\n    \u003cbr\u003e in that case fallback/alternate URL will fires \n    - Default `alternatePath` is `\"/\"`\n  - [Viewport](./src/app/@core/services/viewport.service.ts)\n    - Allows us to listen for viewport width change.\n    - Based on Bootstrap breakpoint. For reference [Available Breakpoints in Bootstrap](https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints)\n    - Use `enum BREAKPOINT` for refrencing\n- Entry Pages\n  - EndPoints\n    - `entry/signin` - Login Page - UI Completed :+1:\n    - `entry/signup` - Registration page - Not yet Started\n  - TODO:\n    - Forgot Password Page\n- Guards\n  - [AuthGuard](./src/app/@core/guards/auth.guard.ts) - Is Authenticated\n  - [NoAuthGuard](./src/app/@core/guards/no-auth.guard.ts) - Not Authenticated\n  - [RoleGuard](./src/app/@core/guards/role.guard.ts) - Is Authenticated + Has Authority\n  - [DevGuard](./src/app/@core/guards/dev.guard.ts) - Is Dev Mode\n\n## Contributing\n\nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\n## License\n\nApache-2.0 License - Please have a look at the [LICENSE](LICENSE) for more details.\n\n## Acknowledgements\n\n* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)\n* [Img Shields](https://shields.io)\n* [Choose an Open Source License](https://choosealicense.com)\n* [GitHub Pages](https://pages.github.com)\n* [Filtrate](https://file-translate.com/en/app/json-translate)\n* [unDraw](https://undraw.co)\n* [Reduce Angular style size By Dylan v.d Merwe](https://dev.to/dylanvdmerwe/reduce-angular-style-size-using-purgecss-to-remove-unused-styles-3b2k)\n\n[Back To Top](#ng-material-bootstrap-template)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalajidany%2Fng-material-bootstrap-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalajidany%2Fng-material-bootstrap-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalajidany%2Fng-material-bootstrap-template/lists"}