Criando pagina de produtos

src/models/produto.dto.ts

@@ -0,0 +1,6 @@
+export interface ProdutoDTO {
+    id: string;
+    nome: string;
+    preco: number;
+    imageUrl?: string;
+}

src/pages/categorias/categorias.html

@@ -9,7 +9,7 @@
 
 <ion-content padding>
   <ion-list>
-    <button ion-item *ngFor="let item of items">
+    <button ion-item *ngFor="let item of items" (click)="showProdutos()">
       <ion-thumbnail item-start>
         <img src="{{bucketUrl}}/cat{{item.id}}.jpg">
       </ion-thumbnail>

src/pages/categorias/categorias.ts

@@ -4,8 +4,6 @@ import { CategoriaService } from '../../services/domain/categoria.service';
 import { CategoriaDTO } from '../../models/categoria.dto';
 import { API_CONFIG } from '../../config/api.config';
 
-
-
 /**
  * Generated class for the CategoriasPage page.
  *
@@ -21,10 +19,11 @@ import { API_CONFIG } from '../../config/api.config';
 export class CategoriasPage {
 
   bucketUrl: string = API_CONFIG.bucketBaseUrl;
+
   items: CategoriaDTO[];
 
   constructor(
-    public navCtrl: NavController,
+    public navCtrl: NavController, 
     public navParams: NavParams,
     public categoriaService: CategoriaService) {
   }
@@ -34,7 +33,10 @@ export class CategoriasPage {
       .subscribe(response => {
         this.items = response;
       },
-        error => {});
+      error => {});
   }
 
+  showProdutos() {
+    this.navCtrl.push('ProdutosPage');    
+  }
 }

src/pages/produtos/produtos.html

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Produtos</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+  <ion-list>
+    <button ion-item *ngFor="let item of items">
+      <ion-thumbnail item-start>
+        <img [src]="item.imageUrl || 'assets/imgs/prod.jpg'">
+      </ion-thumbnail>
+      <h2>{{item.nome}}</h2>
+      <p>{{item.preco | currency}}</p>
+    </button>
+  </ion-list>
+</ion-content>

src/pages/produtos/produtos.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ProdutosPage } from './produtos';
+
+@NgModule({
+  declarations: [
+    ProdutosPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(ProdutosPage),
+  ],
+})
+export class ProdutosPageModule {}

src/pages/produtos/produtos.scss

@@ -0,0 +1,3 @@
+page-produtos {
+
+}

src/pages/produtos/produtos.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { ProdutoDTO } from '../../models/produto.dto';
+import { API_CONFIG } from '../../config/api.config';
+
+@IonicPage()
+@Component({
+  selector: 'page-produtos',
+  templateUrl: 'produtos.html',
+})
+export class ProdutosPage {
+
+  items : ProdutoDTO[];
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    this.items = [
+      {
+        id: "1",
+        nome: 'Mouse',
+        preco: 80.99
+      },
+      {
+        id: "2",
+        nome: 'Teclado',
+        preco: 100.00
+      }
+    ]
+  };
+}