sirajc / Angular2 Bs4 Navbar
Licence: mit
An Angular2 App with Bootstrap4 Navbar and routing using Angular2's Router v3, follows Angular Styleguide
Stars: ✭ 64
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular2 Bs4 Navbar
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+1870.31%)
Mutual labels: bootstrap, angular2
Ng Pi Admin
Angular admin http://treesflower.com/ng-pi-admin
Stars: ✭ 131 (+104.69%)
Mutual labels: bootstrap, angular2
Coreui Free Angular Admin Template
CoreUI Angular is free Angular 2+ admin template based on Bootstrap 4
Stars: ✭ 1,279 (+1898.44%)
Mutual labels: bootstrap, angular2
Paperadmin
A flat admin dashboard using Angular JS 2/4
Stars: ✭ 80 (+25%)
Mutual labels: bootstrap, angular2
Material Dashboard Angular2
Material Dashboard Angular
Stars: ✭ 814 (+1171.88%)
Mutual labels: bootstrap, angular2
Clever Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Clever is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 98 (+53.13%)
Mutual labels: bootstrap, angular2
Rebirth Ng
rebirth-ng is a ui framework for Angular & bootstrap.
Stars: ✭ 118 (+84.38%)
Mutual labels: bootstrap, angular2
Coreui Free Bootstrap Admin Template
CoreUI is free bootstrap admin template
Stars: ✭ 11,038 (+17146.88%)
Mutual labels: bootstrap, angular2
Bootstraping Ngx Admin Lte
Angular2,4,6 project with AdminLTE dashboard template (using angular, angular-cli and ngx-admin-lte ) Formerly called 'ng2-admin-lte'.
Stars: ✭ 479 (+648.44%)
Mutual labels: bootstrap, angular2
Light Bootstrap Dashboard Angular2
Light Bootstrap Dashboard Angular 2
Stars: ✭ 299 (+367.19%)
Mutual labels: bootstrap, angular2
Ng2 Bootstrap Modal
Library to simplify the work with bootstrap modal dialogs
Stars: ✭ 53 (-17.19%)
Mutual labels: bootstrap, angular2
Root Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Root is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 54 (-15.62%)
Mutual labels: bootstrap, angular2
Starter Kit
📦 Angular 11+ starter kit for enterprise-grade projects
Stars: ✭ 1,102 (+1621.88%)
Mutual labels: bootstrap
Bootstrap For Vue
Use https://bootstrap-vue.js.org instead.
Stars: ✭ 62 (-3.12%)
Mutual labels: bootstrap
Student Management System
This is a simple web-based student management software written in PHP and Javascript. This was specifically written for school or educational organization.
Stars: ✭ 58 (-9.37%)
Mutual labels: bootstrap
Swarmops
Manage swarm clusters to provide a more concise and compact intermediate layer web application with swarm ui.
Stars: ✭ 63 (-1.56%)
Mutual labels: bootstrap
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (-4.69%)
Mutual labels: angular2
Springboot v2
SpringBoot_v2项目是努力打造springboot框架的极致细腻的脚手架。包括一套漂亮的前台。无其他杂七杂八的功能,原生纯净。
Stars: ✭ 1,093 (+1607.81%)
Mutual labels: bootstrap
Angular2 Bootstrap4 Navbar
An Angular2 App with Bootstrap4 Navbar and routing using Angular2's New New Router v3.rc1. Navbar menu is fully configurable in TS files. Configuration is shared between Angular and Bootstrap Navbar
Update
Navbar is now responsive. Collapsible menu with Hamburger ☰
icon on Mobile
AppModule
(NgModule) and all featues are NgModule
Steps to use
- Fork and clone this repository
- Run
npm install
- Run
npm run typings
, to install all the typing files - Run
gulp
to start watching html, scss and typescript changes and do a first build - On new termial run
npm start
to start lite-server with live reload support
Angular2 Features
- Usage of
NgModule
and configure routes usingRouterModule.forRoot([])
- Module specific routes using
RouterModule.forChild([...])
- Code is based on Angular2 RC5
- Components and Child Components
- App Routing and Child Component Routing
- Usage of Router Directives and functions like
routerLink
androuter.navigate
- Usage of Angular directives like
ngClass
,ngFor
,ngStyle
- Responsive Navbar
Router and Navbar Configuration
Bootstrap Navbar are configured in app/navbar/navbar-routes.config.ts
file eg.
export const ROUTES: RouteInfo[] = [
{ path: '', title: 'Angular2 Bootstrap4 Navbar', menuType: MenuType.BRAND },
{ path: 'heroes', title: 'Heroes', menuType: MenuType.LEFT },
{ path: 'about', title: 'About Us', menuType: MenuType.RIGHT },
{ path: 'contact', title: 'Contact', menuType: MenuType.RIGHT }
];
-
path
is used set routerLink in Nav Item of Bootsrap -
title
is what is shown on Navbar for particular Nav Item -
menuType
can beLEFT
,RIGHT
andBRAND
, based on this value the Menu Item is placed accordingly on the Navbar
TODO
- [X] Create AppModule and boot using
bootstrapModule
- [X] Move hero component and children to
NgModule
- [ ] Add Content in DEMO pages
- [ ] Render Nav based on config similar to
dynamic-menu
- [X] Menu configuration should be controlled in TS file only
- [ ] Get Menu and Route Configuration from HTTP instead of hardcoding
- [X] Active class for Active Routes
- [ ] Support for Dropdown Menu
- [X] Menu configuration should be controlled in TS file only
- [X] Move to SCSS
- [x] Image Compression
- [ ] Tests
NOTE
- App runs on port 8002, configurable in bs-config.json under scripts
- lite-server uses browserSync and runs on port 3000, configurable in bs-config.json
Contributing
Create an issue on this repo if something is broken or if a feature is needed Feel Free to create a Pull Request if you fixed anything In case you want to add a feature, create an issue to disscuss the feature first
Copyright and license
The MIT License
Copyright (c) 2015-2016 Sirajuddin Choudhary
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].