DELETE EN ANGULAR.

Presentación del tema: "DELETE EN ANGULAR."— Transcripción de la presentación:

1 DELETE EN ANGULAR

2 VERSIÓN 1 sendDeleteMessage(event): boolean{
Añadimos en el import de article.component.ts: Input y Output. Añadimos el siguiente fragmento de código dentro del export: @Input() position: number; @Output() Cualquiera = new EventEmitter(); Añadimos el siguiente método: sendDeleteMessage(event): boolean{ console.log(this.position); this.Cualquiera.emit({position: this.position}); return false; }

3 VERSIÓN 1 <li class="item">
Añadimos este fragmento de código html en article.component.html debajo del click downvote: <li class="item"> <a href (click)="sendDeleteMessage($event)"> delete </a> </li>

4 VERSIÓN 1 <div class="ui grid posts"> <app-article
Cambiamos un poco el código del bucle que muestra los artículos en app.component.html: <div class="ui grid posts"> <app-article *ngFor="let article of sortedArticles(); let pos=index" [article]="article" [position]="pos" (Cualquiera) = "deleteArticleByPosition($event)" > </app-article> </div>

5 VERSIÓN 1 deleteArticleByPosition(event){
Por último creamos el método que borrará el artículo en app.component.ts: deleteArticleByPosition(event){ console.log('borro articulo posicion: ' + event.position ); this.articles.splice(event.position, 1); }

6 VERSIÓN 2 delete(): boolean { console.log(`borro ${this.article.id}`);
Añadimos en el import de article.component.ts: Input Añadimos el siguiente fragmento de código dentro del export: @Output() Cualquiera = new EventEmitter(); Añadimos el siguiente método: delete(): boolean { console.log(`borro ${this.article.id}`); this.Cualquiera.emit({id: this.article.id}); return false; }

7 VERSIÓN 2 id: string; title: string; link: string; votes: number;
Cambiamos los atributos y el constructor en article.model.ts: id: string; title: string; link: string; votes: number; constructor(id:string,title: string, link: string, votes?: number) { this.id = id; this.title = title; this.link = link; this.votes = votes || 0; }

8 VERSIÓN 2 <li class="item"> <a href (click)=“delete()">
Añadimos este fragmento de código html en article.component.html debajo del click downvote: <li class="item"> <a href (click)=“delete()"> delete </a> </li>

9 VERSIÓN 2 <div class="ui grid posts"> <app-article
Cambiamos un poco el código del bucle que muestra los artículos en app.component.html: <div class="ui grid posts"> <app-article *ngFor="let article of sortedArticles();" [article]="article" (Cualquiera) = ‘deleteMessage($event)’ > </app-article> </div>

10 VERSIÓN 2 Por último creamos el método que borrará el artículo en app.component.ts: deleteMessage(event): void{ console.log('Borrame ' + event.id); let index: number =0; for (let article of this.articles) { console.log(article.id); if (article.id == event.id){ this.articles.splice(index, 1); break; } index += 1;

11 VERSIÓN 2