ionic

1. Team.services
public addTeam(team:Team){
const formData = new FormData()
formData.append("name", team.name)
formData.append("trophy", team.trophy)
formData.append("image", team.image)
return this.http.post(this.url, formData)
}
public deleteTeam(id:string){
return this.http.delete(this.url+'?id='+id)
}
public getTeam(id:string){
return this.http.get<Team>(this.url+'?id='+id)
}
public updateTeam(team:Team){
return this.http.put(this.url, team)
}
}
Home.page.html
<ion-header [translucent]="true">
<ion-toolbar color="tertiary">
<ion-title>Productos</ion-title>
<ion-buttons slot="end">
<ion-button color="success" fill="outline"
(click)="openAndCloseModal()">
Agregar Producto</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Football Teams</ion-title>
</ion-toolbar>
</ion-header>
<div id="container" >
<ion-list *ngIf="bandera == false">

2. <ion-list-header>
<ion-label>imagen</ion-label>
<ion-label>producto</ion-label>
<ion-label>precio</ion-label>
<ion-label>opciones</ion-label>
</ion-list-header>
<ion-item *ngFor="let team of ListTeam">
<ion-grid>
<ion-row>
<ion-col>
<ion-avatar>
<img src={{team.image}}>
</ion-avatar>
</ion-col>
<ion-col>
<ion-label>{{team.name}}</ion-label>
</ion-col>
<ion-col>
<ion-label>{{team.trophy}}</ion-label>
</ion-col>
<ion-col>
<ion-button color="warning" (click)="getTeam(team.id)">
<ion-icon name="pencil"></ion-icon>
</ion-button>
<ion-button color="danger" (click)="getId(team.id)">
<ion-icon name="trash"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-item >
</ion-list>
<ion-card id="card-position" *ngIf="bandera">
<ion-toolbar>
<ion-button color="danger" slot="end" fill="outline"
(click)="openAndCloseModal()">X</ion-button>
</ion-toolbar>
<ion-card-content>
<ion-item>
<ion-label position="floating">Nombre Producto</ion-label>
<ion-input [(ngModel)]="team.name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Precio</ion-label>
<ion-input [(ngModel)]="team.trophy"></ion-input>

3. </ion-item>
<ion-item>
<ion-label position="floating">Imagen</ion-label>
<ion-input [(ngModel)]="team.image"></ion-input>
</ion-item>
<ion-button color="success" expand="full"
(click)="save()">
<span *ngIf="isUpdate">Actualizar</span>
<span *ngIf="isUpdate==false">Guardar</span>
</ion-button>
</ion-card-content>
</ion-card>
</div>
</ion-content>
Home.page.css
#container strong {
font-size: 20px;
line-height: 26px;
}
#container {
margin-right: 10px;
}
.my-custom-class .modal-wrapper {
background: #222;
}
App.componet.ts
//para crear un servicio escribimos ionic generate service api/equipo
import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';
import { TeamService } from '../api/team.service';
import { Team } from '../models/team';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],

4. })
export class HomePage {
id = ''
bandera = false
isUpdate = false
team:Team = {name:'', trophy:'', image:''}
ListTeam:Team[]
constructor(private teamService:TeamService,
public toastController: ToastController,
public alertController: AlertController){
this.loadTeam();
}
public openAndCloseModal():void{
this.bandera = !this.bandera
this.isUpdate = false
this.clearInput()
}
public loadTeam():void{
this.teamService.getTeams().subscribe(
(response) => {
this.ListTeam = response
},
(error) => { console.log(error) })
}
public save():void{
if(this.isUpdate){
this.teamService.updateTeam(this.team).subscribe(
(response) => {
this.presentToast(response)
this.clearInput()
this.loadTeam()
this.isUpdate = false
},
(error) => { console.log(error) })
}else{
this.teamService.addTeam(this.team).subscribe(
(response) => {
this.presentToast(response)
this.clearInput()
this.loadTeam()
},
(error) => { console.log(error) })
}

5. }
public delete():void{
this.teamService.deleteTeam(this.id).subscribe(
(response) => {
this.presentToast(response)
this.loadTeam()
},
(error) => { console.log(error) })
}
public getId(id:string):void{
this.id = id
this.presentAlertConfirm()
}
public getTeam(id:string):void{
this.teamService.getTeam(id).subscribe(
(response) => {
const {id, name, trophy, image} = response
this.team.id = id
this.team.name = name
this.team.trophy = trophy
this.team.image = image
this.isUpdate = true
this.bandera = true
},
(error) => { console.log(error) })
}
public clearInput():void{
this.team.name = '';
this.team.trophy = '';
this.team.image = '';
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
cssClass: 'my-custom-class',
header: 'Confirm!',
message: '<strong>Desea Eliminar</strong>!!!',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'danger',
handler: () => {
return false;

6. }
}, {
text: 'Okay',
handler: () => {
this.delete()
}
}
]
});
await alert.present();
}
async presentToast(message) {
const toast = await this.toastController.create({
message:message.msg ,
duration: 2000,
color:"primary"
});
toast.present();
}
}