Skip to content

Commit b21f484

Browse files
mohdrashidmohdrashid
committed
* Added BreadCrumb
* Cleaning Code
1 parent f0acba1 commit b21f484

15 files changed

+175
-75
lines changed

‎src/app/app.module.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3-
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
3+
import {LocationStrategy, HashLocationStrategy, CommonModule, PathLocationStrategy} from '@angular/common';
44

55
import { AppComponent } from './app.component';
66

77
// Routing Module
88
import { AppRoutingModule } from './app.routing';
9-
import { FullLayoutComponent } from './layout/full-layout.component';
9+
import { FullLayoutComponent} from './layout/full-layout.component';
10+
import {BreadCrumb} from "./components/breadcrumb/breadcrumb.component";
1011

1112
@NgModule({
1213
imports: [
1314
BrowserModule,
14-
AppRoutingModule
15-
15+
AppRoutingModule,
16+
CommonModule
1617
],
17-
1818
declarations: [
1919
FullLayoutComponent,
20-
AppComponent
20+
AppComponent,BreadCrumb
2121
],
2222
providers: [{
2323
provide: LocationStrategy,
24-
useClass: HashLocationStrategy
24+
useClass: PathLocationStrategy
2525
}],
2626
bootstrap: [ AppComponent ]
2727
})

‎src/app/app.routing.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,36 @@ export const routes: Routes = [
2626
children: [
2727
{
2828
path: 'dashboard',
29-
loadChildren: './dashboard/dashboard.module#DashboardModule'
29+
loadChildren: './dashboard/dashboard.module#DashboardModule',
30+
data:{
31+
title2:"Dashboard"
32+
}
3033
},
3134
{
3235
path: 'form',
3336
loadChildren: './form/form.module#FormModule'
3437
},
3538
{
36-
path: 'main',
37-
loadChildren: './widgets/main/main.module#MainWidgetModule'
38-
},
39-
{
40-
path: 'table',
41-
loadChildren: './widgets/tables/tables.module#TablesWidgetModule'
42-
},
43-
{
44-
path: 'charts',
45-
loadChildren: './widgets/charts/charts.module#ChartsWidgetModule'
39+
path:'widget',
40+
children:[
41+
{
42+
path: '',
43+
pathMatch: 'full',
44+
redirectTo:'widget/main'
45+
},
46+
{
47+
path: 'main',
48+
loadChildren: './widgets/main/main.module#MainWidgetModule'
49+
},
50+
{
51+
path: 'table',
52+
loadChildren: './widgets/tables/tables.module#TablesWidgetModule'
53+
},
54+
{
55+
path: 'chart',
56+
loadChildren: './widgets/charts/charts.module#ChartsWidgetModule'
57+
}
58+
]
4659
}
4760

4861
]

‎src/app/components/breadcrumb/breadcrumb.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<ol class="breadcrumb">
2+
<li><a href="#"><i class="fa fa-fw fa-home"></i></a></li>
3+
<li *ngFor="let item of path; index as i" class="todo-list-item" [id]="i" ><a routerLinkActive="active" href="javascript:void(0)" (click)="route(i)">{{href[i]}}</a></li>
4+
</ol>

‎src/app/components/breadcrumb/breadcrumb.component.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {Component, OnInit} from '@angular/core';
2+
import { NavigationStart, Router} from "@angular/router";
3+
4+
@Component({
5+
selector: 'breadcrumb',
6+
templateUrl: './breadcrumb.component.html'
7+
})
8+
export class BreadCrumb implements OnInit{
9+
ngOnInit(): void {
10+
this.path=this.router.url.split("/");
11+
this.path.splice(0,1);
12+
this.href=this.path.map(function (value) {
13+
return value.charAt(0).toUpperCase() + value.slice(1);
14+
});
15+
console.log(this.path)
16+
}
17+
18+
19+
public disabled: boolean = false;
20+
public status: {isopen: boolean} = {isopen: false};
21+
22+
public path:Array<string>=[];
23+
public href:Array<string>=[];
24+
public router:Router;
25+
constructor(route: Router){
26+
this.router=route;
27+
28+
route.events.forEach((event) => {
29+
if(event instanceof NavigationStart) {
30+
console.log(event)
31+
this.path=event.url.split("/");
32+
this.path.splice(0,1);
33+
this.href=this.path.map(function (value) {
34+
return value.charAt(0).toUpperCase() + value.slice(1);
35+
});
36+
}
37+
// NavigationEnd
38+
// NavigationCancel
39+
// NavigationError
40+
// RoutesRecognized
41+
});
42+
}
43+
44+
route(index){
45+
console.log("route till"+index);
46+
let pathToGo="";
47+
for(let i=0;i<=index;i++){
48+
pathToGo+="/"+this.path[i];
49+
}
50+
console.log(pathToGo)
51+
this.router.navigate([pathToGo]);
52+
53+
}
54+
}

‎src/app/components/pieChart/pieChart.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h4>{{properties['label']}}</h4>
1212
[color]="properties['color']"
1313
[background]="'#eaeaea'"
1414
[radius]=100
15-
[stroke]="10"
15+
[stroke]="7"
1616
[semicircle]="false"
1717
[rounded]="true"
1818
[clockwise]="true"

‎src/app/dashboard/dashboard.component.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
<div class="row">
2-
<ol class="breadcrumb">
3-
<li><a href="#"><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></a></li>
4-
<li class="active">Icons</li>
5-
</ol>
6-
</div><!--/.row-->
7-
81
<div class="row">
92
<div class="col-lg-12">
103
<h1 class="page-header">Dashboard</h1>

‎src/app/form/form.component.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
<div class="row">
2-
<ol class="breadcrumb">
3-
<li><a href="#"><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></a></li>
4-
<li class="active">Icons</li>
5-
</ol>
6-
</div><!--/.row-->
7-
81
<div class="row">
92
<div class="col-lg-12">
103
<h1 class="page-header">Form</h1>

‎src/app/form/form.module.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,14 @@ import {HttpModule} from "@angular/http";
77
import { FormComponent} from "./form.component";
88
import { FormService} from "./form.service";
99
import { FormRoutingModule} from "./form-routing";
10-
import {CommonModule} from "@angular/common";
1110

1211

1312
@NgModule({
1413
imports: [
1514
FormRoutingModule,
1615
FormsModule,
1716
ReactiveFormsModule,
18-
HttpModule,
19-
CommonModule
20-
],
17+
HttpModule],
2118
declarations: [ FormComponent],
2219
providers: [ FormService ]
2320
})

‎src/app/layout/full-layout.component.html

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<ul class="user-menu">
1212
<li class="dropdown pull-right">
1313
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
14-
User <span class="caret"></span></a>
14+
User <span class="caret"></span></a>
1515
<ul class="dropdown-menu" role="menu">
1616
<li><a href="#"><i class="fa fa-fw fa-user"></i> Profile</a></li>
1717
<li><a href="#"><i class="fa fa-fw fa-cogs"></i> Settings</a></li>
@@ -39,17 +39,17 @@
3939
</a>
4040
<ul class="children collapse" id="sub-item-1">
4141
<li>
42-
<a routerLinkActive="active" [routerLink]="['/main']">
42+
<a routerLinkActive="active" [routerLink]="['/widget/main']">
4343
<i class="fa fa-fw fa-cogs"></i> Main
4444
</a>
4545
</li>
4646
<li>
47-
<a routerLinkActive="active" [routerLink]="['/table']">
47+
<a routerLinkActive="active" [routerLink]="['/widget/table']">
4848
<i class="fa fa-fw fa-table"></i> Table
4949
</a>
5050
</li>
5151
<li>
52-
<a routerLinkActive="active" [routerLink]="['/charts']">
52+
<a routerLinkActive="active" [routerLink]="['/widget/chart']">
5353
<i class="fa fa-fw fa-bar-chart"></i> Charts
5454
</a>
5555
</li>
@@ -66,6 +66,10 @@
6666
</div>
6767
</div><!--/.sidebar-->
6868
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
69-
<!-- Main content -->
70-
<router-outlet></router-outlet>
69+
<!-- Main content -->
70+
<div class="row">
71+
<breadcrumb></breadcrumb>
72+
</div><!--/.row-->
73+
74+
<router-outlet></router-outlet>
7175
</div>

‎src/app/layout/full-layout.component.ts

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import {Component, OnInit} from '@angular/core';
2+
import { NavigationStart, Router} from "@angular/router";
23

34
@Component({
45
selector: 'app-dashboard',
56
templateUrl: './full-layout.component.html'
67
})
7-
export class FullLayoutComponent implements OnInit {
8+
export class FullLayoutComponent{
89

9-
public disabled: boolean = false;
10-
public status: {isopen: boolean} = {isopen: false};
10+
constructor(){
1111

12-
public toggled(open: boolean): void {
13-
console.log('Dropdown is now: ', open);
1412
}
1513

16-
public toggleDropdown($event: MouseEvent): void {
17-
$event.preventDefault();
18-
$event.stopPropagation();
19-
this.status.isopen = !this.status.isopen;
20-
}
21-
22-
ngOnInit(): void {}
2314
}

0 commit comments

Comments
 (0)