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 ================================================

access-denied works!

================================================ 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; 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 ================================================ ================================================ 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; 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; 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 ================================================
================================================ 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; 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 ================================================
Buttons

{{ alert.message }}

================================================ 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; 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 = []; 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 ================================================
Radio Button group (Using ngModel)
Selected Value: {{ model }}
Radio Button group (Ractive Forms)
Selected Value: {{ radioGroupForm.value.model }}
================================================ 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; 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 ================================================
Collapse

You can collapse this card by clicking Toggle
================================================ 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; 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 ================================================
Date Picker
Model: {{ model | json }}
================================================ 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; 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 ================================================
Dropdown

You can easily control dropdowns programmatically using the exported dropdown instance.

================================================ 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; 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 ================================================
Modal

Modal title

One fine body…
================================================ 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; 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 ================================================
Basic Pagination
Default pagination
directionLinks = false
boundaryLinks = true
Current page: {{ defaultPagination }}
Advanced Pagination
maxSize = 5, rotate = false
maxSize = 5, rotate = true
maxSize = 5, rotate = true, ellipses = false
Current page: {{ advancedPagination }}
Pagination size
Disabled pagination

Pagination control can be disabled:

================================================ 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; 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 ================================================
Pop over
================================================ 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; 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 ================================================
Progressbar

25

Copying file 2 of 4...

50%

Completed!

================================================ 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; 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 ================================================
Rating (Basic demo)
Rate: {{currentRate}}
================================================ 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; 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 ================================================
Tabset

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.

Fancy title

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.

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.

Pills

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.

Fancy title Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

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.

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.

================================================ 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; 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 ================================================
Timepicker (Default)
Selected time: {{ defaultTime | json }}
Timepicker (Default)
Selected time: {{ meridianTime | json }}
Timepicker (Seconds)
Selected time: {{ SecondsTime | json }}
Timepicker (Custom Step)
Selected time: {{ customTime | json }}
================================================ 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; 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 ================================================
Tooltip
Tooltip with HTML
================================================ 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; 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 ================================================

Hello, world!

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.

Learn more »

Buttons


Thumbnails

Dropdown menus

Action Another action Something else here

Navbars


Alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Progress bars






List groups

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Cards

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

================================================ 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; 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 ================================================
Bar Chart
Doughnut Chart
Radar Chart
Pie Chart
Polar Area Chart
Line Chart
================================================ 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; 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 = [ { 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 = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; public lineChartOptions: any = { responsive: true }; public lineChartColors: Array = [ { // 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 ================================================ ================================================ 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; 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 ================================================ ================================================ 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; 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(); 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 ================================================
Chat
  • User Avatar
    Jack Sparrow 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

  • User Avatar
    13 mins ago Bhaumik Patel

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

  • User Avatar
    Jack Sparrow 14 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

  • User Avatar
    15 mins ago Bhaumik Patel

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

================================================ 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; 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 ================================================
New Comment 4 minutes ago 3 New Followers 12 minutes ago Message Sent 27 minutes ago New Task 43 minutes ago Server Rebooted 11:32 AM Server Crashed! 11:13 AM Server Not Responding 10:57 AM New Order Placed 9:49 AM Payment Received Yesterday
View All Alerts
================================================ 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; 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 ================================================

  • Lorem ipsum dolor

    11 hours ago via Twitter

    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.

  • Lorem ipsum dolor

    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.

    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.

  • Lorem ipsum dolor

    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.

  • Lorem ipsum dolor

    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!

  • Lorem ipsum dolor

    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.

  • Lorem ipsum dolor

    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.

  • Lorem ipsum dolor

    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.

================================================ 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; 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 ================================================

Dashboard Statistics Overview

Random first slide

{{ slider.label }}

{{ slider.text }}
{{ alert.message }}
Responsive Timeline
Notifications card
================================================ 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; 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 = []; public sliders: Array = []; 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 ================================================

Example block-level help text here.

email@example.com

Disabled Form States


Form Validation

Input success message
Input error message

Input Groups

@
.00
$
.00

For complete documentation, please visit Bootstrap's Form Documentation.

================================================ 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; 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 ================================================
.col-xl-12
.col-xl-6
.col-xl-6
.col-xl-4
.col-xl-4
.col-xl-4
.col-xl-3
.col-xl-3
.col-xl-3
.col-xl-3
.col-xl-2
.col-xl-2
.col-xl-2
.col-xl-2
.col-xl-2
.col-xl-2
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-1
.col-xl-8
.col-xl-4
.col-xl-3
.col-xl-6
.col-xl-3
================================================ 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; 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 ================================================
================================================ 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; 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 layoutModule: LayoutModule; beforeEach(() => { layoutModule = new LayoutModule(); }); it('should create an instance', () => { expect(layoutModule).toBeTruthy(); }); }); ================================================ FILE: src/app/layout/layout.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from '@ngx-translate/core'; import { HeaderComponent } from './components/header/header.component'; import { SidebarComponent } from './components/sidebar/sidebar.component'; import { LayoutRoutingModule } from './layout-routing.module'; import { LayoutComponent } from './layout.component'; @NgModule({ imports: [CommonModule, LayoutRoutingModule, TranslateModule, NgbDropdownModule], declarations: [LayoutComponent, SidebarComponent, HeaderComponent] }) export class LayoutModule {} ================================================ FILE: src/app/layout/tables/tables-routing.module.ts ================================================ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { TablesComponent } from './tables.component'; const routes: Routes = [ { path: '', component: TablesComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class TablesRoutingModule {} ================================================ FILE: src/app/layout/tables/tables.component.html ================================================
Basic example
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table head options
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered table
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
Small table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Inverse table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped Rows
Page Visits % New Visits Revenue
/index.html 1265 32.3% $321.33
/about.html 261 33.3% $234.12
/sales.html 665 21.3% $16.34
/blog.html 9516 89.3% $1644.43
/404.html 23 34.3% $23.52
/services.html 421 60.3% $724.32
/blog/post.html 1233 93.2% $126.34
Hoverable rows
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual classes
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
3 Larry the Bird @twitter
3 Larry the Bird @twitter
================================================ FILE: src/app/layout/tables/tables.component.scss ================================================ ================================================ FILE: src/app/layout/tables/tables.component.spec.ts ================================================ import { TestBed, waitForAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { TablesComponent } from './tables.component'; import { TablesModule } from './tables.module'; describe('TablesComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [TablesModule, RouterTestingModule] }).compileComponents(); })); it('should create', () => { const fixture = TestBed.createComponent(TablesComponent); const component = fixture.componentInstance; expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/layout/tables/tables.component.ts ================================================ import { Component, OnInit } from '@angular/core'; import { routerTransition } from '../../router.animations'; @Component({ selector: 'app-tables', templateUrl: './tables.component.html', styleUrls: ['./tables.component.scss'], animations: [routerTransition()] }) export class TablesComponent implements OnInit { constructor() {} ngOnInit() {} } ================================================ FILE: src/app/layout/tables/tables.module.spec.ts ================================================ import { TablesModule } from './tables.module'; describe('TablesModule', () => { let tablesModule: TablesModule; beforeEach(() => { tablesModule = new TablesModule(); }); it('should create an instance', () => { expect(tablesModule).toBeTruthy(); }); }); ================================================ FILE: src/app/layout/tables/tables.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { PageHeaderModule } from './../../shared'; import { TablesRoutingModule } from './tables-routing.module'; import { TablesComponent } from './tables.component'; @NgModule({ imports: [CommonModule, TablesRoutingModule, PageHeaderModule], declarations: [TablesComponent] }) export class TablesModule {} ================================================ FILE: src/app/login/login-routing.module.ts ================================================ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from './login.component'; const routes: Routes = [ { path: '', component: LoginComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class LoginRoutingModule {} ================================================ FILE: src/app/login/login.component.html ================================================ ================================================ FILE: src/app/login/login.component.scss ================================================ $topnav-background-color: #222; :host { display: block; } .login-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; background: $topnav-background-color; text-align: center; color: #fff; padding: 3em; .col-lg-4 { padding: 0; } .input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 0; } .input-underline { background: 0 0; border: none; box-shadow: none; border-bottom: 2px solid rgba(255, 255, 255, 0.5); color: #fff; border-radius: 0; } .input-underline:focus { border-bottom: 2px solid #fff; box-shadow: none; } .rounded-btn { -webkit-border-radius: 50px; border-radius: 50px; color: rgba(255, 255, 255, 0.8); background: $topnav-background-color; border: 2px solid rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 40px; padding: 0 25px; } .rounded-btn:hover, .rounded-btn:focus, .rounded-btn:active, .rounded-btn:visited { color: rgba(255, 255, 255, 1); border: 2px solid rgba(255, 255, 255, 1); outline: none; } h1 { font-weight: 300; margin-top: 20px; margin-bottom: 10px; font-size: 36px; small { color: rgba(255, 255, 255, 0.7); } } .form-group { padding: 8px 0; input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6) !important; } input:-moz-placeholder { /* Firefox 18- */ color: rgba(255, 255, 255, 0.6) !important; } input::-moz-placeholder { /* Firefox 19+ */ color: rgba(255, 255, 255, 0.6) !important; } input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.6) !important; } } .form-content { padding: 40px 0; } .user-avatar { -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #fff; } } ================================================ FILE: src/app/login/login.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 { LoginComponent } from './login.component'; import { LoginModule } from './login.module'; describe('LoginComponent', () => { let component: LoginComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [LoginModule, RouterTestingModule, BrowserAnimationsModule] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(LoginComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/login/login.component.ts ================================================ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { routerTransition } from '../router.animations'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], animations: [routerTransition()] }) export class LoginComponent implements OnInit { constructor(public router: Router) {} ngOnInit() {} onLoggedin() { localStorage.setItem('isLoggedin', 'true'); } } ================================================ FILE: src/app/login/login.module.spec.ts ================================================ import { LoginModule } from './login.module'; describe('LoginModule', () => { let loginModule: LoginModule; beforeEach(() => { loginModule = new LoginModule(); }); it('should create an instance', () => { expect(loginModule).toBeTruthy(); }); }); ================================================ FILE: src/app/login/login.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; import { LoginRoutingModule } from './login-routing.module'; import { LoginComponent } from './login.component'; @NgModule({ imports: [CommonModule, TranslateModule, LoginRoutingModule], declarations: [LoginComponent] }) export class LoginModule {} ================================================ FILE: src/app/not-found/not-found-routing.module.ts ================================================ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { NotFoundComponent } from './not-found.component'; const routes: Routes = [ { path: '', component: NotFoundComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class NotFoundRoutingModule {} ================================================ FILE: src/app/not-found/not-found.component.html ================================================

not-found works!

================================================ FILE: src/app/not-found/not-found.component.scss ================================================ ================================================ FILE: src/app/not-found/not-found.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { NotFoundComponent } from './not-found.component'; describe('NotFoundComponent', () => { let component: NotFoundComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [NotFoundComponent] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(NotFoundComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/not-found/not-found.component.ts ================================================ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-not-found', templateUrl: './not-found.component.html', styleUrls: ['./not-found.component.scss'] }) export class NotFoundComponent implements OnInit { constructor() {} ngOnInit() {} } ================================================ FILE: src/app/not-found/not-found.module.spec.ts ================================================ import { NotFoundModule } from './not-found.module'; describe('NotFoundModule', () => { let notFoundModule: NotFoundModule; beforeEach(() => { notFoundModule = new NotFoundModule(); }); it('should create an instance', () => { expect(notFoundModule).toBeTruthy(); }); }); ================================================ FILE: src/app/not-found/not-found.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { NotFoundRoutingModule } from './not-found-routing.module'; import { NotFoundComponent } from './not-found.component'; @NgModule({ imports: [CommonModule, NotFoundRoutingModule], declarations: [NotFoundComponent] }) export class NotFoundModule {} ================================================ FILE: src/app/router.animations.ts ================================================ import { animate, state, style, transition, trigger } from '@angular/animations'; export function routerTransition() { return fadeInAnimation(); } export function noTransition() { return trigger('routerTransition', []); } export function fadeInAnimation() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [style({ opacity: 0 }), animate(500, style({ opacity: 1 }))]), transition(':leave', [animate(500, style({ opacity: 0 }))]) ]); } export function slideToRight() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({ transform: 'translateX(-100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) ]), transition(':leave', [ style({ transform: 'translateX(0%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' })) ]) ]); } export function slideToLeft() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({ transform: 'translateX(100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) ]), transition(':leave', [ style({ transform: 'translateX(0%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' })) ]) ]); } export function slideToBottom() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({ transform: 'translateY(-100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' })) ]), transition(':leave', [ style({ transform: 'translateY(0%)' }), animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' })) ]) ]); } export function slideToTop() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({ transform: 'translateY(100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' })) ]), transition(':leave', [ style({ transform: 'translateY(0%)' }), animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' })) ]) ]); } ================================================ FILE: src/app/server-error/server-error-routing.module.ts ================================================ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ServerErrorComponent } from './server-error.component'; const routes: Routes = [ { path: '', component: ServerErrorComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ServerErrorRoutingModule {} ================================================ FILE: src/app/server-error/server-error.component.html ================================================

server-error works!

================================================ FILE: src/app/server-error/server-error.component.scss ================================================ ================================================ FILE: src/app/server-error/server-error.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ServerErrorComponent } from './server-error.component'; describe('ServerErrorComponent', () => { let component: ServerErrorComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ServerErrorComponent] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ServerErrorComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/server-error/server-error.component.ts ================================================ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-server-error', templateUrl: './server-error.component.html', styleUrls: ['./server-error.component.scss'] }) export class ServerErrorComponent implements OnInit { constructor() {} ngOnInit() {} } ================================================ FILE: src/app/server-error/server-error.module.spec.ts ================================================ import { ServerErrorModule } from './server-error.module'; describe('ServerErrorModule', () => { let serverErrorModule: ServerErrorModule; beforeEach(() => { serverErrorModule = new ServerErrorModule(); }); it('should create an instance', () => { expect(serverErrorModule).toBeTruthy(); }); }); ================================================ FILE: src/app/server-error/server-error.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ServerErrorRoutingModule } from './server-error-routing.module'; import { ServerErrorComponent } from './server-error.component'; @NgModule({ imports: [CommonModule, ServerErrorRoutingModule], declarations: [ServerErrorComponent] }) export class ServerErrorModule {} ================================================ FILE: src/app/shared/guard/auth.guard.spec.ts ================================================ import { inject, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AuthGuard } from './auth.guard'; describe('AuthGuard', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [RouterTestingModule], providers: [AuthGuard] }); }); it('should ...', inject([AuthGuard], (guard: AuthGuard) => { expect(guard).toBeTruthy(); })); }); ================================================ FILE: src/app/shared/guard/auth.guard.ts ================================================ import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; @Injectable() export class AuthGuard { constructor(private router: Router) {} canActivate() { if (localStorage.getItem('isLoggedin')) { return true; } this.router.navigate(['/login']); return false; } } ================================================ FILE: src/app/shared/guard/index.ts ================================================ export * from './auth.guard'; ================================================ FILE: src/app/shared/index.ts ================================================ export * from './modules'; export * from './pipes/shared-pipes.module'; export * from './guard'; ================================================ FILE: src/app/shared/modules/index.ts ================================================ export * from './page-header/page-header.module'; export * from './stat/stat.module'; ================================================ FILE: src/app/shared/modules/language-translation/language-translation.module.ts ================================================ /** * This module is used to language translations. * The translations are saved in a json file in /src/app/assets/i18n directory * Docs: https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular7-app-with-ngx-translate */ import { HttpClient } from '@angular/common/http'; import { NgModule } from '@angular/core'; // import ngx-translate and the http loader import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; // ngx-translate - required for AOT compilation export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); } @NgModule({ declarations: [], imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], exports: [TranslateModule] }) export class LanguageTranslationModule { constructor(private translate: TranslateService) { // Gets Default language from browser if available, otherwise set English ad default this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de', 'zh-CHS']); this.translate.setDefaultLang('en'); const browserLang = this.translate.getBrowserLang(); this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de|zh-CHS/) ? browserLang : 'en'); } } ================================================ FILE: src/app/shared/modules/page-header/page-header.component.html ================================================

{{ heading }}

  1. Dashboard
  2. {{ heading }}
================================================ FILE: src/app/shared/modules/page-header/page-header.component.scss ================================================ ================================================ FILE: src/app/shared/modules/page-header/page-header.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { PageHeaderComponent } from './page-header.component'; import { PageHeaderModule } from './page-header.module'; describe('PageHeaderComponent', () => { let component: PageHeaderComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [PageHeaderModule, RouterTestingModule] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(PageHeaderComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/shared/modules/page-header/page-header.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-page-header', templateUrl: './page-header.component.html', styleUrls: ['./page-header.component.scss'] }) export class PageHeaderComponent implements OnInit { @Input() heading: string; @Input() icon: string; constructor() {} ngOnInit() {} } ================================================ FILE: src/app/shared/modules/page-header/page-header.module.spec.ts ================================================ import { PageHeaderModule } from './page-header.module'; describe('PageHeaderModule', () => { let pageHeaderModule: PageHeaderModule; beforeEach(() => { pageHeaderModule = new PageHeaderModule(); }); it('should create an instance', () => { expect(pageHeaderModule).toBeTruthy(); }); }); ================================================ FILE: src/app/shared/modules/page-header/page-header.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { PageHeaderComponent } from './page-header.component'; @NgModule({ imports: [CommonModule, RouterModule], declarations: [PageHeaderComponent], exports: [PageHeaderComponent] }) export class PageHeaderModule {} ================================================ FILE: src/app/shared/modules/stat/stat.component.html ================================================
{{ count }}
{{ label }}
View Details {{ data }}
================================================ FILE: src/app/shared/modules/stat/stat.component.scss ================================================ ================================================ FILE: src/app/shared/modules/stat/stat.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { StatComponent } from './stat.component'; describe('StatComponent', () => { let component: StatComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [StatComponent] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(StatComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/shared/modules/stat/stat.component.ts ================================================ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-stat', templateUrl: './stat.component.html', styleUrls: ['./stat.component.scss'] }) export class StatComponent implements OnInit { @Input() bgClass: string; @Input() icon: string; @Input() count: number; @Input() label: string; @Input() data: number; @Output() event: EventEmitter = new EventEmitter(); constructor() {} ngOnInit() {} } ================================================ FILE: src/app/shared/modules/stat/stat.module.spec.ts ================================================ import { StatModule } from './stat.module'; describe('StatModule', () => { let statModule: StatModule; beforeEach(() => { statModule = new StatModule(); }); it('should create an instance', () => { expect(statModule).toBeTruthy(); }); }); ================================================ FILE: src/app/shared/modules/stat/stat.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { StatComponent } from './stat.component'; @NgModule({ imports: [CommonModule], declarations: [StatComponent], exports: [StatComponent] }) export class StatModule {} ================================================ FILE: src/app/shared/pipes/shared-pipes.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; @NgModule({ imports: [CommonModule], declarations: [] }) export class SharedPipesModule {} ================================================ FILE: src/app/shared/services/index.ts ================================================ ================================================ FILE: src/app/signup/signup-routing.module.ts ================================================ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { SignupComponent } from './signup.component'; const routes: Routes = [ { path: '', component: SignupComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class SignupRoutingModule {} ================================================ FILE: src/app/signup/signup.component.html ================================================ ================================================ FILE: src/app/signup/signup.component.scss ================================================ // shared css for the login and signup page @import '../login/login.component.scss'; ================================================ FILE: src/app/signup/signup.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 { SignupComponent } from './signup.component'; import { SignupModule } from './signup.module'; describe('SignupComponent', () => { let component: SignupComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [SignupModule, RouterTestingModule, BrowserAnimationsModule] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(SignupComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/signup/signup.component.ts ================================================ import { Component, OnInit } from '@angular/core'; import { routerTransition } from '../router.animations'; @Component({ selector: 'app-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.scss'], animations: [routerTransition()] }) export class SignupComponent implements OnInit { constructor() {} ngOnInit() {} } ================================================ FILE: src/app/signup/signup.module.spec.ts ================================================ import { SignupModule } from './signup.module'; describe('SignupModule', () => { let signupModule: SignupModule; beforeEach(() => { signupModule = new SignupModule(); }); it('should create an instance', () => { expect(signupModule).toBeTruthy(); }); }); ================================================ FILE: src/app/signup/signup.module.ts ================================================ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; import { SignupRoutingModule } from './signup-routing.module'; import { SignupComponent } from './signup.component'; @NgModule({ imports: [CommonModule, TranslateModule, SignupRoutingModule], declarations: [SignupComponent] }) export class SignupModule {} ================================================ FILE: src/assets/i18n/de.json ================================================ { "Dashboard": "Dashboard", "Charts": "Graphen", "Tables": "Tabellen", "Forms": "Formulare", "Bootstrap Element": "Bootstrap Element", "Bootstrap Grid": "Bootstrap Grid", "Component": "Komponente", "Menu": "Menü", "Submenu": "Submenü", "Blank Page": "Leere Seite", "More Theme": "Mehr Themes", "Download Now": "Jetzt runterladen", "Language": "Sprache", "English": "Englisch", "French": "Französisch", "Urdu": "Urdu", "Spanish": "Spanisch", "Italian": "Italienisch", "Farsi": "Farsi", "German": "Deutsch", "Simplified Chinese": "Vereinfachtes Chinesisch", "Search" : "Suchen", "Settings" : "Einstellungen", "Profile" : "Profil", "Inbox" : "Posteingang", "Log Out" : "Ausloggen", "Pending Task" : "Ausstehende Aufgabe", "In queue" : "In der Warteschlange", "Mail" : "Post", "View All" : "Alle Anzeigen", "More Themes" : "More Themes", "Collapse Sidebar" : "Collapse Sidebar", "Full Name": "Full Name", "Email": "Email", "Password": "Password", "Repeat Password": "Repeat Password", "Register": "Register", "Log in": "Log in" } ================================================ FILE: src/assets/i18n/en.json ================================================ { "Dashboard": "Dashboard", "Charts": "Charts", "Tables": "Tables", "Forms": "Forms", "Bootstrap Element": "Bootstrap Element", "Bootstrap Grid": "Bootstrap Grid", "Component": "Component", "Menu": "Menu", "Submenu": "Submenu", "Blank Page": "Blank Page", "More Theme": "More Themes", "Download Now": "Download Now", "Language": "Language", "English": "English", "French": "French", "Urdu": "Urdu", "Spanish": "Spanish", "Italian": "Italian", "Farsi": "Farsi", "German": "German", "Simplified Chinese": "Simplified Chinese", "Search" : "Search", "Settings" : "Settings", "Profile" : "Profile", "Inbox" : "Inbox", "Log Out" : "Log Out", "Pending Task" : "Pending Task", "In queue" : "In queue", "Mail" : "Mail", "View All" : "View All", "More Themes" : "More Themes", "Collapse Sidebar" : "Collapse Sidebar", "Full Name": "Full Name", "Email": "Email", "Password": "Password", "Repeat Password": "Repeat Password", "Register": "Register", "Log in": "Log in" } ================================================ FILE: src/assets/i18n/es.json ================================================ { "Dashboard": "Principal", "Charts": "Gráficos", "Tables": "Tablas", "Forms": "Formularios", "Bootstrap Element": "Elementos Bootstrap", "Bootstrap Grid": "Cuadrícula Bootstrap", "Component": "Componentes", "Menu": "Menú", "Submenu": "Submenú", "Blank Page": "Página en Blanco", "More Theme": "Más temas", "Download Now": "Descarga Ahora", "Language": "Idioma", "English": "Inglés", "French": "Francés", "Urdu": "Urdu", "Spanish": "Español", "Italian": "Italiano", "Farsi": "Farsi", "German": "Alemán", "Simplified Chinese": "Chino simplificado", "Search" : "Búsqueda", "Settings" : "Ajustes", "Profile" : "Perfil", "Inbox" : "Bandeja de entrada", "Log Out" : "Cerrar Sesión", "Pending Task" : "Tarea pendiente", "In queue" : "En cola", "Mail" : "Correo", "View All" : "Ver todo", "More Themes" : "Más temas", "Collapse Sidebar" : "Contraer barra lateral", "Full Name": "Nombre Completo", "Email": "Correo Electrónico", "Password": "Contraseña", "Repeat Password": "Repetir Contraseña", "Register": "Registrarse", "Log in": "Entrar" } ================================================ FILE: src/assets/i18n/fa.json ================================================ { "Dashboard": "داشبورد", "Charts": "چارت ها", "Tables": "جداول", "Forms": "فرم ها", "Bootstrap Element": "عناصر بوتسترپ", "Bootstrap Grid": "جداول بوتسترپ", "Component": "کامپوننت", "Menu": "منوها", "Submenu": "زیر منوها", "Blank Page": "صفحه خالی", "More Theme": "تم های بیشتر", "Download Now": "دانلود", "Language": "زبان", "English": "انگلیسی", "French": "فرانسوی", "Urdu": "اردو", "Spanish": "اسپانیایی", "Italian": "ایتالیایی", "Farsi": "فارسی", "German": "آلمانی", "Simplified Chinese": "چینی ساده شده", "Search" : "جستجو", "Settings" : "تنظیمات", "Profile" : "مشخصات", "Inbox" : "صندوق ورودی", "Log Out" : "خروج از سیستم", "Pending Task" : "وظایف در انتظار", "In queue" : "در صف", "Mail" : "ایمیل", "View All" : "نمایش همه", "More Themes" : "More Themes", "Collapse Sidebar" : "Collapse Sidebar", "Full Name": "Full Name", "Email": "Email", "Password": "Password", "Repeat Password": "Repeat Password", "Register": "Register", "Log in": "Log in" } ================================================ FILE: src/assets/i18n/fr.json ================================================ { "Dashboard": "Tableau de bord", "Charts": "Hit-parade", "Tables": "Tableaux", "Forms": "Froms", "Bootstrap Element": "Bootstrap Élément", "Bootstrap Grid": "Bootstrap Grille", "Component": "Composant", "Menu": "Menu", "Submenu": "Sous-menu", "Blank Page": "Blanc Page", "More Theme": "Plus Thèmes", "Download Now": "Télécharger", "Language": "Langue", "English": "Anglais", "French": "Français", "Urdu": "Ourdou", "Spanish": "Spanish", "Italian": "Italien", "Farsi": "Farsi", "German": "Allemand", "Simplified Chinese": "Chinois Simplifié", "Search" : "Chercher", "Settings" : "Paramètres", "Profile" : "Profile", "Inbox" : "Boîte de réception", "Log Out" : "Connectez - Out", "Pending Task" : "Tâche en attente", "In queue" : "Dans la queue", "Mail" : "Courrier", "View All" : "Voir tout", "More Themes" : "More Themes", "Collapse Sidebar" : "Collapse Sidebar", "Full Name": "Nom complet", "Email": "Email", "Password": "mot de passe", "Repeat Password": "Répéter le mot de passe", "Register": "registre", "Log in": "S'identifier" } ================================================ FILE: src/assets/i18n/it.json ================================================ { "Dashboard": "Principale", "Charts": "Grafici", "Tables": "Tabelle", "Forms": "Formulari", "Bootstrap Element": "Elementi Bootstrap", "Bootstrap Grid": "Griglia Bootstrap", "Component": "Componenti", "Menu": "Menu", "Submenu": "Submenu", "Blank Page": "Pagina in Bianco", "More Theme": "Altri temi", "Download Now": "Scarica Adesso", "Language": "Lingua", "English": "Inglese", "French": "Francese", "Urdu": "Urdu", "Spanish": "Spagnolo", "Italian": "Italiano", "Farsi": "Farsi", "German": "Tedesco", "Simplified Chinese": "Cinese semplificato", "Search" : "Ricerca", "Settings" : "Impostazioni", "Profile" : "Profilo", "Inbox" : "Posta in arrivo", "Log Out" : "Uscire", "Pending Task" : "Attività in sospeso", "In queue" : "In coda", "Mail" : "Posta", "View All" : "Visualizza tutti", "More Themes" : "Altri Temi", "Collapse Sidebar" : "Collassa Sidebar", "Full Name": "Nome Completo", "Email": "Posta Elettronica", "Password": "Password", "Repeat Password": "Ripetere la password", "Register": "Registrarsi", "Log in": "Entrare" } ================================================ FILE: src/assets/i18n/ur.json ================================================ { "Dashboard": "داشبورد", "Charts": "چارت ها", "Tables": "جداول", "Forms": "فرم ها", "Bootstrap Element": "عنصر بوتسترپ", "Bootstrap Grid": "جدول بوتسترپ", "Component": "کامپوننت", "Menu": "منو", "Submenu": "زیر منو", "Blank Page": "صفحه خالی", "More Theme": "تم های بیشتر", "Download Now": "دانلود", "Language": "زبان", "English": "انگریزی", "French": "فرانسیسی", "Urdu": "اردو", "Spanish": "ہسپانوی", "Italian": "اطالوی", "Farsi": "فارسی", "German": "جرمن", "Simplified Chinese": "چینی چینی", "Search" : "تلاش کریں", "Settings" : "ترتیبات", "Profile" : "پروفائل", "Inbox" : "ان باکس", "Log Out" : "لاگ آوٹ", "Pending Task" : "زیر التواء ٹاسک", "In queue" : "قطار میں", "Mail" : "میل", "View All" : "سب دیکھیں", "More Themes" : "More Themes", "Collapse Sidebar" : "Collapse Sidebar", "Full Name": "Full Name", "Email": "Email", "Password": "Password", "Repeat Password": "Repeat Password", "Register": "Register", "Log in": "Log in" } ================================================ FILE: src/assets/i18n/zh-CHS.json ================================================ { "Dashboard": "仪表板", "Charts": "图表", "Tables": "表格", "Forms": "表单", "Bootstrap Element": "Bootstrap 元素", "Bootstrap Grid": "Bootstrap 网格", "Component": "组件", "Menu": "菜单", "Submenu": "子菜单", "Blank Page": "空白页", "More Theme": "更多主题", "Download Now": "现在下载", "Language": "语言", "English": "英语", "French": "法语", "Urdu": "乌尔都语", "Spanish": "西班牙语", "Italian": "意大利语", "Farsi": "波斯语", "German": "德语", "Simplified Chinese": "简体中文", "Search" : "搜索", "Settings" : "设置", "Profile" : "个人配置", "Inbox" : "收件箱", "Log Out" : "退出", "Pending Task" : "挂起任务", "In queue" : "队列中", "Mail" : "邮件", "View All" : "查看所有", "More Themes" : "More Themes", "Collapse Sidebar" : "Collapse Sidebar", "Full Name": "Full Name", "Email": "Email", "Password": "Password", "Repeat Password": "Repeat Password", "Register": "Register", "Log in": "Log in" } ================================================ FILE: src/environments/environment.prod.ts ================================================ export const environment = { production: true }; ================================================ FILE: src/environments/environment.ts ================================================ // This file can be replaced during build by using the `fileReplacements` array. // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. export const environment = { production: false }; /* * For easier debugging in development mode, you can import the following file * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. * * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. ================================================ FILE: src/index.html ================================================ SB Admin Angular14 BS5 ================================================ FILE: src/karma.conf.js ================================================ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { const defaults = { basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../coverage'), reports: ['html', 'lcovonly'], fixWebpackSourcePaths: true }, angularCli: { environment: 'dev' }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }; if (process.env.TEST_CI) { Object.assign(defaults, { autoWatch: false, browsers: ['ChromeHeadlessNoSandbox'], singleRun: true, customLaunchers: { ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', flags: ['--no-sandbox'] } }, browserNoActivityTimeout: 60000 }); } config.set(defaults); }; ================================================ FILE: src/main.ts ================================================ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); ================================================ FILE: src/polyfills.ts ================================================ /*************************************************************************************************** * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. */ import '@angular/localize/init'; /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es/reflect'; /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import 'zone.js'; // Included with Angular CLI. /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/guide/browser-support */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** * If the application will be indexed by Google Search, the following is required. * Googlebot uses a renderer based on Chrome 41. * https://developers.google.com/search/docs/guides/rendering **/ // import 'core-js/es6/array'; /** * By default, zone.js will patch all possible macroTask and DomEvents * user can disable parts of macroTask/DomEvents patch by setting following flags */ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames /* * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js * with the following flag, it will bypass `zone.js` patch for IE/Edge */ // (window as any).__Zone_enable_cross_context_check = true; /*************************************************************************************************** * APPLICATION IMPORTS */ ================================================ FILE: src/styles/_responsive.scss ================================================ @media screen and (max-width: 992px) { .push-right { .sidebar { left: 235px !important; } } } ================================================ FILE: src/styles/_rtl.scss ================================================ .rtl { .sidebar { left: auto !important; right: 0 !important; text-align: right; > ul.list-group { padding: 0; } } .main-container { margin-left: 0 !important; margin-right: 235px; } /*rtl dropdown items correction*/ .dropdown-menu { text-align: right; } * { direction: rtl; } .navbar * { direction: ltr; } .sidebar * { direction: rtl; } .navbar .dropdown-menu { text-align: left; } .breadcrumb { direction: ltr; justify-content: flex-end; * { direction: ltr; } } .datepicker-input { direction: ltr; .dropdown-menu { direction: ltr; * { direction: ltr; } } } .input-group { direction: ltr; } } @media screen and (max-width: 992px) { .rtl { .navbar-brand { direction: ltr; } .sidebar { right: -235px !important; } .main-container { margin-right: 0; } &.push-right { .sidebar { left: auto !important; right: 0 !important; } } } } ================================================ FILE: src/styles/_spinner.scss ================================================ .spinner { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari */ transform: translate(-50%, -50%); /* Standard syntax */ width: 70px; height: 70px; > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } ================================================ FILE: src/styles/_utils.scss ================================================ .fs-12 { font-size: 12px; } ================================================ FILE: src/styles/app.scss ================================================ /* You can add global styles to this file, and also import other style files */ @import 'bootstrap/scss/bootstrap'; @import 'spinner'; @import 'utils'; @import 'rtl'; @import 'responsive'; @media print { .breadcrumb { display: none !important; } } ================================================ FILE: src/test.ts ================================================ // This file is required by karma.conf.js and loads recursively all the .spec and framework files import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import 'zone.js/dist/async-test'; import 'zone.js/dist/fake-async-test'; import 'zone.js/dist/jasmine-patch'; import 'zone.js/dist/long-stack-trace-zone'; import 'zone.js/dist/proxy.js'; import 'zone.js/dist/sync-test'; // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. declare const __karma__: any; // Prevent Karma from running prematurely. __karma__.loaded = function () {}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: false } }); // Finally, start Karma to run the tests. __karma__.start(); ================================================ FILE: src/tsconfig.app.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "types": ["node"] }, "files": ["main.ts", "polyfills.ts"], "include": ["src/**/*.d.ts"] } ================================================ FILE: src/tsconfig.spec.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "types": ["jasmine", "node"] }, "files": ["test.ts", "polyfills.ts"], "include": ["**/*.spec.ts", "**/*.d.ts"] } ================================================ FILE: src/typings.d.ts ================================================ /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ================================================ FILE: tsconfig.json ================================================ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "importHelpers": true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "esnext", "moduleResolution": "node", "experimentalDecorators": true, "target": "ES2022", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ], "useDefineForClassFields": false } } ================================================ FILE: tslint.json ================================================ { "rulesDirectory": ["node_modules/codelyzer"], "rules": { "arrow-return-shorthand": true, "callable-types": true, "class-name": true, "comment-format": [true, "check-space"], "curly": true, "deprecation": { "severity": "warn" }, "eofline": true, "forin": true, "import-blacklist": [true, "rxjs/Rx"], "import-spacing": true, "indent": [true, "spaces"], "interface-over-type-literal": true, "label-position": true, "max-line-length": [true, 140], "member-access": false, "member-ordering": [ true, { "order": ["static-field", "instance-field", "static-method", "instance-method"] } ], "no-arg": true, "no-bitwise": true, "no-console": [true, "debug", "info", "time", "timeEnd", "trace"], "no-construct": true, "no-debugger": true, "no-duplicate-super": true, "no-empty": false, "no-empty-interface": true, "no-eval": true, "no-inferrable-types": [true, "ignore-params"], "no-misused-new": true, "no-non-null-assertion": true, "no-redundant-jsdoc": true, "no-shadowed-variable": true, "no-string-literal": false, "no-string-throw": true, "no-switch-case-fall-through": true, "no-trailing-whitespace": true, "no-unnecessary-initializer": true, "no-unused-expression": true, "no-use-before-declare": true, "no-var-keyword": true, "object-literal-sort-keys": false, "one-line": [true, "check-open-brace", "check-catch", "check-else", "check-whitespace"], "prefer-const": true, "quotemark": [true, "single"], "radix": true, "semicolon": [true, "always"], "triple-equals": [true, "allow-null-check"], "typedef-whitespace": [ true, { "call-signature": "nospace", "index-signature": "nospace", "parameter": "nospace", "property-declaration": "nospace", "variable-declaration": "nospace" } ], "unified-signatures": true, "variable-name": false, "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"], "directive-selector": [true, "attribute", "app", "camelCase"], "component-selector": [true, "element", "app", "kebab-case"], "no-output-on-prefix": true, "no-inputs-metadata-property": true, "no-outputs-metadata-property": true, "no-host-metadata-property": true, "no-input-rename": true, "no-output-rename": true, "use-lifecycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true } }