12 |
14 |
28 |
61 |
62 |
72 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { LbdFreeAngularcliPage } from './app.po';
2 |
3 | describe('lbd-free-angularcli App', function() {
4 | let page: LbdFreeAngularcliPage;
5 |
6 | beforeEach(() => {
7 | page = new LbdFreeAngularcliPage();
8 | });
9 |
10 | it('should display message saying app works', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class LbdFreeAngularcliPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "module": "commonjs",
8 | "moduleResolution": "node",
9 | "outDir": "../dist/out-tsc-e2e",
10 | "sourceMap": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "../node_modules/@types"
14 | ]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', 'angular-cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-remap-istanbul'),
12 | require('angular-cli/plugins/karma')
13 | ],
14 | files: [
15 |
16 | ],
17 | preprocessors: {
18 | './src/test.ts': ['angular-cli']
19 | },
20 | mime: {
21 | 'text/x-typescript': ['ts','tsx']
22 | },
23 | remapIstanbulReporter: {
24 | dir: require('path').join(__dirname, 'coverage'), reports: {
25 | html: 'coverage',
26 | lcovonly: './coverage/coverage.lcov'
27 | }
28 | },
29 |
30 | reporters: config.angularCli && config.angularCli.codeCoverage
31 | ? ['progress', 'karma-remap-istanbul']
32 | : ['progress'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false
39 | });
40 | };
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lbd-free-angular-cli",
3 | "version": "1.7.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e",
12 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@angular/animations": "11.0.4",
17 | "@angular/common": "11.0.4",
18 | "@angular/compiler": "11.0.4",
19 | "@angular/core": "11.0.4",
20 | "@angular/forms": "11.0.4",
21 | "@angular/platform-browser": "11.0.4",
22 | "@angular/platform-browser-dynamic": "11.0.4",
23 | "@angular/router": "11.0.4",
24 | "@ngui/map": "0.30.3",
25 | "@types/googlemaps": "3.40.5",
26 | "animate.css": "4.1.1",
27 | "arrive": "2.4.1",
28 | "bootstrap": "3.3.7",
29 | "bootstrap-notify": "3.1.3",
30 | "chartist": "0.11.4",
31 | "core-js": "3.8.1",
32 | "googleapis": "66.0.0",
33 | "jquery": "3.5.1",
34 | "perfect-scrollbar": "1.5.0",
35 | "rxjs": "6.6.3",
36 | "rxjs-compat": "6.6.3",
37 | "zone.js": "0.11.3"
38 | },
39 | "devDependencies": {
40 | "@angular-devkit/build-angular": "0.1100.4",
41 | "@angular/cli": "11.0.4",
42 | "@angular/compiler-cli": "11.0.4",
43 | "@types/jasmine": "3.6.2",
44 | "@types/node": "14.14.13",
45 | "codelyzer": "6.0.1",
46 | "jasmine-core": "3.6.0",
47 | "jasmine-spec-reporter": "6.0.0",
48 | "karma": "5.2.3",
49 | "karma-chrome-launcher": "3.1.0",
50 | "karma-cli": "2.0.0",
51 | "karma-jasmine": "4.0.1",
52 | "karma-jasmine-html-reporter": "1.5.4",
53 | "karma-coverage-istanbul-reporter": "3.0.3",
54 | "protractor": "7.0.0",
55 | "ts-node": "9.1.1",
56 | "tslint": "6.1.3",
57 | "typescript": "4.0.3"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | /*global jasmine */
5 | var SpecReporter = require('jasmine-spec-reporter');
6 |
7 | exports.config = {
8 | allScriptsTimeout: 11000,
9 | specs: [
10 | './e2e/**/*.e2e-spec.ts'
11 | ],
12 | capabilities: {
13 | 'browserName': 'chrome'
14 | },
15 | directConnect: true,
16 | baseUrl: 'http://localhost:4200/',
17 | framework: 'jasmine',
18 | jasmineNodeOpts: {
19 | showColors: true,
20 | defaultTimeoutInterval: 30000,
21 | print: function() {}
22 | },
23 | useAllAngular2AppRoots: true,
24 | beforeLaunch: function() {
25 | require('ts-node').register({
26 | project: 'e2e'
27 | });
28 | },
29 | onPrepare: function() {
30 | jasmine.getEnv().addReporter(new SpecReporter());
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ashutosh102/Angular_with_bootstrap/75c6f2cbbcc86bf9af7c3c135037b127948bc919/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
63 |
64 |
71 |
65 |
70 | Light Bootstrap Dashboard Angular
66 |v1.7.0
67 |We are constantly doing updates for you.
68 | View Documentation 69 |
3 |
7 |
8 |
17 |
--------------------------------------------------------------------------------
/src/app/layouts/admin-layout/admin-layout.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ashutosh102/Angular_with_bootstrap/75c6f2cbbcc86bf9af7c3c135037b127948bc919/src/app/layouts/admin-layout/admin-layout.component.scss
--------------------------------------------------------------------------------
/src/app/layouts/admin-layout/admin-layout.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminLayoutComponent } from './admin-layout.component';
4 |
5 | describe('AdminLayoutComponent', () => {
6 | let component: AdminLayoutComponent;
7 | let fixture: ComponentFixture
9 |
15 |
16 |
2 |
22 |
--------------------------------------------------------------------------------
/src/app/lbd/lbd-chart/lbd-chart.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit, AfterViewInit, ChangeDetectionStrategy} from '@angular/core';
2 | import * as Chartist from 'chartist';
3 |
4 | export interface LegendItem {
5 | title: string;
6 | imageClass: string;
7 | }
8 |
9 | export enum ChartType {
10 | Pie,
11 | Line,
12 | Bar
13 | }
14 |
15 | @Component({
16 | selector: 'lbd-chart',
17 | templateUrl: './lbd-chart.component.html',
18 | changeDetection: ChangeDetectionStrategy.OnPush
19 | })
20 | export class LbdChartComponent implements OnInit, AfterViewInit {
21 | static currentId = 1;
22 |
23 | @Input()
24 | public title: string;
25 |
26 | @Input()
27 | public subtitle: string;
28 |
29 | @Input()
30 | public chartClass: string;
31 |
32 | @Input()
33 | public chartType: ChartType;
34 |
35 | @Input()
36 | public chartData: any;
37 |
38 | @Input()
39 | public chartOptions: any;
40 |
41 | @Input()
42 | public chartResponsive: any[];
43 |
44 | @Input()
45 | public footerIconClass: string;
46 |
47 | @Input()
48 | public footerText: string;
49 |
50 | @Input()
51 | public legendItems: LegendItem[];
52 |
53 | @Input()
54 | public withHr: boolean;
55 |
56 | public chartId: string;
57 |
58 | constructor() {
59 | }
60 |
61 | public ngOnInit(): void {
62 | this.chartId = `lbd-chart-${LbdChartComponent.currentId++}`;
63 | }
64 |
65 | public ngAfterViewInit(): void {
66 |
67 | switch (this.chartType) {
68 | case ChartType.Pie:
69 | new Chartist.Pie(`#${this.chartId}`, this.chartData, this.chartOptions, this.chartResponsive);
70 | break;
71 | case ChartType.Line:
72 | new Chartist.Line(`#${this.chartId}`, this.chartData, this.chartOptions, this.chartResponsive);
73 | break;
74 | case ChartType.Bar:
75 | new Chartist.Bar(`#${this.chartId}`, this.chartData, this.chartOptions, this.chartResponsive);
76 | break;
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/app/lbd/lbd.module.ts:
--------------------------------------------------------------------------------
1 |
2 | import { NgModule } from '@angular/core';
3 | import { CommonModule } from '@angular/common';
4 | import { RouterModule } from '@angular/router';
5 |
6 | import { LbdChartComponent } from './lbd-chart/lbd-chart.component';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | RouterModule
12 | ],
13 | declarations: [
14 |
15 | LbdChartComponent
16 |
17 | ],
18 | exports: [
19 | LbdChartComponent
20 | ]
21 | })
22 | export class LbdModule { }
23 |
--------------------------------------------------------------------------------
/src/app/maps/maps.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ashutosh102/Angular_with_bootstrap/75c6f2cbbcc86bf9af7c3c135037b127948bc919/src/app/maps/maps.component.css
--------------------------------------------------------------------------------
/src/app/maps/maps.component.html:
--------------------------------------------------------------------------------
1 |
3 |
6 | {{ title }}
4 |{{ subtitle }}
5 |
7 |
8 |
9 |
20 |
21 |
2 |
3 |
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/app/maps/maps.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { MapsComponent } from './maps.component';
7 |
8 | describe('MapsComponent', () => {
9 | let component: MapsComponent;
10 | let fixture: ComponentFixture
2 |
87 |
--------------------------------------------------------------------------------
/src/app/notifications/notifications.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { NotificationsComponent } from './notifications.component';
7 |
8 | describe('NotificationsComponent', () => {
9 | let component: NotificationsComponent;
10 | let fixture: ComponentFixture
3 |
86 |
4 |
85 |
5 |
8 | Notifications
6 |Handcrafted by our friend Robert McIntosh. Please checkout the full documentation.
7 |
9 |
51 |
52 | 83 |
84 |
10 |
50 |
11 |
30 | Notifications Style
12 |
13 | This is a plain notification
14 |
15 |
16 |
17 | This is a notification with close button.
18 |
19 |
20 |
21 |
22 | This is a notification with close button and icon.
23 |
24 |
25 |
26 |
27 | This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
28 |
29 |
31 |
49 | Notification states
32 |
33 |
34 | Info - This is a regular notification made with ".alert-info"
35 |
36 |
37 |
38 | Success - This is a regular notification made with ".alert-success"
39 |
40 |
41 |
42 | Warning - This is a regular notification made with ".alert-warning"
43 |
44 |
45 |
46 | Danger - This is a regular notification made with ".alert-danger"
47 |
48 | 51 |
52 | 83 |
3 |
79 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | declare const $: any;
4 | declare interface RouteInfo {
5 | path: string;
6 | title: string;
7 | icon: string;
8 | class: string;
9 | }
10 | export const ROUTES: RouteInfo[] = [
11 | { path: '/dashboard', title: 'Dashboard', icon: 'pe-7s-graph', class: '' },
12 | { path: '/user', title: 'User Profile', icon:'pe-7s-user', class: '' },
13 | { path: '/table', title: 'Table List', icon:'pe-7s-note2', class: '' },
14 | { path: '/typography', title: 'Typography', icon:'pe-7s-news-paper', class: '' },
15 | { path: '/icons', title: 'Icons', icon:'pe-7s-science', class: '' },
16 | { path: '/maps', title: 'Maps', icon:'pe-7s-map-marker', class: '' },
17 | { path: '/notifications', title: 'Notifications', icon:'pe-7s-bell', class: '' },
18 | { path: '/upgrade', title: 'Upgrade to PRO', icon:'pe-7s-rocket', class: 'active-pro' },
19 | ];
20 |
21 | @Component({
22 | selector: 'app-sidebar',
23 | templateUrl: './sidebar.component.html'
24 | })
25 | export class SidebarComponent implements OnInit {
26 | menuItems: any[];
27 |
28 | constructor() { }
29 |
30 | ngOnInit() {
31 | this.menuItems = ROUTES.filter(menuItem => menuItem);
32 | }
33 | isMobileMenu() {
34 | if ($(window).width() > 991) {
35 | return false;
36 | }
37 | return true;
38 | };
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule } from '@angular/router';
4 | import { SidebarComponent } from './sidebar.component';
5 |
6 | @NgModule({
7 | imports: [ RouterModule, CommonModule ],
8 | declarations: [ SidebarComponent ],
9 | exports: [ SidebarComponent ]
10 | })
11 |
12 | export class SidebarModule {}
13 |
--------------------------------------------------------------------------------
/src/app/tables/tables.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ashutosh102/Angular_with_bootstrap/75c6f2cbbcc86bf9af7c3c135037b127948bc919/src/app/tables/tables.component.css
--------------------------------------------------------------------------------
/src/app/tables/tables.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
11 |
78 |
6 | 
7 |
8 | Creative Tim
9 |
10 |
7 |
2 |
52 |
--------------------------------------------------------------------------------
/src/app/tables/tables.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { TablesComponent } from './tables.component';
7 |
8 | describe('TablesComponent', () => {
9 | let component: TablesComponent;
10 | let fixture: ComponentFixture
3 |
51 |
4 |
50 |
5 |
27 |
6 |
26 |
7 |
10 | Striped Table with Hover
8 |Here is a subtitle for this table
9 |
11 |
12 |
13 |
23 |
24 |
25 | | {{ cell }} | 15 |
|---|
| {{cell}} | 20 |
28 |
49 |
29 |
48 |
30 |
33 | Table on Plain Background
31 |Here is a subtitle for this table
32 |
34 |
35 |
36 |
46 |
47 | | {{ cell }} | 38 |
|---|
| {{cell}} | 43 |
2 |
83 |
--------------------------------------------------------------------------------
/src/app/typography/typography.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { TypographyComponent } from './typography.component';
7 |
8 | describe('TypographyComponent', () => {
9 | let component: TypographyComponent;
10 | let fixture: ComponentFixture
3 |
82 |
4 |
81 |
5 |
80 |
6 |
79 |
7 |
10 | Light Bootstrap Table Heading
8 |Created using Roboto Font Family
9 |
11 |
12 |
78 |
13 |
15 |
16 | Header 1
Light Bootstrap Table Heading 14 |
17 |
19 | Header 2
Light Bootstrap Table Heading 18 |
20 |
22 | Header 3
Light Bootstrap Table Heading 21 |
23 |
25 | Header 4
Light Bootstrap Table Heading 24 |
26 |
28 | Header 5
Light Bootstrap Table Heading 27 |
29 |
31 | Header 6
Light Bootstrap Table Heading 30 |
32 |
34 | ParagraphLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
33 |
35 |
45 |
46 | Quote
36 |37 |44 |38 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 39 |
40 | 41 | Steve Jobs, CEO Apple 42 | 43 |
47 |
52 | Muted Text
48 |49 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. 50 |
51 |
53 |
56 |
74 | Coloured Text 57 |
58 |59 | Text Primary - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 60 |
61 |62 | Text Info - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 63 |
64 |65 | Text Success - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 66 |
67 |68 | Text Warning - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 69 |
70 |71 | Text Danger - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 72 |
73 |
75 |
".small" is a tag for the headers 76 |
77 | Small Tag
Header with small subtitle".small" is a tag for the headers 76 |
2 |
84 |
--------------------------------------------------------------------------------
/src/app/upgrade/upgrade.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UpgradeComponent } from './upgrade.component';
4 |
5 | describe('UpgradeComponent', () => {
6 | let component: UpgradeComponent;
7 | let fixture: ComponentFixture
3 |
83 |
4 |
81 |
82 |
5 |
80 |
6 |
79 |
7 |
10 |
11 | Light Bootstrap Dashboard PRO Angular
8 |Looking for more components? Please check our Premium Version of Light Bootstrap Dashboard Angular.
9 |10 |
12 |
13 |
14 |
76 |
77 |
78 | | 16 | | Free | 17 |PRO | 18 |
|---|---|---|
| Components | 23 |16 | 24 |115+ | 25 |
| Plugins | 28 |4 | 29 |14+ | 30 |
| Example Pages | 33 |4 | 34 |22+ | 35 |
| Documentation | 38 |39 | 40 | | 41 |42 | 43 | | 44 |
| SASS Files | 47 |48 | | 49 | |
| Login/Register/Lock Pages | 52 |53 | | 54 | |
| Premium Support | 57 |58 | | 59 | |
| 62 | | Free | 63 |Just $49 | 64 |
| 67 | | 68 | Current Version 69 | | 70 |71 | Upgrade to PRO 72 | | 73 |
2 |
122 |
--------------------------------------------------------------------------------
/src/app/user/user.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { UserComponent } from './user.component';
7 |
8 | describe('UserComponent', () => {
9 | let component: UserComponent;
10 | let fixture: ComponentFixture
3 |
121 |
4 |
120 |
5 |
91 |
6 |
90 |
7 |
9 | Edit Profile
8 |
10 |
88 |
89 |
92 |
119 |
93 |
112 |
118 |
94 | 
95 |
96 |
95 |
97 |
106 |
111 | 
100 |
101 | "Lamborghini Mercy
107 | Your chick she so thirsty
108 | I'm in that two seat Lambo"
109 |
112 |
113 |
114 |
115 |
116 |
117 | 