Ng Material Bootstrap Template link

Confused about choosing between angular material UI or Bootstrap?
Why can't we use both? 🤔

Angular Material UI + Bootstrap

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. 🎉

With this approach, we will have the following features.

• Material styled-components [Angular Material UI]
• Powerful grid system [Bootstrap]
• Commonly used utility styles [Bootstrap]
• Component Development Kit [Angular Material UI]
• Theming [Angular Material UI]

This Starter Template is inspired By Amadou Sall @ NG-DE 2019
For more refer : Slide Deck | Youtube

Build With

List of major libraries used in the template

• Angular
• Angular Material UI Components and CDK
• RxJs
• Webpack Bundle Analyzer (dev)
• Source Map Explorer (npx)
• Transloco
• unDraw
• Angular Material Icon
• PurgeCSS

Feature Links:

Link for the template here
Since the home page is not developed it will display page not found error.

• Entry Page
  • Login Page
  • Register Page
• Error Page
  • Page Not Found
  • Access Denied
  • Server Error
  • Server Down

Current Features

• Production Build
  • Build Optimizer : npm run pack
  • Source Map Explorer : npm run analyze
  • Refer : package.json
• Differential Loading
  • Refer : Differential builds
• Internationalization
  • Transloco - (i18n) library for Angular
  • Default Configuration : transloco-root.module
  • Locales : i18n
  • Except EN Locale, others are translated using Filtrate
• Bootstrap
  • Grid - mobile-first flexbox grid
  • Container - fundamental building block
  • Utilities - utility classes
  • Reboot - Simple Base Line - Manually Forked (Some style affects Angular Material Components)
• Angular
  • Material Theme - Default : Deep Purple & Amber
  • Typography - Default : Roboto, "Helvetica Neue", sans-serif
• Error Pages
  • Added with Illustrations using unDraw
  • Endpoints
    • error/500 - Server Error
    • error/503 - Server Down
    • error/403 - Access Denied
    • error/404 or any url, not resolved by router - Page Not Found
• Services
  • Locale Manager
    • Stores the selected language in LocalStorage.
    • Language can also be changed via URL Query Param (For English : hreflang=en)
  • Theme Manager
    • Stores the selected theme in LocalStorage.
    • Theme can also be changed via URL Query Param (For Dark Pink BlueGrey : hreftheme=dark-pink-bluegrey)
    • For default : hreftheme=default
  • SEO Manager
    • Allows us to set the title and description
    • Initialy it uses appName and appDescription from assets/i18n/*.json as title and description
      • Title format will be ${pageName} | ${appName}
      • Refer : seo-manage.service.ts
  • Navigation Manager
    • Allows us to navigate browser back and forward.
    • When we open the page directly, then there will be no history(browser back or forward)
      in that case fallback/alternate URL will fires
    • Default alternatePath is "/"
  • Viewport
    • Allows us to listen for viewport width change.
    • Based on Bootstrap breakpoint. For reference Available Breakpoints in Bootstrap
    • Use enum BREAKPOINT for refrencing
• Entry Pages
  • EndPoints
    • entry/signin - Login Page - UI Completed 👍
    • entry/signup - Registration page - Not yet Started
  • TODO:
    • Forgot Password Page
• Guards
  • AuthGuard - Is Authenticated
  • NoAuthGuard - Not Authenticated
  • RoleGuard - Is Authenticated + Has Authority
  • DevGuard - Is Dev Mode

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Apache-2.0 License - Please have a look at the LICENSE for more details.

Acknowledgements

• GitHub Emoji Cheat Sheet
• Img Shields
• Choose an Open Source License
• GitHub Pages
• Filtrate
• unDraw
• Reduce Angular style size By Dylan v.d Merwe

Back To Top