up

Author: rxzx

package.json

@@ -4,11 +4,12 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.config.json",
     "build": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "ng:serve":"ng serve --proxy-config proxy.config.json"
   },
   "private": true,
   "dependencies": {

proxy.conf.json

@@ -0,0 +1,6 @@
+{
+    "/api": {
+        "target": "http://localhost:3000",
+        "secure": false
+    }
+}

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { PublicSigninComponent } from './public/signin/signin.component';
 import { PublicHomeComponent } from './public/home/home.component';
 import { AboutComponent } from './private/about/about.component';
 import { GalleryComponent } from './private/gallery/gallery.component';
+import { DemoChartsComponent } from './private/demo-charts/demo-charts.component';
 const routes: Routes = [
   { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
   {
@@ -30,6 +31,7 @@ const routes: Routes = [
       { path: 'home', component: PrivateHomeComponent },
       { path: 'about', component: AboutComponent },
       { path: 'gallery', component: GalleryComponent },
+      { path: 'demo-charts', component: DemoChartsComponent },
 
     ]
   }

src/app/app.module.ts

@@ -26,6 +26,10 @@ import { AlwaysAuthGuard, OnlyLoggedInUsersGuard } from './AlwaysAuthGuard ';
     PrivateModule,
     ToastrModule.forRoot(),
   ],
+  exports: [
+    ToastrModule,
+    FormsModule,
+  ],
   providers: [
     HttpClient,
     HTTPService,

src/app/private/demo-charts/demo-charts.component.css

@@ -0,0 +1,3 @@
+<!-- <div class="cotainer">
+  <div [chart]="chart"></div>
+</div>> -->

src/app/private/demo-charts/demo-charts.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DemoChartsComponent } from './demo-charts.component';
+
+describe('DemoChartsComponent', () => {
+  let component: DemoChartsComponent;
+  let fixture: ComponentFixture<DemoChartsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DemoChartsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DemoChartsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/private/demo-charts/demo-charts.component.spec.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { Chart } from 'angular-highcharts';
+
+@Component({
+  selector: 'app-demo-charts',
+  templateUrl: './demo-charts.component.html',
+  styleUrls: ['./demo-charts.component.css']
+})
+export class DemoChartsComponent implements OnInit {
+  public chart: Chart = new Chart();
+
+  constructor() {
+
+  }
+
+  ngOnInit() {
+
+    // this.chart = new Chart({
+    //   chart: {
+    //     type: 'line'
+    //   },
+    //   title: {
+    //     text: 'Linechart'
+    //   },
+    //   credits: {
+    //     enabled: false
+    //   },
+    //   series: [
+    //     {
+    //       name: 'Line 1',
+    //       data: [1, 2, 3]
+    //     }
+    //   ]
+    // });
+  }
+
+}

src/app/private/demo-charts/demo-charts.component.ts

@@ -22,19 +22,23 @@ <h2><i class="fas fa-home"></i> Admin Panel</h2>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">
-        <span><i class="fas fa-home"></i> Admin Panel</span>
+        <span>
+          <i class="fas fa-home"></i> Admin Panel</span>
       </a>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav">
         <li [routerLinkActive]="['active']" [routerLink]="['/user/home']">
           <a>Home</a>
         </li>
+        <li [routerLinkActive]="['active']" [routerLink]="['/user/demo-charts']">
+          <a>Charts</a>
+        </li>
         <li [routerLinkActive]="['active']" [routerLink]="['/user/about']">
           <a>About</a>
         </li>
         <li>
-          <a [routerLinkActive]="['active']" [routerLink]="['/user/gallery']" >Gallery</a>
+          <a [routerLinkActive]="['active']" [routerLink]="['/user/gallery']">Gallery</a>
         </li>
         <li>
           <a href="javascript:;">Contact</a>

src/app/private/header/header.component.html

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PrivateFooterComponent } from './footer/footer.component';
 import { PrivateHeaderComponent } from './header/header.component';
@@ -11,24 +11,27 @@ import { AboutComponent } from './about/about.component';
 import { SharedModule } from '../shared/shared.module';
 import { GalleryComponent } from './gallery/gallery.component';
 import { EmbedVideo } from 'ngx-embed-video';
-import { HttpModule } from '../../../node_modules/@angular/http';
+import { DemoChartsComponent } from './demo-charts/demo-charts.component';
+import { HttpModule } from '@angular/http';
+
 @NgModule({
   imports: [
     CommonModule,
-    AppRoutingModule,
     DataTableModule,
     TableModule,
     HttpModule,
     EmbedVideo.forRoot(),
-    SharedModule
+    SharedModule,
+    AppRoutingModule
   ],
   declarations: [
     PrivateComponent,
     PrivateFooterComponent,
     PrivateHeaderComponent,
     PrivateHomeComponent,
     AboutComponent,
-    GalleryComponent
+    GalleryComponent,
+    DemoChartsComponent
   ]
 })
 export class PrivateModule { }