Showing preview only (292K chars total). Download the full file or copy to clipboard to get everything.
Repository: start-angular/SB-Admin-BS4-Angular-2
Branch: master
Commit: b812a1bb1692
Files: 239
Total size: 234.2 KB
Directory structure:
gitextract_ejxkiitx/
├── .angulardoc.json
├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── README.md
├── angular.json
├── browserslist
├── e2e/
│ ├── src/
│ │ ├── app.e2e-spec.ts
│ │ └── app.po.ts
│ └── tsconfig.e2e.json
├── package.json
├── src/
│ ├── app/
│ │ ├── access-denied/
│ │ │ ├── access-denied-routing.module.ts
│ │ │ ├── access-denied.component.html
│ │ │ ├── access-denied.component.scss
│ │ │ ├── access-denied.component.spec.ts
│ │ │ ├── access-denied.component.ts
│ │ │ ├── access-denied.module.spec.ts
│ │ │ └── access-denied.module.ts
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.spec.ts
│ │ ├── app.module.ts
│ │ ├── layout/
│ │ │ ├── blank-page/
│ │ │ │ ├── blank-page-routing.module.ts
│ │ │ │ ├── blank-page.component.html
│ │ │ │ ├── blank-page.component.scss
│ │ │ │ ├── blank-page.component.spec.ts
│ │ │ │ ├── blank-page.component.ts
│ │ │ │ ├── blank-page.module.spec.ts
│ │ │ │ └── blank-page.module.ts
│ │ │ ├── bs-component/
│ │ │ │ ├── bs-component-routing.module.ts
│ │ │ │ ├── bs-component.component.html
│ │ │ │ ├── bs-component.component.scss
│ │ │ │ ├── bs-component.component.spec.ts
│ │ │ │ ├── bs-component.component.ts
│ │ │ │ ├── bs-component.module.spec.ts
│ │ │ │ ├── bs-component.module.ts
│ │ │ │ └── components/
│ │ │ │ ├── alert/
│ │ │ │ │ ├── alert.component.html
│ │ │ │ │ ├── alert.component.scss
│ │ │ │ │ ├── alert.component.spec.ts
│ │ │ │ │ └── alert.component.ts
│ │ │ │ ├── buttons/
│ │ │ │ │ ├── buttons.component.html
│ │ │ │ │ ├── buttons.component.scss
│ │ │ │ │ ├── buttons.component.spec.ts
│ │ │ │ │ └── buttons.component.ts
│ │ │ │ ├── collapse/
│ │ │ │ │ ├── collapse.component.html
│ │ │ │ │ ├── collapse.component.scss
│ │ │ │ │ ├── collapse.component.spec.ts
│ │ │ │ │ └── collapse.component.ts
│ │ │ │ ├── date-picker/
│ │ │ │ │ ├── date-picker.component.html
│ │ │ │ │ ├── date-picker.component.scss
│ │ │ │ │ ├── date-picker.component.spec.ts
│ │ │ │ │ └── date-picker.component.ts
│ │ │ │ ├── dropdown/
│ │ │ │ │ ├── dropdown.component.html
│ │ │ │ │ ├── dropdown.component.scss
│ │ │ │ │ ├── dropdown.component.spec.ts
│ │ │ │ │ └── dropdown.component.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── modal/
│ │ │ │ │ ├── modal.component.html
│ │ │ │ │ ├── modal.component.scss
│ │ │ │ │ ├── modal.component.spec.ts
│ │ │ │ │ └── modal.component.ts
│ │ │ │ ├── pagination/
│ │ │ │ │ ├── pagination.component.html
│ │ │ │ │ ├── pagination.component.scss
│ │ │ │ │ ├── pagination.component.spec.ts
│ │ │ │ │ └── pagination.component.ts
│ │ │ │ ├── pop-over/
│ │ │ │ │ ├── pop-over.component.html
│ │ │ │ │ ├── pop-over.component.scss
│ │ │ │ │ ├── pop-over.component.spec.ts
│ │ │ │ │ └── pop-over.component.ts
│ │ │ │ ├── progressbar/
│ │ │ │ │ ├── progressbar.component.html
│ │ │ │ │ ├── progressbar.component.scss
│ │ │ │ │ ├── progressbar.component.spec.ts
│ │ │ │ │ └── progressbar.component.ts
│ │ │ │ ├── rating/
│ │ │ │ │ ├── rating.component.html
│ │ │ │ │ ├── rating.component.scss
│ │ │ │ │ ├── rating.component.spec.ts
│ │ │ │ │ └── rating.component.ts
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── tabs.component.html
│ │ │ │ │ ├── tabs.component.scss
│ │ │ │ │ ├── tabs.component.spec.ts
│ │ │ │ │ └── tabs.component.ts
│ │ │ │ ├── timepicker/
│ │ │ │ │ ├── timepicker.component.html
│ │ │ │ │ ├── timepicker.component.scss
│ │ │ │ │ ├── timepicker.component.spec.ts
│ │ │ │ │ └── timepicker.component.ts
│ │ │ │ └── tooltip/
│ │ │ │ ├── tooltip.component.html
│ │ │ │ ├── tooltip.component.scss
│ │ │ │ ├── tooltip.component.spec.ts
│ │ │ │ └── tooltip.component.ts
│ │ │ ├── bs-element/
│ │ │ │ ├── bs-element-routing.module.ts
│ │ │ │ ├── bs-element.component.html
│ │ │ │ ├── bs-element.component.scss
│ │ │ │ ├── bs-element.component.spec.ts
│ │ │ │ ├── bs-element.component.ts
│ │ │ │ ├── bs-element.module.spec.ts
│ │ │ │ └── bs-element.module.ts
│ │ │ ├── charts/
│ │ │ │ ├── charts-routing.module.ts
│ │ │ │ ├── charts.component.html
│ │ │ │ ├── charts.component.scss
│ │ │ │ ├── charts.component.spec.ts
│ │ │ │ ├── charts.component.ts
│ │ │ │ ├── charts.module.spec.ts
│ │ │ │ └── charts.module.ts
│ │ │ ├── components/
│ │ │ │ ├── header/
│ │ │ │ │ ├── header.component.html
│ │ │ │ │ ├── header.component.scss
│ │ │ │ │ ├── header.component.spec.ts
│ │ │ │ │ └── header.component.ts
│ │ │ │ └── sidebar/
│ │ │ │ ├── sidebar.component.html
│ │ │ │ ├── sidebar.component.scss
│ │ │ │ ├── sidebar.component.spec.ts
│ │ │ │ └── sidebar.component.ts
│ │ │ ├── dashboard/
│ │ │ │ ├── components/
│ │ │ │ │ ├── chat/
│ │ │ │ │ │ ├── chat.component.html
│ │ │ │ │ │ ├── chat.component.scss
│ │ │ │ │ │ ├── chat.component.spec.ts
│ │ │ │ │ │ └── chat.component.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── notification/
│ │ │ │ │ │ ├── notification.component.html
│ │ │ │ │ │ ├── notification.component.scss
│ │ │ │ │ │ ├── notification.component.spec.ts
│ │ │ │ │ │ └── notification.component.ts
│ │ │ │ │ └── timeline/
│ │ │ │ │ ├── timeline.component.html
│ │ │ │ │ ├── timeline.component.scss
│ │ │ │ │ ├── timeline.component.spec.ts
│ │ │ │ │ └── timeline.component.ts
│ │ │ │ ├── dashboard-routing.module.ts
│ │ │ │ ├── dashboard.component.html
│ │ │ │ ├── dashboard.component.scss
│ │ │ │ ├── dashboard.component.spec.ts
│ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── dashboard.module.spec.ts
│ │ │ │ └── dashboard.module.ts
│ │ │ ├── form/
│ │ │ │ ├── form-routing.module.ts
│ │ │ │ ├── form.component.html
│ │ │ │ ├── form.component.scss
│ │ │ │ ├── form.component.spec.ts
│ │ │ │ ├── form.component.ts
│ │ │ │ ├── form.module.spec.ts
│ │ │ │ └── form.module.ts
│ │ │ ├── grid/
│ │ │ │ ├── grid-routing.module.ts
│ │ │ │ ├── grid.component.html
│ │ │ │ ├── grid.component.scss
│ │ │ │ ├── grid.component.spec.ts
│ │ │ │ ├── grid.component.ts
│ │ │ │ ├── grid.module.spec.ts
│ │ │ │ └── grid.module.ts
│ │ │ ├── layout-routing.module.ts
│ │ │ ├── layout.component.html
│ │ │ ├── layout.component.scss
│ │ │ ├── layout.component.spec.ts
│ │ │ ├── layout.component.ts
│ │ │ ├── layout.module.spec.ts
│ │ │ ├── layout.module.ts
│ │ │ └── tables/
│ │ │ ├── tables-routing.module.ts
│ │ │ ├── tables.component.html
│ │ │ ├── tables.component.scss
│ │ │ ├── tables.component.spec.ts
│ │ │ ├── tables.component.ts
│ │ │ ├── tables.module.spec.ts
│ │ │ └── tables.module.ts
│ │ ├── login/
│ │ │ ├── login-routing.module.ts
│ │ │ ├── login.component.html
│ │ │ ├── login.component.scss
│ │ │ ├── login.component.spec.ts
│ │ │ ├── login.component.ts
│ │ │ ├── login.module.spec.ts
│ │ │ └── login.module.ts
│ │ ├── not-found/
│ │ │ ├── not-found-routing.module.ts
│ │ │ ├── not-found.component.html
│ │ │ ├── not-found.component.scss
│ │ │ ├── not-found.component.spec.ts
│ │ │ ├── not-found.component.ts
│ │ │ ├── not-found.module.spec.ts
│ │ │ └── not-found.module.ts
│ │ ├── router.animations.ts
│ │ ├── server-error/
│ │ │ ├── server-error-routing.module.ts
│ │ │ ├── server-error.component.html
│ │ │ ├── server-error.component.scss
│ │ │ ├── server-error.component.spec.ts
│ │ │ ├── server-error.component.ts
│ │ │ ├── server-error.module.spec.ts
│ │ │ └── server-error.module.ts
│ │ ├── shared/
│ │ │ ├── guard/
│ │ │ │ ├── auth.guard.spec.ts
│ │ │ │ ├── auth.guard.ts
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── modules/
│ │ │ │ ├── index.ts
│ │ │ │ ├── language-translation/
│ │ │ │ │ └── language-translation.module.ts
│ │ │ │ ├── page-header/
│ │ │ │ │ ├── page-header.component.html
│ │ │ │ │ ├── page-header.component.scss
│ │ │ │ │ ├── page-header.component.spec.ts
│ │ │ │ │ ├── page-header.component.ts
│ │ │ │ │ ├── page-header.module.spec.ts
│ │ │ │ │ └── page-header.module.ts
│ │ │ │ └── stat/
│ │ │ │ ├── stat.component.html
│ │ │ │ ├── stat.component.scss
│ │ │ │ ├── stat.component.spec.ts
│ │ │ │ ├── stat.component.ts
│ │ │ │ ├── stat.module.spec.ts
│ │ │ │ └── stat.module.ts
│ │ │ ├── pipes/
│ │ │ │ └── shared-pipes.module.ts
│ │ │ └── services/
│ │ │ └── index.ts
│ │ └── signup/
│ │ ├── signup-routing.module.ts
│ │ ├── signup.component.html
│ │ ├── signup.component.scss
│ │ ├── signup.component.spec.ts
│ │ ├── signup.component.ts
│ │ ├── signup.module.spec.ts
│ │ └── signup.module.ts
│ ├── assets/
│ │ └── i18n/
│ │ ├── de.json
│ │ ├── en.json
│ │ ├── es.json
│ │ ├── fa.json
│ │ ├── fr.json
│ │ ├── it.json
│ │ ├── ur.json
│ │ └── zh-CHS.json
│ ├── environments/
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── index.html
│ ├── karma.conf.js
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles/
│ │ ├── _responsive.scss
│ │ ├── _rtl.scss
│ │ ├── _spinner.scss
│ │ ├── _utils.scss
│ │ └── app.scss
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .angulardoc.json
================================================
{
"repoId": "a13b5f05-f1dd-4d04-8f3d-e764621ce5c2",
"lastSync": 0
}
================================================
FILE: .editorconfig
================================================
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/tmp
/out-tsc
/dist
# dependencies
/node_modules
package-lock.json
# IDEs and editors
/.idea
.project
.classpath
.history
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db
================================================
FILE: .prettierignore
================================================
package.json
package-lock.json
dist
.angulardoc.json
.vscode/*
.history/*
node_modules/*
src/assets
================================================
FILE: .prettierrc
================================================
{
"bracketSpacing": true,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 120,
"disableLanguages": ["html"]
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- '9'
- '10'
install:
- npm install
script:
- npm run test-ci
cache:
directories:
- node_modules
================================================
FILE: LICENSE
================================================
Copyright 2018 GeekyAnts
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
# SB Admin rewritten in Angular 13 and Bootstrap 5
Simple Dashboard Admin App built using Angular 13 and Bootstrap 5
This project is a port of the famous Free Admin Bootstrap Theme [SB Admin v8.0](http://startbootstrap.com/template-overviews/sb-admin-2/) to Angular 13 Theme.
Powered by [StartAngular](http://startangular.com/) & [StrapUI](http://strapui.com/)
## [Demo](http://rawgit.com/start-angular/SB-Admin-BS4-Angular-6/master/dist/)
## [SB Admin Material version](https://github.com/start-javascript/sb-admin-material)
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2.
### Introduction
Provides fast, reliable and extensible starter for the development of Angular projects.
`sb-admin-bs5-angular13` provides the following features:
- Developed using boostrap-v6.0.0
- angular-v13.2.2
- angular/cli-v13.2.2
- [ng-bootstrap-v12.0.0](https://github.com/ng-bootstrap/)
- [ngx-translate-v14.0.0](https://github.com/ngx-translate)
- Following the best practices.
- Ahead-of-Time compilation support.
- Official Angular i18n support.
- Production and development builds.
- Tree-Shaking production builds.
### How to start
**Note** that this seed project requires **node >=v12.0.0 and npm >=6**.
In order to start the project use:
```bash
$ git clone https://github.com/start-angular/SB-Admin-BS4-Angular-8.git
$ cd SB-Admin-BS4-Angular-8
# install the project's dependencies
$ npm install
# watches your files and uses livereload by default run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
$ npm start
# prod build, will output the production application in `dist`
# the produced code can be deployed (rsynced) to a remote server
$ npm run build
```
### Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
### Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
### Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
### Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
================================================
FILE: angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"test-ng7": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": ["src/assets", "src/favicon.ico"],
"styles": ["node_modules/font-awesome/css/font-awesome.css", "src/styles/app.scss"],
"scripts": ["node_modules/chart.js/dist/Chart.js"],
"allowedCommonJsDependencies": ["chart.js"],
"aot": false,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "test-ng7:build"
},
"configurations": {
"production": {
"buildTarget": "test-ng7:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "test-ng7:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"scripts": ["node_modules/chart.js/dist/Chart.js"],
"styles": ["node_modules/font-awesome/css/font-awesome.css", "src/styles/app.scss"],
"assets": ["src/assets", "src/favicon.ico"]
}
}
}
},
"test-ng7-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "test-ng7:serve"
},
"configurations": {
"production": {
"devServerTarget": "test-ng7:serve:production"
}
}
}
}
}
},
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": "0ccfd754-79ab-4bf6-b9ef-ef066366d8c7"
}
}
================================================
FILE: browserslist
================================================
last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
================================================
FILE: e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
describe('test-ng8 App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('SB Admin BS5 Angular8');
});
});
================================================
FILE: e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
================================================
FILE: e2e/tsconfig.e2e.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": ["jasmine", "jasminewd2", "node"]
}
}
================================================
FILE: package.json
================================================
{
"name": "sb-admin-angular15-bs5",
"version": "10.0.0",
"license": "Apache",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --configuration production",
"gitbuild": "ng build --configuration production --base-href /start-angular/SB-Admin-BS4-Angular-8/master/dist/",
"test": "ng test",
"test-ci": "TEST_CI=true ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "17.3.4",
"@angular/common": "17.3.4",
"@angular/compiler": "17.3.4",
"@angular/core": "17.3.4",
"@angular/forms": "17.3.4",
"@angular/localize": "17.3.4",
"@angular/platform-browser": "17.3.4",
"@angular/platform-browser-dynamic": "17.3.4",
"@angular/router": "17.3.4",
"@ng-bootstrap/ng-bootstrap": "14.1.0",
"@ngx-translate/core": "14.0.0",
"@ngx-translate/http-loader": "7.0.0",
"@popperjs/core": "2.11.7",
"bootstrap": "5.2.3",
"chart.js": "4.2.1",
"core-js": "3.30.1",
"font-awesome": "4.7.0",
"ng2-charts": "4.1.1",
"rxjs": "7.8.1",
"tslib": "2.5.0",
"zone.js": "~0.14.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.3.4",
"@angular/cli": "17.3.4",
"@angular/compiler-cli": "17.3.4",
"@angular/language-service": "17.3.4",
"@types/jasmine": "4.3.1",
"@types/jasminewd2": "2.0.10",
"@types/node": "18.16.1",
"codelyzer": "6.0.2",
"jasmine-core": "~4.6.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "2.0.0",
"prettier": "2.8.8",
"protractor": "7.0.0",
"ts-node": "10.9.1",
"tslint": "6.1.3",
"typescript": "5.4.5",
"yarn": "1.22.19"
}
}
================================================
FILE: src/app/access-denied/access-denied-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccessDeniedComponent } from './access-denied.component';
const routes: Routes = [
{
path: '',
component: AccessDeniedComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AccessDeniedRoutingModule {}
================================================
FILE: src/app/access-denied/access-denied.component.html
================================================
<p>
access-denied works!
</p>
================================================
FILE: src/app/access-denied/access-denied.component.scss
================================================
================================================
FILE: src/app/access-denied/access-denied.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { AccessDeniedComponent } from './access-denied.component';
describe('AccessDeniedComponent', () => {
let component: AccessDeniedComponent;
let fixture: ComponentFixture<AccessDeniedComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AccessDeniedComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccessDeniedComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/access-denied/access-denied.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-access-denied',
templateUrl: './access-denied.component.html',
styleUrls: ['./access-denied.component.scss']
})
export class AccessDeniedComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/access-denied/access-denied.module.spec.ts
================================================
import { AccessDeniedModule } from './access-denied.module';
describe('AccessDeniedModule', () => {
let accessDeniedModule: AccessDeniedModule;
beforeEach(() => {
accessDeniedModule = new AccessDeniedModule();
});
it('should create an instance', () => {
expect(accessDeniedModule).toBeTruthy();
});
});
================================================
FILE: src/app/access-denied/access-denied.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AccessDeniedRoutingModule } from './access-denied-routing.module';
import { AccessDeniedComponent } from './access-denied.component';
@NgModule({
imports: [CommonModule, AccessDeniedRoutingModule],
declarations: [AccessDeniedComponent]
})
export class AccessDeniedModule {}
================================================
FILE: src/app/app-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './shared';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./layout/layout.module').then((m) => m.LayoutModule),
canActivate: [AuthGuard]
},
{ path: 'login', loadChildren: () => import('./login/login.module').then((m) => m.LoginModule) },
{ path: 'signup', loadChildren: () => import('./signup/signup.module').then((m) => m.SignupModule) },
{
path: 'error',
loadChildren: () => import('./server-error/server-error.module').then((m) => m.ServerErrorModule)
},
{
path: 'access-denied',
loadChildren: () => import('./access-denied/access-denied.module').then((m) => m.AccessDeniedModule)
},
{ path: 'not-found', loadChildren: () => import('./not-found/not-found.module').then((m) => m.NotFoundModule) },
{ path: '**', redirectTo: 'not-found' }
];
@NgModule({
imports: [RouterModule.forRoot(routes, {})],
exports: [RouterModule]
})
export class AppRoutingModule {}
================================================
FILE: src/app/app.component.html
================================================
<router-outlet></router-outlet>
================================================
FILE: src/app/app.component.scss
================================================
================================================
FILE: src/app/app.component.spec.ts
================================================
import { APP_BASE_HREF } from '@angular/common';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [AppModule],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/app.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/app.module.spec.ts
================================================
import { AppModule } from './app.module';
describe('AppModule', () => {
let appModule: AppModule;
beforeEach(() => {
appModule = new AppModule();
});
it('should create an instance', () => {
expect(appModule).toBeTruthy();
});
});
================================================
FILE: src/app/app.module.ts
================================================
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module';
@NgModule({
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
LanguageTranslationModule,
AppRoutingModule
],
declarations: [AppComponent],
providers: [AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule {}
================================================
FILE: src/app/layout/blank-page/blank-page-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlankPageComponent } from './blank-page.component';
const routes: Routes = [
{
path: '',
component: BlankPageComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BlankPageRoutingModule {}
================================================
FILE: src/app/layout/blank-page/blank-page.component.html
================================================
================================================
FILE: src/app/layout/blank-page/blank-page.component.scss
================================================
================================================
FILE: src/app/layout/blank-page/blank-page.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BlankPageComponent } from './blank-page.component';
describe('BlankPageComponent', () => {
let component: BlankPageComponent;
let fixture: ComponentFixture<BlankPageComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [BlankPageComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BlankPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/blank-page/blank-page.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-blank-page',
templateUrl: './blank-page.component.html',
styleUrls: ['./blank-page.component.scss']
})
export class BlankPageComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/blank-page/blank-page.module.spec.ts
================================================
import { BlankPageModule } from './blank-page.module';
describe('BlankPageModule', () => {
let blankPageModule: BlankPageModule;
beforeEach(() => {
blankPageModule = new BlankPageModule();
});
it('should create an instance', () => {
expect(blankPageModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/blank-page/blank-page.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BlankPageRoutingModule } from './blank-page-routing.module';
import { BlankPageComponent } from './blank-page.component';
@NgModule({
imports: [CommonModule, BlankPageRoutingModule],
declarations: [BlankPageComponent]
})
export class BlankPageModule {}
================================================
FILE: src/app/layout/bs-component/bs-component-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BsComponentComponent } from './bs-component.component';
const routes: Routes = [
{
path: '',
component: BsComponentComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BsComponentRoutingModule {}
================================================
FILE: src/app/layout/bs-component/bs-component.component.html
================================================
<div>
<app-page-header [heading]="'Bootstrap Component'" [icon]="'fa-th-list'"></app-page-header>
<app-modal></app-modal>
<app-alert></app-alert>
<app-buttons></app-buttons>
<app-collapse></app-collapse>
<app-date-picker></app-date-picker>
<app-dropdown></app-dropdown>
<app-pagination></app-pagination>
<app-pop-over></app-pop-over>
<app-progressbar></app-progressbar>
<app-tabs></app-tabs>
<app-tooltip></app-tooltip>
<app-timepicker></app-timepicker>
<app-rating></app-rating>
</div>
================================================
FILE: src/app/layout/bs-component/bs-component.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/bs-component.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { BsComponentComponent } from './bs-component.component';
import { BsComponentModule } from './bs-component.module';
describe('BsComponentComponent', () => {
let component: BsComponentComponent;
let fixture: ComponentFixture<BsComponentComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [BsComponentModule, RouterTestingModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BsComponentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/bs-component.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bs-component',
templateUrl: './bs-component.component.html',
styleUrls: ['./bs-component.component.scss']
})
export class BsComponentComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/bs-component.module.spec.ts
================================================
import { BsComponentModule } from './bs-component.module';
describe('BsComponentModule', () => {
let bsComponentModule: BsComponentModule;
beforeEach(() => {
bsComponentModule = new BsComponentModule();
});
it('should create an instance', () => {
expect(bsComponentModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/bs-component.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PageHeaderModule } from '../../shared';
import { BsComponentRoutingModule } from './bs-component-routing.module';
import { BsComponentComponent } from './bs-component.component';
import {
AlertComponent,
ButtonsComponent,
CollapseComponent,
DatePickerComponent,
DropdownComponent,
ModalComponent,
PaginationComponent,
PopOverComponent,
ProgressbarComponent,
RatingComponent,
TabsComponent,
TimepickerComponent,
TooltipComponent
} from './components';
@NgModule({
imports: [CommonModule, BsComponentRoutingModule, FormsModule, ReactiveFormsModule, NgbModule, PageHeaderModule],
declarations: [
BsComponentComponent,
ButtonsComponent,
AlertComponent,
ModalComponent,
CollapseComponent,
DatePickerComponent,
DropdownComponent,
PaginationComponent,
PopOverComponent,
ProgressbarComponent,
TabsComponent,
RatingComponent,
TooltipComponent,
TimepickerComponent
]
})
export class BsComponentModule {}
================================================
FILE: src/app/layout/bs-component/components/alert/alert.component.html
================================================
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header">Buttons</div>
<div class="card-body">
<p *ngFor="let alert of alerts">
<ngb-alert (close)="closeAlert(alert)" [type]="alert.type">{{ alert.message }}</ngb-alert>
</p>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/alert/alert.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/alert/alert.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AlertComponent } from './alert.component';
describe('AlertComponent', () => {
let component: AlertComponent;
let fixture: ComponentFixture<AlertComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AlertComponent],
imports: [NgbModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AlertComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/alert/alert.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
alerts: Array<any> = [];
constructor() {
this.alerts.push(
{
id: 1,
type: 'success',
message: 'This is an success alert'
},
{
id: 2,
type: 'info',
message: 'This is an info alert'
},
{
id: 3,
type: 'warning',
message: 'This is a warning alert'
},
{
id: 4,
type: 'danger',
message: 'This is a danger alert'
}
);
}
ngOnInit() {}
public closeAlert(alert: any) {
const index: number = this.alerts.indexOf(alert);
this.alerts.splice(index, 1);
}
}
================================================
FILE: src/app/layout/bs-component/components/buttons/buttons.component.html
================================================
<div class="row mb-3">
<div class="col col-sm-6">
<div class="card">
<div class="card-header">Radio Button group (<strong>Using ngModel</strong>)</div>
<div class="card-body">
<div [(ngModel)]="model" class="btn-group btn-group-toggle mb-3" name="radioBasic" ngbRadioGroup>
<label class="btn-primary" ngbButtonLabel>
<input [value]="1" ngbButton type="radio" /> Left (pre-checked)
</label>
<label class="btn-primary" ngbButtonLabel>
<input ngbButton type="radio" value="middle" /> Middle
</label>
<label class="btn-primary" ngbButtonLabel>
<input [value]="false" ngbButton type="radio" /> Right
</label>
</div>
<div class="alert alert-info mb-0"><strong>Selected Value: </strong>{{ model }}</div>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card">
<div class="card-header">Radio Button group (<strong>Ractive Forms</strong>)</div>
<div class="card-body">
<form [formGroup]="radioGroupForm" class="mb-3">
<div class="btn-group btn-group-toggle" formControlName="model" name="radioBasic" ngbRadioGroup>
<label class="btn-primary" ngbButtonLabel>
<input [value]="1" ngbButton type="radio" /> Left (pre-checked)
</label>
<label class="btn-primary" ngbButtonLabel>
<input ngbButton type="radio" value="middle" /> Middle
</label>
<label class="btn-primary" ngbButtonLabel>
<input [value]="false" ngbButton type="radio" /> Right
</label>
</div>
</form>
<div class="alert alert-info mb-0">
<strong>Selected Value: </strong>{{ radioGroupForm.value.model }}
</div>
<!-- <form [formGroup]="radioGroupForm">
<div ngbRadioGroup name="radioBasic" formControlName="model">
<label class="btn btn-primary">
<input type="radio" [value]="1"> Left (pre-checked)
</label>
<label class="btn btn-primary">
<input type="radio" value="middle"> Middle
</label>
<label class="btn btn-primary">
<input type="radio" [value]="false"> Right
</label>
</div>
</form> -->
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/buttons/buttons.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/buttons/buttons.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ButtonsComponent } from './buttons.component';
describe('ButtonsComponent', () => {
let component: ButtonsComponent;
let fixture: ComponentFixture<ButtonsComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [FormsModule, ReactiveFormsModule, NgbModule],
declarations: [ButtonsComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ButtonsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/buttons/buttons.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@Component({
selector: 'app-buttons',
templateUrl: './buttons.component.html',
styleUrls: ['./buttons.component.scss']
})
export class ButtonsComponent implements OnInit {
model: any = 1;
public radioGroupForm: UntypedFormGroup;
constructor(private formBuilder: UntypedFormBuilder) {}
ngOnInit() {
this.radioGroupForm = this.formBuilder.group({
model: 'middle'
});
}
}
================================================
FILE: src/app/layout/bs-component/components/collapse/collapse.component.html
================================================
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header">Collapse</div>
<div class="card-body">
<p>
<button
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
aria-controls="collapseExample"
class="btn btn-outline-primary"
type="button"
>
Toggle
</button>
</p>
<div [ngbCollapse]="isCollapsed" id="collapseExample">
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/collapse/collapse.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/collapse/collapse.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CollapseComponent } from './collapse.component';
describe('CollapseComponent', () => {
let component: CollapseComponent;
let fixture: ComponentFixture<CollapseComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NgbModule],
declarations: [CollapseComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CollapseComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/collapse/collapse.component.ts
================================================
import { Component } from '@angular/core';
@Component({
selector: 'app-collapse',
templateUrl: './collapse.component.html',
styleUrls: ['./collapse.component.scss']
})
export class CollapseComponent {
public isCollapsed = false;
}
================================================
FILE: src/app/layout/bs-component/components/date-picker/date-picker.component.html
================================================
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header">Date Picker</div>
<div class="card-body">
<form class="form-inline mb-3">
<div class="form-group">
<div class="input-group datepicker-input">
<input
#d="ngbDatepicker"
[(ngModel)]="model"
class="form-control"
name="dp"
ngbDatepicker
placeholder="yyyy-mm-dd"
/>
<button (click)="d.toggle()" class="input-group-addon" type="button">
<!-- <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/> -->
<span class="fa fa-calendar"></span>
</button>
</div>
</div>
</form>
<div class="alert alert-info mb-0"><strong>Model: </strong> {{ model | json }}</div>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/date-picker/date-picker.component.scss
================================================
:host ::ng-deep .datepicker-input {
.custom-select {
width: 50%;
}
}
================================================
FILE: src/app/layout/bs-component/components/date-picker/date-picker.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { DatePickerComponent } from './date-picker.component';
describe('DatePickerComponent', () => {
let component: DatePickerComponent;
let fixture: ComponentFixture<DatePickerComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [FormsModule, NgbModule],
declarations: [DatePickerComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatePickerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/date-picker/date-picker.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.scss']
})
export class DatePickerComponent implements OnInit {
model: any;
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/components/dropdown/dropdown.component.html
================================================
<div class="card">
<div class="card-header">Dropdown</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="d-inline-block dropdown" ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu>
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>
<div class="col text-right">
<div class="d-inline-block dropdown" ngbDropdown placement="top-right">
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropup</button>
<div ngbDropdownMenu>
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>
</div>
<hr />
<p class="mb-2">You can easily control dropdowns programmatically using the exported dropdown instance.</p>
<div #myDrop="ngbDropdown" class="d-inline-block dropdown" ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu>
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
<div #myDrop="ngbDropdown" class="d-inline-block dropdown" ngbDropdown>
<button (click)="$event.stopPropagation(); myDrop.open()" class="btn btn-outline-success">
Open from outside
</button>
</div>
<div #myDrop="ngbDropdown" class="d-inline-block dropdown" ngbDropdown>
<button (click)="$event.stopPropagation(); myDrop.close()" class="btn btn-outline-danger">
Close from outside
</button>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/dropdown/dropdown.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/dropdown/dropdown.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { DropdownComponent } from './dropdown.component';
describe('DropdownComponent', () => {
let component: DropdownComponent;
let fixture: ComponentFixture<DropdownComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NgbModule],
declarations: [DropdownComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DropdownComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/dropdown/dropdown.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/components/index.ts
================================================
export * from './buttons/buttons.component';
export * from './alert/alert.component';
export * from './modal/modal.component';
export * from './collapse/collapse.component';
export * from './date-picker/date-picker.component';
export * from './dropdown/dropdown.component';
export * from './pagination/pagination.component';
export * from './pop-over/pop-over.component';
export * from './progressbar/progressbar.component';
export * from './tabs/tabs.component';
export * from './rating/rating.component';
export * from './tooltip/tooltip.component';
export * from './timepicker/timepicker.component';
================================================
FILE: src/app/layout/bs-component/components/modal/modal.component.html
================================================
<div class="row">
<div class="col-sm-12">
<div class="card mb-3">
<div class="card-header">Modal</div>
<!-- Large modal -->
<div class="card-body">
<button (click)="open(content)" class="btn btn-primary">Large modal</button>
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button (click)="d('Cross click')" aria-label="Close" class="close" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button (click)="c('Close click')" class="btn btn-secondary" type="button">Close</button>
</div>
</ng-template>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/modal/modal.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/modal/modal.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';
describe('ModalComponent', () => {
let component: ModalComponent;
let fixture: ComponentFixture<ModalComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NgbModule],
declarations: [ModalComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/modal/modal.component.ts
================================================
import { Component } from '@angular/core';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
closeResult: string;
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content).result.then(
(result) => {
this.closeResult = `Closed with: ${result}`;
},
(reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
}
);
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
================================================
FILE: src/app/layout/bs-component/components/pagination/pagination.component.html
================================================
<div class="row">
<div class="col col-sm-6">
<div class="card mt-3">
<div class="card-header">Basic Pagination</div>
<div class="card-body">
<div class="text-uppercase text-muted fs-12">Default pagination</div>
<ngb-pagination [(page)]="defaultPagination" [collectionSize]="70"></ngb-pagination>
<div class="text-uppercase text-muted fs-12">directionLinks = false</div>
<ngb-pagination
[(page)]="defaultPagination"
[collectionSize]="70"
[directionLinks]="false"
></ngb-pagination>
<div class="text-uppercase text-muted fs-12">boundaryLinks = true</div>
<ngb-pagination
[(page)]="defaultPagination"
[boundaryLinks]="true"
[collectionSize]="70"
></ngb-pagination>
<div class="alert alert-info"><b>Current page: </b>{{ defaultPagination }}</div>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card mt-3">
<div class="card-header">Advanced Pagination</div>
<div class="card-body">
<div class="text-uppercase text-muted fs-12">maxSize = 5, rotate = false</div>
<ngb-pagination
[(page)]="advancedPagination"
[boundaryLinks]="true"
[collectionSize]="120"
[maxSize]="5"
></ngb-pagination>
<div class="text-uppercase text-muted fs-12">maxSize = 5, rotate = true</div>
<ngb-pagination
[(page)]="advancedPagination"
[boundaryLinks]="true"
[collectionSize]="120"
[maxSize]="5"
[rotate]="true"
></ngb-pagination>
<div class="text-uppercase text-muted fs-12">maxSize = 5, rotate = true, ellipses = false</div>
<ngb-pagination
[(page)]="advancedPagination"
[boundaryLinks]="true"
[collectionSize]="120"
[ellipses]="false"
[maxSize]="5"
[rotate]="true"
></ngb-pagination>
<div class="alert alert-info"><b>Current page: </b>{{ advancedPagination }}</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-sm-6">
<div class="card mt-3">
<div class="card-header">Pagination size</div>
<div class="card-body">
<ngb-pagination [(page)]="paginationSize" [collectionSize]="50" size="lg"></ngb-pagination>
<ngb-pagination [(page)]="paginationSize" [collectionSize]="50"></ngb-pagination>
<ngb-pagination [(page)]="paginationSize" [collectionSize]="50" size="sm"></ngb-pagination>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card mt-3">
<div class="card-header">Disabled pagination</div>
<div class="card-body">
<p>Pagination control can be disabled:</p>
<ngb-pagination
[(page)]="disabledPagination"
[collectionSize]="70"
[disabled]="isDisabled"
></ngb-pagination>
<hr />
<button (click)="toggleDisabled()" class="btn btn-outline-primary">
Toggle disabled
</button>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/pagination/pagination.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/pagination/pagination.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PaginationComponent } from './pagination.component';
describe('PaginationComponent', () => {
let component: PaginationComponent;
let fixture: ComponentFixture<PaginationComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NgbModule],
declarations: [PaginationComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PaginationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/pagination/pagination.component.ts
================================================
import { Component } from '@angular/core';
@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent {
defaultPagination: number;
advancedPagination: number;
paginationSize: number;
disabledPagination: number;
isDisabled: boolean;
constructor() {
this.defaultPagination = 1;
this.advancedPagination = 1;
this.paginationSize = 1;
this.disabledPagination = 1;
this.isDisabled = true;
}
toggleDisabled() {
this.isDisabled = !this.isDisabled;
}
}
================================================
FILE: src/app/layout/bs-component/components/pop-over/pop-over.component.html
================================================
<div class="card mt-3">
<div class="card-header">
Pop over
</div>
<div class="card-body">
<button
class="btn btn-secondary"
ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"
popoverTitle="Popover on top"
type="button"
>
Popover on top
</button>
<button
class="btn btn-secondary"
ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="right"
popoverTitle="Popover on right"
type="button"
>
Popover on right
</button>
<button
class="btn btn-secondary"
ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="bottom"
popoverTitle="Popover on bottom"
type="button"
>
Popover on bottom
</button>
<button
class="btn btn-secondary"
ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="left"
popoverTitle="Popover on left"
type="button"
>
Popover on left
</button>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/pop-over/pop-over.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/pop-over/pop-over.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { PopOverComponent } from './pop-over.component';
describe('PopOverComponent', () => {
let component: PopOverComponent;
let fixture: ComponentFixture<PopOverComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [PopOverComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PopOverComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/pop-over/pop-over.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pop-over',
templateUrl: './pop-over.component.html',
styleUrls: ['./pop-over.component.scss']
})
export class PopOverComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/components/progressbar/progressbar.component.html
================================================
<div class="card mt-3">
<div class="card-header">Progressbar</div>
<div class="card-body">
<p>
<ngb-progressbar [value]="50" type="info"></ngb-progressbar>
</p>
<p>
<ngb-progressbar [max]="200" [value]="150" showValue="true" type="warning"></ngb-progressbar>
</p>
<p>
<ngb-progressbar [striped]="true" [value]="100" type="danger"></ngb-progressbar>
</p>
<p>
<ngb-progressbar [value]="25" type="success">25</ngb-progressbar>
</p>
<p>
<ngb-progressbar [value]="50" type="info">Copying file <b>2 of 4</b>...</ngb-progressbar>
</p>
<p>
<ngb-progressbar [animated]="true" [striped]="true" [value]="75" type="warning"><i>50%</i></ngb-progressbar>
</p>
<p class="mb-0">
<ngb-progressbar [striped]="true" [value]="100" type="danger">Completed!</ngb-progressbar>
</p>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/progressbar/progressbar.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/progressbar/progressbar.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ProgressbarComponent } from './progressbar.component';
describe('ProgressbarComponent', () => {
let component: ProgressbarComponent;
let fixture: ComponentFixture<ProgressbarComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NgbModule],
declarations: [ProgressbarComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProgressbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/progressbar/progressbar.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-progressbar',
templateUrl: './progressbar.component.html',
styleUrls: ['./progressbar.component.scss']
})
export class ProgressbarComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/components/rating/rating.component.html
================================================
<div class="card">
<div class="card-header">Rating (<strong>Basic demo</strong>)</div>
<div class="card-body">
<ngb-rating [(rate)]="currentRate"></ngb-rating>
<hr />
<pre>Rate: <b>{{currentRate}}</b></pre>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/rating/rating.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/rating/rating.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { BsComponentModule } from '../../bs-component.module';
import { RatingComponent } from './rating.component';
describe('RatingComponent', () => {
let component: RatingComponent;
let fixture: ComponentFixture<RatingComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [BsComponentModule, RouterTestingModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RatingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/rating/rating.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-rating',
templateUrl: './rating.component.html',
styleUrls: ['./rating.component.scss']
})
export class RatingComponent implements OnInit {
currentRate = 8;
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/components/tabs/tabs.component.html
================================================
<div class="row mt-3">
<div class="col-sm-6">
<div class="card">
<div class="card-header">Tabset</div>
<div class="card-body">
<ngb-tabset>
<ngb-tab title="Simple">
<ng-template ngbTabContent>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
<ng-template ngbTabContent>
<p>
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
accusamus tattooed echo park.
</p>
</ng-template>
</ngb-tab>
<ngb-tab [disabled]="true" title="Disabled">
<ng-template ngbTabContent>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">Pills</div>
<div class="card-body">
<ngb-tabset type="pills">
<ngb-tab title="Simple">
<ng-template ngbTabContent>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
<ng-template ngbTabContent
>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
<p>
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
accusamus tattooed echo park.
</p>
</ng-template>
</ngb-tab>
<ngb-tab [disabled]="true" title="Disabled">
<ng-template ngbTabContent>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/tabs/tabs.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/tabs/tabs.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TabsComponent } from './tabs.component';
describe('TabsComponent', () => {
let component: TabsComponent;
let fixture: ComponentFixture<TabsComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NgbModule],
declarations: [TabsComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TabsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/tabs/tabs.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.scss']
})
export class TabsComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-component/components/timepicker/timepicker.component.html
================================================
<div class="row mt-3">
<div class="col-sm-6">
<div class="card">
<div class="card-header">Timepicker (<b>Default</b>)</div>
<div class="card-body">
<ngb-timepicker [(ngModel)]="defaultTime"></ngb-timepicker>
<div class="alert alert-info"><b>Selected time: </b>{{ defaultTime | json }}</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">Timepicker (<b>Default</b>)</div>
<div class="card-body">
<ngb-timepicker [(ngModel)]="meridianTime" [meridian]="meridian"></ngb-timepicker>
<button (click)="toggleMeridian()" class="btn btn-sm btn-outline-{{ meridian ? 'success' : 'danger' }}">
Meridian - {{ meridian ? 'ON' : 'OFF' }}
</button>
<div class="alert alert-info mt-3 mb-0"><b>Selected time: </b>{{ meridianTime | json }}</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">Timepicker (<b>Seconds</b>)</div>
<div class="card-body">
<ngb-timepicker [(ngModel)]="SecondsTime" [seconds]="seconds"></ngb-timepicker>
<button (click)="toggleSeconds()" class="btn btn-sm btn-outline-{{ seconds ? 'success' : 'danger' }}">
Seconds - {{ seconds ? 'ON' : 'OFF' }}
</button>
<div class="alert alert-info mt-3 mb-0"><b>Selected time: </b>{{ SecondsTime | json }}</div>
</div>
</div>
</div>
<div class="col-sm-6 mt-3">
<div class="card">
<div class="card-header">Timepicker (<b>Custom Step</b>)</div>
<div class="card-body">
<ngb-timepicker
[(ngModel)]="customTime"
[hourStep]="hourStep"
[minuteStep]="minuteStep"
[secondStep]="secondStep"
[seconds]="true"
></ngb-timepicker>
<div class="row">
<div class="col-sm-4">
<label for="changeHourStep">Hour Step</label>
<input [(ngModel)]="hourStep" class="form-control" type="number" />
</div>
<div class="col-sm-4">
<label for="changeMinuteStep">Minute Step</label>
<input [(ngModel)]="minuteStep" class="form-control" type="number" />
</div>
<div class="col-sm-4">
<label for="changeSecondStep">Second Step</label>
<input [(ngModel)]="secondStep" class="form-control" type="number" />
</div>
</div>
<div class="alert alert-info mt-3 mb-0"><b>Selected time: </b>{{ customTime | json }}</div>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/timepicker/timepicker.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/timepicker/timepicker.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TimepickerComponent } from './timepicker.component';
describe('TimepickerComponent', () => {
let component: TimepickerComponent;
let fixture: ComponentFixture<TimepickerComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [FormsModule, NgbModule],
declarations: [TimepickerComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TimepickerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/timepicker/timepicker.component.ts
================================================
import { Component } from '@angular/core';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-timepicker',
templateUrl: './timepicker.component.html',
styleUrls: ['./timepicker.component.scss']
})
export class TimepickerComponent {
defaultTime = { hour: 13, minute: 30 };
meridianTime = { hour: 13, minute: 30 };
meridian = true;
SecondsTime: NgbTimeStruct = { hour: 13, minute: 30, second: 30 };
seconds = true;
customTime: NgbTimeStruct = { hour: 13, minute: 30, second: 0 };
hourStep = 1;
minuteStep = 15;
secondStep = 30;
toggleSeconds() {
this.seconds = !this.seconds;
}
toggleMeridian() {
this.meridian = !this.meridian;
}
}
================================================
FILE: src/app/layout/bs-component/components/tooltip/tooltip.component.html
================================================
<div class="card">
<div class="card-header">
Tooltip
</div>
<div class="card-body">
<button class="btn btn-secondary" ngbTooltip="Tooltip on top" placement="top" type="button">
Tooltip on top
</button>
<button class="btn btn-secondary" ngbTooltip="Tooltip on right" placement="right" type="button">
Tooltip on right
</button>
<button class="btn btn-secondary" ngbTooltip="Tooltip on bottom" placement="bottom" type="button">
Tooltip on bottom
</button>
<button class="btn btn-secondary" ngbTooltip="Tooltip on left" placement="left" type="button">
Tooltip on left
</button>
<ng-template #StaticTipContent><em>Tooltip</em> <u>with</u> <b>HTML</b></ng-template>
<button [ngbTooltip]="StaticTipContent" class="btn btn-secondary" data-html="true" type="button">
Tooltip with HTML
</button>
</div>
</div>
================================================
FILE: src/app/layout/bs-component/components/tooltip/tooltip.component.scss
================================================
================================================
FILE: src/app/layout/bs-component/components/tooltip/tooltip.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { BsComponentModule } from '../../bs-component.module';
import { TooltipComponent } from './tooltip.component';
describe('TooltipComponent', () => {
let component: TooltipComponent;
let fixture: ComponentFixture<TooltipComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [BsComponentModule, RouterTestingModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TooltipComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-component/components/tooltip/tooltip.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-tooltip',
templateUrl: './tooltip.component.html',
styleUrls: ['./tooltip.component.scss']
})
export class TooltipComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-element/bs-element-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BsElementComponent } from './bs-element.component';
const routes: Routes = [
{
path: '',
component: BsElementComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BsElementRoutingModule {}
================================================
FILE: src/app/layout/bs-element/bs-element.component.html
================================================
<div [@routerTransition]>
<app-page-header [heading]="'Bootstrap Elements'" [icon]="'fa-desktop'"></app-page-header>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called a
jumbotron and three supporting pieces of content. Use it as a starting point to create something more
unique.
</p>
<p>
<a class="btn btn-primary btn-lg" href="javascript:void(0)" role="button">Learn more »</a>
</p>
</div>
<div class="page-header">
<h1>Buttons</h1>
<hr />
</div>
<p>
<button class="btn btn-lg btn-default" type="button">Default</button>
<button class="btn btn-lg btn-primary" type="button">Primary</button>
<button class="btn btn-lg btn-secondary" type="button">Secondary</button>
<button class="btn btn-lg btn-success" type="button">Success</button>
<button class="btn btn-lg btn-info" type="button">Info</button>
<button class="btn btn-lg btn-warning" type="button">Warning</button>
<button class="btn btn-lg btn-danger" type="button">Danger</button>
<button class="btn btn-lg btn-link" type="button">Link</button>
</p>
<p>
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>
</p>
<p>
<button class="btn btn-sm btn-default" type="button">Default</button>
<button class="btn btn-sm btn-primary" type="button">Primary</button>
<button class="btn btn-sm btn-secondary" type="button">Secondary</button>
<button class="btn btn-sm btn-success" type="button">Success</button>
<button class="btn btn-sm btn-info" type="button">Info</button>
<button class="btn btn-sm btn-warning" type="button">Warning</button>
<button class="btn btn-sm btn-danger" type="button">Danger</button>
<button class="btn btn-sm btn-link" type="button">Link</button>
</p>
<br />
<div class="page-header">
<h1>Thumbnails</h1>
<hr />
</div>
<img alt="" class="img-thumbnail" src="http://placehold.it/400x400" />
<div class="page-header">
<h1>Dropdown menus</h1>
<hr />
</div>
<div class="dropdown theme-dropdown clearfix" ngbDropdown>
<button class="btn btn-secondary" ngbDropdownToggle>
Dropdown
</button>
<div aria-labelledby="dropdownMenu1" class="dropdown-menu" ngbDropdownMenu>
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</div>
<br />
<div class="page-header">
<h1>Navbars</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="text" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="text" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="page-header">
<h1>Alerts</h1>
<hr />
</div>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning"><strong>Warning!</strong> Best check yo self, you're not looking too good.</div>
<div class="alert alert-danger"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>
<div class="page-header">
<h1>Progress bars</h1>
<hr />
</div>
<div class="progress">
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25"
class="progress-bar"
role="progressbar"
style="width: 25%; height: 10px;"
></div>
</div>
<br />
<div class="progress">
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25"
class="progress-bar bg-success"
role="progressbar"
style="width: 25%;"
></div>
</div>
<br />
<div class="progress">
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="50"
class="progress-bar bg-info"
role="progressbar"
style="width: 50%;"
></div>
</div>
<br />
<div class="progress">
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="15"
class="progress-bar"
role="progressbar"
style="width: 15%;"
></div>
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="30"
class="progress-bar bg-success"
role="progressbar"
style="width: 30%;"
></div>
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="20"
class="progress-bar bg-info"
role="progressbar"
style="width: 20%;"
></div>
</div>
<br />
<div class="progress">
<div
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="100"
class="progress-bar progress-bar-striped bg-danger"
role="progressbar"
style="width: 100%;"
></div>
</div>
<br />
<div class="page-header">
<h1>List groups</h1>
<hr />
</div>
<div class="row">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="list-group">
<a class="list-group-item active" href="javascript:void(0)">Cras justo odio</a>
<a class="list-group-item" href="javascript:void(0)">Dapibus ac facilisis in</a>
<a class="list-group-item" href="javascript:void(0)">Morbi leo risus</a>
<a class="list-group-item" href="javascript:void(0)">Porta ac consectetur ac</a>
<a class="list-group-item" href="javascript:void(0)">Vestibulum at eros</a>
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="list-group">
<a class="list-group-item active" href="javascript:void(0)">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
</a>
<a class="list-group-item" href="javascript:void(0)">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
</a>
<a class="list-group-item" href="javascript:void(0)">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</p>
</a>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
<div class="page-header">
<h1>Cards</h1>
<hr />
</div>
<div class="row">
<div class="col-sm-4">
<div class="card text-white bg-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-white bg-secondary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="card text-white bg-success mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Success card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-white bg-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Danger card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="card text-white bg-warning mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Warning card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-white bg-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Info card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="card bg-light mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Light card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="card text-white bg-dark mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Dark card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="card mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Dark card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
</div>
================================================
FILE: src/app/layout/bs-element/bs-element.component.scss
================================================
================================================
FILE: src/app/layout/bs-element/bs-element.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { BsElementComponent } from './bs-element.component';
import { BsElementModule } from './bs-element.module';
describe('BsElementComponent', () => {
let component: BsElementComponent;
let fixture: ComponentFixture<BsElementComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [BsElementModule, RouterTestingModule, BrowserAnimationsModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BsElementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-element/bs-element.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
@Component({
selector: 'app-bs-element',
templateUrl: './bs-element.component.html',
styleUrls: ['./bs-element.component.scss'],
animations: [routerTransition()]
})
export class BsElementComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/bs-element/bs-element.module.spec.ts
================================================
import { BsElementModule } from './bs-element.module';
describe('BsElementModule', () => {
let bsElementModule: BsElementModule;
beforeEach(() => {
bsElementModule = new BsElementModule();
});
it('should create an instance', () => {
expect(bsElementModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/bs-element/bs-element.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PageHeaderModule } from './../../shared';
import { BsElementRoutingModule } from './bs-element-routing.module';
import { BsElementComponent } from './bs-element.component';
@NgModule({
imports: [CommonModule, BsElementRoutingModule, PageHeaderModule, NgbModule],
declarations: [BsElementComponent]
})
export class BsElementModule {}
================================================
FILE: src/app/layout/charts/charts-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartsComponent } from './charts.component';
const routes: Routes = [
{
path: '',
component: ChartsComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ChartsRoutingModule {}
================================================
FILE: src/app/layout/charts/charts.component.html
================================================
<div [@routerTransition]>
<app-page-header [heading]="'Charts'" [icon]="'fa-bar-chart-o'"></app-page-header>
<div class="row">
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Bar Chart
</div>
<div class="card-body">
<canvas
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"
[type]="barChartType"
[datasets]="barChartData"
[labels]="barChartLabels"
[legend]="barChartLegend"
[options]="barChartOptions"
baseChart
>
</canvas>
</div>
<div class="card-footer">
<button (click)="randomize()" class="btn btn-info btn-sm">Update</button>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Doughnut Chart
</div>
<div class="card-body">
<canvas
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"
[type]="doughnutChartType"
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
baseChart
height="180px"
>
</canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Radar Chart
</div>
<div class="card-body">
<canvas
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"
[type]="radarChartType"
[datasets]="radarChartData"
[labels]="radarChartLabels"
baseChart
height="150px"
>
</canvas>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Pie Chart
</div>
<div class="card-body">
<canvas
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"
[type]="pieChartType"
[data]="pieChartData"
baseChart
height="150px"
>
</canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Polar Area Chart
</div>
<div class="card-body">
<canvas
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"
[type]="polarAreaChartType"
[data]="polarAreaChartData"
[labels]="polarAreaChartLabels"
[legend]="polarAreaLegend"
baseChart
height="130px"
>
</canvas>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Line Chart
</div>
<div class="card-body">
<!--[colors]="lineChartColors"-->
<canvas
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"
[type]="lineChartType"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[legend]="lineChartLegend"
[options]="lineChartOptions"
baseChart
height="130"
>
</canvas>
</div>
</div>
</div>
</div>
</div>
================================================
FILE: src/app/layout/charts/charts.component.scss
================================================
================================================
FILE: src/app/layout/charts/charts.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { ChartsComponent } from './charts.component';
import { ChartsModule } from './charts.module';
describe('ChartsComponent', () => {
let component: ChartsComponent;
let fixture: ComponentFixture<ChartsComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [ChartsModule, RouterTestingModule, BrowserAnimationsModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChartsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/charts/charts.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
import { ChartData, ChartType } from "chart.js";
@Component({
selector: 'app-charts',
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.scss'],
animations: [routerTransition()]
})
export class ChartsComponent implements OnInit {
// bar chart
public barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType: ChartType;
public barChartLegend: boolean;
public barChartData: any[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];
// Doughnut
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
public doughnutChartData: ChartData<'doughnut'> = {
labels: this.doughnutChartLabels,
datasets: [
{ data: [ 350, 450, 100 ] },
{ data: [ 50, 150, 120 ] },
{ data: [ 250, 130, 70 ] }
]
};
public doughnutChartType: ChartType = 'doughnut';
// Radar
public radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
public radarChartData: any = [
{ data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' }
];
public radarChartType: ChartType;
// Pie
// public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
// public pieChartData: number[] = [300, 500, 100];
public pieChartData: ChartData<'pie', number[], string | string[]> = {
labels: [ [ 'Download', 'Sales' ], [ 'In', 'Store', 'Sales' ], 'Mail Sales' ],
datasets: [ {
data: [ 300, 500, 100 ]
} ]
};
public pieChartType: ChartType;
// PolarArea
public polarAreaChartLabels: string[] = [
'Download Sales',
'In-Store Sales',
'Mail Sales',
'Telesales',
'Corporate Sales'
];
public polarAreaChartData: ChartData<'polarArea'> = {
labels: this.polarAreaChartLabels,
datasets: [ {
data: [ 300, 500, 100, 40, 120 ],
label: 'Series 1'
} ]
};
public polarAreaLegend: boolean;
public polarAreaChartType: ChartType;
// lineChart
public lineChartData: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
{ data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' }
];
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions: any = {
responsive: true
};
public lineChartColors: Array<any> = [
{
// grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{
// dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{
// grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegend: boolean;
public lineChartType: ChartType;
constructor() {}
// events
public chartClicked(e: any): void {
// console.log(e);
}
public chartHovered(e: any): void {
// console.log(e);
}
public randomize(): void {
// Only Change 3 values
const data = [Math.round(Math.random() * 100), 59, 80, Math.random() * 100, 56, Math.random() * 100, 40];
const clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = data;
this.barChartData = clone;
/**
* (My guess), for Angular to recognize the change in the dataset
* it has to change the dataset variable directly,
* so one way around it, is to clone the data, change it and then
* assign it;
*/
}
ngOnInit() {
this.barChartType = 'bar';
this.barChartLegend = true;
// this.doughnutChartType = 'doughnut';
this.radarChartType = 'radar';
this.pieChartType = 'pie';
this.polarAreaLegend = true;
this.polarAreaChartType = 'polarArea';
this.lineChartLegend = true;
this.lineChartType = 'line';
}
}
================================================
FILE: src/app/layout/charts/charts.module.spec.ts
================================================
import { ChartsModule } from './charts.module';
describe('ChartsModule', () => {
let chartsModule: ChartsModule;
beforeEach(() => {
chartsModule = new ChartsModule();
});
it('should create an instance', () => {
expect(chartsModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/charts/charts.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgChartsModule as Ng2Charts } from 'ng2-charts';
import { PageHeaderModule } from '../../shared';
import { ChartsRoutingModule } from './charts-routing.module';
import { ChartsComponent } from './charts.component';
@NgModule({
imports: [CommonModule, Ng2Charts, ChartsRoutingModule, PageHeaderModule],
declarations: [ChartsComponent]
})
export class ChartsModule {}
================================================
FILE: src/app/layout/components/header/header.component.html
================================================
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href="#">SB Admin Ng17 BS5</a>
<button (click)="toggleSidebar()" class="navbar-toggler" type="button">
<i aria-hidden="true" class="fa fa-bars text-muted"></i>
</button>
<div class="collapse navbar-collapse">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="{{ 'Search' | translate }}" type="text" />
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item d-none d-xl-block">
<a
class="nav-link btn mt-1"
href="https://github.com/start-angular/SB-Admin-BS4-Angular-7/archive/master.zip"
role="button"
style="padding: 0.375rem 1rem !important; border-color: #999;"
>
{{ 'Download Now' | translate }}
</a>
</li>
<li class="nav-item">
<a
(click)="rltAndLtr()"
class="nav-link mt-1"
href="javascript:void(0)"
style="padding: 0.375rem 1rem !important; border-color: #999;"
>
RTL/LTR
</a>
</li>
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link" href="javascript:void(0)" ngbDropdownToggle>
<i class="fa fa-envelope"></i> <b class="caret"></b><span class="sr-only">(current)</span>
</a>
<ul class="dropdown-menu-right messages" ngbDropdownMenu>
<li class="media">
<img
alt="Generic placeholder image"
class="d-flex align-self-center mr-3"
src="http://i.huffpost.com/gadgets/slideshows/461162/slide_461162_6224974_sq50.jpg"
/>
<div class="media-body">
<h5 class="mt-0 mb-1">John Smith</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p class="last">Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</li>
<li class="media">
<img
alt="Generic placeholder image"
class="d-flex align-self-center mr-3"
src="http://i.huffpost.com/gadgets/slideshows/461162/slide_461162_6224974_sq50.jpg"
/>
<div class="media-body">
<h5 class="mt-0 mb-1">John Smith</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p class="last">Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</li>
<li class="media">
<img
alt="Generic placeholder image"
class="d-flex align-self-center mr-3"
src="http://i.huffpost.com/gadgets/slideshows/461162/slide_461162_6224974_sq50.jpg"
/>
<div class="media-body">
<h5 class="mt-0 mb-1">John Smith</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p class="last">Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</li>
</ul>
</li>
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link" href="javascript:void(0)" ngbDropdownToggle>
<i class="fa fa-bell"></i> <b class="caret"></b><span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu-right" ngbDropdownMenu>
<a class="dropdown-item" href="javascript:void(0)">
{{ 'Pending Task' | translate }} <span class="badge badge-info">6</span>
</a>
<a class="dropdown-item" href="javascript:void(0)">
{{ 'In queue' | translate }} <span class="badge badge-info"> 13</span>
</a>
<a class="dropdown-item" href="javascript:void(0)">
{{ 'Mail' | translate }} <span class="badge badge-info"> 45</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">
{{ 'View All' | translate }}
</a>
</div>
</li>
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link" href="javascript:void(0)" ngbDropdownToggle>
<i class="fa fa-language"></i> {{ 'Language' | translate }} <b class="caret"></b>
</a>
<div class="dropdown-menu-right" ngbDropdownMenu>
<a (click)="changeLang('en')" class="dropdown-item" href="javascript:void(0)">
{{ 'English' | translate }}
</a>
<a (click)="changeLang('fr')" class="dropdown-item" href="javascript:void(0)">
{{ 'French' | translate }}
</a>
<a (click)="changeLang('ur')" class="dropdown-item" href="javascript:void(0)">
{{ 'Urdu' | translate }}
</a>
<a (click)="changeLang('es')" class="dropdown-item" href="javascript:void(0)">
{{ 'Spanish' | translate }}
</a>
<a (click)="changeLang('it')" class="dropdown-item" href="javascript:void(0)">
{{ 'Italian' | translate }}
</a>
<a (click)="changeLang('fa')" class="dropdown-item" href="javascript:void(0)">
{{ 'Farsi' | translate }}
</a>
<a (click)="changeLang('de')" class="dropdown-item" href="javascript:void(0)">
{{ 'German' | translate }}
</a>
<a (click)="changeLang('zh-CHS')" class="dropdown-item" href="javascript:void(0)">
{{ 'Simplified Chinese' | translate }}
</a>
</div>
</li>
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link" href="javascript:void(0)" ngbDropdownToggle>
<i class="fa fa-user"></i> John Smith <b class="caret"></b>
</a>
<div class="dropdown-menu-right" ngbDropdownMenu>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-fw fa-user"></i> {{ 'Profile' | translate }}
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-fw fa-envelope"></i> {{ 'Inbox' | translate }}
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-fw fa-gear"></i> {{ 'Settings' | translate }}
</a>
<a (click)="onLoggedout()" [routerLink]="['/login']" class="dropdown-item">
<i class="fa fa-fw fa-power-off"></i> {{ 'Log Out' | translate }}
</a>
</div>
</li>
</ul>
</div>
</nav>
================================================
FILE: src/app/layout/components/header/header.component.scss
================================================
$topnav-background-color: #222;
:host {
.navbar {
background-color: $topnav-background-color;
.navbar-brand {
color: #fff;
}
.nav-item > a {
color: #999;
&:hover {
color: #fff;
}
}
.ml-auto {
margin-left: auto;
}
.navbar-brand {
width: 235px;
margin-left: 15px;
}
}
.messages {
width: 300px;
.media {
border-bottom: 1px solid #ddd;
padding: 5px 10px;
&:last-child {
border-bottom: none;
}
}
.media-body {
h5 {
font-size: 13px;
font-weight: 600;
}
.small {
margin: 0;
}
.last {
font-size: 12px;
margin: 0;
}
}
}
}
================================================
FILE: src/app/layout/components/header/header.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule } from '@ngx-translate/core';
import { LayoutModule } from '../../layout.module';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [LayoutModule, RouterTestingModule, TranslateModule.forRoot()]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/components/header/header.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
public pushRightClass: string;
constructor(private translate: TranslateService, public router: Router) {
this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd && window.innerWidth <= 992 && this.isToggled()) {
this.toggleSidebar();
}
});
}
ngOnInit() {
this.pushRightClass = 'push-right';
}
isToggled(): boolean {
const dom: Element = document.querySelector('body');
return dom.classList.contains(this.pushRightClass);
}
toggleSidebar() {
const dom: any = document.querySelector('body');
dom.classList.toggle(this.pushRightClass);
}
rltAndLtr() {
const dom: any = document.querySelector('body');
dom.classList.toggle('rtl');
}
onLoggedout() {
localStorage.removeItem('isLoggedin');
}
changeLang(language: string) {
this.translate.use(language);
}
}
================================================
FILE: src/app/layout/components/sidebar/sidebar.component.html
================================================
<nav [ngClass]="{ sidebarPushRight: isActive, collapsed: collapsed }" class="sidebar">
<div class="list-group">
<a [routerLinkActive]="['router-link-active']" class="list-group-item" routerLink="/dashboard">
<i class="fa fa-fw fa-dashboard"></i>
<span>{{ 'Dashboard' | translate }}</span>
</a>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/charts']" class="list-group-item">
<i class="fa fa-fw fa-bar-chart-o"></i>
<span>{{ 'Charts' | translate }}</span>
</a>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/tables']" class="list-group-item">
<i class="fa fa-fw fa-table"></i>
<span>{{ 'Tables' | translate }}</span>
</a>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/forms']" class="list-group-item">
<i class="fa fa-fw fa-edit"></i>
<span>{{ 'Forms' | translate }}</span>
</a>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/bs-element']" class="list-group-item">
<i class="fa fa-fw fa-desktop"></i>
<span>{{ 'Bootstrap Element' | translate }}</span>
</a>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/grid']" class="list-group-item">
<i class="fa fa-fw fa-wrench"></i>
<span>{{ 'Bootstrap Grid' | translate }}</span>
</a>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/components']" class="list-group-item">
<i class="fa fa-th-list"></i>
<span>{{ 'Component' | translate }}</span>
</a>
<div class="nested-menu">
<a (click)="addExpandClass('pages')" class="list-group-item">
<i class="fa fa-plus"></i>
<span>{{ 'Menu' | translate }}</span>
</a>
<li [class.expand]="showMenu === 'pages'" class="nested">
<ul class="submenu">
<li>
<a href="javascript:void(0)">
<i class="fa fa-monument"></i>
<span>{{ 'Submenu' | translate }}</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-monument"></i>
<span>{{ 'Submenu' | translate }}</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-monument"></i>
<span>{{ 'Submenu' | translate }}</span>
</a>
</li>
</ul>
</li>
</div>
<a [routerLinkActive]="['router-link-active']" [routerLink]="['/blank-page']" class="list-group-item">
<i class="fa fa-file-o"></i>
<span>{{ 'Blank Page' | translate }}</span>
</a>
<a class="list-group-item" href="http://www.strapui.com/">
<i class="fa fa-caret-down"></i>
<span>{{ 'More Themes' | translate }}</span>
</a>
<div class="header-fields">
<a (click)="rltAndLtr()" class="list-group-item">
<span><i class="fa fa-arrows-h"></i> RTL/LTR</span>
</a>
<div class="nested-menu">
<a (click)="addExpandClass('languages')" class="list-group-item">
<span><i class="fa fa-language"></i> {{ 'Language' | translate }} <b class="caret"></b></span>
</a>
<li [class.expand]="showMenu === 'languages'" class="nested">
<ul class="submenu">
<li>
<a (click)="changeLang('en')" href="javascript:void(0)">
{{ 'English' | translate }}
</a>
</li>
<li>
<a (click)="changeLang('fr')" href="javascript:void(0)">
{{ 'French' | translate }}
</a>
</li>
<li>
<a (click)="changeLang('ur')" href="javascript:void(0)">
{{ 'Urdu' | translate }}
</a>
</li>
<li>
<a (click)="changeLang('es')" href="javascript:void(0)">
{{ 'Spanish' | translate }}
</a>
</li>
<li>
<a (click)="changeLang('it')" href="javascript:void(0)">
{{ 'Italian' | translate }}
</a>
</li>
<li>
<a (click)="changeLang('fa')" href="javascript:void(0)">
{{ 'Farsi' | translate }}
</a>
</li>
<li>
<a (click)="changeLang('de')" href="javascript:void(0)">
{{ 'German' | translate }}
</a>
</li>
</ul>
</li>
</div>
<div class="nested-menu">
<a (click)="addExpandClass('profile')" class="list-group-item">
<span><i class="fa fa-user"></i> John Smith</span>
</a>
<li [class.expand]="showMenu === 'profile'" class="nested">
<ul class="submenu">
<li>
<a href="javascript:void(0)">
<span><i class="fa fa-fw fa-user"></i> {{ 'Profile' | translate }}</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span><i class="fa fa-fw fa-envelope"></i> {{ 'Inbox' | translate }}</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span><i class="fa fa-fw fa-gear"></i> {{ 'Settings' | translate }}</span>
</a>
</li>
<li>
<a (click)="onLoggedout()" [routerLink]="['/login']">
<span><i class="fa fa-fw fa-power-off"></i> {{ 'Log Out' | translate }}</span>
</a>
</li>
</ul>
</li>
</div>
</div>
</div>
<div (click)="toggleCollapsed()" [ngClass]="{ collapsed: collapsed }" class="toggle-button">
<i class="fa fa-fw fa-angle-double-{{ collapsed ? 'right' : 'left' }}"></i>
<span>{{ 'Collapse Sidebar' | translate }}</span>
</div>
</nav>
================================================
FILE: src/app/layout/components/sidebar/sidebar.component.scss
================================================
$topnav-background-color: #222;
.sidebar {
border-radius: 0;
position: fixed;
z-index: 1000;
top: 56px;
left: 235px;
width: 235px;
margin-left: -235px;
margin-bottom: 48px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: $topnav-background-color;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
// border-top: 1px solid rgba(255,255,255,0.3);
.list-group {
a.list-group-item {
background: $topnav-background-color;
border: 0;
border-radius: 0;
color: #999;
text-decoration: none;
.fa {
margin-right: 10px;
}
}
a:hover {
background: darken($topnav-background-color, 5%);
color: #fff;
}
a.router-link-active {
background: darken($topnav-background-color, 5%);
color: #fff;
}
.header-fields {
padding-top: 10px;
> .list-group-item:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
}
}
.sidebar-dropdown {
*:focus {
border-radius: none;
border: none;
}
.panel-title {
font-size: 1rem;
height: 50px;
margin-bottom: 0;
a {
color: #999;
text-decoration: none;
font-weight: 400;
background: $topnav-background-color;
span {
position: relative;
display: block;
padding: 0.75rem 1.5rem;
padding-top: 1rem;
}
}
a:hover,
a:focus {
color: #fff;
outline: none;
outline-offset: -2px;
}
}
.panel-title:hover {
background: darken($topnav-background-color, 5%);
}
.panel-collapse {
border-radious: 0;
border: none;
.panel-body {
.list-group-item {
border-radius: 0;
background-color: $topnav-background-color;
border: 0 solid transparent;
a {
color: #999;
}
a:hover {
color: #fff;
}
}
.list-group-item:hover {
background: darken($topnav-background-color, 5%);
}
}
}
}
}
.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
display: none;
height: 0;
}
& .expand {
ul.submenu {
display: block;
list-style-type: none;
height: auto;
li {
a {
color: #fff;
padding: 10px;
display: block;
}
}
}
}
}
@media screen and (max-width: 992px) {
.sidebar {
top: 54px;
left: 0px;
}
}
@media print {
.sidebar {
display: none !important;
}
}
@media (min-width: 992px) {
.header-fields {
display: none;
}
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
}
.toggle-button {
position: fixed;
width: 236px;
cursor: pointer;
padding: 12px;
bottom: 0;
color: #999;
background: #212529;
i {
font-size: 23px;
}
&:hover {
background: darken($topnav-background-color, 5%);
color: #fff;
}
border-top: 1px solid #999;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.collapsed {
width: 60px;
span {
display: none;
}
}
================================================
FILE: src/app/layout/components/sidebar/sidebar.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule } from '@ngx-translate/core';
import { LayoutModule } from '../../layout.module';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [LayoutModule, RouterTestingModule, TranslateModule.forRoot()]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/components/sidebar/sidebar.component.ts
================================================
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
isActive: boolean;
collapsed: boolean;
showMenu: string;
pushRightClass: string;
@Output() collapsedEvent = new EventEmitter<boolean>();
constructor(private translate: TranslateService, public router: Router) {
this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd && window.innerWidth <= 992 && this.isToggled()) {
this.toggleSidebar();
}
});
}
ngOnInit() {
this.isActive = false;
this.collapsed = false;
this.showMenu = '';
this.pushRightClass = 'push-right';
}
eventCalled() {
this.isActive = !this.isActive;
}
addExpandClass(element: any) {
if (element === this.showMenu) {
this.showMenu = '0';
} else {
this.showMenu = element;
}
}
toggleCollapsed() {
this.collapsed = !this.collapsed;
this.collapsedEvent.emit(this.collapsed);
}
isToggled(): boolean {
const dom: Element = document.querySelector('body');
return dom.classList.contains(this.pushRightClass);
}
toggleSidebar() {
const dom: any = document.querySelector('body');
dom.classList.toggle(this.pushRightClass);
}
rltAndLtr() {
const dom: any = document.querySelector('body');
dom.classList.toggle('rtl');
}
changeLang(language: string) {
this.translate.use(language);
}
onLoggedout() {
localStorage.removeItem('isLoggedin');
}
}
================================================
FILE: src/app/layout/dashboard/components/chat/chat.component.html
================================================
<div class="chat-panel card card-default">
<div class="card-header">
<i class="fa fa-comments fa-fw"></i>
Chat
<div class="pull-right" ngbDropdown>
<button class="btn btn-secondary btn-sm" ngbDropdownToggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li role="menuitem">
<a class="dropdown-item" href="#"> <i class="fa fa-refresh fa-fw"></i> Refresh</a>
</li>
<li role="menuitem">
<a class="dropdown-item" href="#"> <i class="fa fa-check-circle fa-fw"></i> Available</a>
</li>
<li role="menuitem">
<a class="dropdown-item" href="#"> <i class="fa fa-times fa-fw"></i> Busy</a>
</li>
<li class="divider dropdown-divider"></li>
<li role="menuitem">
<a class="dropdown-item" href="#"> <i class="fa fa-times fa-fw"></i> Busy </a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="fa fa-clock-o fa-fw"></i> Away </a>
</li>
<li class="divider"></li>
<li>
<a class="dropdown-item" href="#"> <i class="fa fa-sign-out fa-fw"></i> Sign Out </a>
</li>
</ul>
</div>
</div>
<!-- /.panel-heading -->
<div class="card-body">
<ul class="chat">
<li class="left clearfix">
<span class="chat-img pull-left">
<img alt="User Avatar" class="img-circle" src="http://placehold.it/50/55C1E7/fff" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
<small class="pull-right text-muted"> <i class="fa fa-clock-o fa-fw"></i> 12 mins ago </small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix">
<span class="chat-img pull-right">
<img alt="User Avatar" class="img-circle" src="http://placehold.it/50/FA6F57/fff" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class="text-muted"> <i class="fa fa-clock-o fa-fw"></i> 13 mins ago </small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="left clearfix">
<span class="chat-img pull-left">
<img alt="User Avatar" class="img-circle" src="http://placehold.it/50/55C1E7/fff" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
<small class="pull-right text-muted"> <i class="fa fa-clock-o fa-fw"></i> 14 mins ago </small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix">
<span class="chat-img pull-right">
<img alt="User Avatar" class="img-circle" src="http://placehold.it/50/FA6F57/fff" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class="text-muted"> <i class="fa fa-clock-o fa-fw"></i> 15 mins ago </small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
ullamcorper ligula sodales.
</p>
</div>
</li>
</ul>
</div>
<!-- /.card-body -->
<div class="card-footer">
<div class="input-group">
<input class="form-control input-sm" id="btn-input" placeholder="Type your message here..." type="text" />
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send
</button>
</span>
</div>
</div>
<!-- /.card-footer -->
</div>
================================================
FILE: src/app/layout/dashboard/components/chat/chat.component.scss
================================================
.chat-panel {
.chat-dropdown {
margin-top: -3px;
}
.chat {
.left {
img {
margin-right: 15px;
}
}
.right {
img {
margin-left: 15px;
}
}
height: 350px;
overflow-y: scroll;
margin: 0;
padding: 0;
list-style: none;
li {
margin-bottom: 10px;
margin-right: 15px;
padding-bottom: 5px;
border-bottom: 1px dotted #999;
}
}
.card-footer {
input {
padding: 3px;
}
}
}
================================================
FILE: src/app/layout/dashboard/components/chat/chat.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ChatComponent } from './chat.component';
describe('ChatComponent', () => {
let component: ChatComponent;
let fixture: ComponentFixture<ChatComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ChatComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChatComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/dashboard/components/chat/chat.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/dashboard/components/index.ts
================================================
export * from './timeline/timeline.component';
export * from './notification/notification.component';
export * from './chat/chat.component';
================================================
FILE: src/app/layout/dashboard/components/notification/notification.component.html
================================================
<div class="card-body">
<div class="list-group">
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="float-right text-muted small"><em>4 minutes ago</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="float-right text-muted small"><em>12 minutes ago</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="float-right text-muted small"><em>27 minutes ago</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="float-right text-muted small"><em>43 minutes ago</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="float-right text-muted small"><em>11:32 AM</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-bolt fa-fw"></i> Server Crashed!
<span class="float-right text-muted small"><em>11:13 AM</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-warning fa-fw"></i> Server Not Responding
<span class="float-right text-muted small"><em>10:57 AM</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-shopping-cart fa-fw"></i> New Order Placed
<span class="float-right text-muted small"><em>9:49 AM</em></span>
</a>
<a class="list-group-item clearfix d-block" href="#">
<i class="fa fa-money fa-fw"></i> Payment Received
<span class="float-right text-muted small"><em>Yesterday</em></span>
</a>
</div>
<!-- /.list-group -->
<a class="btn btn-default btn-block" href="#">View All Alerts</a>
</div>
================================================
FILE: src/app/layout/dashboard/components/notification/notification.component.scss
================================================
================================================
FILE: src/app/layout/dashboard/components/notification/notification.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NotificationComponent } from './notification.component';
describe('NotificationComponent', () => {
let component: NotificationComponent;
let fixture: ComponentFixture<NotificationComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [NotificationComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NotificationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/dashboard/components/notification/notification.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-notification',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/dashboard/components/timeline/timeline.component.html
================================================
<div class="card-body">
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="fa fa-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> 11 hours ago via Twitter</small>
</p>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis
omnis exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium,
porro voluptas suscipit facere rem dicta, debitis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur
commodi provident cumque magni voluptatem libero, quis rerum. Fugiat esse debitis optio,
tempore. Animi officiis alias, officia repellendus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est
tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad
aut recusandae minus eaque facere.
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="fa fa-bomb"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim
eaque, tenetur nam id qui vel velit similique nihil iure molestias aliquam, voluptatem totam
quaerat, magni commodi quisquam.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores
sapiente, eligendi, nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem
delectus libero, omnis ut debitis!
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="fa fa-save"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at
est molestiae excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit
nulla qui! Laborum, atque.
</p>
<hr />
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
<i class="fa fa-gear"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<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>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fuga odio quibusdam. Iure
expedita, incidunt unde quis nam! Quod, quisquam. Officia quam qui adipisci quas consequuntur
nostrum sequi. Consequuntur, commodi.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore
officia voluptas debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam,
enim incidunt quisquam maxime neque eaque.
</p>
</div>
</div>
</li>
</ul>
</div>
================================================
FILE: src/app/layout/dashboard/components/timeline/timeline.component.scss
================================================
.timeline {
position: relative;
padding: 20px 0 20px;
list-style: none;
}
.timeline:before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #eeeeee;
}
.timeline > li {
position: relative;
margin-bottom: 20px;
}
.timeline > li:before,
.timeline > li:after {
content: ' ';
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: ' ';
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
float: left;
position: relative;
width: 46%;
padding: 20px;
border: 1px solid #d4d4d4;
border-radius: 2px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
content: ' ';
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
border-top: 15px solid transparent;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}
.timeline > li > .timeline-panel:after {
content: ' ';
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.timeline > li > .timeline-badge {
z-index: 100;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
top: 16px;
left: 15px;
margin-left: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
ul.timeline > li > .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
}
================================================
FILE: src/app/layout/dashboard/components/timeline/timeline.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { TimelineComponent } from './timeline.component';
describe('TimelineComponent', () => {
let component: TimelineComponent;
let fixture: ComponentFixture<TimelineComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [TimelineComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TimelineComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/dashboard/components/timeline/timeline.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-timeline',
templateUrl: './timeline.component.html',
styleUrls: ['./timeline.component.scss']
})
export class TimelineComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/dashboard/dashboard-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
const routes: Routes = [
{
path: '',
component: DashboardComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule {}
================================================
FILE: src/app/layout/dashboard/dashboard.component.html
================================================
<div [@routerTransition]>
<h2 class="text-muted">Dashboard <small>Statistics Overview</small></h2>
<div class="row">
<div class="col-md-12">
<ngb-carousel>
<ng-template *ngFor="let slider of sliders" ngbSlide>
<img
[src]="slider.imagePath"
alt="Random first slide"
class="img-fluid mx-auto d-block"
width="100%"
/>
<div class="carousel-caption">
<h3>{{ slider.label }}</h3>
<p>{{ slider.text }}</p>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
<hr />
<div class="row">
<div class="col-xl-3 col-lg-6">
<app-stat [bgClass]="'primary'" [count]="26" [icon]="'fa-comments'" [label]="'New Comments!'"></app-stat>
</div>
<div class="col-xl-3 col-lg-6">
<app-stat [bgClass]="'warning'" [count]="12" [icon]="'fa-tasks'" [label]="'New task!'"></app-stat>
</div>
<div class="col-xl-3 col-lg-6">
<app-stat
[bgClass]="'success'"
[count]="124"
[icon]="'fa-shopping-cart'"
[label]="'New Orders!'"
></app-stat>
</div>
<div class="col-xl-3 col-lg-6">
<app-stat [bgClass]="'danger'" [count]="13" [icon]="'fa-support'" [label]="'New Tickets!'"></app-stat>
</div>
</div>
<hr />
<ngb-alert (close)="closeAlert(alert)" *ngFor="let alert of alerts" [type]="alert.type">{{
alert.message
}}</ngb-alert>
<hr />
<div class="row">
<div class="col-lg-8">
<div class="card card-default">
<div class="card-header"><i class="fa fa-clock-o fa-fw"></i> Responsive Timeline</div>
<!-- /.card-header -->
<app-timeline></app-timeline>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-4">
<div class="card card-default mb-3">
<div class="card-header"><i class="fa fa-bell fa-fw"></i> Notifications card</div>
<!-- /.card-header -->
<app-notification></app-notification>
<!-- /.card-body -->
</div>
<!-- /.card -->
<app-chat></app-chat>
<!-- /.card .chat-card -->
</div>
<!-- /.col-lg-4 -->
</div>
</div>
================================================
FILE: src/app/layout/dashboard/dashboard.component.scss
================================================
================================================
FILE: src/app/layout/dashboard/dashboard.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { DashboardComponent } from './dashboard.component';
import { DashboardModule } from './dashboard.module';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [DashboardModule, RouterTestingModule, BrowserAnimationsModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/dashboard/dashboard.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
animations: [routerTransition()]
})
export class DashboardComponent implements OnInit {
public alerts: Array<any> = [];
public sliders: Array<any> = [];
constructor() {
this.sliders.push(
{
imagePath: 'assets/images/slider1.jpg',
label: 'First slide label',
text: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
},
{
imagePath: 'assets/images/slider2.jpg',
label: 'Second slide label',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
imagePath: 'assets/images/slider3.jpg',
label: 'Third slide label',
text: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
}
);
this.alerts.push(
{
id: 1,
type: 'success',
message: `Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptates est animi quibusdam praesentium quam, et perspiciatis,
consectetur velit culpa molestias dignissimos
voluptatum veritatis quod aliquam! Rerum placeat necessitatibus, vitae dolorum`
},
{
id: 2,
type: 'warning',
message: `Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptates est animi quibusdam praesentium quam, et perspiciatis,
consectetur velit culpa molestias dignissimos
voluptatum veritatis quod aliquam! Rerum placeat necessitatibus, vitae dolorum`
}
);
}
ngOnInit() {}
public closeAlert(alert: any) {
const index: number = this.alerts.indexOf(alert);
this.alerts.splice(index, 1);
}
}
================================================
FILE: src/app/layout/dashboard/dashboard.module.spec.ts
================================================
import { DashboardModule } from './dashboard.module';
describe('DashboardModule', () => {
let dashboardModule: DashboardModule;
beforeEach(() => {
dashboardModule = new DashboardModule();
});
it('should create an instance', () => {
expect(dashboardModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/dashboard/dashboard.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgbAlertModule, NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
import { StatModule } from '../../shared';
import { ChatComponent, NotificationComponent, TimelineComponent } from './components';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
@NgModule({
imports: [CommonModule, NgbCarouselModule, NgbAlertModule, DashboardRoutingModule, StatModule],
declarations: [DashboardComponent, TimelineComponent, NotificationComponent, ChatComponent]
})
export class DashboardModule {}
================================================
FILE: src/app/layout/form/form-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormComponent } from './form.component';
const routes: Routes = [
{
path: '',
component: FormComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FormRoutingModule {}
================================================
FILE: src/app/layout/form/form.component.html
================================================
<div [@routerTransition]>
<app-page-header [heading]="'Forms'" [icon]="'fa-edit'"></app-page-header>
<div class="row">
<div class="col-lg-6">
<form role="form">
<fieldset class="form-group">
<label>Text Input</label>
<input class="form-control" />
<p class="help-block">Example block-level help text here.</p>
</fieldset>
<fieldset class="form-group">
<label>Text Input with Placeholder</label>
<input class="form-control" placeholder="Enter text" />
</fieldset>
<div class="form-group">
<label>Static Control</label>
<p class="form-control-static">email@example.com</p>
</div>
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input class="form-control-file" id="exampleInputFile" type="file" />
</fieldset>
<fieldset class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3"></textarea>
</fieldset>
<div class="form-group">
<label>Checkboxes</label>
<div class="checkbox">
<label> <input type="checkbox" value="" /> Checkbox 1 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> Checkbox 2 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> Checkbox 3 </label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes</label>
<label class="checkbox-inline"> <input type="checkbox" />1 </label>
<label class="checkbox-inline"> <input type="checkbox" />2 </label>
<label class="checkbox-inline"> <input type="checkbox" />3 </label>
</div>
<fieldset class="form-group">
<label>Radio Buttons</label>
<div class="radio">
<label>
<input checked="" id="optionsRadios1" name="optionsRadios" type="radio" value="option1" />
Radio 1
</label>
</div>
<div class="radio">
<label>
<input id="optionsRadios2" name="optionsRadios" type="radio" value="option2" /> Radio 2
</label>
</div>
<div class="radio">
<label>
<input id="optionsRadios3" name="optionsRadios" type="radio" value="option3" /> Radio 3
</label>
</div>
</fieldset>
<fieldset class="form-group">
<label>Inline Radio Buttons</label>
<label class="radio-inline">
<input
checked=""
id="optionsRadiosInline1"
name="optionsRadiosInline"
type="radio"
value="option1"
/>1
</label>
<label class="radio-inline">
<input id="optionsRadiosInline2" name="optionsRadiosInline" type="radio" value="option2" />2
</label>
<label class="radio-inline">
<input id="optionsRadiosInline3" name="optionsRadiosInline" type="radio" value="option3" />3
</label>
</fieldset>
<div class="form-group">
<label>Selects</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<fieldset class="form-group">
<label>Multiple Selects</label>
<select class="form-control" multiple="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<button class="btn btn-secondary" type="submit">Submit Button</button>
<button class="btn btn-secondary" type="reset">Reset Button</button>
</form>
</div>
<div class="col-lg-6">
<h4>Disabled Form States</h4>
<form role="form">
<fieldset disabled="">
<div class="form-group">
<label for="disabledSelect">Disabled input</label>
<input
class="form-control"
disabled=""
id="disabledInput"
placeholder="Disabled input"
type="text"
/>
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select class="form-control" id="disabledSelect">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label> <input type="checkbox" /> Disabled Checkbox </label>
</div>
<button class="btn btn-primary" type="submit">Disabled Button</button>
</fieldset>
</form>
<br />
<h4>Form Validation</h4>
<form role="form">
<div class="form-group">
<label class="form-control-label" for="inputSuccess">Input with success</label>
<input class="form-control is-valid" id="inputSuccess" type="text" />
<div class="valid-feedback">
Input success message
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="inputError">Input with danger</label>
<input class="form-control is-invalid" id="inputError" type="text" />
<div class="invalid-feedback">
Input error message
</div>
</div>
</form>
<h4>Input Groups</h4>
<form role="form">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<!-- <span class="input-group-addon">@</span> -->
<input class="form-control" placeholder="Username" type="text" />
</div>
<div class="form-group input-group">
<input class="form-control" type="text" />
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-eur"></i></span>
</div>
<input class="form-control" placeholder="Font Awesome Icon" type="text" />
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">$</span>
</div>
<input class="form-control" type="text" />
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="form-group input-group">
<input class="form-control" type="text" />
<div class="input-group-append">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<p>
For complete documentation, please visit
<a href="https://getbootstrap.com/docs/4.0/components/forms/" target="_blank"
>Bootstrap's Form Documentation</a
>.
</p>
</div>
</div>
<!-- /.row -->
</div>
================================================
FILE: src/app/layout/form/form.component.scss
================================================
================================================
FILE: src/app/layout/form/form.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { FormComponent } from './form.component';
import { FormModule } from './form.module';
describe('FormComponent', () => {
let component: FormComponent;
let fixture: ComponentFixture<FormComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [FormModule, BrowserAnimationsModule, RouterTestingModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/form/form.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'],
animations: [routerTransition()]
})
export class FormComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/form/form.module.spec.ts
================================================
import { FormModule } from './form.module';
describe('FormModule', () => {
let formModule: FormModule;
beforeEach(() => {
formModule = new FormModule();
});
it('should create an instance', () => {
expect(formModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/form/form.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { PageHeaderModule } from './../../shared';
import { FormRoutingModule } from './form-routing.module';
import { FormComponent } from './form.component';
@NgModule({
imports: [CommonModule, FormRoutingModule, PageHeaderModule],
declarations: [FormComponent]
})
export class FormModule {}
================================================
FILE: src/app/layout/grid/grid-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GridComponent } from './grid.component';
const routes: Routes = [
{
path: '',
component: GridComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GridRoutingModule {}
================================================
FILE: src/app/layout/grid/grid.component.html
================================================
<div [@routerTransition]>
<app-page-header [heading]="'Bootstrap Grid'" [icon]="'fa-wrench'"></app-page-header>
<div class="row">
<div class="col-xl-12 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-12
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-6 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-6
</div>
</div>
</div>
<div class="col-xl-6 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-6
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-4 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-4
</div>
</div>
</div>
<div class="col-xl-4 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-4
</div>
</div>
</div>
<div class="col-xl-4 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-4
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-3 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-3
</div>
</div>
</div>
<div class="col-xl-3 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-3
</div>
</div>
</div>
<div class="col-xl-3 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-3
</div>
</div>
</div>
<div class="col-xl-3 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-3
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-2 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-2
</div>
</div>
</div>
<div class="col-xl-2 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-2
</div>
</div>
</div>
<div class="col-xl-2 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-2
</div>
</div>
</div>
<div class="col-xl-2 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-2
</div>
</div>
</div>
<div class="col-xl-2 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-2
</div>
</div>
</div>
<div class="col-xl-2 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-2
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
<div class="col-xl-1 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-1
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-8 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-8
</div>
</div>
</div>
<div class="col-xl-4 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-4
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-3 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-3
</div>
</div>
</div>
<div class="col-xl-6 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-6
</div>
</div>
</div>
<div class="col-xl-3 text-xs-center">
<div class="card mb-3">
<div class="card-body">
.col-xl-3
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
================================================
FILE: src/app/layout/grid/grid.component.scss
================================================
================================================
FILE: src/app/layout/grid/grid.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { GridComponent } from './grid.component';
import { GridModule } from './grid.module';
describe('GridComponent', () => {
let component: GridComponent;
let fixture: ComponentFixture<GridComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [GridModule, RouterTestingModule, BrowserAnimationsModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GridComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/grid/grid.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.scss'],
animations: [routerTransition()]
})
export class GridComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/layout/grid/grid.module.spec.ts
================================================
import { GridModule } from './grid.module';
describe('GridModule', () => {
let gridModule: GridModule;
beforeEach(() => {
gridModule = new GridModule();
});
it('should create an instance', () => {
expect(gridModule).toBeTruthy();
});
});
================================================
FILE: src/app/layout/grid/grid.module.ts
================================================
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { PageHeaderModule } from './../../shared';
import { GridRoutingModule } from './grid-routing.module';
import { GridComponent } from './grid.component';
@NgModule({
imports: [CommonModule, GridRoutingModule, PageHeaderModule],
declarations: [GridComponent]
})
export class GridModule {}
================================================
FILE: src/app/layout/layout-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout.component';
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'prefix' },
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then((m) => m.DashboardModule)
},
{ path: 'charts', loadChildren: () => import('./charts/charts.module').then((m) => m.ChartsModule) },
{ path: 'tables', loadChildren: () => import('./tables/tables.module').then((m) => m.TablesModule) },
{ path: 'forms', loadChildren: () => import('./form/form.module').then((m) => m.FormModule) },
{
path: 'bs-element',
loadChildren: () => import('./bs-element/bs-element.module').then((m) => m.BsElementModule)
},
{ path: 'grid', loadChildren: () => import('./grid/grid.module').then((m) => m.GridModule) },
{
path: 'components',
loadChildren: () => import('./bs-component/bs-component.module').then((m) => m.BsComponentModule)
},
{
path: 'blank-page',
loadChildren: () => import('./blank-page/blank-page.module').then((m) => m.BlankPageModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LayoutRoutingModule {}
================================================
FILE: src/app/layout/layout.component.html
================================================
<app-header></app-header>
<app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
<section [ngClass]="{ collapsed: collapedSideBar }" class="main-container">
<router-outlet></router-outlet>
</section>
================================================
FILE: src/app/layout/layout.component.scss
================================================
* {
-webkit-transition: margin-left 0.2s ease-in-out;
-moz-transition: margin-left 0.2s ease-in-out;
-ms-transition: margin-left 0.2s ease-in-out;
-o-transition: margin-left 0.2s ease-in-out;
transition: margin-left 0.2s ease-in-out;
}
.main-container {
margin-top: 56px;
margin-left: 235px;
padding: 15px;
-ms-overflow-x: hidden;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
overflow: hidden;
}
.collapsed {
margin-left: 60px;
}
@media screen and (max-width: 992px) {
.main-container {
margin-left: 0px !important;
}
}
@media print {
.main-container {
margin-top: 0px !important;
margin-left: 0px !important;
}
}
================================================
FILE: src/app/layout/layout.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule } from '@ngx-translate/core';
import { LayoutComponent } from './layout.component';
import { LayoutModule } from './layout.module';
describe('LayoutComponent', () => {
let component: LayoutComponent;
let fixture: ComponentFixture<LayoutComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [LayoutModule, RouterTestingModule, TranslateModule.forRoot()]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/layout/layout.component.ts
================================================
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {
collapedSideBar: boolean;
constructor() {}
ngOnInit() {}
receiveCollapsed($event) {
this.collapedSideBar = $event;
}
}
================================================
FILE: src/app/layout/layout.module.spec.ts
================================================
import { LayoutModule } from './layout.module';
describe('LayoutModule', () => {
let la
gitextract_ejxkiitx/ ├── .angulardoc.json ├── .editorconfig ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .travis.yml ├── LICENSE ├── README.md ├── angular.json ├── browserslist ├── e2e/ │ ├── src/ │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package.json ├── src/ │ ├── app/ │ │ ├── access-denied/ │ │ │ ├── access-denied-routing.module.ts │ │ │ ├── access-denied.component.html │ │ │ ├── access-denied.component.scss │ │ │ ├── access-denied.component.spec.ts │ │ │ ├── access-denied.component.ts │ │ │ ├── access-denied.module.spec.ts │ │ │ └── access-denied.module.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.spec.ts │ │ ├── app.module.ts │ │ ├── layout/ │ │ │ ├── blank-page/ │ │ │ │ ├── blank-page-routing.module.ts │ │ │ │ ├── blank-page.component.html │ │ │ │ ├── blank-page.component.scss │ │ │ │ ├── blank-page.component.spec.ts │ │ │ │ ├── blank-page.component.ts │ │ │ │ ├── blank-page.module.spec.ts │ │ │ │ └── blank-page.module.ts │ │ │ ├── bs-component/ │ │ │ │ ├── bs-component-routing.module.ts │ │ │ │ ├── bs-component.component.html │ │ │ │ ├── bs-component.component.scss │ │ │ │ ├── bs-component.component.spec.ts │ │ │ │ ├── bs-component.component.ts │ │ │ │ ├── bs-component.module.spec.ts │ │ │ │ ├── bs-component.module.ts │ │ │ │ └── components/ │ │ │ │ ├── alert/ │ │ │ │ │ ├── alert.component.html │ │ │ │ │ ├── alert.component.scss │ │ │ │ │ ├── alert.component.spec.ts │ │ │ │ │ └── alert.component.ts │ │ │ │ ├── buttons/ │ │ │ │ │ ├── buttons.component.html │ │ │ │ │ ├── buttons.component.scss │ │ │ │ │ ├── buttons.component.spec.ts │ │ │ │ │ └── buttons.component.ts │ │ │ │ ├── collapse/ │ │ │ │ │ ├── collapse.component.html │ │ │ │ │ ├── collapse.component.scss │ │ │ │ │ ├── collapse.component.spec.ts │ │ │ │ │ └── collapse.component.ts │ │ │ │ ├── date-picker/ │ │ │ │ │ ├── date-picker.component.html │ │ │ │ │ ├── date-picker.component.scss │ │ │ │ │ ├── date-picker.component.spec.ts │ │ │ │ │ └── date-picker.component.ts │ │ │ │ ├── dropdown/ │ │ │ │ │ ├── dropdown.component.html │ │ │ │ │ ├── dropdown.component.scss │ │ │ │ │ ├── dropdown.component.spec.ts │ │ │ │ │ └── dropdown.component.ts │ │ │ │ ├── index.ts │ │ │ │ ├── modal/ │ │ │ │ │ ├── modal.component.html │ │ │ │ │ ├── modal.component.scss │ │ │ │ │ ├── modal.component.spec.ts │ │ │ │ │ └── modal.component.ts │ │ │ │ ├── pagination/ │ │ │ │ │ ├── pagination.component.html │ │ │ │ │ ├── pagination.component.scss │ │ │ │ │ ├── pagination.component.spec.ts │ │ │ │ │ └── pagination.component.ts │ │ │ │ ├── pop-over/ │ │ │ │ │ ├── pop-over.component.html │ │ │ │ │ ├── pop-over.component.scss │ │ │ │ │ ├── pop-over.component.spec.ts │ │ │ │ │ └── pop-over.component.ts │ │ │ │ ├── progressbar/ │ │ │ │ │ ├── progressbar.component.html │ │ │ │ │ ├── progressbar.component.scss │ │ │ │ │ ├── progressbar.component.spec.ts │ │ │ │ │ └── progressbar.component.ts │ │ │ │ ├── rating/ │ │ │ │ │ ├── rating.component.html │ │ │ │ │ ├── rating.component.scss │ │ │ │ │ ├── rating.component.spec.ts │ │ │ │ │ └── rating.component.ts │ │ │ │ ├── tabs/ │ │ │ │ │ ├── tabs.component.html │ │ │ │ │ ├── tabs.component.scss │ │ │ │ │ ├── tabs.component.spec.ts │ │ │ │ │ └── tabs.component.ts │ │ │ │ ├── timepicker/ │ │ │ │ │ ├── timepicker.component.html │ │ │ │ │ ├── timepicker.component.scss │ │ │ │ │ ├── timepicker.component.spec.ts │ │ │ │ │ └── timepicker.component.ts │ │ │ │ └── tooltip/ │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ ├── tooltip.component.spec.ts │ │ │ │ └── tooltip.component.ts │ │ │ ├── bs-element/ │ │ │ │ ├── bs-element-routing.module.ts │ │ │ │ ├── bs-element.component.html │ │ │ │ ├── bs-element.component.scss │ │ │ │ ├── bs-element.component.spec.ts │ │ │ │ ├── bs-element.component.ts │ │ │ │ ├── bs-element.module.spec.ts │ │ │ │ └── bs-element.module.ts │ │ │ ├── charts/ │ │ │ │ ├── charts-routing.module.ts │ │ │ │ ├── charts.component.html │ │ │ │ ├── charts.component.scss │ │ │ │ ├── charts.component.spec.ts │ │ │ │ ├── charts.component.ts │ │ │ │ ├── charts.module.spec.ts │ │ │ │ └── charts.module.ts │ │ │ ├── components/ │ │ │ │ ├── header/ │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.scss │ │ │ │ │ ├── header.component.spec.ts │ │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar/ │ │ │ │ ├── sidebar.component.html │ │ │ │ ├── sidebar.component.scss │ │ │ │ ├── sidebar.component.spec.ts │ │ │ │ └── sidebar.component.ts │ │ │ ├── dashboard/ │ │ │ │ ├── components/ │ │ │ │ │ ├── chat/ │ │ │ │ │ │ ├── chat.component.html │ │ │ │ │ │ ├── chat.component.scss │ │ │ │ │ │ ├── chat.component.spec.ts │ │ │ │ │ │ └── chat.component.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── notification/ │ │ │ │ │ │ ├── notification.component.html │ │ │ │ │ │ ├── notification.component.scss │ │ │ │ │ │ ├── notification.component.spec.ts │ │ │ │ │ │ └── notification.component.ts │ │ │ │ │ └── timeline/ │ │ │ │ │ ├── timeline.component.html │ │ │ │ │ ├── timeline.component.scss │ │ │ │ │ ├── timeline.component.spec.ts │ │ │ │ │ └── timeline.component.ts │ │ │ │ ├── dashboard-routing.module.ts │ │ │ │ ├── dashboard.component.html │ │ │ │ ├── dashboard.component.scss │ │ │ │ ├── dashboard.component.spec.ts │ │ │ │ ├── dashboard.component.ts │ │ │ │ ├── dashboard.module.spec.ts │ │ │ │ └── dashboard.module.ts │ │ │ ├── form/ │ │ │ │ ├── form-routing.module.ts │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.scss │ │ │ │ ├── form.component.spec.ts │ │ │ │ ├── form.component.ts │ │ │ │ ├── form.module.spec.ts │ │ │ │ └── form.module.ts │ │ │ ├── grid/ │ │ │ │ ├── grid-routing.module.ts │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ ├── grid.component.spec.ts │ │ │ │ ├── grid.component.ts │ │ │ │ ├── grid.module.spec.ts │ │ │ │ └── grid.module.ts │ │ │ ├── layout-routing.module.ts │ │ │ ├── layout.component.html │ │ │ ├── layout.component.scss │ │ │ ├── layout.component.spec.ts │ │ │ ├── layout.component.ts │ │ │ ├── layout.module.spec.ts │ │ │ ├── layout.module.ts │ │ │ └── tables/ │ │ │ ├── tables-routing.module.ts │ │ │ ├── tables.component.html │ │ │ ├── tables.component.scss │ │ │ ├── tables.component.spec.ts │ │ │ ├── tables.component.ts │ │ │ ├── tables.module.spec.ts │ │ │ └── tables.module.ts │ │ ├── login/ │ │ │ ├── login-routing.module.ts │ │ │ ├── login.component.html │ │ │ ├── login.component.scss │ │ │ ├── login.component.spec.ts │ │ │ ├── login.component.ts │ │ │ ├── login.module.spec.ts │ │ │ └── login.module.ts │ │ ├── not-found/ │ │ │ ├── not-found-routing.module.ts │ │ │ ├── not-found.component.html │ │ │ ├── not-found.component.scss │ │ │ ├── not-found.component.spec.ts │ │ │ ├── not-found.component.ts │ │ │ ├── not-found.module.spec.ts │ │ │ └── not-found.module.ts │ │ ├── router.animations.ts │ │ ├── server-error/ │ │ │ ├── server-error-routing.module.ts │ │ │ ├── server-error.component.html │ │ │ ├── server-error.component.scss │ │ │ ├── server-error.component.spec.ts │ │ │ ├── server-error.component.ts │ │ │ ├── server-error.module.spec.ts │ │ │ └── server-error.module.ts │ │ ├── shared/ │ │ │ ├── guard/ │ │ │ │ ├── auth.guard.spec.ts │ │ │ │ ├── auth.guard.ts │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── modules/ │ │ │ │ ├── index.ts │ │ │ │ ├── language-translation/ │ │ │ │ │ └── language-translation.module.ts │ │ │ │ ├── page-header/ │ │ │ │ │ ├── page-header.component.html │ │ │ │ │ ├── page-header.component.scss │ │ │ │ │ ├── page-header.component.spec.ts │ │ │ │ │ ├── page-header.component.ts │ │ │ │ │ ├── page-header.module.spec.ts │ │ │ │ │ └── page-header.module.ts │ │ │ │ └── stat/ │ │ │ │ ├── stat.component.html │ │ │ │ ├── stat.component.scss │ │ │ │ ├── stat.component.spec.ts │ │ │ │ ├── stat.component.ts │ │ │ │ ├── stat.module.spec.ts │ │ │ │ └── stat.module.ts │ │ │ ├── pipes/ │ │ │ │ └── shared-pipes.module.ts │ │ │ └── services/ │ │ │ └── index.ts │ │ └── signup/ │ │ ├── signup-routing.module.ts │ │ ├── signup.component.html │ │ ├── signup.component.scss │ │ ├── signup.component.spec.ts │ │ ├── signup.component.ts │ │ ├── signup.module.spec.ts │ │ └── signup.module.ts │ ├── assets/ │ │ └── i18n/ │ │ ├── de.json │ │ ├── en.json │ │ ├── es.json │ │ ├── fa.json │ │ ├── fr.json │ │ ├── it.json │ │ ├── ur.json │ │ └── zh-CHS.json │ ├── environments/ │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles/ │ │ ├── _responsive.scss │ │ ├── _rtl.scss │ │ ├── _spinner.scss │ │ ├── _utils.scss │ │ └── app.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json
SYMBOL INDEX (174 symbols across 73 files)
FILE: e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo() {
method getParagraphText (line 8) | getParagraphText() {
FILE: src/app/access-denied/access-denied-routing.module.ts
class AccessDeniedRoutingModule (line 16) | class AccessDeniedRoutingModule {}
FILE: src/app/access-denied/access-denied.component.ts
class AccessDeniedComponent (line 8) | class AccessDeniedComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/access-denied/access-denied.module.ts
class AccessDeniedModule (line 11) | class AccessDeniedModule {}
FILE: src/app/app-routing.module.ts
class AppRoutingModule (line 29) | class AppRoutingModule {}
FILE: src/app/app.component.ts
class AppComponent (line 8) | class AppComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/app.module.ts
class AppModule (line 25) | class AppModule {}
FILE: src/app/layout/blank-page/blank-page-routing.module.ts
class BlankPageRoutingModule (line 16) | class BlankPageRoutingModule {}
FILE: src/app/layout/blank-page/blank-page.component.ts
class BlankPageComponent (line 8) | class BlankPageComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/blank-page/blank-page.module.ts
class BlankPageModule (line 11) | class BlankPageModule {}
FILE: src/app/layout/bs-component/bs-component-routing.module.ts
class BsComponentRoutingModule (line 16) | class BsComponentRoutingModule {}
FILE: src/app/layout/bs-component/bs-component.component.ts
class BsComponentComponent (line 8) | class BsComponentComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/bs-component/bs-component.module.ts
class BsComponentModule (line 44) | class BsComponentModule {}
FILE: src/app/layout/bs-component/components/alert/alert.component.ts
class AlertComponent (line 8) | class AlertComponent implements OnInit {
method constructor (line 11) | constructor() {
method ngOnInit (line 36) | ngOnInit() {}
method closeAlert (line 38) | public closeAlert(alert: any) {
FILE: src/app/layout/bs-component/components/buttons/buttons.component.ts
class ButtonsComponent (line 9) | class ButtonsComponent implements OnInit {
method constructor (line 13) | constructor(private formBuilder: UntypedFormBuilder) {}
method ngOnInit (line 15) | ngOnInit() {
FILE: src/app/layout/bs-component/components/collapse/collapse.component.ts
class CollapseComponent (line 8) | class CollapseComponent {
FILE: src/app/layout/bs-component/components/date-picker/date-picker.component.ts
class DatePickerComponent (line 8) | class DatePickerComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/layout/bs-component/components/dropdown/dropdown.component.ts
class DropdownComponent (line 8) | class DropdownComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/bs-component/components/modal/modal.component.ts
class ModalComponent (line 9) | class ModalComponent {
method constructor (line 12) | constructor(private modalService: NgbModal) {}
method open (line 14) | open(content) {
method getDismissReason (line 25) | private getDismissReason(reason: any): string {
FILE: src/app/layout/bs-component/components/pagination/pagination.component.ts
class PaginationComponent (line 8) | class PaginationComponent {
method constructor (line 15) | constructor() {
method toggleDisabled (line 23) | toggleDisabled() {
FILE: src/app/layout/bs-component/components/pop-over/pop-over.component.ts
class PopOverComponent (line 8) | class PopOverComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/bs-component/components/progressbar/progressbar.component.ts
class ProgressbarComponent (line 8) | class ProgressbarComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/bs-component/components/rating/rating.component.ts
class RatingComponent (line 8) | class RatingComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/layout/bs-component/components/tabs/tabs.component.ts
class TabsComponent (line 8) | class TabsComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/bs-component/components/timepicker/timepicker.component.ts
class TimepickerComponent (line 9) | class TimepickerComponent {
method toggleSeconds (line 22) | toggleSeconds() {
method toggleMeridian (line 26) | toggleMeridian() {
FILE: src/app/layout/bs-component/components/tooltip/tooltip.component.ts
class TooltipComponent (line 8) | class TooltipComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/bs-element/bs-element-routing.module.ts
class BsElementRoutingModule (line 16) | class BsElementRoutingModule {}
FILE: src/app/layout/bs-element/bs-element.component.ts
class BsElementComponent (line 10) | class BsElementComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/layout/bs-element/bs-element.module.ts
class BsElementModule (line 13) | class BsElementModule {}
FILE: src/app/layout/charts/charts-routing.module.ts
class ChartsRoutingModule (line 16) | class ChartsRoutingModule {}
FILE: src/app/layout/charts/charts.component.ts
class ChartsComponent (line 11) | class ChartsComponent implements OnInit {
method constructor (line 119) | constructor() {}
method chartClicked (line 122) | public chartClicked(e: any): void {
method chartHovered (line 126) | public chartHovered(e: any): void {
method randomize (line 130) | public randomize(): void {
method ngOnInit (line 144) | ngOnInit() {
FILE: src/app/layout/charts/charts.module.ts
class ChartsModule (line 14) | class ChartsModule {}
FILE: src/app/layout/components/header/header.component.ts
class HeaderComponent (line 10) | class HeaderComponent implements OnInit {
method constructor (line 13) | constructor(private translate: TranslateService, public router: Router) {
method ngOnInit (line 21) | ngOnInit() {
method isToggled (line 25) | isToggled(): boolean {
method toggleSidebar (line 30) | toggleSidebar() {
method rltAndLtr (line 35) | rltAndLtr() {
method onLoggedout (line 40) | onLoggedout() {
method changeLang (line 44) | changeLang(language: string) {
FILE: src/app/layout/components/sidebar/sidebar.component.ts
class SidebarComponent (line 10) | class SidebarComponent implements OnInit {
method constructor (line 18) | constructor(private translate: TranslateService, public router: Router) {
method ngOnInit (line 26) | ngOnInit() {
method eventCalled (line 33) | eventCalled() {
method addExpandClass (line 37) | addExpandClass(element: any) {
method toggleCollapsed (line 45) | toggleCollapsed() {
method isToggled (line 50) | isToggled(): boolean {
method toggleSidebar (line 55) | toggleSidebar() {
method rltAndLtr (line 60) | rltAndLtr() {
method changeLang (line 65) | changeLang(language: string) {
method onLoggedout (line 69) | onLoggedout() {
FILE: src/app/layout/dashboard/components/chat/chat.component.ts
class ChatComponent (line 8) | class ChatComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/dashboard/components/notification/notification.component.ts
class NotificationComponent (line 8) | class NotificationComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/dashboard/components/timeline/timeline.component.ts
class TimelineComponent (line 8) | class TimelineComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/layout/dashboard/dashboard-routing.module.ts
class DashboardRoutingModule (line 16) | class DashboardRoutingModule {}
FILE: src/app/layout/dashboard/dashboard.component.ts
class DashboardComponent (line 10) | class DashboardComponent implements OnInit {
method constructor (line 14) | constructor() {
method ngOnInit (line 53) | ngOnInit() {}
method closeAlert (line 55) | public closeAlert(alert: any) {
FILE: src/app/layout/dashboard/dashboard.module.ts
class DashboardModule (line 14) | class DashboardModule {}
FILE: src/app/layout/form/form-routing.module.ts
class FormRoutingModule (line 16) | class FormRoutingModule {}
FILE: src/app/layout/form/form.component.ts
class FormComponent (line 10) | class FormComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/layout/form/form.module.ts
class FormModule (line 12) | class FormModule {}
FILE: src/app/layout/grid/grid-routing.module.ts
class GridRoutingModule (line 16) | class GridRoutingModule {}
FILE: src/app/layout/grid/grid.component.ts
class GridComponent (line 10) | class GridComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/layout/grid/grid.module.ts
class GridModule (line 12) | class GridModule {}
FILE: src/app/layout/layout-routing.module.ts
class LayoutRoutingModule (line 39) | class LayoutRoutingModule {}
FILE: src/app/layout/layout.component.ts
class LayoutComponent (line 8) | class LayoutComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
method receiveCollapsed (line 15) | receiveCollapsed($event) {
FILE: src/app/layout/layout.module.ts
class LayoutModule (line 15) | class LayoutModule {}
FILE: src/app/layout/tables/tables-routing.module.ts
class TablesRoutingModule (line 16) | class TablesRoutingModule {}
FILE: src/app/layout/tables/tables.component.ts
class TablesComponent (line 10) | class TablesComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/layout/tables/tables.module.ts
class TablesModule (line 12) | class TablesModule {}
FILE: src/app/login/login-routing.module.ts
class LoginRoutingModule (line 16) | class LoginRoutingModule {}
FILE: src/app/login/login.component.ts
class LoginComponent (line 11) | class LoginComponent implements OnInit {
method constructor (line 12) | constructor(public router: Router) {}
method ngOnInit (line 14) | ngOnInit() {}
method onLoggedin (line 16) | onLoggedin() {
FILE: src/app/login/login.module.ts
class LoginModule (line 12) | class LoginModule {}
FILE: src/app/not-found/not-found-routing.module.ts
class NotFoundRoutingModule (line 16) | class NotFoundRoutingModule {}
FILE: src/app/not-found/not-found.component.ts
class NotFoundComponent (line 8) | class NotFoundComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/not-found/not-found.module.ts
class NotFoundModule (line 11) | class NotFoundModule {}
FILE: src/app/router.animations.ts
function routerTransition (line 3) | function routerTransition() {
function noTransition (line 7) | function noTransition() {
function fadeInAnimation (line 11) | function fadeInAnimation() {
function slideToRight (line 20) | function slideToRight() {
function slideToLeft (line 35) | function slideToLeft() {
function slideToBottom (line 50) | function slideToBottom() {
function slideToTop (line 65) | function slideToTop() {
FILE: src/app/server-error/server-error-routing.module.ts
class ServerErrorRoutingModule (line 16) | class ServerErrorRoutingModule {}
FILE: src/app/server-error/server-error.component.ts
class ServerErrorComponent (line 8) | class ServerErrorComponent implements OnInit {
method constructor (line 9) | constructor() {}
method ngOnInit (line 11) | ngOnInit() {}
FILE: src/app/server-error/server-error.module.ts
class ServerErrorModule (line 11) | class ServerErrorModule {}
FILE: src/app/shared/guard/auth.guard.ts
class AuthGuard (line 5) | class AuthGuard {
method constructor (line 6) | constructor(private router: Router) {}
method canActivate (line 8) | canActivate() {
FILE: src/app/shared/modules/language-translation/language-translation.module.ts
function HttpLoaderFactory (line 13) | function HttpLoaderFactory(http: HttpClient) {
class LanguageTranslationModule (line 30) | class LanguageTranslationModule {
method constructor (line 31) | constructor(private translate: TranslateService) {
FILE: src/app/shared/modules/page-header/page-header.component.ts
class PageHeaderComponent (line 8) | class PageHeaderComponent implements OnInit {
method constructor (line 12) | constructor() {}
method ngOnInit (line 14) | ngOnInit() {}
FILE: src/app/shared/modules/page-header/page-header.module.ts
class PageHeaderModule (line 12) | class PageHeaderModule {}
FILE: src/app/shared/modules/stat/stat.component.ts
class StatComponent (line 8) | class StatComponent implements OnInit {
method constructor (line 16) | constructor() {}
method ngOnInit (line 18) | ngOnInit() {}
FILE: src/app/shared/modules/stat/stat.module.ts
class StatModule (line 10) | class StatModule {}
FILE: src/app/shared/pipes/shared-pipes.module.ts
class SharedPipesModule (line 8) | class SharedPipesModule {}
FILE: src/app/signup/signup-routing.module.ts
class SignupRoutingModule (line 16) | class SignupRoutingModule {}
FILE: src/app/signup/signup.component.ts
class SignupComponent (line 10) | class SignupComponent implements OnInit {
method constructor (line 11) | constructor() {}
method ngOnInit (line 13) | ngOnInit() {}
FILE: src/app/signup/signup.module.ts
class SignupModule (line 12) | class SignupModule {}
FILE: src/typings.d.ts
type NodeModule (line 3) | interface NodeModule {
Condensed preview — 239 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (271K chars).
[
{
"path": ".angulardoc.json",
"chars": 76,
"preview": "{\n \"repoId\": \"a13b5f05-f1dd-4d04-8f3d-e764621ce5c2\",\n \"lastSync\": 0\n}\n"
},
{
"path": ".editorconfig",
"chars": 245,
"preview": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = "
},
{
"path": ".gitignore",
"chars": 559,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/tmp\n/out-tsc\n/dist\n\n# depe"
},
{
"path": ".prettierignore",
"chars": 100,
"preview": "package.json\npackage-lock.json\ndist\n.angulardoc.json\n.vscode/*\n.history/*\nnode_modules/*\nsrc/assets\n"
},
{
"path": ".prettierrc",
"chars": 160,
"preview": "{\n \"bracketSpacing\": true,\n \"semi\": true,\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"printWidth\": "
},
{
"path": ".travis.yml",
"chars": 155,
"preview": "language: node_js\nnode_js:\n - '9'\n - '10'\n\ninstall:\n - npm install\n\nscript:\n - npm run test-ci\n\ncache:\n d"
},
{
"path": "LICENSE",
"chars": 565,
"preview": " Copyright 2018 GeekyAnts\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use"
},
{
"path": "README.md",
"chars": 2479,
"preview": "# SB Admin rewritten in Angular 13 and Bootstrap 5\n\nSimple Dashboard Admin App built using Angular 13 and Bootstrap 5\n\nT"
},
{
"path": "angular.json",
"chars": 4891,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects"
},
{
"path": "browserslist",
"chars": 140,
"preview": "last 2 Chrome versions\nlast 1 Firefox version\nlast 2 Edge major versions\nlast 2 Safari major versions\nlast 2 iOS major v"
},
{
"path": "e2e/src/app.e2e-spec.ts",
"chars": 318,
"preview": "import { AppPage } from './app.po';\n\ndescribe('test-ng8 App', () => {\n let page: AppPage;\n\n beforeEach(() => {\n "
},
{
"path": "e2e/src/app.po.ts",
"chars": 224,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo() {\n return browser.get"
},
{
"path": "e2e/tsconfig.e2e.json",
"chars": 212,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"module\": \"com"
},
{
"path": "package.json",
"chars": 1888,
"preview": "{\n \"name\": \"sb-admin-angular15-bs5\",\n \"version\": \"10.0.0\",\n \"license\": \"Apache\",\n \"scripts\": {\n \"ng\": \"ng\",\n \""
},
{
"path": "src/app/access-denied/access-denied-routing.module.ts",
"chars": 397,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { AccessDeniedC"
},
{
"path": "src/app/access-denied/access-denied.component.html",
"chars": 34,
"preview": "<p>\n access-denied works!\n</p>\n"
},
{
"path": "src/app/access-denied/access-denied.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/access-denied/access-denied.component.spec.ts",
"chars": 724,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { AccessDeniedComponent } from "
},
{
"path": "src/app/access-denied/access-denied.component.ts",
"chars": 301,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-access-denied',\n templateUrl: './"
},
{
"path": "src/app/access-denied/access-denied.module.spec.ts",
"chars": 342,
"preview": "import { AccessDeniedModule } from './access-denied.module';\n\ndescribe('AccessDeniedModule', () => {\n let accessDenie"
},
{
"path": "src/app/access-denied/access-denied.module.ts",
"chars": 383,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AccessDeniedRoutingM"
},
{
"path": "src/app/app-routing.module.ts",
"chars": 1109,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { AuthGuard } f"
},
{
"path": "src/app/app.component.html",
"chars": 32,
"preview": "<router-outlet></router-outlet>\n"
},
{
"path": "src/app/app.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/app.component.spec.ts",
"chars": 811,
"preview": "import { APP_BASE_HREF } from '@angular/common';\nimport { ComponentFixture, TestBed, waitForAsync } from '@angular/core/"
},
{
"path": "src/app/app.component.ts",
"chars": 263,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.compo"
},
{
"path": "src/app/app.module.spec.ts",
"chars": 269,
"preview": "import { AppModule } from './app.module';\n\ndescribe('AppModule', () => {\n let appModule: AppModule;\n\n beforeEach(("
},
{
"path": "src/app/app.module.ts",
"chars": 861,
"preview": "import { CommonModule } from '@angular/common';\nimport { HttpClientModule } from '@angular/common/http';\nimport { NgModu"
},
{
"path": "src/app/layout/blank-page/blank-page-routing.module.ts",
"chars": 385,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { BlankPageComp"
},
{
"path": "src/app/layout/blank-page/blank-page.component.html",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/blank-page/blank-page.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/blank-page/blank-page.component.spec.ts",
"chars": 703,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { BlankPageComponent } from './"
},
{
"path": "src/app/layout/blank-page/blank-page.component.ts",
"chars": 289,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-blank-page',\n templateUrl: './bla"
},
{
"path": "src/app/layout/blank-page/blank-page.module.spec.ts",
"chars": 318,
"preview": "import { BlankPageModule } from './blank-page.module';\n\ndescribe('BlankPageModule', () => {\n let blankPageModule: Bla"
},
{
"path": "src/app/layout/blank-page/blank-page.module.ts",
"chars": 362,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { BlankPageRoutingModu"
},
{
"path": "src/app/layout/bs-component/bs-component-routing.module.ts",
"chars": 393,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { BsComponentCo"
},
{
"path": "src/app/layout/bs-component/bs-component.component.html",
"chars": 543,
"preview": "<div>\n <app-page-header [heading]=\"'Bootstrap Component'\" [icon]=\"'fa-th-list'\"></app-page-header>\n <app-modal></a"
},
{
"path": "src/app/layout/bs-component/bs-component.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/bs-component.component.spec.ts",
"chars": 852,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/layout/bs-component/bs-component.component.ts",
"chars": 297,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-bs-component',\n templateUrl: './b"
},
{
"path": "src/app/layout/bs-component/bs-component.module.spec.ts",
"chars": 334,
"preview": "import { BsComponentModule } from './bs-component.module';\n\ndescribe('BsComponentModule', () => {\n let bsComponentMod"
},
{
"path": "src/app/layout/bs-component/bs-component.module.ts",
"chars": 1294,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, Reactive"
},
{
"path": "src/app/layout/bs-component/components/alert/alert.component.html",
"chars": 398,
"preview": "<div class=\"row\">\n <div class=\"col-lg-12\">\n <div class=\"card mb-3\">\n <div class=\"card-header\">Butto"
},
{
"path": "src/app/layout/bs-component/components/alert/alert.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/alert/alert.component.spec.ts",
"chars": 764,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/alert/alert.component.ts",
"chars": 1018,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-alert',\n templateUrl: './alert.co"
},
{
"path": "src/app/layout/bs-component/components/buttons/buttons.component.html",
"chars": 2894,
"preview": "<div class=\"row mb-3\">\n <div class=\"col col-sm-6\">\n <div class=\"card\">\n <div class=\"card-header\">Ra"
},
{
"path": "src/app/layout/bs-component/components/buttons/buttons.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/buttons/buttons.component.spec.ts",
"chars": 879,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { FormsModule, ReactiveFormsModu"
},
{
"path": "src/app/layout/bs-component/components/buttons/buttons.component.ts",
"chars": 554,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'"
},
{
"path": "src/app/layout/bs-component/components/collapse/collapse.component.html",
"chars": 954,
"preview": "<div class=\"row\">\n <div class=\"col-lg-12\">\n <div class=\"card mb-3\">\n <div class=\"card-header\">Colla"
},
{
"path": "src/app/layout/bs-component/components/collapse/collapse.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/collapse/collapse.component.spec.ts",
"chars": 785,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/collapse/collapse.component.ts",
"chars": 248,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-collapse',\n templateUrl: './collapse.comp"
},
{
"path": "src/app/layout/bs-component/components/date-picker/date-picker.component.html",
"chars": 1266,
"preview": "<div class=\"row\">\n <div class=\"col-lg-12\">\n <div class=\"card mb-3\">\n <div class=\"card-header\">Date "
},
{
"path": "src/app/layout/bs-component/components/date-picker/date-picker.component.scss",
"chars": 85,
"preview": ":host ::ng-deep .datepicker-input {\n .custom-select {\n width: 50%;\n }\n}\n"
},
{
"path": "src/app/layout/bs-component/components/date-picker/date-picker.component.spec.ts",
"chars": 859,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { FormsModule } from '@angular/f"
},
{
"path": "src/app/layout/bs-component/components/date-picker/date-picker.component.ts",
"chars": 310,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-date-picker',\n templateUrl: './da"
},
{
"path": "src/app/layout/bs-component/components/dropdown/dropdown.component.html",
"chars": 2362,
"preview": "<div class=\"card\">\n <div class=\"card-header\">Dropdown</div>\n <div class=\"card-body\">\n <div class=\"row\">\n "
},
{
"path": "src/app/layout/bs-component/components/dropdown/dropdown.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/dropdown/dropdown.component.spec.ts",
"chars": 785,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/dropdown/dropdown.component.ts",
"chars": 282,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-dropdown',\n templateUrl: './dropd"
},
{
"path": "src/app/layout/bs-component/components/index.ts",
"chars": 603,
"preview": "export * from './buttons/buttons.component';\nexport * from './alert/alert.component';\nexport * from './modal/modal.compo"
},
{
"path": "src/app/layout/bs-component/components/modal/modal.component.html",
"chars": 1102,
"preview": "<div class=\"row\">\n <div class=\"col-sm-12\">\n <div class=\"card mb-3\">\n <div class=\"card-header\">Modal"
},
{
"path": "src/app/layout/bs-component/components/modal/modal.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/modal/modal.component.spec.ts",
"chars": 764,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/modal/modal.component.ts",
"chars": 999,
"preview": "import { Component } from '@angular/core';\nimport { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';\n\n"
},
{
"path": "src/app/layout/bs-component/components/pagination/pagination.component.html",
"chars": 3705,
"preview": "<div class=\"row\">\n <div class=\"col col-sm-6\">\n <div class=\"card mt-3\">\n <div class=\"card-header\">Ba"
},
{
"path": "src/app/layout/bs-component/components/pagination/pagination.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/pagination/pagination.component.spec.ts",
"chars": 799,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/pagination/pagination.component.ts",
"chars": 648,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-pagination',\n templateUrl: './pagination."
},
{
"path": "src/app/layout/bs-component/components/pop-over/pop-over.component.html",
"chars": 1301,
"preview": "<div class=\"card mt-3\">\n <div class=\"card-header\">\n Pop over\n </div>\n <div class=\"card-body\">\n <b"
},
{
"path": "src/app/layout/bs-component/components/pop-over/pop-over.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/pop-over/pop-over.component.spec.ts",
"chars": 689,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { PopOverComponent } from './po"
},
{
"path": "src/app/layout/bs-component/components/pop-over/pop-over.component.ts",
"chars": 281,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-pop-over',\n templateUrl: './pop-o"
},
{
"path": "src/app/layout/bs-component/components/progressbar/progressbar.component.html",
"chars": 981,
"preview": "<div class=\"card mt-3\">\n <div class=\"card-header\">Progressbar</div>\n <div class=\"card-body\">\n <p>\n "
},
{
"path": "src/app/layout/bs-component/components/progressbar/progressbar.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/progressbar/progressbar.component.spec.ts",
"chars": 806,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/progressbar/progressbar.component.ts",
"chars": 294,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-progressbar',\n templateUrl: './pr"
},
{
"path": "src/app/layout/bs-component/components/rating/rating.component.html",
"chars": 257,
"preview": "<div class=\"card\">\n <div class=\"card-header\">Rating (<strong>Basic demo</strong>)</div>\n <div class=\"card-body\">\n "
},
{
"path": "src/app/layout/bs-component/components/rating/rating.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/rating/rating.component.spec.ts",
"chars": 825,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/layout/bs-component/components/rating/rating.component.ts",
"chars": 296,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-rating',\n templateUrl: './rating."
},
{
"path": "src/app/layout/bs-component/components/tabs/tabs.component.html",
"chars": 6271,
"preview": "<div class=\"row mt-3\">\n <div class=\"col-sm-6\">\n <div class=\"card\">\n <div class=\"card-header\">Tabset"
},
{
"path": "src/app/layout/bs-component/components/tabs/tabs.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/tabs/tabs.component.spec.ts",
"chars": 757,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { NgbModule } from '@ng-bootstra"
},
{
"path": "src/app/layout/bs-component/components/tabs/tabs.component.ts",
"chars": 266,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-tabs',\n templateUrl: './tabs.comp"
},
{
"path": "src/app/layout/bs-component/components/timepicker/timepicker.component.html",
"chars": 3021,
"preview": "<div class=\"row mt-3\">\n <div class=\"col-sm-6\">\n <div class=\"card\">\n <div class=\"card-header\">Timepi"
},
{
"path": "src/app/layout/bs-component/components/timepicker/timepicker.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/timepicker/timepicker.component.spec.ts",
"chars": 858,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { FormsModule } from '@angular/f"
},
{
"path": "src/app/layout/bs-component/components/timepicker/timepicker.component.ts",
"chars": 753,
"preview": "import { Component } from '@angular/core';\nimport { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';\n\n@Component({\n "
},
{
"path": "src/app/layout/bs-component/components/tooltip/tooltip.component.html",
"chars": 972,
"preview": "<div class=\"card\">\n <div class=\"card-header\">\n Tooltip\n </div>\n <div class=\"card-body\">\n <button "
},
{
"path": "src/app/layout/bs-component/components/tooltip/tooltip.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-component/components/tooltip/tooltip.component.spec.ts",
"chars": 831,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/layout/bs-component/components/tooltip/tooltip.component.ts",
"chars": 278,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-tooltip',\n templateUrl: './toolti"
},
{
"path": "src/app/layout/bs-element/bs-element-routing.module.ts",
"chars": 385,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { BsElementComp"
},
{
"path": "src/app/layout/bs-element/bs-element.component.html",
"chars": 15263,
"preview": "<div [@routerTransition]>\n <app-page-header [heading]=\"'Bootstrap Elements'\" [icon]=\"'fa-desktop'\"></app-page-header>"
},
{
"path": "src/app/layout/bs-element/bs-element.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/bs-element/bs-element.component.spec.ts",
"chars": 939,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { BrowserAnimationsModule } from"
},
{
"path": "src/app/layout/bs-element/bs-element.component.ts",
"chars": 387,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { routerTransition } from '../../router.animations';\n\n@Compone"
},
{
"path": "src/app/layout/bs-element/bs-element.module.spec.ts",
"chars": 318,
"preview": "import { BsElementModule } from './bs-element.module';\n\ndescribe('BsElementModule', () => {\n let bsElementModule: BsE"
},
{
"path": "src/app/layout/bs-element/bs-element.module.ts",
"chars": 498,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { NgbModule } from '@ng"
},
{
"path": "src/app/layout/charts/charts-routing.module.ts",
"chars": 372,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { ChartsCompone"
},
{
"path": "src/app/layout/charts/charts.component.html",
"chars": 4735,
"preview": "<div [@routerTransition]>\n <app-page-header [heading]=\"'Charts'\" [icon]=\"'fa-bar-chart-o'\"></app-page-header>\n <di"
},
{
"path": "src/app/layout/charts/charts.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/charts/charts.component.spec.ts",
"chars": 910,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { BrowserAnimationsModule } from"
},
{
"path": "src/app/layout/charts/charts.component.ts",
"chars": 5270,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { routerTransition } from '../../router.animations';\nimport { "
},
{
"path": "src/app/layout/charts/charts.module.spec.ts",
"chars": 293,
"preview": "import { ChartsModule } from './charts.module';\n\ndescribe('ChartsModule', () => {\n let chartsModule: ChartsModule;\n\n "
},
{
"path": "src/app/layout/charts/charts.module.ts",
"chars": 477,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { NgChartsModule as Ng"
},
{
"path": "src/app/layout/components/header/header.component.html",
"chars": 7921,
"preview": "<nav class=\"navbar navbar-expand-lg fixed-top\">\n <a class=\"navbar-brand\" href=\"#\">SB Admin Ng17 BS5</a>\n <button ("
},
{
"path": "src/app/layout/components/header/header.component.scss",
"chars": 966,
"preview": "$topnav-background-color: #222;\n:host {\n .navbar {\n background-color: $topnav-background-color;\n\n .navb"
},
{
"path": "src/app/layout/components/header/header.component.spec.ts",
"chars": 891,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/layout/components/header/header.component.ts",
"chars": 1308,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { Tra"
},
{
"path": "src/app/layout/components/sidebar/sidebar.component.html",
"chars": 7362,
"preview": "<nav [ngClass]=\"{ sidebarPushRight: isActive, collapsed: collapsed }\" class=\"sidebar\">\n <div class=\"list-group\">\n "
},
{
"path": "src/app/layout/components/sidebar/sidebar.component.scss",
"chars": 4576,
"preview": "$topnav-background-color: #222;\n.sidebar {\n border-radius: 0;\n position: fixed;\n z-index: 1000;\n top: 56px;\n"
},
{
"path": "src/app/layout/components/sidebar/sidebar.component.spec.ts",
"chars": 897,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/layout/components/sidebar/sidebar.component.ts",
"chars": 1918,
"preview": "import { Component, EventEmitter, OnInit, Output } from '@angular/core';\nimport { NavigationEnd, Router } from '@angular"
},
{
"path": "src/app/layout/dashboard/components/chat/chat.component.html",
"chars": 5183,
"preview": "<div class=\"chat-panel card card-default\">\n <div class=\"card-header\">\n <i class=\"fa fa-comments fa-fw\"></i>\n "
},
{
"path": "src/app/layout/dashboard/components/chat/chat.component.scss",
"chars": 638,
"preview": ".chat-panel {\n .chat-dropdown {\n margin-top: -3px;\n }\n\n .chat {\n .left {\n img {\n "
},
{
"path": "src/app/layout/dashboard/components/chat/chat.component.spec.ts",
"chars": 667,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { ChatComponent } from './chat."
},
{
"path": "src/app/layout/dashboard/components/chat/chat.component.ts",
"chars": 266,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-chat',\n templateUrl: './chat.comp"
},
{
"path": "src/app/layout/dashboard/components/index.ts",
"chars": 141,
"preview": "export * from './timeline/timeline.component';\nexport * from './notification/notification.component';\nexport * from './c"
},
{
"path": "src/app/layout/dashboard/components/notification/notification.component.html",
"chars": 2154,
"preview": "<div class=\"card-body\">\n <div class=\"list-group\">\n <a class=\"list-group-item clearfix d-block\" href=\"#\">\n "
},
{
"path": "src/app/layout/dashboard/components/notification/notification.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/dashboard/components/notification/notification.component.spec.ts",
"chars": 723,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { NotificationComponent } from "
},
{
"path": "src/app/layout/dashboard/components/notification/notification.component.ts",
"chars": 298,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-notification',\n templateUrl: './n"
},
{
"path": "src/app/layout/dashboard/components/timeline/timeline.component.html",
"chars": 6297,
"preview": "<div class=\"card-body\">\n <ul class=\"timeline\">\n <li>\n <div class=\"timeline-badge\"><i class=\"fa fa-c"
},
{
"path": "src/app/layout/dashboard/components/timeline/timeline.component.scss",
"chars": 3432,
"preview": ".timeline {\n position: relative;\n padding: 20px 0 20px;\n list-style: none;\n}\n\n.timeline:before {\n content: '"
},
{
"path": "src/app/layout/dashboard/components/timeline/timeline.component.spec.ts",
"chars": 695,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { TimelineComponent } from './t"
},
{
"path": "src/app/layout/dashboard/components/timeline/timeline.component.ts",
"chars": 282,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-timeline',\n templateUrl: './timel"
},
{
"path": "src/app/layout/dashboard/dashboard-routing.module.ts",
"chars": 384,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { DashboardComp"
},
{
"path": "src/app/layout/dashboard/dashboard.component.html",
"chars": 2627,
"preview": "<div [@routerTransition]>\n <h2 class=\"text-muted\">Dashboard <small>Statistics Overview</small></h2>\n <div class=\"r"
},
{
"path": "src/app/layout/dashboard/dashboard.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/dashboard/dashboard.component.spec.ts",
"chars": 937,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { BrowserAnimationsModule } from"
},
{
"path": "src/app/layout/dashboard/dashboard.component.ts",
"chars": 2135,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { routerTransition } from '../../router.animations';\n\n@Compone"
},
{
"path": "src/app/layout/dashboard/dashboard.module.spec.ts",
"chars": 317,
"preview": "import { DashboardModule } from './dashboard.module';\n\ndescribe('DashboardModule', () => {\n let dashboardModule: Dash"
},
{
"path": "src/app/layout/dashboard/dashboard.module.ts",
"chars": 675,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { NgbAlertModule, NgbCa"
},
{
"path": "src/app/layout/form/form-routing.module.ts",
"chars": 364,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { FormComponent"
},
{
"path": "src/app/layout/form/form.component.html",
"chars": 9363,
"preview": "<div [@routerTransition]>\n <app-page-header [heading]=\"'Forms'\" [icon]=\"'fa-edit'\"></app-page-header>\n\n <div class"
},
{
"path": "src/app/layout/form/form.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/form/form.component.spec.ts",
"chars": 892,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { BrowserAnimationsModule } from"
},
{
"path": "src/app/layout/form/form.component.ts",
"chars": 364,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { routerTransition } from '../../router.animations';\n\n@Compone"
},
{
"path": "src/app/layout/form/form.module.spec.ts",
"chars": 277,
"preview": "import { FormModule } from './form.module';\n\ndescribe('FormModule', () => {\n let formModule: FormModule;\n\n beforeE"
},
{
"path": "src/app/layout/form/form.module.ts",
"chars": 394,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PageHeaderModule } fr"
},
{
"path": "src/app/layout/grid/grid-routing.module.ts",
"chars": 364,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { GridComponent"
},
{
"path": "src/app/layout/grid/grid.component.html",
"chars": 7446,
"preview": "<div [@routerTransition]>\n <app-page-header [heading]=\"'Bootstrap Grid'\" [icon]=\"'fa-wrench'\"></app-page-header>\n\n "
},
{
"path": "src/app/layout/grid/grid.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/grid/grid.component.spec.ts",
"chars": 892,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { BrowserAnimationsModule } from"
},
{
"path": "src/app/layout/grid/grid.component.ts",
"chars": 364,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { routerTransition } from '../../router.animations';\n\n@Compone"
},
{
"path": "src/app/layout/grid/grid.module.spec.ts",
"chars": 277,
"preview": "import { GridModule } from './grid.module';\n\ndescribe('GridModule', () => {\n let gridModule: GridModule;\n\n beforeE"
},
{
"path": "src/app/layout/grid/grid.module.ts",
"chars": 394,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PageHeaderModule } fr"
},
{
"path": "src/app/layout/layout-routing.module.ts",
"chars": 1610,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { LayoutCompone"
},
{
"path": "src/app/layout/layout.component.html",
"chars": 221,
"preview": "<app-header></app-header>\n<app-sidebar (collapsedEvent)=\"receiveCollapsed($event)\"></app-sidebar>\n<section [ngClass]=\"{ "
},
{
"path": "src/app/layout/layout.component.scss",
"chars": 729,
"preview": "* {\n -webkit-transition: margin-left 0.2s ease-in-out;\n -moz-transition: margin-left 0.2s ease-in-out;\n -ms-tra"
},
{
"path": "src/app/layout/layout.component.spec.ts",
"chars": 887,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/layout/layout.component.ts",
"chars": 382,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-layout',\n templateUrl: './layout."
},
{
"path": "src/app/layout/layout.module.spec.ts",
"chars": 293,
"preview": "import { LayoutModule } from './layout.module';\n\ndescribe('LayoutModule', () => {\n let layoutModule: LayoutModule;\n\n "
},
{
"path": "src/app/layout/layout.module.ts",
"chars": 676,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { NgbDropdownModule } f"
},
{
"path": "src/app/layout/tables/tables-routing.module.ts",
"chars": 372,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { TablesCompone"
},
{
"path": "src/app/layout/tables/tables.component.html",
"chars": 14675,
"preview": "<div [@routerTransition]>\n <app-page-header [heading]=\"'Tables'\" [icon]=\"'fa-table'\"></app-page-header>\n <div clas"
},
{
"path": "src/app/layout/tables/tables.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/layout/tables/tables.component.spec.ts",
"chars": 645,
"preview": "import { TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@angular/router/test"
},
{
"path": "src/app/layout/tables/tables.component.ts",
"chars": 372,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { routerTransition } from '../../router.animations';\n\n@Compone"
},
{
"path": "src/app/layout/tables/tables.module.spec.ts",
"chars": 293,
"preview": "import { TablesModule } from './tables.module';\n\ndescribe('TablesModule', () => {\n let tablesModule: TablesModule;\n\n "
},
{
"path": "src/app/layout/tables/tables.module.ts",
"chars": 408,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PageHeaderModule } fr"
},
{
"path": "src/app/login/login-routing.module.ts",
"chars": 368,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { LoginComponen"
},
{
"path": "src/app/login/login.component.html",
"chars": 1358,
"preview": "<div [@routerTransition] class=\"login-page\">\n <div class=\"row justify-content-md-center align-items-center h-100\">\n "
},
{
"path": "src/app/login/login.component.scss",
"chars": 2207,
"preview": "$topnav-background-color: #222;\n:host {\n display: block;\n}\n\n.login-page {\n position: absolute;\n top: 0;\n lef"
},
{
"path": "src/app/login/login.component.spec.ts",
"chars": 901,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { BrowserAnimationsModule } from"
},
{
"path": "src/app/login/login.component.ts",
"chars": 506,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { routerTransition }"
},
{
"path": "src/app/login/login.module.spec.ts",
"chars": 285,
"preview": "import { LoginModule } from './login.module';\n\ndescribe('LoginModule', () => {\n let loginModule: LoginModule;\n\n be"
},
{
"path": "src/app/login/login.module.ts",
"chars": 404,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { TranslateModule } fro"
},
{
"path": "src/app/not-found/not-found-routing.module.ts",
"chars": 381,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { NotFoundCompo"
},
{
"path": "src/app/not-found/not-found.component.html",
"chars": 30,
"preview": "<p>\n not-found works!\n</p>\n"
},
{
"path": "src/app/not-found/not-found.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/not-found/not-found.component.spec.ts",
"chars": 696,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { NotFoundComponent } from './n"
},
{
"path": "src/app/not-found/not-found.component.ts",
"chars": 285,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-not-found',\n templateUrl: './not-"
},
{
"path": "src/app/not-found/not-found.module.spec.ts",
"chars": 310,
"preview": "import { NotFoundModule } from './not-found.module';\n\ndescribe('NotFoundModule', () => {\n let notFoundModule: NotFoun"
},
{
"path": "src/app/not-found/not-found.module.ts",
"chars": 355,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { NotFoundRoutingModul"
},
{
"path": "src/app/router.animations.ts",
"chars": 2559,
"preview": "import { animate, state, style, transition, trigger } from '@angular/animations';\n\nexport function routerTransition() {\n"
},
{
"path": "src/app/server-error/server-error-routing.module.ts",
"chars": 393,
"preview": "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { ServerErrorCo"
},
{
"path": "src/app/server-error/server-error.component.html",
"chars": 33,
"preview": "<p>\n server-error works!\n</p>\n"
},
{
"path": "src/app/server-error/server-error.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/server-error/server-error.component.spec.ts",
"chars": 717,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { ServerErrorComponent } from '"
},
{
"path": "src/app/server-error/server-error.component.ts",
"chars": 297,
"preview": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-server-error',\n templateUrl: './s"
},
{
"path": "src/app/server-error/server-error.module.spec.ts",
"chars": 334,
"preview": "import { ServerErrorModule } from './server-error.module';\n\ndescribe('ServerErrorModule', () => {\n let serverErrorMod"
},
{
"path": "src/app/server-error/server-error.module.ts",
"chars": 376,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ServerErrorRoutingMo"
},
{
"path": "src/app/shared/guard/auth.guard.spec.ts",
"chars": 472,
"preview": "import { inject, TestBed } from '@angular/core/testing';\nimport { RouterTestingModule } from '@angular/router/testing';\n"
},
{
"path": "src/app/shared/guard/auth.guard.ts",
"chars": 349,
"preview": "import { Injectable } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Injectable()\nexport class AuthGu"
},
{
"path": "src/app/shared/guard/index.ts",
"chars": 30,
"preview": "export * from './auth.guard';\n"
},
{
"path": "src/app/shared/index.ts",
"chars": 97,
"preview": "export * from './modules';\nexport * from './pipes/shared-pipes.module';\nexport * from './guard';\n"
},
{
"path": "src/app/shared/modules/index.ts",
"chars": 86,
"preview": "export * from './page-header/page-header.module';\nexport * from './stat/stat.module';\n"
},
{
"path": "src/app/shared/modules/language-translation/language-translation.module.ts",
"chars": 1471,
"preview": "/**\n * This module is used to language translations.\n * The translations are saved in a json file in /src/app/assets/i18"
},
{
"path": "src/app/shared/modules/page-header/page-header.component.html",
"chars": 459,
"preview": "<div class=\"row\">\n <div class=\"col-xl-12\">\n <h2 class=\"page-header\">\n {{ heading }}\n </h2>\n "
},
{
"path": "src/app/shared/modules/page-header/page-header.component.scss",
"chars": 0,
"preview": ""
},
{
"path": "src/app/shared/modules/page-header/page-header.component.spec.ts",
"chars": 843,
"preview": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\nimport { RouterTestingModule } from '@a"
},
{
"path": "src/app/shared/modules/page-header/page-header.component.ts",
"chars": 358,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-page-header',\n templateUrl"
},
{
"path": "src/app/shared/modules/page-header/page-header.module.spec.ts",
"chars": 326,
"preview": "import { PageHeaderModule } from './page-header.module';\n\ndescribe('PageHeaderModule', () => {\n let pageHeaderModule:"
},
{
"path": "src/app/shared/modules/page-header/page-header.module.ts",
"chars": 370,
"preview": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '"
},
{
"path": "src/app/shared/modules/stat/stat.component.html",
"chars": 685,
"preview": "<div class=\"card text-white bg-{{ bgClass }}\">\n <div class=\"card-header\">\n <div class=\"row\">\n <div "
}
]
// ... and 39 more files (download for full content)
About this extraction
This page contains the full source code of the start-angular/SB-Admin-BS4-Angular-2 GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 239 files (234.2 KB), approximately 61.5k tokens, and a symbol index with 174 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.