tabs and routing for projects and dmps

dmp-frontend/src/app/dmps/dmp.component.ts

@@ -55,8 +55,7 @@ export class DmpComponent implements OnInit{
     });
     this.dmps = [];
     this.serverService.getDmpOfUser().subscribe( 
-      response => {
-        debugger;
+      response => {        
         
         response.forEach(resp => {
           let pr = new Dmp();
@@ -131,7 +130,7 @@ myFunction() {
 }
 
 
-SaveNewDmp(){ debugger;
+SaveNewDmp(){ 
   console.log(this.dmp, this.dmp.projectsDropDownKey);  
   //this.http.post('http://someurl', JSON.stringify(this.project))
   this.serverService.createDmpForProject(this.dmp, this.dmp.projectsDropDownKey)

dmp-frontend/src/app/projects/project.html

@@ -1,10 +1,4 @@
 <meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
-
-<nav>
-    <a routerLink="projects" routerLinkActive="active">Projects</a>
-    <a routerLink="dmps" routerLinkActive="active">My Dmps</a>
-  </nav>
-  
 <div style="margin: auto; max-width: 1000px; margin-top:50px">
     <div>
         <span>Filter: </span>

dmp-frontend/src/app/tabs/tabs-routing.module.ts

@@ -1,13 +1,25 @@
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { TabComponent }    from './tabs.component';
+import { TabComponent } from './tabs.component';
 import { AuthGuard } from '../guards/auth.guard';
-import { ProjectsComponent }    from '../projects/projects.component';
-import { DmpComponent }    from '../dmps/dmp.component';
+import { ProjectsComponent } from '../projects/projects.component';
+import { DmpComponent } from '../dmps/dmp.component';
 
 const tabsRoutes: Routes = [
-  { path: 'tabs', component: TabComponent, canActivate: [AuthGuard] },
+  {
+    path: 'tabs', component: TabComponent, canActivate: [AuthGuard],
+    children: [
+      {
+        path: 'projects',
+        component: ProjectsComponent
+      },
+      {
+        path: 'dmps',
+        component: DmpComponent
+      }
+    ]
+  },
   { path: 'tabs/projects', component: ProjectsComponent }, // canActivate: [AuthGuard]
   { path: 'tabs/dmps', component: DmpComponent }
 ];

dmp-frontend/src/app/tabs/tabs.component.ts

@@ -3,13 +3,25 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'my-app',
   template: `
-    <h1 class="title">Angular Router</h1>
-    <nav>
-        <a routerLink="projects" routerLinkActive="active">Projects</a>
-        <a routerLink="dmps" routerLinkActive="active">My Dmps</a>
-    </nav>
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a class="nav-link active" routerLink="projects" routerLinkActive="active">Projects</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" routerLink="dmps" routerLinkActive="active">My Dmps</a>
+    </li>
+  </ul>
+   
     <router-outlet></router-outlet>
   `
 })
 export class TabComponent {
-}
+}
+
+
+
+
+// <nav>
+// <a routerLink="projects" routerLinkActive="active">Projects</a>
+// <a routerLink="dmps" routerLinkActive="active">My Dmps</a>
+// </nav>