Skip to content

Commit

Permalink
Functional loading of pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@RinMinase
RinMinase committed Feb 26, 2020
1 parent d5eced8 commit d475f31
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 68 deletions.
144 changes: 76 additions & 68 deletions demo/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,95 +13,103 @@ import { Component, OnInit } from "@angular/core";
<mat-sidenav opened mode="side" class="sidenav">
<mat-list>
<mat-list-item
*ngFor="let item of nav"
class="c-pointer"
(click)="setActiveList('Line')"
[ngClass]="{ 'active-list-item': currActiveList === 'Line' }"
(click)="setActiveList(item.name)"
[ngClass]="{ 'active-item': active === item.name }"
>
<span>Line Chart</span>
<span>{{ item.title }}</span>
</mat-list-item>
<mat-divider class="logout-divider"></mat-divider>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Bar')"
[ngClass]="{ 'active-list-item': currActiveList === 'Bar' }"
>
<span>Bar Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Doughnut')"
[ngClass]="{ 'active-list-item': currActiveList === 'Doughnut' }"
>
<span>Doughnut Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Radar')"
[ngClass]="{ 'active-list-item': currActiveList === 'Radar' }"
>
<span>Radar Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Pie')"
[ngClass]="{ 'active-list-item': currActiveList === 'Pie' }"
>
<span>Pie Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Polar')"
[ngClass]="{ 'active-list-item': currActiveList === 'Polar' }"
>
<span>Polar Area Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Bubble')"
[ngClass]="{ 'active-list-item': currActiveList === 'Bubble' }"
>
<span>Bubble Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Scatter')"
[ngClass]="{ 'active-list-item': currActiveList === 'Scatter' }"
>
<span>Scatter Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Dynamic')"
[ngClass]="{ 'active-list-item': currActiveList === 'Dynamic' }"
class="c-pointer logout-menu"
(click)="setActiveList('About')"
[ngClass]="{ 'active-item': active == 'About' }"
>
<span>Dynamic Chart</span>
</mat-list-item>
<mat-list-item
class="c-pointer"
(click)="setActiveList('Finance')"
[ngClass]="{ 'active-list-item': currActiveList === 'Finance' }"
>
<span>Financial Chart</span>
<i class="material-icons mr">info</i>
<span>About</span>
</mat-list-item>
</mat-list>
</mat-sidenav>
<mat-sidenav-content class="content">
<span>Content</span>
<app-installation *ngIf="active === 'Install'"></app-installation>
<app-line-chart *ngIf="active === 'Line'"></app-line-chart>
<app-bar-chart *ngIf="active === 'Bar'"></app-bar-chart>
<app-doughnut-chart *ngIf="active === 'Doughnut'"></app-doughnut-chart>
<app-radar-chart *ngIf="active === 'Radar'"></app-radar-chart>
<app-pie-chart *ngIf="active === 'Pie'"></app-pie-chart>
<app-polar-chart *ngIf="active === 'Polar'"></app-polar-chart>
<app-bubble-chart *ngIf="active === 'Bubble'"></app-bubble-chart>
<app-scatter-chart *ngIf="active === 'Scatter'"></app-scatter-chart>
<app-dynamic-chart *ngIf="active === 'Dynamic'"></app-dynamic-chart>
<app-financial-chart *ngIf="active === 'Finance'"></app-financial-chart>
<app-about *ngIf="active === 'About'"></app-about>
</mat-sidenav-content>
</mat-sidenav-container>
`,
styles: [
".sidenav { width: 200px }",
".container { min-height: calc(100vh - 64px) }",
".sidenav { width: 200px }",
".content { padding: 20px 20px }",
".active-list-item { background-color: #43A047; color: #FFF }",
".active-item { background-color: #43A047; color: #FFF }",
".logout-menu { position: absolute; bottom: 0 }",
".logout-divider { position: absolute; bottom: 48px; width: 100% }",
],
})
export class AppComponent implements OnInit {
currActiveList: string = "Bar";
active: string = "Install";

nav: Array<{ name: string; title: string; component?: any }> = [
{
name: "Install",
title: "Installation",
},
{
name: "Line",
title: "Line Chart",
},
{
name: "Bar",
title: "Bar Chart",
},
{
name: "Doughnut",
title: "Doughnut Chart",
},
{
name: "Radar",
title: "Radar Chart",
},
{
name: "Pie",
title: "Pie Chart",
},
{
name: "Polar",
title: "Polar Area Chart",
},
{
name: "Bubble",
title: "Bubble Chart",
},
{
name: "Scatter",
title: "Scatter Chart",
},
{
name: "Dynamic",
title: "Dynamic Chart",
},
{
name: "Finance",
title: "Financial Chart",
},
];

ngOnInit() {}

setActiveList(item: string) {
this.currActiveList = item;
console.log(item);
this.active = item;
}
}
5 changes: 5 additions & 0 deletions demo/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { MatToolbarModule } from "@angular/material/toolbar";

import { AppComponent } from "./app.component";

import { AboutComponent } from "./about.component";
import { InstallationComponent } from "./installation.component";
import { BarChartComponent } from "./bar-chart.component";
import { BubbleChartComponent } from "./bubble-chart.component";
import { DoughnutChartComponent } from "./doughnut-chart.component";
Expand All @@ -24,6 +26,9 @@ import { ScatterChartComponent } from "./scatter-chart.component";
@NgModule({
declarations: [
AppComponent,

AboutComponent,
InstallationComponent,
BarChartComponent,
BubbleChartComponent,
DoughnutChartComponent,
Expand Down

0 comments on commit d475f31

Please sign in to comment.