routers

Author: Garcia Marin

oasp4js-sample/src/app/app.routes.ts

@@ -0,0 +1,13 @@
+
+import { provideRouter, RouterConfig } from '@angular/router';
+import { LoginComponent} from './components/login/view/Login.component';
+import { CrudComponent } from './components/crud/view/Crud.component'
+
+export const Routes = [
+    {path: "/", component: LoginComponent},
+    {path: "/crud", component: CrudComponent}
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];

oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.html

@@ -7,7 +7,8 @@
           </th>
       </thead>
       <tbody>
-          <tr *ngFor="let obj of rowsData" #row (click)=clickedRow(obj)>
+          <tr *ngFor="let obj of rowsData"
+          (click)=clickedRow(obj)>
               <td *ngFor= "let attribute of attributeNames"
                   [class.selected]="selection === obj">
                   {{ obj[attribute] }}

oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.ts

@@ -11,48 +11,47 @@ import {GridtableService} from '../service/Grid-table.service'
 
 export class GridTableComponent implements OnChanges{
 
-  headers;
-  attributeNames;
-  dataInput;
-
-  public rowsData = [];
-  public attributesNames = [];
-  public tableHeaders = [];
-
-  public selection;
-  objSelected = new EventEmitter();
-
-  public sortIconStyle = ["glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down"];
-
-  constructor(private gridtableService : GridtableService){
-  }
-
-  ngOnChanges(){
-    this.attributesNames = this.attributeNames;
-    this.tableHeaders = this.headers;
-    this.rowsData = this.dataInput;
-  }
-
-  sortColumn(column:number, name:string){
-
-    if(this.sortIconStyle[column] === "glyphicon glyphicon-chevron-up"){
-        this.sortIconStyle[column] = "glyphicon glyphicon-chevron-down";
-        this.rowsData = this.gridtableService.getTablesOrderBy(-1, name, this.rowsData);
-    } else {
-        this.sortIconStyle[0] = "glyphicon glyphicon-chevron-down";
-        this.sortIconStyle[1] = "glyphicon glyphicon-chevron-down";
-        this.sortIconStyle[2] = "glyphicon glyphicon-chevron-down";
-        this.sortIconStyle[column] = "glyphicon glyphicon-chevron-up";
-        this.rowsData = this.gridtableService.getTablesOrderBy(1, name, this.rowsData);
+    headers;
+    attributeNames;
+    dataInput;
+
+    public rowsData = [];
+    public attributesNames = [];
+    public tableHeaders = [];
+
+    public selection;
+    objSelected = new EventEmitter();
+
+    public sortIconStyle = ["glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down"];
+
+    constructor(private gridtableService : GridtableService){
+    }
+
+    ngOnChanges(){
+      this.attributesNames = this.attributeNames;
+      this.tableHeaders = this.headers;
+      this.rowsData = this.dataInput;
+    }
+
+    sortColumn(column:number, name:string){
+      if(this.sortIconStyle[column] === "glyphicon glyphicon-chevron-up"){
+          this.sortIconStyle[column] = "glyphicon glyphicon-chevron-down";
+          this.rowsData = this.gridtableService.getTablesOrderBy(-1, name, this.rowsData);
+      } else {
+          this.sortIconStyle[0] = "glyphicon glyphicon-chevron-down";
+          this.sortIconStyle[1] = "glyphicon glyphicon-chevron-down";
+          this.sortIconStyle[2] = "glyphicon glyphicon-chevron-down";
+          this.sortIconStyle[column] = "glyphicon glyphicon-chevron-up";
+          this.rowsData = this.gridtableService.getTablesOrderBy(1, name, this.rowsData);
+      }
     }
-  }
 
-  clickedRow(valor){
-    if(this.selection === valor){
-      this.selection = undefined;
-    } else {
-      this.selection = valor;
+    clickedRow(valor){
+      if(this.selection === valor){
+          this.selection = undefined;
+      } else {
+          this.selection = valor;
+      }
+      this.objSelected.emit(this.selection);
     }
-    this.objSelected.emit(this.selection);
-  }
 }

oasp4js-sample/src/app/oasp4js-sample.component.ts

@@ -6,12 +6,17 @@ import { CrudComponent } from './components/crud/view/Crud.component'
 
 import { User } from './models/user/User.model'
 
+import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";
+
+@Routes([
+])
+
 @Component({
   moduleId: module.id,
   selector: 'oasp4js-sample-app',
   templateUrl: 'oasp4js-sample.component.html',
   styleUrls: ['oasp4js-sample.component.css'],
-  directives: [LoginComponent, HeaderComponent, CrudComponent]
+  directives: [LoginComponent, HeaderComponent, CrudComponent, ROUTER_DIRECTIVES]
 })
 export class Oasp4jsSampleAppComponent{
   title = "oasp4js-sample works!";

oasp4js-sample/src/main.ts

@@ -1,6 +1,7 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 // import {bootstrap} from 'angular2/platform/browser'
 import { enableProdMode } from '@angular/core';
+import { APP_ROUTER_PROVIDERS } from './app.routes';
 import { Oasp4jsSampleAppComponent, environment } from './app/';
 //import {disableDeprecatedForms, provideForms} from "@angular/forms";